Search code examples
htmlaccessibilitytabindex

How to make a bunch of elements not accessible from keyboard


For example i have two headers: static and fixed. How can I prevent keyboard user from navigating throw fixed header?
By navigating I mean using tab. You press it and then you focus on next interactive element.

<header>
  <div class="nav-wrap static">
    *bunch of buttons, links, etc*
  </div>

  <div class="nav-wrap fixed" aria-hidden="true">
    *same as above but in different style*
  </div>
</header>

I want second one to be never accessible and remove all of it's elements from tabindex order. How do I do that?


Solution

  • Using display:none; helps in my case. Thanks to Graham Ritchie