Landmarks: de plattegrond van uw pagina voor screenreaders

Wie een winkelcentrum binnenloopt, kijkt eerst op de plattegrond bij de ingang. Daar ziet u in één oogopslag waar de ingangen, de winkels en de toiletten zijn. Een webpagina heeft voor ziende bezoekers zo’n plattegrond vanzelf: de balk bovenaan, het menu, de inhoud in het midden, de voettekst onderaan. Voor iemand met een schermlezer moet die plattegrond in de code staan. Daarvoor zijn landmarks, en voor de toegankelijkheid van uw pagina doen ze meer dan hun bescheiden plek in de HTML doet vermoeden.

Wat landmarks voor toegankelijkheid doen

Landmarks zijn gebieden op een pagina die in de code een vaste betekenis hebben. Schermlezers kennen die betekenis en bieden gebruikers een sneltoets om ertussen te springen, of een lijst om er een uit te kiezen. Een gebruiker hoeft dan niet de hele header en het menu door te luisteren, maar springt direct naar “hoofdinhoud”.

In HTML maakt u landmarks met een handvol elementen:

Element	Landmark	Waarvoor
<header>	banner	De kop van de site met logo en vaak zoekfunctie
<nav>	navigatie	Menu’s en andere navigatieblokken
<main>	hoofdinhoud	De unieke inhoud van deze pagina
<aside>	aanvullend	Zijbalk of blok dat bij de inhoud hoort maar er los van kan staan
<footer>	contentinfo	Voettekst met contactgegevens, links en juridische informatie

Een <header> en <footer> tellen alleen als landmark als ze direct in de pagina staan, niet als ze binnen een artikel of sectie zitten. Daarnaast zijn er landmarks voor een zoekfunctie (met role="search" op het zoekformulier) en voor formulieren en secties die een naam hebben gekregen.

Hoe een schermlezergebruiker landmarks gebruikt

Stel, iemand met NVDA opent de productpagina van een webshop. Hij drukt op de toets D, en de schermlezer springt naar het volgende landmark: “banner”. Nog eens D: “navigatie, Hoofdmenu”. Nog eens: “hoofdinhoud”. Daar begint hij te lezen. Wil hij later naar de voettekst om het telefoonnummer te vinden, dan springt hij er rechtstreeks heen.

In VoiceOver op de Mac en iPhone gaat het via de rotor, waar landmarks als aparte categorie staan. Het idee is hetzelfde: snel naar het juiste gebied, zonder alles te moeten aanhoren.

Landmarks werken zo samen met koppen. Landmarks geven de grote indeling, koppen de indeling binnen de inhoud. Hoe u koppen opbouwt, staat in de kopstructuur van uw website.

Wat WCAG ervan vraagt

WCAG noemt landmarks niet bij naam als verplichting. Ze helpen wel om aan twee succescriteria te voldoen:

• 1.3.1 Info en relaties (niveau A): de structuur die visueel zichtbaar is, moet ook in de code staan.
• 2.4.1 Blokken omzeilen (niveau A): er moet een manier zijn om herhaalde blokken over te slaan. Landmarks helpen schermlezergebruikers daarbij, al blijft een skip-link nodig voor toetsenbordgebruikers zonder schermlezer.

Een goede opbouw in de praktijk

Een eenvoudig skelet van een pagina:

<header>
  <a href="/">Logo</a>
  <form role="search">...</form>
  <nav aria-label="Hoofdmenu">...</nav>
</header>

<main id="hoofdinhoud">
  <h1>Paginatitel</h1>
  ...
</main>

<aside aria-label="Gerelateerde artikelen">...</aside>

<footer>
  <nav aria-label="Footermenu">...</nav>
  ...
</footer>

Een paar vuistregels:

1. Precies één <main> per pagina. Er is maar één hoofdinhoud.
2. Alle inhoud zit in een landmark. Losse tekst buiten elk gebied is voor schermlezergebruikers die via landmarks navigeren lastig te vinden.
3. Niet te veel. Elk blok een eigen <aside> of <nav> geven, maakt de lijst zo lang dat hij zijn nut verliest.
4. Gebruik de HTML-elementen, niet div’s met een role-attribuut, als dat kan. Het resultaat is hetzelfde, maar minder foutgevoelig.

Dubbele navigatie: labels geven

Bijna elke site heeft meer dan één navigatie. Een hoofdmenu, een menu in de footer, soms een broodkruimelpad of een submenu in de zijbalk. Als ze allemaal een <nav> zijn zonder naam, hoort de schermlezergebruiker drie keer “navigatie” en weet hij niet welke welke is.

De oplossing is een label per navigatie:

<nav aria-label="Hoofdmenu">
<nav aria-label="Broodkruimelpad">
<nav aria-label="Footermenu">

Zet het woord “navigatie” niet in het label: de schermlezer zegt dat zelf al, en u krijgt dan “Hoofdnavigatie navigatie”. Hetzelfde geldt als u meerdere <aside>-blokken heeft. Meer over hoe en wanneer u een aria-label inzet, leest u in aria-label uitgelegd.

Landmarks in WordPress-thema’s en pagebuilders

De meeste moderne WordPress-thema’s zetten de basis-landmarks goed neer. Bij blokthema’s kunt u bij de groepsblokken voor de header, inhoud en footer kiezen welk HTML-element ze worden. Kies daar dus bewust voor header, main en footer, niet voor de standaard div.

Pagebuilders zijn een ander verhaal. Een header die met Elementor of Divi wordt opgebouwd, bestaat vaak uit geneste div‘s. Of er landmarks worden gebruikt, hangt af van de instellingen van de sectie of het template. In Elementor kunt u bij een container het HTML-element instellen. Controleer ook of uw thema en de builder niet allebei een <main> zetten, want dan staan er twee op de pagina.

Zelf controleren

• Browserextensie: extensies als “Landmark Navigation via Keyboard or Pop-up” tonen alle landmarks op de pagina.
• WAVE: toont onder het tabblad voor structuur de landmarks en koppen samen.
• Ontwikkelaarstools: in het toegankelijkheidspaneel van Chrome of Firefox ziet u de boomstructuur met de rollen van de elementen.
• Schermlezer: spring met NVDA via D door de landmarks en luister of het klopt.

Let bij de controle op: is er precies één hoofdinhoud? Staat alle inhoud in een gebied? Hebben dubbele navigaties een eigen naam? Dit soort structuurwerk is meestal één keer aanpassen in het thema, waarna het voor de hele site geldt. Het hoort bij de vaste punten op de pagina uw WordPress-website toegankelijk maken. Het grotere geheel vindt u bij een toegankelijke website voor iedereen.