How to fix: Provide a way to skip to the content
Keyboard and screen-reader users need a skip link, landmarks or headings to bypass the repeated header and reach the main content quickly.
The fix
Provide a "skip to content" link or proper landmarks so keyboard users can bypass repeated blocks.
Who this affects
A keyboard-only user has to Tab through the entire header on every page load before reaching the content, which on a wide navigation is dozens of presses each time. For someone driving the keyboard with a switch or a head pointer, that repetition is slow and physically tiring. A screen-reader user hits the same block from the other side, sitting through the same menu being read out after every navigation.
Before and after
<body><nav>…</nav><div>content</div></body><body><a href="#main" class="skip-link">Skip to content</a><nav>…</nav><main id="main">…</main></body>Where this usually comes from
- A page shell built entirely from <div> elements, with no <main> landmark and headings styled by class instead of <h1> to <h6>.
- Content wrapped in <div class="main"> on a template whose headings are also divs, so there is neither a main landmark nor a heading element to jump to.
- Headings replaced by images of text on campaign and landing-page templates, leaving no heading element in the markup either.
- A theme option or a build step that strips the skip link from a template that has no <main> and no heading element to fall back on.
- A page drawn entirely client-side, where the served HTML is a loading shell with no heading and no main landmark.
Checking it yourself
Put focus in the browser address bar, press Tab once, and watch for a skip link to appear. Activate it with Enter and read document.activeElement in the console: on a target with no tabindex="-1" focus stays on <body>, so a screen reader's cursor does not follow the link, and a Tab test will not show it because Chrome and Firefox carry on tabbing from the target anyway. Then open the landmark list in a screen reader (D in NVDA, or the VoiceOver rotor) and confirm a main region exists.
A scanner finds this one automatically. What it cannot judge, and how the score is built, is on how we test.
Related fixes
Check your site for this issue
Scan any page free against WCAG 2.2 AA and get every automatically detected issue with its fix.