Sectie 1 · Hoofdstuk 5
Landmarks
Landmarks verdelen je pagina in herkenbare regio's waartussen schermlezergebruikers kunnen navigeren.
Wat zijn landmarks?
Landmarks zijn herkenbare regio’s op een pagina: de header, de navigatie, de hoofdcontent, de footer. Visueel zie je ze aan de lay-out. Maar voor schermlezergebruikers bestaan ze alleen als de HTML ze correct markeert.
Met landmarks kan een schermlezergebruiker in een oogopslag de structuur van je pagina zien en direct naar de gewenste regio springen. Zonder landmarks moet die gebruiker alles van boven naar beneden doorlopen – inclusief het volledige menu, de zoekbalk en eventuele banners – om bij de hoofdcontent te komen.
Waarom het ertoe doet
WCAG succescriterium 2.4.1 (Blokken omzeilen) vraagt om een mechanisme om blokken content die op meerdere pagina’s worden herhaald, te omzeilen. Bijvoorbeeld het hoofdmenu, een zoekbalk en een header die op elke pagina terugkomen.
Een schermlezergebruiker die op elke pagina eerst 40 links in het menu moet doorlopen, raakt gefrustreerd. Toetsenbordgebruikers hebben hetzelfde probleem: ze moeten tab na tab door herhaalde blokken heen drukken.
Er zijn drie technieken die samen het probleem oplossen:
- Landmarks – verdelen de pagina in navigeerbare regio’s
- Skip links – bieden een snelkoppeling naar de hoofdcontent
- Koppenstructuur – maakt navigatie via koppen mogelijk
In dit hoofdstuk richten we ons op landmarks en skip links.
HTML5-landmark-elementen
HTML5 heeft zes elementen die automatisch als landmark worden herkend:
| HTML-element | Impliciete ARIA-rol | Betekenis |
|---|---|---|
<header> | banner (op paginaniveau) | Header van de pagina |
<nav> | navigation | Navigatieblok |
<main> | main | Hoofdcontent van de pagina |
<footer> | contentinfo (op paginaniveau) | Footer van de pagina |
<aside> | complementary | Gerelateerde content (sidebar) |
<section> | region (alleen met label) | Benoemde sectie |
Daarnaast is er <article>, maar dat is geen landmark in de strikte zin. Het markeert een op zichzelf staand stuk content (een blogpost, een nieuwsbericht, een commentaar).
Let op bij header en footer
Een <header> heeft alleen de rol banner als het een direct kind is van <body> (of van een element zonder sectioneringsrol). Een <header> binnen een <article> of <section> is geen landmark. Hetzelfde geldt voor <footer> en de rol contentinfo.
De basisstructuur
Een typische pagina heeft minimaal deze landmarks:
<body>
<header>
<!-- Logo, navigatie, zoekbalk -->
</header>
<nav aria-label="Hoofdnavigatie">
<!-- Menulinks -->
</nav>
<main>
<!-- De unieke content van deze pagina -->
</main>
<footer>
<!-- Contactgegevens, links, copyright -->
</footer>
</body>
Regels voor landmarks
- Eén
<main>per pagina. De hoofdcontent is altijd uniek. Meerdere<main>-elementen zijn niet toegestaan. <header>en<footer>op paginaniveau zijn er ook maar één van als landmark.- Meerdere
<nav>-elementen zijn prima, maar label ze dan zodat ze van elkaar te onderscheiden zijn. - Alle zichtbare content hoort in een landmark te zitten. Content buiten landmarks is voor schermlezergebruikers moeilijk te vinden.
Meerdere navigatieblokken labelen
Veel pagina’s hebben meer dan één navigatieblok: een hoofdmenu, een broodkruimelpad, een footermenu. Als je meerdere <nav>-elementen hebt, geef ze dan een label met aria-label:
Fout
<nav>
<!-- Hoofdmenu -->
</nav>
<nav>
<!-- Footerlinks -->
</nav>
Een schermlezer zegt twee keer “navigatie” zonder onderscheid.
Goed
<nav aria-label="Hoofdnavigatie">
<!-- Hoofdmenu -->
</nav>
<nav aria-label="Voettekstnavigatie">
<!-- Footerlinks -->
</nav>
Een schermlezer zegt “Hoofdnavigatie, navigatie” en “Voettekstnavigatie, navigatie”.
ARIA-landmark-rollen
Soms kun je de HTML5-elementen niet gebruiken – bijvoorbeeld in een oudere codebase of bij frameworks die de markup beperken. Dan kun je ARIA-rollen als fallback gebruiken:
| ARIA-rol | Equivalent HTML-element |
|---|---|
role="banner" | <header> (op paginaniveau) |
role="navigation" | <nav> |
role="main" | <main> |
role="contentinfo" | <footer> (op paginaniveau) |
role="complementary" | <aside> |
role="region" | <section> (met label) |
Niet nodig
<header role="banner">
...
</header>
Redundant. Het <header>-element heeft al de impliciete rol banner.
Goed
<header>
...
</header>
Het HTML5-element is voldoende. Geen ARIA nodig.
De eerste regel van ARIA
Gebruik geen ARIA-rol als er een HTML-element is dat dezelfde semantiek biedt. <nav> is altijd beter dan <div role="navigation">. ARIA voegt niets toe aan het gedrag – het voegt alleen metadata toe aan de accessibility tree.
Skip links
Een skip link is een link die als eerste focusbare element op de pagina staat en de gebruiker direct naar de hoofdcontent laat springen. Zo hoeft een toetsenbordgebruiker niet door het hele menu te tabben.
Goed
<body>
<a href="#main-content" class="skip-link">
Ga naar hoofdinhoud
</a>
<header>
<nav aria-label="Hoofdnavigatie">
<!-- 20+ menulinks -->
</nav>
</header>
<main id="main-content">
<h1>Paginatitel</h1>
...
</main>
</body>
De skip link is vaak visueel verborgen tot de gebruiker er naartoe tabt. Een veelgebruikt CSS-patroon:
.skip-link {
position: absolute;
left: -9999px;
}
.skip-link:focus {
position: static;
left: auto;
}
Skip link en landmarks vullen elkaar aan
Een skip link helpt toetsenbordgebruikers. Landmarks helpen schermlezergebruikers. Gebruik beide. Ze zijn niet uitwisselbaar: niet elke toetsenbordgebruiker gebruikt een schermlezer, en niet elke schermlezer biedt landmark-navigatie.
Schermlezernavigatie in de praktijk
Schermlezergebruikers navigeren op meerdere manieren door een pagina:
- Landmarklijst – alle landmarks op een rij, direct beschikbaar via een sneltoets
- Koppenlijst – alle koppen op een rij
- Tab-toets – springt alleen naar interactieve elementen (links, knoppen, formuliervelden)
Landmarks zorgen ervoor dat de landmarklijst bruikbaar is. Zonder landmarks is die lijst leeg en verliest de gebruiker een belangrijk navigatiemiddel.
WCAG-succescriteria
| Succescriterium | Niveau | Toelichting |
|---|---|---|
| 2.4.1 Blokken omzeilen | A | Landmarks en skip links helpen herhaalde blokken over te slaan |
| 1.3.1 Informatie en relaties | A | Landmarks maken de pagina-indeling programmatisch bepaalbaar |
| 4.1.2 Naam, Rol, Waarde | A | Landmarks met een label (aria-label) hebben een toegankelijke naam |