Skip to content.

How-to

Use skip navigation links

By: Cameron Cundiff. Published: .

Table of Contents

Use skip nav links in conjunction with a coherent heading outline and ARIA landmarks. You may need to also implement a JavaScript polyfill for Webkit-based browsers.

It can be frustrating and fatiguing for folks with limited mobility to have to have to repeatedly tab through navigation links to get to the main content of a page. People who use screen readers face similar frustration when the page outline is not well defined. In order to address this issue, WCAG 2.0 has specified a guideline for bypassing repetitive blocks of content. One technique recommended by the W3C is to include a skip navigation link at the beginning of the page, that changes focus to the first element after the repeated content.

Skip nav links are useful for users who use keyboard navigation only, but screen readers now support more sophisticated ways of navigating regions. Specifically, they support heading navigation and ARIA landmarks. You should take advantage of these features by using a clear heading outline and defining page regions, as illustrated in Quick Tip: ARIA Landmark Roles.

Example

<body>
  <a href="#main">Skip to main content</a>
  <nav role="navigation">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/blog">Blog</a></li>
    </ul>
  </nav>
  <main id="main">
    <!-- page specific content -->
  </main>
</body>

Disclaimer: The mechanism by which skip navigation links work had for some time been broken in Webkit-based browsers and has only recently been fixed. Until these browsers release the fixes, you may need to use a JavaScript polyfill to make skip nav links work.

Notes