Skip link
Lets keyboard users bypass repeated navigation and reach the main content.
On this page
Preview
import { SkipLink } from '@govtech-bb/react';
<>
<SkipLink href="#main-content" />
<main id="main-content" tabIndex={-1}>
<h1 className="govbb-text-h1">Apply for a passport</h1>
</main>
</>;<a class="govbb-skip-link" href="#main-content">Skip to main content</a>
<main id="main-content" tabindex="-1">
<h1 class="govbb-text-h1">Apply for a passport</h1>
</main>Place the skip link first in the page’s focus order. It stays off-screen until
it receives keyboard focus, then appears at the top of the page. Its href
must match the id of the main content container.
Usage
When to use
- Use one on every page that repeats navigation or other content before the main task.
- Keep the label clear and name the destination, usually “Skip to main content”.
When not to use
- Do not hide the link from keyboard focus or remove its visible focused state.
- Do not point it at a missing or non-unique id.
Best practices
Make the destination focusable
Use tabindex="-1" on the main container when your browser support or routing
setup needs focus to move with the anchor. Keep the main landmark in the normal
document structure and give each page only one main landmark.
Test it from the address bar
Press Tab from the browser chrome. The skip link should be the first page control shown. Activate it and confirm that the next Tab continues from the main content rather than returning to the header.