"Skip Navigation" Links

Overview

Screen shot of a Web page within Fresh Direct dot com, showing a very long list of links on the top and left; screen reader and keyboard users must go through all of these links before reaching the main content.

One of the problems with many template designs is that the main content is not usually the first thing on the page. People using screen readers are often forced to listen to a long list of navigation links, sub-lists of links, corporate icons, site searches, and other elements before ever arriving at the main content. In fact, all keyboard users are forced to tab through all of the top links in order to reach the main content. Consider the example below of an online grocery site. Due to the layout, with the navigation on the top and the long list of links on the left, users must tab through 118 links in order to reach the main content.

Without some sort of system for bypassing the long list of links, users are at a huge disadvantage. Consider users with no arm movement, who use computers by tapping their heads on a switch. Requiring users to tap their head 118 times before reaching the main content is simply unacceptable.

Of course, sighted people who use their mouse do not have any trouble with pages such as this. They can almost immediately scan over the page and identify where the main content is. In effect, sighted users have a built-in "skip navigation" mechanism: their eyes. They can also bypass all of the 118 links before the main content and click directly on the link they want with the mouse. The "skip navigation" idea was invented to give screen reader and keyboard users the same capability of going directly to the main content that sighted mouse users take for granted.

Users do not have to click on the "skip navigation" link. If they want to listen to the navigational links, they can. The link gives them the option to do as they please.

Creating "Skip Navigation" Links

The idea is simple enough: provide a link at the top of the page which jumps the user down to an anchor within the main content. For the most part, it really is this easy, though there is more than one way to accomplish the goal. Some techniques are better than others. The techniques discussed here are:

Providing visible links at the top of the page
Providing visible links elsewhere on the page
Making the link invisible
Making the link invisible until it receives keyboard focus

Visible links at the top of the page

The easiest method of creating a "skip navigation" link is to put it at the top of the page in regular text. Put the corresponding anchor (link destination) at the beginning of the main content.

a skip top navigation link highlighted on a Web page

The horizontal location of the link doesn't matter. The link can be on the left side, the middle, the right, or in some location in between. The key is to make sure the link is the first item that screen readers hear and the first item that keyboard users tab to. Otherwise, users may not realize there is a "skip navigation" link there at all, and may waste time trying to muddle through the extraneous links. Screen reader users especially may get impatient if they don't hear the "skip navigation" link first.

The verdict: This method works and is highly accessible.

Example

The link is the first item in the page. The anchor is placed at the beginning of the main content.

      <body>
      <a href="#maincontent">Skip navigation</a>

      ... 

      <h1><a name="maincontent" id="maincontent"></a>Heading</h1>
      <p>This is the first paragraph</p>

Visible links elsewhere on the page

Many developers worry about the aesthetic impact of "skip navigation" links. They may think these links don't look particularly attractive, they "ruin" the layout, or that they get in the way of artistic expression. Some developers have decided to move the links to other locations on the page where they don't have as big an impact on the visual layout. In the next example, the developers moved the link to the lower left corner of the design.

Screen shot of a Web site with a list of links on the left, with the skip navigation link at the bottom of the list.

In this example the link is less obtrusive, perhaps, but this raises an issue: the link is no longer the first item on the page. Screen reader users will not hear it first, and keyboard users will not tab to it first. The keyboard issue can be solved by assigning a tabindex attribute to the link. This way, the user will always tab to that link first, no matter where it occurs on the page. The screen reader issue is still a problem, however, with no easy solution. If a screen reader just listens to the Web page, without using the Tab key, the user will not hear the words "skip navigation" until the very end of all of the navigation links, which completely defeats the purpose of a "skip navigation" link.

The verdict: This method does not work well for all users.

Invisible links

Other developers have decided to hide the link entirely. The most common method is to place a small invisible .gif image at the top of the page with alt="Skip navigation" as the alternative text.

A web site has an invisible image that links to the main content; the link destination is visible in the status bar, which says http://job search dot u s a jobs dot o p m dot gov slash pound skip nav

This technique solves the problem of aesthetic beauty. The link does not ruin the layout. Screen reader users can also use this method perfectly. There are no problems there. However, sighted keyboard users cannot see the link at all. When they tab to it, they have no idea where the focus is. They have no idea that there is a "skip navigation" link there at all unless they look at the status bar at the bottom of the browser. Some users may think to look down there, but most will not. Most users will reluctantly plough through the entire list of links because they think they have to.

Another similar method is to use Cascading Style Sheets (CSS) to hide the link. This method is more elegant than the hidden graphic method, but the CSS method introduces another problem: the CSS may hide the link not only from sighted users but from screen reader users. See the CSS section "CSS in Action: Invisible Content Just for Screen Reader Users" for more information about this problem. If the text is invisible to sighted keyboard users and hidden from screen reader users, the link serves nobody at all, and is completely worthless.

The verdict: This method does not work well for all users.

Links that become visible with keyboard focus

Another method seeks to strike a compromise between aesthetic appeal and accessibility utilitarianism. The basic idea of this approach is to hide the link until someone tabs to it. Mouse users will never see the link, because it is not activated by the mouse. Here is an example page with the link hidden:

The users who do not need "skip navigation" links will never realize that a link is there at all. Perhaps this is how it should be because these users may be not understand what "skip navigation" links are supposed to accomplish. For these users, such a link may slightly decrease usability by confusing them a little. This is only a minor concern. Most users will simple ignore the link, but some may wonder.

Here is the same page as seen when the user tabs to the first link:

Same Web site as the graphic above, but now the words 'skip to main content' appear above the tabs.

The "skip navigation" link is now completely visible. The link is also the first link on the page, so screen reader users will always hear it first. This would seem to be an almost perfect solution. The only drawback is that keyboard users can't see the link until they tab to it. The sudden appearance of a link might be a bit confusing. At the same time, the sudden appearance draws attention to the link, which may increase the likelihood that the user will actually use it. Users have responded favorably to this approach in informal observations, but WebAIM has never conducted controlled studies on this topic, so developers should decide for themselves if this solution fits their needs.

The verdict: This method works for all users, though it requires extra CSS markup to make it work.

The method for this approach is somewhat involved, taking advantage of CSS properties.

The following code should appear in the style sheet:

    #skip a, #skip a:hover, #skip a:visited  
    { 
    position:absolute; 
    left:0px; 
    top:-500px; 
    width:1px; 
    height:1px; 
    overflow:hidden;
    } 
     
    #skip a:active 
    { 
    position:static; 
    width:auto; 
    height:auto; 
    }

The CSS id should then be referenced from within the element tag:

    <div id="skip">
    <a href="#content">Skip to Main Content</a>
    </div>

This technique is explained in more detail in the CSS section " CSS in Action: Invisible Content Just for Screen Reader Users."

Note

The same effect can be achieved by using a combination of CSS and JavaScript. The addition of JavaScript adds another layer of complexity that may or may not add any additional benefit, depending on how it is implemented. This danger is that the extra complexity may add accessibility problems. See the JavaScript chapter for tips on writing accessible JavaScript.

Which wording is best?

There is more than one "best" way to word the link. Here are some fairly common examples:

Skip navigation
Skip main navigation
Skip navigation links
Skip to main content
Skip to content

None of these is inherently better than the others. Minor variations on these are probably acceptable, such as "skip top navigation." Don't get too creative here, or else users may not realize what the purpose of the link is.

Browser Quirks

"Skip navigation" links are such a simple concept that it's hard to believe there would be any browser quirks in implementing it, but there are.

The Internet Explorer focus bug

Internet Explorer for Windows lays claim to the most problematic browser quirk. In some Web designs, the "skip navigation" link works as expected, but in others, the visual focus changes but the input focus does not. In other words, when a user activates the "skip navigation" link, the focus goes to the proper anchor, but when the user hits Tab again, the focus falls back to the original tab order as if the user had never clicked on "skip navigation." When this happens, the whole purpose of "skip navigation" links is destroyed.

What causes this inconsistent behavior in Internet Explorer? As it turns out, Internet Explorer needs anchors to be inside elements with a defined width. The width can be fixed (e.g. 600px) or relative (e.g. 100%, 35em, etc.), but some measure of width must be defined. The width can be applied to a <div> element, a table cell, a <span> element, or any other element.

Sometimes it can be tricky and inconvenient to find a unit of width that will work with a particular design, but it is necessary to make "skip navigation" links work. In fact, every anchor on every page must be inside of an element with a defined width, not just "skip navigation" link destinations.

The Mozilla focus bug

Mozilla-based browsers, such as Firefox, have a bug of a different kind. This bug applies only if developers link to the id attribute of elements other than the <a> element. Most developers link to empty <a> tags with a defined name and/or id as in the markup example below:

    <a name="link_destination" id="link_destination"></a>

Another method of creating in-page link destinations is to link to the id of other elements, such as <div>, <span>, <h1>, <p>, etc. Any of the elements below with id attributes can serve as link destinations.

    <div id="maincontent">
    <h1 id="heading1">This is heading 1</h1>
    <p id="paragraph1">This is a paragraph</p>
    </div>

Although this is perfectly legal and functional in most browsers, Mozilla-based browsers move the focus to the first <a> tag after the link destination. If the <a> tag occurs five paragraphs later, the "skip navigation" link will not work properly. The focus moves all the way past the intended destination to the <a> tag. There are two possible solutions to this problem:

Link only to <a> tags, thus avoiding the problem entirely
Create an empty <a> tag right after the intended link destination, which results in a duplication of effort, even if it does work.

Multiple "Skip" Links

What if a page has multiple sections and/or multiple layers of navigational links? Should developers provide a "skip navigation" to each of these sections or over each layer or navigational links? In most cases, this is not necessary. Remember, the purpose of "skip navigation" links is to reduce the clutter of lists of links. Adding more links increases link-clutter.

The page www.firstgov.gov - external link has a total of nine different "skip navigation" links (the links are hidden using CSS):

Skip to content
Skip to government search
Skip to bottom nav
Skip to top nav bar-right aligned
Skip to By organization
Skip to contact your government
Skip to reference center
Skip to information by topic
Skip to citizens: get it done online!

With all due respect to the designers of this Web site, nine "skip navigation" links is about eight links too many. There are other, better ways of accomplishing this same functionality, as discussed below.

Alternatives to "Skip Navigation" Links

The truth is that "skip navigation" links are a rather clumsy solution to a real world problem. They work. They're useful, but they're a bit of a hack. They will continue to be useful until a more standardized method of designating the difference between navigation and main content evolves. Still, there is more than one way to achieve the "skip navigation" effect.

Navigating by headings

The most useful alternative method is to create documents with proper headings so that users can skip from heading to heading. Most screen readers allow users to listen to a list of headings or to listen to each heading in sequence, skipping past the paragraphs, images, links, and other extraneous information. If documents are created properly, they can often form an outline of headings, which serves not only as a way to skip past the navigation but also lets screen reader users "scan" the main ideas of a document without having to read the whole thing.

The one downside to this approach is that only screen reader users have access to this functionality. Browsers do not come with this feature. This means that sighted keyboard users cannot skip from link to link in the same way that screen reader users can.

Verdict: This method is very effective for screen reader users, but sighted keyboard users generally cannot take advantage of it. Even so, there are many reasons to use headings, so this method is highly recommended.

Alternate reading orders

Some developers place the main content first in the reading order and the navigation last. This method makes "skip navigation" links unnecessary, but it raises another question. Should such sites provide "skip to navigation" links? This is a tricky question. Users who are accustomed to using "skip navigation" links may not pay close enough attention to realize that the link will take them to the part of the page they're trying to skip. Links taking users to the navigation are unexpected, and can lead to some confusion. With or without "skip to navigation" links, screen reader users who want to access the navigation may get lost in the page, wondering if there is any navigation.

Verdict: The concept is fine, but the current conventions of placing the links at the top almost dictates that developers should continue to place the links at the top, to ensure users do not get disoriented.