Dostępność
a11y/landmarks
Each page has one main landmark, all content sits inside landmarks, and repeated landmarks of a kind have distinct labels.
umiarkowanaw przeglądarceWCAG 1.3.1, 2.4.1 · Afe-a11y-core
Dlaczego
Screen reader users jump between landmarks ("main", "navigation", "search") to skip what they do not need. Content outside any landmark is easy to miss; two unnamed navigations sound identical. axe-core reports these as best practices that support 1.3.1 and 2.4.1.
Poprawka
In the shared layout: <header>, <nav aria-label="Main">, one <main id="main">, <footer>; <aside> for related content; <search> around site search. Label repeated landmarks (aria-label="Main", aria-label="Footer"). Start the main content with the page's h1.
Przykłady
<header>…<nav aria-label="Main">…</nav></header>
<main id="main"><h1>Orders</h1>…</main>
<footer><nav aria-label="Footer">…</nav></footer>Źródła
Fakty
- Identyfikator
a11y/landmarks- Waga
- umiarkowana
- Sprawdzanie
- w przeglądarce wymaga wyrenderowanej strony:
audit --url - Dotyczy plików
page- WCAG 2.2
- 1.3.1, 2.4.1, poziom A
- Ten sam problem w
- axe-core
landmark-one-main, axe-coreregion, axe-corelandmark-unique, axe-corepage-has-heading-one - Uczy jej skill
fe-a11y-coreAccessibility, WCAG 2.2 map- Od wersji
- 0.1.0
Przeczytaj w terminalu
npx github:dawidolko/frontend-skills explain a11y/landmarks