Skip links let keyboard users bypass repeating navigation and reach main content

What it is

Primary nav, toolbars, and filters repeat at the top of every page. A keyboard user who can only Tab from the start pays that same chain on every navigation before reaching the body. A skip link sits first in the focus sequence and, when activated, moves focus to the main content container, bypassing the repeating block. It is not decoration for pointer users; it is a shortcut on the keyboard path. Landmark regions and heading levels address the same problem by another mechanism.

Why it happens

Repeating navigation turns the first N Tab stops into a fixed tax. A skip link drops “reach the body” from O(N) Tabs to one activation. The usual implementation is a first-in-page link to #main, shown only when focused so pointer users are not bothered. Failures are specific: the href points at a non-focusable div, focus stays on the link after the jump, or main lacks tabindex=-1 so the browser does not move focus. Screen-reader users can also jump via a landmark list; motor users who only Tab have no such list, so the skip link is required for them.

Studying it

Count Tabs from document start to the primary action on each template, with and without a skip link. Record whether focus actually lands in main after the jump and whether a screen reader announces the region change. Separate “visually there is a skip” from “the keyboard can use the skip”: many sites style the link in CSS and then hide it from focus or make it transparent when focused. Recruiting people who actually type with a keyboard has more ecological validity than sighted participants in a blindfold.

Where it stops holding

A single-screen app with no repeating header gains little from a skip link. Apps already organized with tabs or sidebar landmarks need in-region jumps, not the classic page-top link. Mobile focus order is often rewritten by the system browser; recheck skip links with a real keyboard (hardware or accessibility switch). Infinite-scroll streams make a “main content” anchor stale; jump to the current item instead.

Applying it

• Put “skip to main content” first on every template with repeating header nav; the target must be focusable, and visible focus must appear in the body after the jump.
• Show the link on focus; do not clip it in a way that hides focus as well.
• After a single-page route change, confirm the anchor still exists and that focus moved to the new main container rather than remaining in the old nav.
• Verify: from the address bar or window into the page, the first Tab should land on the skip link, and after Enter the next Tab should land on the first control inside main, not back on the header.

Related

• Same group: C6.22.1 Composite widgets typically move among internals with arrow keys; Tab only enters and leaves · C6.22.3 Roving tabindex keeps only one composite member in the Tab sequence; the rest move by arrows · C6.22.4 Keyboard paths must be functionally equivalent to mouse-reachable paths, not visual presentation only
• Adjacent: C6.05 Focus order · C6.06 Soft keyboards and screen occupancy
• Search: skip link · skip to content · landmark navigation