a11y/skip-link

Dlaczego

Without a way past the header, a keyboard user presses Tab through every navigation link on every page before reaching the content. Landmarks help screen reader users, but sighted keyboard users need the link.

Poprawka

Make the first focusable element of the layout <a href="#main" class="skip-link">Skip to main content</a>, give <main id="main" tabindex="-1">, and show the link when it has focus (visually hidden until :focus). Put it in the shared layout, not per page.

Przykłady

<!-- bad: the first Tab stop is the logo, then 30 menu links -->
<header><a href="/">Logo</a><nav>…</nav></header>
<!-- good -->
<a class="skip-link" href="#main">Skip to main content</a>
<header>…</header>
<main id="main" tabindex="-1">…</main>

Źródła

• WCAG 2.2, Understanding SC 2.4.1 Bypass Blocks
• WCAG 2.2 Technique G1, adding a link at the top of each page that goes to the main content

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain a11y/skip-link