Navigation
Accessible skip links: Examples and Testing
Published by whatisADA / Grow Wild Agency · Updated
What to build
A skip link lets keyboard users bypass repeated navigation and reach the page's main task. Put it early in the focus order, make it visible when focused and verify the actual focus destination.
A practical example
A long service menu precedes every guide. “Skip to main content” appears on first Tab and moves the user past the menu to the article, so the next keyboard action continues there.
How to check it
- Start at the document and press Tab to find the skip link.
- Activate it and inspect both scroll position and the active or subsequent focus destination.
- Repeat on different templates and with a sticky header that could cover the target.
What can be missed
Scrolling alone may not produce a reliable keyboard jump in every implementation. The target must exist exactly once and should not be hidden under fixed page furniture.
Markup and state contract
This concise markup illustrates names, relationships or state. Custom controls also need the keyboard interaction and state updates described in the checks and primary source; this snippet is not a complete component.
<a class="skip-link" href="#main-content">Skip to main content</a>
<main id="main-content" tabindex="-1">
<h1>Account overview</h1>
</main>Record your test
Use this worksheet to record what you actually checked. Notes stay on this device when you choose Save; they are not sent to us. Avoid personal or confidential information on shared devices.
These are your observations, not automated results or a conformance certificate. A complete evaluation needs appropriate scope, supported technologies, all applicable criteria and relevant page states.
Primary sources and scope
This is independent implementation guidance with original examples. The linked standard contains the full definitions, exceptions and conformance requirements. A criterion or checklist alone does not establish legal applicability or whole-site conformance.