Page Content

About Skip Links

Adding a link to allow users to skip repetitive navigation is a common accessibility recommendation. Many users on a screen reader may also use ARIA landmarks, but the skip navigation link is still useful for sighted users on a keyboard.

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>

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 additional alternatives.

 

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