Het belang van landmarks voor toegankelijkheid
Veel pagina’s bevatten herhalende blokken (header, menu, zoekveld, footer). Voor iemand die via het toetsenbord door de website navigeert kan dat betekenen: op élke pagina weer door dezelfde onderdelen heen tabben of “lezen” voordat je bij de inhoud bent. Landmarks bieden een mechanisme om die blokken te omzeilen of gericht te benaderen.
Landmarks
Er zijn twee manieren om een website in te delen in secties/landmarks. De beste en makkelijkste manier is door standaard (native) HTML te gebruiken. Deze structuren hebben van zichzelf al semantische waarde. Voorbeelden van deze landmarks zijn:
- <header> voor de header.
- <nav> voor navigatie.
- <main> voor de paginacontent.
- <footer> voor de footer van de website.
- <form> voor een formulier met invoervelden en knoppen.
Codevoorbeeld van landmarks
<body>
<header>
<!-- logo, zoekfunctie, etc. -->
</header>
<nav aria-label="Hoofdnavigatie">
<!-- primaire menu-items -->
</nav>
<main id="main">
<h1>Paginatitel</h1>
<!-- hoofdcontent -->
</main>
<footer>
<!-- contact, copyright -->
</footer>
</body>Region landmarks (ARIA)
Voordat we ingaan op het indelen van pagina’s via aria-rollen is het belangrijk om de eerste regel van ARIA te benadrukken. ‘De eerste regel van ARIA is, gebruik geen ARIA maar native HTML’. Onjuist gebruik van ARIA kan voor meer ontoegankelijkheid zorgen dan het oplost.
Wanneer je via ARIA-rollen een webpagina wilt indelen, gebruik je aria-regions. Hiermee kun je div-elementen, die van zichzelf geen semantische waarde hebben, toch indelen in secties. Dit doe je door een sectie- of div-element te voorzien van de rol ‘region’.
Let wel op dat je een element dat de rol ‘region’ bevat altijd voorziet van een toegankelijke naam via aria-labelledby. Als je dit niet doet, is het element wel een sectie, maar wordt er geen naam opgelezen aan gebruikers van schermlezers.
<section aria-labelledby="related-title" role="region">
<h2 id="related-title">Gerelateerde artikelen</h2>
…
</section>Op veel pagina’s kom je meerdere landmarks van hetzelfde type tegen. Denk aan een hoofdnavigatie, een subnavigatie (bijvoorbeeld in een sidebar of als inhoudsopgave) en een set footerlinks. Voor een screenreader worden dat dan meerdere “navigatie”-gebieden. Als ze geen onderscheidende naam hebben, klinkt dat al snel als: “navigation, navigation, navigation”, zonder dat duidelijk is welke je nodig hebt.
Daarom geldt: zodra je meerdere landmarks van hetzelfde type gebruikt, geef je ze een unieke, beschrijvende naam. Dat doe je met:
- aria-label: je geeft het landmark direct een tekstlabel.
- aria-labelledby: je laat het landmark verwijzen naar een bestaand element op de pagina (meestal een heading), zodat die tekst als naam wordt gebruikt.
Kies labels die voor gebruikers logisch zijn, zoals “Hoofdnavigatie”, “Subnavigatie”, “Broodkruimels” of “Footerlinks”.
Landmarks voor digitale toegankelijkheid
Landmarks zorgen voor een duidelijke, voorspelbare paginastructuur en maken het voor gebruikers van toetsenbord en screenreaders veel makkelijker om snel naar de juiste plek te navigeren.
Door native HTML-landmarks correct te gebruiken en (waar nodig) ARIA region-landmarks goed te benoemen, voldoe je aan succescriterium 2.4.1 én verbeter je de gebruikservaring.