Skip Navigation Link / Skip To Content Link

By now, most web developers understand that for users of screen reading software, the software reads aloud the page content in the order with which it appears in your source code. While you may be able to style chunks of content on your page to appear in a certain order or place on the page, the screen readers continue to process the information in a linear format, regardless of that visual styling.

With template driven design the norm, this can cause serious ramifications for these users especially when the site navigation links are the first thing in the order of your source code - which is often the case. When a visitor first arrives at your web site, this is actually a good thing, as it allows them to become oriented to the overall structure and content of your site. However, 2 or 3 pages into your web site, and they may not need or want to hear the entire navigational block of links that are persistent to your template. Thus a need to "skip over" the navigation, or "skip to" the content is beneficial. Furthermore, it has been mandated with in the Section 508 Standards: (o) A method shall be provided that permits users to skip repetitive navigation links., as well as alluded to in the W3C WCAG Checkpoint 13.6 which states, Group related links, identify the group (for user agents), and, until user agents do so, provide a way to bypass the group.

For this reason, conscientious web developers have begun to include a link at the beginning of their source code to allow users to "Skip Navigation" - normally linking to a named <div> or other element in the page:

<a href="#content" class="skipnav">Skip navigation</a>
and
<div id="content">  </div>

All for Nothing?

Perhaps. In the pseudo source code above, you might notice that the link to skip over the navigation was given the CSS class identifier of "skipnav". This is often because visually, the design team has decided that they do not want the link to appear on the page for visual users. While there is a strong school of thought that argues for the visual appearance of this link for all users, the reality is that in many circumstances having this link appear may interfere with the visual aesthetic of the design - which is an equally compelling argument under many circumstances. For this reason, developers have decided to "hide away" the link to visual users, but leave it there for users of Adaptive Technology. The commonly observed method is to use the "display:none;" property of CSS. Herein lies the problem: most screen reading technology also respects the display properties of CSS. Some feel that this is wrong and a bug in the software, others argue that it is correct and that screen readers should respect the property. Regardless of which position you agree with, the net result is that by using "display:none;" you are hiding the "skip nav" link from a group of users who are generally thought of as the primary beneficiaries of the link.

What to do?

A number of alternative solutions have emerged which deliver the same visual requirements while at the same time leaving the link available to screen reading technology. Of the various techniques, placing the link outside of the window view (either to the top or to the left) appears to be the most successful. [http://www.access-matters.com/screen-reader-test-results/] This site has placed the "skip nav" link 999 pixels to the left of the left-hand edge of your view-screen. However, by using the pseudo selector of :focus we have also provided a means to show the ability to skip over navigation for users who may be tabbing through the links rather than using a mouse/pointing device. Because Win/Internet Explorer does not support the :hover selector a separate styling has been developed for this browser, which places the "skip nav" link in plain sight:

#skipnav a{
margin-left:-999px!important;
margin-left:5px;
margin-top:10px;
padding-top:10px;
color:silver;
text-decoration:none;
border:none;
color:#444;
background:transparent;
}
#skipnav a:focus{
padding:3px;
background:#900;
color:#fff;
margin-left:0!important; }

In Standards compliant browsers, tabbing through the page should show and hide the skip navigation link. Like many things concerning online accessibility, it is a balance between two needs - not perfect in either instance, but a workable compromise.

Unless indicated otherwise, this work is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.

Stanford Online Accessibility Program