Search code examples
htmlcsstabsxhtmltabindex

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


Solution

  • 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(); };