Skip links

Allow keyboard users to quickly and easily jump to the content they want to interact with.

Meeting the Web Accessibility Standard

When there are skip links that allow users to bypass blocks of content that are repeated across a website or set of web pages, this meets WCAG 2 Success Criterion 2.4.1 Bypass Blocks (Level A).

On this page

Skip links are extra links in a page to help keyboard users jump past blocks of content or groups of controls that:

Examples of skip links

Take the following steps to experience these skip links.

Skip to main content:

  1. Reload this page.
  2. Press the Tab key.
  3. Notice that focus moves to the ‘Skip to main content’ link which is now visible at the very top of the page.
  4. Press the Enter key.
  5. Note how focus has moved to the page’s main heading.

Skip past a set of controls:

  1. Visit the Government A–Z directory on Govt.nz.
  2. Press the Tab key to move focus to the ‘Skip to main content’ link.
  3. Press the Enter key to move to the ‘Government A–Z’ main heading.
  4. Press Tab again twice.
  5. Notice that focus has moved to the ‘Skip A–Z’ link which is now also visible and comes right before a list of 26 links, one for each letter of the alphabet.
  6. Press the Enter key.
  7. Note how focus has skipped past the list of 26 links to the heading for the letter ‘A’.

Skip links can be useful to many users, but they are primarily intended for sighted keyboard users. The aim is to reduce the number of times keyboard users must press the Tab key to get to the content that they wish to interact with.

Skip links are not required, but they can be a very helpful navigational support for some keyboard users — for this reason, consider implementing them as a matter of course.

To create a skip link, use an <a> element and give its href attribute a URL that points to the skip link’s target. Most of the time, that URL will be the value of the target element’s id attribute, preceded by the # symbol.

Example of code for a skip link

If the page’s <h1> has id="main-heading", the ‘skip to main content’ link might look like this:

<a href="#main-heading">Skip to main content</a>

For more on links, see Web Content Type: Links.

For more on keyboard accessibility, see the Knowledge Area: Keyboard accessibility.

If a skip link is normally hidden:

‘Skip to main content’ comes first

A ‘skip to main content’ link should be the first focusable element on the page. This ensures that it’s the very first thing a keyboard user encounters, providing them with the quickest access possible to the page’s main content.

Try to use a heading element as the target for skip links, unless some other element makes more sense. A heading introduces or describes what follows. This makes it a great place to send the user, since it helps orient them to where they are in the page.

Avoid targeting a large container element such as a <div> wrapping the main content. The main reason for this is that it can impact a user’s control over keyboard focus.

Depending on how your skip link is implemented, the target of the link might need tabindex="-1".

To learn more, see In-page link targets and tabindex="-1" — Knowledge Area: Keyboard accessibility.

A skip link is still a link. To be accessible, it has the same accessibility requirements that all links typically have. For more on testing the accessibility of links generally, see Testing links.

Specifically testing skip link functionality involves checking that they actually work to send visual and keyboard focus to the targeted element. For help seeing where keyboard focus is, see Visible focus indicators — Knowledge Area: Keyboard accessibility.

To test that skip links are working on the page, follow these steps:

  1. Load or reload the web page.
  2. Press the Tab key.
  3. If the focused element is a skip link:
    1. identify the link’s target — for example, by using the browser’s developer tools
    2. activate the link with the Enter key
    3. confirm that the link’s target is visually located within the browser’s viewport
    4. confirm that the link’s target has keyboard focus — for example, by using the browser’s developer tools or a plugin that highlights the focused element.