Wat zijn landmarks en waarom zijn ze belangrijk voor webtoegankelijkheid?

Wat zijn landmarks en waarom zijn ze belangrijk?

Als je een website bezoekt, navigeer je waarschijnlijk visueel en intuïtief: je ziet het menu, een header, de content en een footer. Maar voor gebruikers die afhankelijk zijn van schermlezers, werkt dat heel anders. Zij vertrouwen op structuur en landmarks om te begrijpen hoe een pagina is opgebouwd.

Landmarks zijn HTML-elementen zoals <main>, <nav>, <header>, <footer>, <aside> en <section>. Ze dienen als bakens op een pagina, waarmee gebruikers van schermlezers snel kunnen navigeren tussen de hoofdonderdelen van de website.

Waarom zijn landmarks belangrijk?

• Toegankelijkheid: Mensen met visuele beperkingen of cognitieve uitdagingen kunnen sneller en efficiënter door een site navigeren.
• Gebruiksvriendelijkheid: Een duidelijke structuur helpt ook zoekmachines én gebruikers die keyboard-navigatie gebruiken. Je gebruikt dit dus nadrukkelijk niet alleen voor toegankelijkheid. Ook de zoekmachines hebben hier baat bij!
• WCAG-compliance: Volgens de Web Content Accessibility Guidelines (WCAG) is het gebruik van landmarks aanbevolen om te voldoen aan belangrijke toegankelijkheidscriteria.

Hoe controleer je het gebruik van landmarks?

Een eenvoudige manier om te testen of je website effectief gebruikmaakt van landmarks is via de browserextensie Accessibility Insights for Web.

1. Automatisch scannen met FastPass

Met de FastPass-functie van Accessibility Insights kun je snel toegankelijkheidsproblemen detecteren, waaronder ontbrekende of fout geplaatste landmarks.

Stappen:

• Installeer de extensie via de Chrome Web Store.
• Open je webpagina in de browser.
• Klik op de extensie en start een FastPass-scan.
• Bekijk het onderdeel 'Landmarks' in het resultatenoverzicht. Je krijgt direct visuele feedback over aanwezige landmarks en mogelijke hiaten.

2. Handmatig controleren via de 'Assessment'-modus

Naast de automatische scan biedt Accessibility Insights ook een handmatige evaluatie. Hiermee kun je grondiger controleren of landmarks correct zijn toegepast en goed functioneren.

Zo werkt het:

• Ga naar in de extensie naar Ad Hoc tools
• Kies het onderdeel "Landmarks".
• De tool toont je de landmarks die nu op de pagina ingesteld staan

👉 Bekijk onderstaand onze demonstratievideo waarin we stap voor stap laten zien hoe je landmarks handmatig controleert met Accessibility Insights for Web.

Best practices voor het gebruik van landmarks

• Gebruik slechts één <main> per pagina.
• Gebruik <nav> voor primaire of secundaire navigatie-elementen.
• Plaats globale elementen zoals <header> en <footer> buiten <main>, of juist binnen specifieke secties voor lokale context.
• Voorkom overbodige of overlappende landmarks.
• Zorg voor duidelijke en unieke rollen per landmark, vooral bij meerdere navigatiegebieden.

Landmarks instellen in Elementor (WordPress)

Werk je met Elementor in WordPress? Dan kun je ook binnen deze visuele builder landmarks toepassen om je site toegankelijker te maken. Elementor biedt standaard HTML-tags aan voor secties, zodat je eenvoudig de juiste semantiek kunt kiezen.

Zo stel je een landmark in:

1. Selecteer een Section of Inner Section in je Elementor-canvas.
2. Ga in het linker menu naar het tabblad "Advanced".
3. Open het onderdeel "HTML Tag" (onder "Layout" bij oudere versies).
4. Kies hier de juiste HTML-tag, zoals <header>, <nav>, <main>, <footer> of <aside>.

Let erop dat je slechts één <main> per pagina gebruikt en dat je navigatie-elementen altijd binnen een <nav> plaatst. Door dit consequent toe te passen, help je schermlezers én voldoe je beter aan de WCAG-richtlijnen.

Landmarks integreren in je designproces

Bij Ambasco nemen we toegankelijkheid mee vanaf het eerste ontwerpschets. We zorgen voor een heldere hiërarchie in zowel visueel als semantisch ontwerp. Onze ontwikkelaars en contentcreators werken nauw samen om websites te bouwen die niet alleen mooi en functioneel zijn, maar ook toegankelijk voor iedereen.

Heb je hulp nodig bij het verbeteren van de toegankelijkheid van je website of app? Of wil je weten of jouw huidige opzet voldoet aan WCAG-richtlijnen? Neem gerust contact met ons op.