A skip link is an anchor link placed as the very first focusable element on a
page that allows keyboard and screen reader users to bypass repeated navigation
and jump directly to the main content. Without a skip link, keyboard users must
Tab through every navigation item on every page load.
[1]
Consider a site with a navigation menu containing 30 links. Without a skip link,
a keyboard user must press Tab 30 times before reaching any page content. This
is not hypothetical — it is the daily experience of many keyboard and screen
reader users on sites that omit this simple feature.
[2]
A skip link is an anchor that points to the id of the main content element:
In the HTML, as the very first element inside body:
The tabindex="-1" on main is required so that browsers move focus to the
element when the skip link is activated, not just scroll to it.
[1]
Skip links are typically hidden off-screen and revealed only when they receive
keyboard focus. This keeps the design clean while remaining fully functional:
The link must become visible on focus — a skip link that is permanently hidden
(display: none or visibility: hidden) is inaccessible to sighted keyboard users.
[3]
Skip link exists but does not move focus. The href target must exist in the
DOM and the target element must accept focus. Add tabindex="-1" to main if
it does not naturally receive focus.
Skip link is permanently invisible. Using display: none removes the link
from the accessibility tree entirely. Use off-screen CSS positioning instead.
Skip link is not the first focusable element. If any other element receives
focus before the skip link, it defeats the purpose. Verify by pressing Tab
immediately on page load — the skip link should be the first thing focused.
On complex pages, multiple skip links may be appropriate:
If multiple skip links are used, group them and ensure each points to a
correctly labelled landmark region.
Last edited Apr 5, 2026, 7:16 PM · P**** J****