Skip link
Sample HTML for Skip links example
<div class="ds_skip-links">
<ul class="ds_skip-links__list">
<li class="ds_skip-links__item"><a class="ds_skip-links__link" href="#main-content">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 page's main heading where the content starts
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 start of the content on 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
Use the ID of the page's <H1> heading for the skip link's href attribute. If you cannot add an ID to your H1, use the ID of a parent or ancestor element.
The skip link will take users to the start of the content. It jumps over any repeated content before or after the main content.
Place the skip link component immediately after the opening body tag or before any other content. 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 primary 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
When a user presses the ‘Tab’ key, the skip link component gets focus. When they press ‘Enter’, it moves focus to the element the skip link points to. It also sets the browser to focus this element.
Do not make the element the skip links points to focusable by default. For example, by giving it a tabindex of –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.
Secondary headings
Some page formats have a secondary heading above the H1. For example, guides.
If this is the case, use aria-describedby to tie the two headings together so users do not miss the secondary heading.