Html Question posted in
Some basic documentation can be found here.

How to get correct tab order with nav at end of document, using only xhtml and css

My nav element is positioned at the end of the document for accessibility reasons, and positioned at the top of the screen using CSS. Because of the document order, I suspect that the nav links will be last in the tab order. Is this correct?

If so, then that will probably be undesirable to users who wish to have a logical tab order meaning that top of screen elements, ie the nav, should be first in the order. Can I somehow fix this with tabindex?

I do not have any existing tabindex attributes anywhere. I want the solution to play well with existing focusable elements eg links

Tags:

2

Answers


  1. 0

    Yes, nav links will appear last in tab order. To fix this you really can use tabindex attr. Here is example:

    <nav>
  <a href="#" tabindex="1">Home </a>
  <a href="#" tabindex="2">About</a>
  <a href="#" tabindex="3">Contact</a>
</nav>

    Also you could try to place nav elements higher in doc order:

    <body>
  <header>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </nav>
  </header>
  
  <main>
    <section>
      <a href="#">Read more</a>
    </section>
  </main>
</body>
    Login or Signup to reply.
  2. 0

    I would not use tabindex because you alter the normal navigation order. If your menu is at the end of the page I would take the focus there when the page loads and continue with the normal order since it is the last element and then jump to the top of the page.

    window.onload = function() { document.getElementById("nav").focus(); };

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search