How to add a skip link
Accessibility1 min readFixes check skip-link
A skip link lets keyboard users jump past the menu to the main content. It is the first focusable element and can stay hidden until focused.
Step by step, with screenshots: Accessibility checker results — fixing the ten findings we see most →
Check your own site
Runs this check and the other 186, free, in about 45 seconds.
What a passing site looks like
- A skip link leads to the main contentwarning · −0.5 ptseffort S
There is no skip link to the main content
Why it matters. Keyboard users tab through every menu item on every page before they reach the content. A "Skip to content" link, visible on focus, takes them there in one keystroke.
How to fix it.
- Add <a href="#main" class="skip-link">Skip to content</a> as the first element in <body> and give <main> the id "main".
- Hide it off-screen until it receives focus; do not use display none, which removes it from the tab order.