12.2. Provide “skip links”

A “Skip to content” should be placed on each page to help keyboard users navigate the page. This should be the first interactive element on the page. This internal link will take the user directly to the main content.

<a class="skiplink" href="#content">Skip to content</a>
[…]
<main role="main">
   <a id="content" tabindex="-1"></a>
   […]
</main>

Warning

To ensure that this anchor link works with VoiceOver and in Internet Explorer, the destination tag should be <a tabindex="-1"></a>.

Note

The link may be hidden by default. However, it must become visible when it receives keyboard focus.

Therefore, the “skip to content” link should never be hidden using CSS properties display: none; and/or visibility: hidden; which would make it completely unusable with keyboard navigation.

A better approach would be to use the code below:

a.skiplink {
   display: inline-block;
   color: #555;
   background: #fff;
   padding: .5em;
   position: absolute;
   left: -99999px;
   z-index: 100;
}
a.skiplink:focus {
   left: 0;
}

Tip

In some situations, it takes a lot of tabbing to reach the main and secondary menus and/or search engine from the top of the page.

In these cases, add “Skip to” links, as in the following example:

<ul id="skiplink">
   <li>
      <a href="#content">Skip to content</a>
   </li>
   <li>
      <a href="#nav">Skip to navigation</a>
   </li>
   <li>
      <a href="#search">Skip to search</a>
   </li>
</ul>

Find out more

  1. Associated accessibility guideline for the graphic design: 1.7. Provide skip links.
  2. Simple off-screen skip link nav.
  3. SkipTo, a replacement for old classic “Skipnav” link by PayPal Accessibility Team.
  4. A lightweight script to animate scrolling to anchor links.

Comments

Add a comment

Required fields are marked *.

Back to top