Skip to Content Innovation Studio Logo

Web Accessibility Guidelines v1.0 Foundations - Overview

Skip Link

A skip (navigation) link provides a way for users of assistive technology to skip what can often be many navigation links. For example, think about having to tab through the entire Amazon dropdown navigation, that has links nested in links, before you even reached the search bar or any relevant content: that is the problem that a skip link solves for keyboard or screen reader users.

A skip link is a wonderful, and easy to implement accessibility structure that allows users to have immediate access to pertinent content.

Best Practices

  • This skip link should go right after the body tag, (it should be the first thing a keyboard user would tab to on your web page).
  • Hide the skip link from sighted users – styling the link tag with what is typically called and classified as ‘screenreader-text’ – which only appears when focused on by tabbing to it or using other assistive technology.
  • Include a href that links to the main content of the web page. Often you will want to have an href such as href='#main-content.’
  • Include clear link text so that users of assistive technology know exactly what clicking on the skip link will do:
    • For example: “Skip Navigation” or “Skip to Content”

Format your skip link as follows, allowing a user to skip all navigation and right to the main content:

1
2
3
4
5
6
7
8
9
10
  <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>

This screenreader Sass mixin we have created can be used on many things you might like for only users of assistive technology to be able to focus on, and not be seen by sighted users. The skip link, however, should always have this type of styling.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.screenreader-text {
  position: absolute;
  left: -999px;
  width:1px;
  height: 1px;
  top: auto;

  &:focus {
    color: $background-color;
    display: inline-block;
    height: auto;
    width: auto;
    position: static;
    margin: auto;
  }
}

The CSS generated by Sass then looks like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.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;
}

Tools & Resources

Live Examples of Accessible Skip-Nav

  • The Starbucks website, as of May 2016, was using three different skip links: 'Skip to Main Navigation’, 'Skip to Main Content’, and 'Skip to Footer’. Try tabbing around Starbucks’ website to see for yourself.
  • This site! To try it out, refresh this page, and without clicking anything, hit the tab key – a white 'Skip to Content’ link should appear at the top of the page which you can click on by hitting the Space or Enter key.