Landmärke — ordlista för tillgänglighet

Landmärken är regioner på sidnivå som skärmläsaranvändare kan hoppa mellan direkt via dedikerade tangentbordsgenvägar. De är sidans motsvarighet till kapitelindelningar i en bok: en seende användare får strukturen från visuella ledtrådar (den synliga sidhuvudet högst upp, sidofältet till höger, sidfoten längst ned); en skärmläsaranvändare får strukturen från landmärken.

Standardlandmärkena

Var och en av dessa är både ett HTML5-element och en ARIA-roll. Använd HTML5-elementet i möjligaste mån; ARIA-rollen finns för fall då du inte kan använda det nativa elementet.

Region	HTML5-element	ARIA-roll
Sidbanner (logotyp, primär nav)	`<header>` (sidans topp)	`role="banner"`
Huvudnavigering	`<nav>`	`role="navigation"`
Primärt innehåll	`<main>`	`role="main"`
Kompletterande innehåll (sidofält)	`<aside>`	`role="complementary"`
Sidfot (upphovsrätt, sekundära länkar)	`<footer>` (sidans botten)	`role="contentinfo"`
Sökning	`<search>` (HTML5) eller `<form role="search">`	`role="search"`
Generisk region som behöver identifiering	—	`role="region"` (med etikett)
Formulär (om inte sökning)	`<form>`	`role="form"`

Observera att <header> och <footer> mappas till banner och contentinfo bara när de är direkta barn till <body>. En <header> inuti ett <article> är bara ett artikelsidhuvud — det blir inte ett banner-landmärke.

Hur skärmläsaranvändare använder dem

Varje större skärmläsare har ett navigeringsläge enbart för landmärken:

JAWS: R bläddrar igenom landmärken; Shift+R bläddrar bakåt; Insert+F7 öppnar en lista med alla landmärken.
NVDA: D bläddrar igenom landmärken; Shift+D bakåt; Insert+F7 öppnar elementlistan.
VoiceOver (macOS): VO+U öppnar rotorn; rotera till “Landmärken”; navigera med piltangenter.
VoiceOver (iOS): rotera med två fingrar till “Landmärken” i rotorn; svep upp/ned igenom dem.
TalkBack (Android): svep upp sedan höger för att öppna läskontrollmenyn; välj “Landmärken”-läge; svep höger igenom dem.

En sida med bra landmärken ger skärmläsaranvändaren en innehållsförteckning med ett knapptryck.

Vanliga landmärkesmisstag

Ingen <main>. Utan ett main-landmärke måste skärmläsaranvändare tabba förbi sidhuvudet vid varje sidladdning. Varje sida bör ha exakt en <main>.
Flera omärkta <nav>-element. En sida med både en toppnavigering och en sidofältsnavigering, vardera som <nav>, tvingar skärmläsaranvändaren att välja mellan två identiska “navigering”-poster. Märk varje med aria-label: <nav aria-label="Primär">, <nav aria-label="Sidinnehåll">.
role="banner" på ett inre element. En <header> inuti <main> eller <article> är inte en banner; det är ett artikelsidhuvud. Lägg inte till role="banner" på det.
Duplicerade landmärken. Två <main>-element på en sida bryter mot regeln “landmark-no-duplicate-main”. axe och Lighthouse fångar båda detta.
Region utan etikett. role="region" kräver aria-label eller aria-labelledby. Annars ignorerar skärmläsare det.

Hur man granskar landmärken

Öppna sidan i valfri modern skärmläsare, tryck på genvägen för landmärkeslistan och verifiera:

Det finns exakt en banner, en main, en contentinfo.
Varje <nav> har ett distinkt tillgängligt namn.
Landmärkesstrukturen matchar den visuella sidstrukturen.

En landmärkeslista som lyder “banner, navigation, navigation, main, complementary, contentinfo” utan ytterligare etiketter innebär att användaren inte kan skilja de två navigationerna åt. Åtgärda det.