Criterium 12.11 – Skip links

This post is also available in: Français (French)

A skip-link target should exist and be focusable. Ensure that all skip links in the webpage have a focusable target that allows users to skip the navigation.

The skip navigation link should be placed at the top of the page, right after the opening body tag.

Implementation of a skip link:

Top of the page

<div id="skip">
<a href="#main">Skip Menu</a>
</div>

Wrapper main content

<main id="main" role ="main" tabindex="-1">

tabindex=”-1″ is recommended for compatibility with all browsers.

It may be tempting to hide the skip navigation link – after all, it adds content to the page’s layout, and it might be confusing for people who don’t need it.

If you decide to hide it, be sure NOT to hide it in the following manners:

  • use CSS to permanently position the link off screen
  • display: none
  • visibility: invisible

The first method works fine for users of screen readers, but sighted users who benefit from the skip link are unable to access it. The other two methods make the link inaccessible for everyone.

The two accessible ways to deal with skip links are as follows:

  • Make the “skip navigation” link permanently visible
  • Use CSS to hide the link off screen until it receives keyboard focus, then make it visible to all users.

Styling of hidden skip link that become visible when it receives keyboard focus

#skip a {
display: block;
position: absolute;
left: -999px;
top: -999px;
}

#skip a:focus {
left: 0;
top: 0;
padding: 3px;
background: #ffc;
border:1px solid #990000;
}

While you are at it, you may want to consider adding more skip links for users to skip past repetitive content. Additional skip links are not always necessary, though it may be helpful in some cases (Nav, footer, search).