How to Add a Skip Navigation Link for Keyboard Users
A skip link lets keyboard users bypass your menu and jump to the content. It is one of the simplest accessibility wins and it is required by WCAG. Here is how.
Reviewed by Jacob Rhinehart for Strelva's co-founder; products and operations lead responsibilities.
People who navigate with a keyboard instead of a mouse press Tab to move through a page. Without help, that means tabbing through every navigation link before they ever reach the content, on every page. A skip link, the first thing they can tab to, lets them jump straight to the main content. It is one of the cheapest accessibility fixes and WCAG requires it.
How it works
The skip link is hidden until a keyboard user tabs to it, at which point it appears at the top of the page. Pressing Enter moves focus into the main content, past the menu. Mouse users never see it; keyboard users get a shortcut.
Step by step
- Add the link first. Place a "Skip to main content" link as the very first element after the opening body tag, pointing at your main content's id.
- Hide it until focused. Style it off-screen by default and bring it into view on focus. Do not use display:none, which would hide it from keyboards and screen readers too; position it off-screen instead.
- Target the main content. Make sure the destination element has the matching id and a tabindex="-1" so focus lands there.
- Test with Tab. Load the page and press Tab once. The skip link should appear at the top.
- Test with Enter. Press Enter and confirm focus jumps into the main content, skipping the navigation.
- Check across browsers. Verify it behaves the same in the major browsers.
The common gotcha
If pressing Enter does not move focus, the target element is missing its tabindex="-1". Add it to the main content wrapper and the jump works.
Frequently asked
What business owners ask next.
Will the skip link be visible to normal visitors?
No. It is hidden off-screen until a keyboard user tabs to it, when it appears at the top of the page. Mouse users never notice it, so it does not affect your design.
Why not just hide the skip link with display:none?
display:none removes it from keyboard and screen-reader access too, defeating the purpose. Hide it by positioning it off-screen instead, and reveal it on focus.
My skip link shows but Enter doesn't jump anywhere. What's wrong?
The target element needs a tabindex of -1 so it can receive focus. Add tabindex="-1" to your main content wrapper and the skip link will move focus there.