Skip to main content

Testing

Help us to improve the ONS Design System. Take part in a short study

Skip to content

The skip to content component lets assistive technology and keyboard-only users skip to the main content on a page, to bypass and avoid repeating focus on persistent page elements such as top-level navigation.

Important information:
To view this component, click into the example below and press the tab key.

<a class="skip__link" href="#main">Skip to content</a>
Nunjucks macro options
Name Type Required Description
url string true The anchor for the main content
text string true The text for the skip link
{% from "components/skip-to-content/_macro.njk" import onsSkipToContent %}
{{
    onsSkipToContent({
        "url": "#main",
        "text": "Skip to content"
    })
}}

{% macro onsSkipToContent(params) %}
    <a class="skip__link" href="{{ params.url }}">{{ params.text }}</a>
{% endmacro %}

.skip__link {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  display: block;
  font-size: 1.1rem;
  font-weight: $font-weight-bold;
  height: 1px;
  margin: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  white-space: nowrap;
  width: 1px;
  &:focus {
    background-color: $color-focus;
    box-shadow: 0;
    clip: auto;
    clip-path: none;
    color: $color-text-link-focus;
    height: auto;
    margin: inherit;
    max-height: 20em;
    outline: none;
    overflow: visible;
    padding: 1rem;
    position: static;
    text-decoration: underline solid $color-text-link-focus 2px;
    white-space: inherit;
    width: auto;
  }
}

When to use this component

All ONS pages must use the skip to content component above the header.

How to use this component

The skip to content link component is visually hidden until it is brought into focus with a keyboard press.

It should be the first element of the page content, and link to the page’s #main div.

Help improve this component

Let us know how we could improve this component or share your user research findings.

Discuss ‘Skip to content’ component on GitHub