Skip link

<body>
  <a class="nhsw-skip-link" href="#maincontent">Skip to main content</a>
  ...
</body>

{% from "skip-link/macro.njk" import nhswSkipLink %}

{{ nhswSkipLink({
  href: "#maincontent",
  text: "Skip to main content"
}) }}

When to use a skip link

Some people use a keyboard to navigate through the links and form elements on a web page. Using the skip link component gives users the option to:

• bypass repeated elements such as top level navigation links and breadcrumbs
• jump to the page's main heading where the content starts

How to use a skip link

The skip link is visually hidden when the page loads and becomes visible when a user navigates to it using a keyboard.

Place the skip link immediately after the opening <body> tag. If your page includes a cookie banner, place the skip link immediately after the cookie banner.

Some automated accessibility testing tools may warn that the skip link is not contained within a landmark region. This warning can be ignored for skip links. Do not place the skip link inside a <nav> element or move it into the page header.

For more information, follow the guidance in the GOV.UK Design System.

Component labelling

GOV.UK recommends the label "Skip to main content." This tells users exactly what clicking on the skip link will do. This includes those who do not use a mouse and use the keyboard only.

Screen readers mispronounce "Skip to content" by stressing the second syllable in "content". This gives the phrase the incorrect meaning (content as in satisfied). "Skip to main content" avoids this.

Accessibility

When a user tabs to the skip link, it should move focus directly to the target content. This helps keyboard users bypass repeated navigation and access the main content more quickly.

Do not make the target element focusable by default. For example, avoid adding tabindex="-1". This can make it easier for a user to mistakenly click anywhere in the element's area and give it focus when they do not intend to. This is to support both WCAG 2.2 Success Criterion 2.4.1 Bypass Blocks, level A and WCAG 2.2 Success Criterion 2.4.7 Focus Visible, level AA.

Source

Learn more about Skip links in the GOV.UK Design System.

Back to top