Skip to content

Skip to content allows screen readers and users who navigate via keyboard to jump straight to the main content.

How skip to content works

Skip to content is visually hidden and only appears when triggered by a screen reader or keyboard input. It becomes hidden again as soon as the focus has moved onto another element.

How to use skip to content

You must include skip to content on all pages.

It should be the first element on a page that users can interact with when using a screen reader or keyboard to navigate the page. The only exception to this is if the cookie banner is present, in which case that takes priority.

You must place skip to content inside the <body> tag. Its ID must match up with the container around the main content.

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

Have a question, suggestion or feedback?

The Improving User Experience cluster manages the design system.

If you work in Parliament, contact us on the #design-system Slack channel.