Skip links

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.

Skip link enables a way to skip all these elements and jump right into the content. These are good practises about skip to content links:

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

Skip to content link when focused

Note that Internet Explorer has a bug that prevents focus being moved to elements that aren’t natively focusable. There is JS fix for this in Underscores theme.

Good practise Good practise

<body>
  <a class=”screen-reader-text skip-link” href="#content">Skip to content</a>
  <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 ↑