accessibility
Skip links
What are skip links?
A skip link is a hidden link, revealed the moment you press Tab, that jumps straight past a repeated block - usually the navigation - to the main content. Sighted mouse users never see it; keyboard users would be lost without it.
Also known as: skip navigation, skip to content link
Prefer to watch?
Watch the recap 0:32
The demo
A miniature page: a navigation bar, then its content. Click "start", then Tab. With the skip link off you must Tab through every link to reach the content; switch it on and the first Tab offers a shortcut.
Focus isn't in the mini-page yet. Click "start", then press Tab.
The content you came for
If you reached this by pressing Tab once and then Enter, the skip link did its job. If you had to Tab eight times to get here, you just felt what every keyboard user feels on a page without one.
What this demo shows (text version)
A small mock page with a navigation bar of eight links followed by its main content. A control decides whether a skip link is present. With it off, moving through the page by keyboard means tabbing through all eight links before the content is reached - and that repeats on every page of a real site.
With the skip link on, the first Tab press reveals a "skip to content" link; activating it moves focus straight to the main region, past the whole nav block. The skip link stays hidden for mouse users and appears only when it receives keyboard focus. A running line reports where focus currently sits so the difference is clear without needing to see it.
Repeating the same navigation atop every page means keyboard users Tab through all of it before reaching what they came for. A skip link - hidden until it's focused - hands them one keypress past the furniture, straight to the main content.
Without the skip link you had to Tab through every nav item before you reached the content - on every page. With it, one keypress and one press of Enter took you straight there. That's the whole point: a door past the furniture you've already walked through a hundred times.
The skip link is the classic "invisible until needed" control. It must be the very first focusable thing on the page, hidden off-screen until it takes focus, then clearly visible. Hide it with display:none and you've broken it - it has to stay reachable by the keyboard, just out of sight until it matters.
My rule: build the skip link before you build the nav, and test it by unplugging your mouse. This site has one - press Tab right now, before you touch anything else, and you'll see it appear top-left. If yours doesn't, every keyboard user pays a tax on every single page.