Skip Navigation

Synopsis

It is recommended that a "skip to content" link be included before the site's main navigation tools. One link of this kind is usually sufficient.

Users with screen readers can skip between major headers and subheaders, which are tagged H2, H3, and H4.

Why Use Skip Navigation Links?

Having a consistent set of navigation links at the top or left side of a Web page is beneficial both for general usability and for people with certain mobility impairments, as they may not need to move the mouse as far to reach the navigation.

For users with screen readers, however, hearing the same list of links at the beginning of each page is time consuming and potentially irritating. Therefore a skip navigation strategy should be included to allow users of screen readers to skip over a block of navigational links.

WCAG 2.0 Guideline 2.4.1—"A mechanism is available to bypass blocks of content that are repeated on multiple Web pages."

Top of Page

Skip Link Method 1—Hiding Text Off Screen

One way to hide text is to place it literally off screen using CSS. In the example below, the class .offscreen moves text 10,000 pixels to the left of the visible portion of the screen. The text is not visible in the browser, but a screen reader will announce it because it disregards visual CSS.

View the CSS

.offscreen {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}

View the HTML

<a href="#skip" class="offscreen">Skip Content</a>
<!-- DIV tags are used to break the page into sections. No formatting is visible unless CSS formatting is applied--> <div id="navigation">[A Bunch of navigation buttons/tabs]</div> <div id="content">
<a name="skip" > </a > [Content Starts Here]
</div>

Alternative Approaches

The WebAIM Skip Navigation page lists some alternatives, including making the skip to content link visible when a user tabs to it with a keyboard. This allows both motion impaired users and screen reader users to take advantage of the tool.

Top of Page

Skip Link Method 2—Pixel with ALT Tag

An older method is to place an invisible pixel graphic before the navigation links with an ALT tag reading "Skip to Content." The graphic is turned into a page-internal link that links to content further down the page. Note that the image BORDER should be set to "0" in order to keep the image hidden from visual browsers.

View Example

Skip Navigation [A bunch of navigation buttons/tabs]

[Content starts here]

In visual browsers the hidden graphic is marked by a blue dot before the "[A bunch...]" because the border was not set to 0.

View the Code

<a href="#skip">
<img src="transparent-pixel.gif" alt="Skip Content " border="0" >

</a >

[NAVIGATION]

<div id="content">
<a name="skip" > </a >
[Content starts here]
</div>

Top of Page