Skip link

Unable to parse html

const PreviewEn = () => {
  return (
    <>
      <Paragraph>
        To reveal the skip link, tab into this example, or click inside the
        example and press <kbd>Tab</kbd>.
        <SkipLink href='#main-content'>Skip to main content</SkipLink>
      </Paragraph>
      <main id='main-content' tabIndex={-1}>
        Region that can receive focus from the skip link.
      </main>
    </>
  );
};

render(<PreviewEn />)

Use skip link when

• there are several tab stops before reaching the main content
• users need a way to skip repeated elements such as menus, links, or headers

Avoid skip link when

• the page has only a few tab stops before the main content
• the website consists of a single page without repeated content

Guidelines

A skip link should be one of the first elements the keyboard focus reaches when navigating with the keyboard.

When navigating with a keyboard, users must be able to skip content that appears on multiple pages, such as menus, links, and the page header. A skip link helps users move quickly to the main content.

If there are only a few tab stops before the main content — for example, if the page only contains a single “Home” link at the top — adding a skip link may be unnecessary. In such cases, it could introduce more focusable elements than needed.

Place the skip link as the first focusable element on the page. If the page includes a cookie banner or similar message, place the skip link immediately after that element in the code.

The skip link should visually stand out from the rest of the content when focused, so users who can see but navigate with a keyboard can easily recognise it before moving on.

Text

Make sure the text clearly describes what the shortcut does. Use simple and direct wording, such as “Skip to main content”.