Making Accessible Websites for the United Nations

Navigation

Skip Links

WAI Definition (Checkpoint 13.6)

Group related links, identify the group (for user agents), and, until user agents do so, provide a way to bypass the group.

Explanation

Group related links, such as the navigation links, in a list. Add "Skip links". They are anchor links that point to the menu and content of the pages.

They allow users to bypass content recurring on every page to access the menu or the content directly.

Rationale

A navigation bar is often the first element presented on a page, after the title and banner elements. Screen-reader users have to listen to this over and over again, for every page, until they get to the actual content.

Similarly, keyboard users have to tab through all the navigation links before they can access any links in the content.

Providing a way to skip over repetitive links allow users to access content more quickly.

Technique

In the example below, there are two skip links. One skips the banner title to access the navigation directly. The second one skips the banner and the navigation to point directly to the content.

Example

HTML
<body>
<div id="skiplink">
  <ul>
    <li><a href="#navigation">Skip to navigation</a></li>
    <li><a href="#content">Skip to content</a></li>
  </ul>
</div>
<div id="banner">
  <h1>Title of this page</h1>
</div>
<div id="navigation">
  <ul>
    <li id="home"><a href="index.shtml">Menu item 1</a></li>
    <li id="about"><a href="about.shtml">Menu item 2</li>
  </ul>
</div>
<div id="content" class>
<p>Unique content of the page</p>
</div>
CSS

You can use CSS to hide the skip links by giving them the same colour as the background. Keep in mind however that skip links are useful to sighted users who are unable to use a mouse. Therefore, skip links should become visible upon keyboard focus. Below is the CSS code to achieve this.

body {background-colour: #FFFFFF;}
#skiplink a {color:#FFFFFF;}
#skiplink a:focus, div#skiplink a:active {color:#0000FF;}

Validation

Test

Check the code to ensure that the page provides skip links to bypass recurring content and access the menu(s) and the content directly.

Success Criteria

The page provides skip links to bypass recurring content and access the menu(s) and the content directly.