Ensure all skip links have a focusable target
Rule ID: skip-link
User Impact: moderate
Guidelines: Best Practices
The skip-link
rule ensures that a page includes
a skip navigation link at the top, allowing users to bypass repetitive navigation
and jump directly to the main content.
What is being tested?
This rule checks that:
- The page has a skip link placed near the top of the HTML, just after the
<body>
tag. - The skip link has a valid, focusable target (such as
#main
). - The skip link is accessible to both keyboard and screen reader users.
Why it matters
Screen readers and keyboard users navigate content sequentially. Without a skip link, they must tab through or listen to all navigation before reaching the main content, which can be slow and frustrating. A skip link greatly improves efficiency for blind users, low-vision users, and keyboard-only users.
Good markup example
<div id="skip"> <a href="#content">Skip to main content</a> </div> <nav>...navigation here...</nav> <main id="content">...main content here...</main>
Best practice: CSS to hide until focus
#skip a { display: block; position: absolute; left: -999px; top: -999px; } #skip a:focus { left: 0; top: 0; padding: 3px; background: #ffc; border: 1px solid #990000; }
This technique keeps the skip link visually hidden until it receives keyboard focus, making it accessible without disrupting the layout.
Bad practices to avoid
- Using
display: none
orvisibility: hidden
, which makes the link inaccessible to all users. - Permanently positioning the skip link off-screen without revealing it on focus.
- Failing to provide a valid target element for the skip link to jump to.
Additional best practices
- Place the skip link as the first focusable item in the HTML.
- Use clear link text, such as
Skip to main content
. - Consider adding skip links for other repetitive sections (like sidebars) if helpful for users.
Other Rules
Interested in other web accessibility rules? Please see these other rules: