Hoe voer je een toegankelijkheidsreview uit?

Inzicht krijgen in hoe toegankelijk je module, thema of website is, kan een overweldigende taak lijken. Als je nieuw bent in toegankelijkheid, weet je misschien niet goed waar te beginnen. Rekening houden met een brede diversiteit aan mogelijkheden betekent dat je een even brede reeks overwegingen moet meenemen. In deze documentatie hebben we de belangrijkste aandachtspunten opgesomd in een logische, stapsgewijze methode om de toegankelijkheid van je module, thema of site te beoordelen.

Begin met het uitvoeren van een geautomatiseerde scan

Veel toegankelijkheidsproblemen kunnen worden opgespoord door je pagina te testen met geautomatiseerde tools. Enkele van deze tools zijn WAVE, Tenon, Accessibility Insights, Google Lighthouse, Siteimprove en de Siteimprove Accessibility Checker-extensie voor Chrome. Sommige hiervan kunnen gedeeltelijk worden geautomatiseerd met axe-core. Deze tools helpen je snel problemen te vinden zoals verkeerde HTML-structuren, ontbrekende ARIA-attributen of onvoldoende kleurcontrast.

Toetsenbordnavigatie testen

Navigeren met het toetsenbord is essentieel voor gebruikers die geen muis kunnen of willen gebruiken. Dit omvat gebruikers van schermlezers en mensen met motorische beperkingen zoals RSI of verlamming. Voor een goede toetsenbordervaring is een logische tabvolgorde en een duidelijk zichtbaar focusstijl nodig. Controleer ook dat de gebruiker niet door een overmatig aantal tabstops hoeft te navigeren.

Waar op te letten

• Kun je herhaalde inhoud overslaan?

Er moet een “skip link” zijn die de gebruiker direct naar de hoofdinhoud brengt, zodat herhalende navigatie kan worden overgeslagen. Deze link moet de eerste tabstop op de pagina zijn en zichtbaar worden bij focus.

• Werken alle bedieningselementen volledig?

Alle interactieve elementen moeten met het toetsenbord te bedienen zijn. Dit omvat uitklapmenu’s, boomstructuren, schuifregelaars, modale vensters, drag-and-drop, enzovoort. Als iets niet met het toetsenbord te bedienen is, moet er een alternatief zijn.

• Kun je vooruit en achteruit tabben?

Zorg dat navigatie in beide richtingen werkt (Tab en Shift+Tab). Anders ontstaat een toetsenbordval waaruit de gebruiker niet kan ontsnappen.

• Zijn er toetsenbordvallen?

Voorkom dat de focus vast komt te zitten. Gebruikers moeten modals, overlays of automatische dropdowns kunnen sluiten of verlaten met het toetsenbord.

• Is de focus beperkt wanneer er een dialoogvenster open is?

Wanneer een dialoog geopend is, moet de toetsenbordfocus binnen dat venster blijven. Anders kan de gebruiker door andere pagina-elementen navigeren zonder te zien waar de focus is.

• Is de focus altijd zichtbaar?

Elk interactief element moet een zichtbare focusindicator hebben. Zonder zichtbare focus kan de gebruiker niet weten waar hij zich bevindt op de pagina.

• Is er verborgen inhoud die via het toetsenbord bereikbaar is?

Zorg dat verborgen elementen niet per ongeluk focus kunnen krijgen via tab-navigatie.

• Heeft hover-inhoud een toetsenbordalternatief?

Alle informatie die verschijnt bij hover moet ook met het toetsenbord toegankelijk zijn. Dit is belangrijk voor zowel toetsenbord- als touchgebruikers.

• Zijn er niet-interactieve elementen die toch focus krijgen?

Niet-interactieve elementen mogen niet focusbaar zijn. Voeg geen tabindex="0" toe aan elementen die geen interactie vereisen.

• Is de tabvolgorde natuurlijk en logisch?

Als tabindex-handmatig is ingesteld of de visuele lay-out niet overeenkomt met de DOM-volgorde, kan dat verwarring veroorzaken bij toetsenbordgebruikers.

Controleer je breakpoints

Herhaal de toetsenbordtesten terwijl je inzoomt tot verschillende responsive breakpoints. Gebruikers met sterke vergroting ervaren de mobiele of tabletweergave op een desktop, dus die moeten ook toegankelijk zijn.

Koppen

Koppen vormen de ruggengraat van je inhoud. Een goede kopstructuur weerspiegelt de inhoudshiërarchie van je pagina. Beschrijvende koppen helpen gebruikers van schermlezers de structuur en onderwerpen snel te begrijpen.

Waar op te letten

• Is er maar één H1-element op de pagina?

Elke pagina moet precies één H1 hebben die het onderwerp van de pagina beschrijft.

• Komen de kopniveaus overeen met de inhoudshiërarchie?

Koppen moeten logisch genest zijn (H2 binnen H1, H3 binnen H2, enz.). Sla geen niveaus over en gebruik koppen niet alleen voor visuele opmaak.

• Zijn kopteksten beschrijvend genoeg?

Een kop moet kort en duidelijk aangeven waar de volgende sectie over gaat.

Kleur en contrast

Voldoende kleurcontrast

De verhouding tussen tekstkleur en achtergrondkleur moet minimaal 4,5:1 zijn. Gebruik een kleurcontrast-checker om dit te testen.

Kleur mag niet de enige manier zijn om informatie over te brengen

Kleur alleen is onvoldoende, want gebruikers met kleurenblindheid kunnen deze informatie missen. Gebruik extra signalen zoals tekst, iconen of patronen. Voorbeelden:

• Gebruik labels zoals “aan/uit” naast gekleurde indicatoren.
• Gebruik iconen met betekenisvolle vormen.
• Markeer fouten niet alleen in rood, maar ook met een symbool of tekst.

Focusindicatoren mogen ook niet alleen door kleur worden aangeduid — voeg bijvoorbeeld een duidelijke rand toe.

Niet alleen pictogrammen

Als een pictogram een functie vertegenwoordigt, voeg dan tekst toe die de betekenis uitlegt. Navigatie- en bedieningsiconen moeten labels hebben zodat ze door schermlezers worden aangekondigd.

Audio en video

Voor alle media-inhoud moeten ondertiteling of transcripties beschikbaar zijn. Zie de WebAIM-handleiding over captions en transcripties voor meer informatie.

• Informerende video’s met of zonder geluid moeten een teksttranscript hebben.
• Video’s met geluid moeten gesloten ondertiteling bevatten.
• Complexe video’s kunnen audiobeschrijvingen vereisen om acties en context uit te leggen.
• Voor live video moet ondertiteling beschikbaar zijn.
• Voor live audio moet een tekstalternatief beschikbaar zijn.

Dit valt onder WCAG-richtlijn 1.2: Time-based Media.

Animatie en automatisch afspelende media

Automatisch afspelende animaties, video’s of audio kunnen gebruikers afleiden. Zelfs als ze buiten beeld lijken, kunnen ze de ervaring verstoren.

• Vermijd automatisch afspelende inhoud die langer dan 5 seconden duurt.
• Bied pauze- en stopknoppen aan voor animaties en video’s.

Dynamische inhoud

JavaScript kan inhoud wijzigen zonder herladen van de pagina. Gebruikers van schermlezers moeten worden geïnformeerd over deze wijzigingen. Voorbeelden zijn zoekresultaten die live worden bijgewerkt of waarschuwingen. Gebruik het Drupal.announce()-API, dat is gebaseerd op ARIA live regions.

De beste manier om dit te testen is door een schermlezer te gebruiken.

Testen met schermlezers

Automatische controles en toetsenbordtests dekken al veel, maar sommige problemen worden alleen zichtbaar via een schermlezer.

Waar op te letten

• Heeft elk bedieningsonderdeel een label?

Alle invoervelden, knoppen en links moeten duidelijke labels hebben. Complexe widgets kunnen gebruikmaken van het aria-labelledby-attribuut.

• Zijn aangepaste componenten correct gedefinieerd met ARIA-rollen en -attributen?

Gebruikers van ondersteunende technologie moeten dezelfde informatie krijgen als visuele gebruikers. Gebruik ARIA om de juiste rol, toestand en eigenschappen toe te voegen.

• Komt de leesvolgorde overeen met wat visueel zichtbaar is?

De logische volgorde van inhoud moet behouden blijven, ook als CSS de visuele volgorde wijzigt.

• Zijn linkteksten duidelijk en betekenisvol?

Schermlezers zeggen “link” vóór elke link, dus herhaal dat niet in de tekst. Links als “klik hier” of “meer info” zijn te vaag — ze moeten betekenisvol zijn buiten context.

• Hebben afbeeldingen de juiste alt-tekst?

Alle betekenisvolle afbeeldingen moeten een beschrijvende alt-tekst hebben. Decoratieve afbeeldingen moeten een lege alt-waarde krijgen.

Handmatig testen met een schermlezer

Bepaalde problemen kunnen alleen worden ontdekt door handmatig te testen met een schermlezer. Populaire schermlezers zijn VoiceOver (macOS) en NVDA (Windows). Bekijk de basisvideo over VoiceOver of de introductie van NVDA, en lees hoe je NVDA met Firefox kunt gebruiken om je webpagina’s te testen.

Wanneer je de basiscommando’s kent, probeer dan te navigeren zonder muis of beeldscherm. Het kost tijd om deze manier van werken aan te leren, maar het biedt waardevolle inzichten in de toegankelijkheid van je site.

Elke schermlezer werkt iets anders; test daarom met verschillende programma’s, browsers en platforms om een volledig beeld te krijgen.