How to build an accessible SkipNav in React

Renders an anchor that is visually hidden until focused, then becomes visible so sighted keyboard users see where focus is; activating it moves focus to the matching target past the navigation

When to use a SkipNav

• Letting keyboard users jump past repeated navigation to the main content
• Meeting WCAG bypass-blocks by providing a skip link as the first focusable element
• Targeting a custom main-content anchor (targetId / matching SkipNavTarget id)

When not to use it

• General in-page navigation — use anchor links or a table of contents
• Visible persistent navigation — this link is hidden until focused

Keyboard interactions

Role link, verified at WCAG 2.2-AA.

• Tab
• Enter

Common mistakes

Avoid: Placing SkipNavLink after the navigation in the DOM

Prefer: Make SkipNavLink the first focusable element on the page

A skip link only works if the user reaches it before tabbing through the nav it bypasses

Example

<><SkipNavLink /><nav>…</nav><SkipNavTarget /><main>…</main></>

See the full SkipNav reference →