Skip links
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 give users 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.
Feedback, help and support
If you need help or support you can e-mail us at designsystem@gov.scot
There is a problem
Thanks for your feedback