Information

You appear to be using an unsupported browser, and it may not be able to display this site properly. You may wish to upgrade your browser.

Skip links

Use the skip link component to help keyboard-only users skip to the main content on a page.
A simplified illustration of a web page showing the location of the 'skip links' component in the upper left of the browser window. There is a magnified view of the 'skip links' component to show what it looks like at actual size.

Sample HTML

<div class="ds_skip-links">
 <ul class="ds_skip-links__list">
  <li class="ds_skip-links__item"><a class="ds_skip-links__link">Skip to main content</a></li>
 </ul>
</div>

About this component

Using the skip link component gives users the option to:

  • bypass repeated elements such as top level navigation links and breadcrumbs
  • jump to the main content on a page

The skip link component is visually hidden on page load. The user reveals the link when they press the ‘tab’ key on their keyboard.

We use the text “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.

We use the skip link component on the Scottish Government’s main sites:

Why we use this component

You need to giving user a way to jump to the main content of a page to meet for WCAG AA accessibility requirements. All Scottish Government websites need to meet WCAG AA.

We based our skip link behaviour on the guidance in the GOV.UK Design System.

We have tested this component and found it works well with users.

Evidence

Performance data

Users clicked skip links 43 times on 20 Feb 2021 across 294,447 tracked page views.

When a user clicks a skip link, they generally do so on most pages in that session.

Although users only clicked skip links 43 times, this number represents users that need it. These are people whose user experience would be significantly impaired without it.

Screen reader user survey

WebAIM have published survey results from users who only use screen readers. The data shows how popular skip links are with these users. It also shows those users slightly prefer the phrase “Skip to main content.”

Screen reader testing

Some screen readers pronounce “Skip to content” the word “content” with the stress on the second syllable. This gives the phrase the wrong meaning (‘content’ as in ‘satisfied’). Using the phrase “Skip to main content” made the same reader pronounce it as expected.

Website analytics

You can track skip link clicks through the original page path and a data attribute describing the action.

The Design System’s ‘tracking’ script adds this attribute.

Accessibility

This component gets focus on a page when a user presses the ‘tab’ key on their keyboard. Pressing the ‘enter’ key then brings the user to the main content area on the page. This action sets the browser to also focus the main content. When the main content loses focus, a user can focus it again through the use of the skip link.

We do not recommend setting the main content area to be focusable by default. For example, giving the main content a tabindex of -1. This would make it easy for a user to click anywhere on the main content area by mistake and give it focus. If the user was aiming for something else, the focus will not be on what they wanted.

Back to top