a11y.surf

Skip link

Skip links provide ways for assistive technology users to skip directly to pertinent content. Instead of having to tab through an entire navigation, users can use a skip link, often the first link placed on a page for such users, to skip directly to the content that you want them to see.

Here's an example of a skip link:


  <body>
    <a id='skip-nav' class='screenreader-text' href='#main-content'>
      Skip Navigation or Skip to Content
    </a>

    <main id='main-content'>
      …Content here…
    </main>

  </body>

A few important points about the skip link example:

To 'hide' the link, use some CSS like this (feel free to change class names or other attributes as suitable for your project):

.screenreader-text {
  position: absolute;
  left: -999px;
  width: 1px;
  height: 1px;
  top: auto;
}
.screenreader-text:focus {
  color: black;
  display: inline-block;
  height: auto;
  width: auto;
  position: static;
  margin: auto;
}

Further Reading

Examples of Skip Links