Page Content

Synopsis

  1. 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.
  2. It is recommended that this link be visible if it has keyboard focus so it also benefits sighted users on a keyboard.
  3. 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

Basic Skip Nav Structure

A skip navigation link has two parts. The first is the actual "Skip to Content" link placed as close to the top of the code as possible so that it is read quickly by the screen reader. The link should go to an anchor or id placed at the top of the content code after the navigation. See example below.

As will be seen in the sections below, CSS can be used to hide and reveal the link to sighted users as needed.

Skip Link Example

View the Link

Skip to Content

View the Code (HTML 5) with ID


<a href="#content" class="offscreen">Skip to Content</a>
...
<nav> [NAVIGATION LINKS] </nav>
...
<section id="content"> [CONTENT] </section>

View the Code (HTML 4) with Named Anchor


<a href="#top" class="offscreen">Skip to Content</a>
...
<div id="nav"> [NAVIGATION LINKS HERE] </div>
...
<div id="content"><a name="top"></a>[CONTENT HERE]</section>

Skip Link Method 1—Hiding Text Off Screen

Note: The code below is adapted from Andrew Jones of Big Nerd Ranch.

Many developers choose to hide the Skip Nav link from sighted users, although it is recommended that it be visible when a keyboard user tabs to it. That allows sighted users relying on keyboards to skip tabbing through navigation.

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 and above 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.

The second declaration makes the link visible in the upper left of the page when it receives keyboard focus. It also adds a yellow background and dotted border.

View the CSS

a.offscreen {
position:absolute;
left:-1000px;
top:-1000px;
width:1px;
height:1px;
text-align: left;
overflow:hidden;
}

a.offscreen:focus, a.offscreen:active, a.offscreen:hover {
position:absolute;
left:0;
top:0;
width:auto;
height:auto;
overflow:visible;
background-color:#FF3;
border: 1px dotted #000;
}

View the HTML


<a href="#skip" class="offscreen">Skip Content</a>
[NAVIGATION LINKS]
...
<a name="skip" > </a > [Content Starts Here]</div>

Test the Link

On the next TAB, the link becomes visible in the top left of the page when you tab to it. The next tab takes you to the next link to WebAIM.

Top of Page

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.

Note: This method does not allow you to easily reveal the keyboard focus when you tab to it.

Top of Page

Skip to toolbar