Cookies on ons.gov.uk

Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.

We would like to set additional cookies to remember your settings and understand how you use the site. This helps us to improve our services.

View cookies

You have accepted all additional cookies. You have rejected all additional cookies. You can change your cookie preferences at any time.

Skip to main content

Skip to content

Use the skip to content component to allow assistive technology and keyboard-only users to skip to the main content on a page.

This helps these users bypass repeated focus on persistent page elements, such as top-level navigation.

Warning:

All Office for National Statistics (ONS) pages must use the skip to content component above the header to fulfil WCAG 2.1 criterion 2.4.1 (opens in a new tab) 

Important information:

To view this component tab to the example, or click inside this example and press the tab key

Open this example in a new tab (Example Skip To Content)

Example Skip To Content contents

Nunjucks

{% from "components/skip-to-content/_macro.njk" import onsSkipToContent %}
{{
    onsSkipToContent({
        "url": '#main',
        "text": 'Skip to content'
    })
}}

Nunjucks macro options

NameTypeRequiredDescription
urlstringtrueThe anchor for the main content
textstringfalseThe text for the skip link, defaults to 'Skip to content'

HTML

<a class="ons-skip-to-content" href="#main">Skip to content</a>

How to use this component

The component is visually hidden until it is brought into focus with a keyboard press.

It should be the first element of page content, or immediately follow the cookies banner.

It should link to the page’s <main> element using the id for the anchor link.

Base page template

The skip to content component is automatically included and links to the main element with an id of “main-content”, if you are using the base page template.

You can override this by manually adding it using the skipLink block.

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss ‘Skip to content’ component on GitHub (opens in a new tab) 

Back to top