Skip link

Use the skip link at the start of a page to allow the user to jump straight to the most important content.

Status

Official

Contents

• How it works
• Multiple skip links

To view the skip link component tab to this example, or click inside this example and press tab.
<a href="#main-content" class="tna-skip-link" data-module="tna-skip-link">
  Skip to main content
</a>

{% from "nationalarchives/components/skip-link/macro.njk" import tnaSkipLink %}

To view the skip link component tab to this example, or click inside this example and press tab.

{{ tnaSkipLink({
}) }}

{% from "components/skip-link/macro.html" import tnaSkipLink %}

To view the skip link component tab to this example, or click inside this example and press tab.

{{ tnaSkipLink({
}) }}

How it works

Include a skip link at the start of every page to allow users to skip to the main content of the page.

By default, the skip link tries to skip to the element with id="main-content".

Multiple skip links

When navigating through paginated search results, there could be a lot of repeated content in the form of filters in a sidebar that keyboard users will have to skip past on every page load.

In this instance, add two skip links to the top of the page:

• Skip to search results
• Skip to main content

Order the skip links so that the least generic one comes first. Keyboard users will get the skip link that is probably most relevant first and if they don’t want to use it, the very next Tab will take them to the "normal" skip link to the main content that they should probably be familiar with.

If used so that the "Skip to main content" is first, the keyboard user might never know that there is a more helpful skip link.

If there is another part of the page that you see users frequently using, consider adding a skip link to that:

• Skip to main content
• Skip to list of other pages in this section

Avoid adding more than two skip links to a page.