Landmark — woordenlijst toegankelijkheid

Landmarks zijn regio’s op paginaniveau waartussen schermlezers direct kunnen springen via speciale sneltoetsen. Ze zijn het paginaequivalent van hoofdstukindelingen in een boek: een ziende gebruiker krijgt de structuur via visuele aanwijzingen (de zichtbare koptekst bovenaan, de zijbalk rechts, de voettekst onderaan); een schermlezers-gebruiker krijgt de structuur via landmarks.

De standaard landmarks

Elk van deze landmarks bestaat als HTML5-element en als ARIA-rol. Gebruik het HTML5-element waar mogelijk; de ARIA-rol bestaat voor gevallen waarin het native element niet beschikbaar is.

Regio	HTML5-element	ARIA-rol
Paginabanner (logo, primaire nav)	`<header>` (bovenaan de pagina)	`role="banner"`
Hoofdnavigatie	`<nav>`	`role="navigation"`
Primaire inhoud	`<main>`	`role="main"`
Aanvullende inhoud (zijbalk)	`<aside>`	`role="complementary"`
Paginavoettekst (auteursrecht, secundaire links)	`<footer>` (onderaan de pagina)	`role="contentinfo"`
Zoekfunctie	`<search>` (HTML5) of `<form role="search">`	`role="search"`
Generieke regio die identificatie vereist	—	`role="region"` (met label)
Formulier (indien geen zoekfunctie)	`<form>`	`role="form"`

Let op: <header> en <footer> worden alleen aan banner en contentinfo gekoppeld wanneer zij directe kinderen van <body> zijn. Een <header> binnen een <article> is slechts een artikelkoptekst — die wordt geen banner-landmark.

Hoe schermlezers-gebruikers landmarks gebruiken

Elke grote schermlezer heeft een navigatiemodus voor uitsluitend landmarks:

JAWS: R doorloopt landmarks; Shift+R achteruit; Insert+F7 opent een lijst van alle landmarks.
NVDA: D doorloopt landmarks; Shift+D achteruit; Insert+F7 opent de elementenlijst.
VoiceOver (macOS): VO+U opent de rotor; draai naar “Landmarks”; navigeer met de pijltjestoetsen.
VoiceOver (iOS): twee-vinger rotatie naar “Landmarks” op de rotor; veeg omhoog/omlaag.
TalkBack (Android): veeg omhoog dan rechts om het leesbeheer te openen; selecteer de modus “Landmarks”; veeg naar rechts.

Een pagina met goede landmarks geeft de schermlezers-gebruiker met één toetsaanslag een inhoudsopgave.

Veelvoorkomende landmark-fouten

Geen <main>. Zonder een main-landmark moeten schermlezers-gebruikers bij elke paginaweergave voorbij de koptekst tabben. Elke pagina moet precies één <main> hebben.
Meerdere niet-gelabelde <nav>-elementen. Een pagina met zowel een bovenste navigatie als een zijbalknavigatie, elk als <nav>, laat de schermlezers-gebruiker kiezen tussen twee niet te onderscheiden “navigation”-vermeldingen. Label elk met aria-label: <nav aria-label="Primair">, <nav aria-label="Pagina-inhoud">.
role="banner" op een innerlijk element. Een <header> binnen <main> of <article> is geen banner; het is een artikelkoptekst. Voeg daar geen role="banner" aan toe.
Dubbele landmarks. Twee <main>-elementen op één pagina schenden de regel “landmark-no-duplicate-main”. axe en Lighthouse detecteren dit beide.
Regio zonder label. role="region" vereist aria-label of aria-labelledby. Anders negeren schermlezers het element.

Landmarks auditen

Open de pagina in een moderne schermlezer, druk op de sneltoets voor de landmarkslijst en verifieer:

Er is precies één banner, één main en één contentinfo.
Elke <nav> heeft een unieke toegankelijke naam.
De landmarkstructuur komt overeen met de zichtbare paginastructuur.

Een landmarkslijst die luidt “banner, navigation, navigation, main, complementary, contentinfo” zonder verdere labels betekent dat de gebruiker de twee navigaties niet van elkaar kan onderscheiden. Herstel dit.