Does CSS positioning eliminate the need for a "skip navigation" link?

Date Updated
01/23/13

With CSS, navigational menus can appear visually at the top of a document, despite their location at the bottom of the document in the HTML source code. This technique is gaining popularity because by placing the main content first in the document's source code, websites can potentially attain better search engine placement. This technique also eliminates the need for a "skip navigation" link, since screen readers don't read the navigation links until the end. However, it creates the opposite problem: The need for an efficient means of jumping quickly to the navigation system. A same-page link ("Go to Navigation Menu") at the top of the page might be advisable. It is also important to provide clear structure to your document, including a logical hierarchy of document and section headings (H1, H2, H3, etc.). Many assistive technologies now have functionality that allows users to navigate between headings if they're coded appropriately.

Another problem with placing the navigation system at the end is that it is likely to cause the tab order of the document to be different than the logical intuitive order that a sighted keyboard user would expect (i.e., if there are links at the top and left of the document, the user will expect those links to be the first links encountered when beginning to navigate the page using the Tab key). A solution for this problem is to use the "tabindex" attribute to explicitly order the tab sequence of each link so that it matches visual expectations.

For addition information about "skip navigation" links, consult the AccessIT Knowledge Base articles What is a "skip navigation" link? and Is it ok to make "skip navigation" links invisible?