Skip to main content

User testing

Help us improve this service. Take part in a short online exercise

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="ons-skip-link" href="#main">Skip to content</a>
{% from "components/skip-to-content/_macro.njk" import onsSkipToContent %}
        "url": "#main",
        "text": "Skip to content"
Name Type Required Description
url string true The anchor for the main content
text string true The text for the skip link
{% macro onsSkipToContent(params) %}
    <a class="ons-skip-link" href="{{ params.url }}">{{ params.text }}</a>
{% endmacro %}
.ons-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