Skip links

Use the skip link component to help keyboard-only users skip to the main content on a page.

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" href="#main-content">Skip to main content</a></li>
    </ul>
</div>

About this component

Some people use the ‘tab’ key on their 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 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

For Scottish Government websites use of this component is mandatory to meet our accessibility success criteria.

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, and for whom without it their user experience would be significantly impaired.

Screen reader user survey

WebAIM have published survey results from users who exclusively 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

For the phrase ‘Skip to content’ some screen readers pronounced the word ‘content’ with the stress on the second syllable, which gives it 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 data attribute is added automatically by the Design System’s “tracking” script

Accessibility

This component gets focus on a page when a user presses the ‘tab’ key on their keyboard. Pressing the ‘enter’ key afterward will bring the user directly to the main content section on the page.

Skip links can be of value to some sighted users, but having them always visible can be distracting. These resources discuss visible skip links in more detail:

Feedback, help or support

If you need any help or want to give any feedback you can e-mail us at: designsystem@gov.scot

Back to top