Skip link

Sample HTML

Show this section

<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

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 main content on a page

The skip link component is visually hidden on page load. The user reveals the link when they navigate to it with their keyboard.

When to use this component

Use the skip link component to give users a way to jump to the main content of a page. You must do this to meet WCAG AA accessibility requirements.

All Scottish Government websites must use the skip link component.

How to use this component

Place the skip link component immediately after the opening body tag. If you’re using other elements, such as a cookie banner or notification banner, place the skip link component before these.

This places the greatest importance on letting users skip to the main content.

This means users may skip past notifications or cookie banners and so not interact with them. As a result, they will be present on every new page load.

Component labelling

We recommend 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.

Evidence

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

Performance data

Skip links are only clicked a small number of times per month on mygov.scot. Our research shows that if users do click a skip link, they usually do so on most pages in that session.

This shows that the skip link component is valuable for the small number of users who use it. Without it, they would have a poorer user experience.

Screen reader user survey

A WebAIM survey showed that skip links are popular with screen reader users. These users also prefer the phrase "Skip to main content".

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.