Skip links

Topics

Before the main content, there can be navigation links, search, or other elements. For keyboard and screen reader users it can be frustrating to get to the main content of a page because you have to tab through all these elements every time over and over again. By implementing a skip link (also known as skip to content links), those users can skip all these elements and jump right into the content.

Good practice

These are good practices about skip to content links:

  • The link should be the first focusable element in the page.
  • The link can, but doesn’t have to be, visible all the time for all users.
  • If the link is visually hidden at first, it must be visible when keyboard focus moves to the link.
  • If the link is clicked, it should move focus to the main content.
Skip to content link
Skip to content link when focused

Note that even though all content should be inside a landmark region, skip links can be outside any landmarks. If a user is mainly navigating by landmarks, skip links inside a landmark may be just extra info.

See more information about skip links and landmarks in Twitter thread.

Skip links should be the first focusable element on a page. In our example we put the skip link inside <header> landmark for consistency.

<body>
<header>
<a class=”screen-reader-text skip-link” href="#content">Skip to content</a>
<h1>Site title</h1>
</header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/accessibility">Accessibility</a></li>
      <li><a href="/blog">Blog</a></li>
    </ul>
  </nav>
  <main id="content">
    <!-- Content of the page --> 
  </main>
</body>

Read more information about screen-reader-text class.

Top ↑

<body>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/accessibility">Accessibility</a></li>
      <li><a href="/blog">Blog</a></li>
    </ul>
  </nav>
  <a href="#content">Skip to content</a>
  <main id="content">
    <!-- Content of the page -->
  </main>
</body>

Top ↑

Last updated: