Accessibility ·
How to Add a Skip Link That Works
Learn how a skip link helps keyboard users reach the main content quickly, and how to add one without disrupting the visual design. The note covers the HTML structure, focus behavior, and the checks to perform before publishing.
The repeated route to content
A keyboard user may have to move through the same logo, utility links, menu items, search controls, and account actions before reaching the page heading. Repeating that journey on every page makes navigation slower and tiring, particularly for people who cannot or do not want to use a pointer. A skip link provides an explicit shortcut. It should appear early in the document, before the repeated navigation, and it should point to the page’s main content rather than to an arbitrary visual element.
Why a small link matters
The link is not a replacement for good landmarks or a well-structured heading hierarchy. It is a fast route through a repeated block. It also makes the page’s intended structure clear: there is a navigation area, followed by a main area. Because it is a normal link, it can be understood by browsers, assistive technologies, and people using only the keyboard. The visual treatment can remain quiet when the link is not being used, but it must never be hidden in a way that also removes it from keyboard focus.
Build and style the skip link
Use a link near the beginning of the body, such as “Skip to main content”. Give the main element a stable identifier, for example id="main-content", and use that identifier as the link destination. Keep the link in the document flow, then position it so it is outside the visible area until it receives :focus or :focus-visible. When focused, give it a strong background, sufficient contrast, and enough spacing to read. Do not rely on a hover state: keyboard users need the focused state. If your page has a sticky header, check that the focused heading is not covered after the jump; scroll margin on the target can help.
A simple page pattern
A useful baseline is: a first link with an understandable label, a main element with a matching id, and a visible focus style. If the site uses a shared layout, place the link in that layout so every page receives it consistently. If a page has more than one repeated region, keep the first destination focused on the primary task: usually the main content, not the footer or a secondary panel.
Checks before publishing
Common mistakes include placing the link after the navigation, pointing it to a decorative wrapper, hiding it with display: none, or removing the focus outline without replacing it. Test with Tab from a fresh page load: the skip link should be the first meaningful control, should become visible, and should move focus to the intended content. Repeat the test on a page with a long header and on a narrow viewport.
When to use it
Use a skip link on sites with repeated headers, navigation menus, search tools, or other content that appears before the primary page content. It is particularly valuable in shared layouts and content-heavy websites.
When to avoid it
Do not omit it just because the header looks visually compact. Avoid adding several competing skip links unless there is a clear, tested reason and each destination represents a genuinely useful region.
Key takeaways
- Place the link before repeated navigation.
- Point it to the real main content.
- Reveal it on keyboard focus, not only on hover.
- Check sticky headers and focus visibility.
- Test the first Tab sequence on real page templates.
Checklist
- Is the link the first useful keyboard control?
- Does its label explain where it goes?
- Does the target have a stable identifier?
- Is the focused link readable against the page?
- Does focus land where the user expects?
- Is the target hidden behind a sticky header?
Frequently asked questions
Should a skip link be visible all the time?
Not necessarily. It may remain visually discreet until it receives keyboard focus, but it must still be reachable and clearly visible when focused.
Can the skip link point to a heading instead of main?
It can, but the main content region is usually the clearest destination. If you target a heading, make sure focus behavior and the page structure remain understandable.