Betere digitale toegankelijkheid? Begin met deze 12 tools

De opkomst van AI en slimme testsoftware maakt het steeds makkelijker om digitale toegankelijkheid automatisch te controleren. Dat is een mooie ontwikkeling, want veel technische fouten zijn daardoor sneller te vinden.

Maar toegankelijkheid is meer dan alleen wat software kan signaleren. Vanuit mijn ervaring als onderzoeker digitale toegankelijkheid zie ik dagelijks waar automatische tools waardevol zijn én waar ze tekortschieten. Daarom deel ik in dit artikel 12 tools die ik zelf gebruik om digitale toegankelijkheid in de praktijk te onderzoeken.

Ik heb de tools ingedeeld in vier groepen:

1. Automatische tools
2. Visuele tests
3. Tools voor pdf-documenten
4. Tools voor app-onderzoeken

Per tool leg ik uit wat deze zo goed maakt, wat je ermee kunt controleren en waar je op moet letten bij de beperkingen. Zo kun je snel de juiste tool pakken voor jouw situatie.

Automatische tests

Automatische tests zijn handig om snel een eerste beeld te krijgen van de toegankelijkheid van een pagina. Tools als browserextensies en scanners kunnen in korte tijd veelvoorkomende issues vinden. Denk aan ontbrekende alternatieve teksten, foutieve ARIA-attributen, labelproblemen en contrastfouten.

Zelf gebruik ik deze tools graag om te zien of ik iets over het hoofd heb gezien. In eerste instantie loop ik handmatig een pagina door op toegankelijkheidsfouten. Daarna zet ik een automatische tool aan. Zo maak ik het een sport om alle issues die automatisch gevonden worden, ook zelf te vinden.

Houd rekening met de limitaties van automatische tests. Ze geven vaak false positives en missen juist de dingen die afhankelijk zijn van context, taal en gebruikerservaring. Denk aan of een linktekst duidelijk genoeg is, of de focusvolgorde logisch voelt, of een instructie echt begrijpelijk is. Dit is de reden dat in Nederland maar 20% van een onderzoek geautomatiseerd uitgevoerd mag worden.

Zie automatische tests dus vooral als een hulpmiddel om sneller te vinden waar je moet kijken. Combineer ze altijd met handmatige checks.

axe DevTools-extensie

De axe DevTools-extensie is één van de tools die ik het meest gebruik voor het snel signaleren van toegankelijkheidsproblemen. De extensie is beschikbaar voor Chrome, Firefox en Edge. Er is een gratis en een betaalde versie. De gratis versie is al goed bruikbaar en helpt je om snel een eerste beeld te krijgen van de grootste issues op een pagina. De betaalde versie biedt extra mogelijkheden, zoals gedeeltelijke scans en meer specifieke analyses voor bijvoorbeeld tabellen, pop-ups en afbeeldingen.

Om axe DevTools te activeren, open je eerst de DevTools van je browser. Dit kan door op Inspecteren te klikken via de rechtermuisknop, of met de sneltoets Cmd + Shift + C op Mac of Ctrl + Shift + C op Windows. Vervolgens klik je in de DevTools op de twee chevron-iconen (de dubbele pijltjes) om extra tabbladen te tonen, en kies je daar ‘axe DevTools’. Zie onderstaande afbeelding.

Binnen axe DevTools krijg je een aantal opties te zien. Met een gratis account kun je hier alleen een Full Page Scan uitvoeren. Dat klinkt beperkt, maar deze scan is verrassend volledig. Zodra je op de scan klikt, gaat axe DevTools aan het werk en worden de automatisch gedetecteerde fouten op de pagina verzameld.

De tool toont de gevonden issues overzichtelijk in een lijst. Per issue kun je het bijbehorende onderdeel op de pagina highlighten, zodat je direct ziet waar het probleem zit. In de screenshot zien we bijvoorbeeld dat een afbeelding geen alternatieve tekst heeft. Dit is een probleem, omdat schermlezers dan niet kunnen bepalen wat de functie of inhoud van de afbeelding is. (De feedback op deze afbeelding nemen we mee, red.)

• Decoratieve afbeeldingen horen een lege alternatieve tekst te hebben, zoals: <img alt=””>. Zo weet een schermlezer dat de afbeelding genegeerd mag worden.
• Informatieve afbeeldingen hebben juist een beschrijvende alternatieve tekst nodig, zoals: <img alt=”interface van axe DevTools”>, zodat de informatie wél beschikbaar is voor gebruikers van een schermlezer.

Naast het signaleren van het probleem laat axe DevTools ook zien waarom iets een issue is. De tool geeft een voorbeeld van de relevante code, vaak een suggestie voor een mogelijke oplossing, en verwijst naar het bijbehorende WCAG-succescriterium. Dit maakt het niet alleen een detector, maar ook een handig hulpmiddel om snel te begrijpen wat er misgaat.

Toch heeft axe DevTools ook zijn limitaties. Je krijgt regelmatig false positives: meldingen die technisch gezien als fout worden gezien, maar in de context van de pagina toch kloppen. Als je de WCAG-criteria niet goed genoeg kent, kun je daardoor de verkeerde conclusies trekken. Daarnaast geldt sowieso dat automatische tools niet alles kunnen vinden. Problemen die afhankelijk zijn van taal, betekenis, logica of menselijke interpretatie (zoals onduidelijke linkteksten of slecht geschreven alternatieve teksten) blijven altijd handmatig werk.

SiteImprove

Zelf gebruik ik Siteimprove niet, maar het is een veelgebruikte tool om toegankelijkheidsproblemen eenvoudig te vinden. De tool kan zowel voor websites als apps gebruikt worden.

Voor web is de bekendste optie de Siteimprove Accessibility Checker browserextensie. Die is handig voor pagina’s die je niet makkelijk met een crawler test, zoals multi-step formulieren, dynamische content en afgeschermde/staging pagina’s. Omdat de check in je eigen browser draait, kun je ook password-protected pagina’s veilig controleren.

De werkwijze is eenvoudig: je opent de pagina die je wil testen, klikt op het Siteimprove-icoon in je toolbar en start de check. Daarna krijg je een overzicht van de gevonden issues, met uitleg en de mogelijkheid om onderdelen op de pagina te highlighten, zodat je direct ziet waar het probleem zit.

Naast de extensie heeft Siteimprove ook een platform dat websites (en vaak ook content zoals PDF’s) kan scannen en de resultaten toont in dashboards en rapportages. Dat is vooral prettig als je niet alleen losse pagina’s wil checken, maar ook inzicht wil in patronen en voortgang over tijd.

Net als bij andere automatische tools geldt wel: je moet altijd handmatig blijven controleren. Denk aan inhoudelijke keuzes (zoals de kwaliteit van alt-teksten) en false positives. Zie het dus vooral als een hulpmiddel om snel te vinden waar je moet kijken, niet als een manier om alles definitief af te vinken.

WAVE Evaluation Tool

De WAVE Evaluation Tool (van WebAIM) is een toegankelijke en veelgebruikte manier om snel een eerste indruk te krijgen van de toegankelijkheid van een webpagina. Je installeert de extensie voor Chrome, Firefox of Edge en activeert de tool op de pagina die je wil beoordelen. Omdat de analyse in de browser zelf draait, is dit ook handig voor dynamische of afgeschermde pagina’s, zoals staging of omgevingen achter een login.

Wanneer je WAVE aanzet, plaatst de tool visuele iconen en outlines over de pagina heen. In de sidebar zie je vervolgens een overzicht van wat er gevonden is, onderverdeeld in categorieën zoals Errors, Contrast Errors, Alerts, Features, Structural Elements en ARIA. Klik je een item aan, dan kun je het bijbehorende element op de pagina direct terugvinden en beoordelen.

Visuele tests

Automatische tools kunnen veel toegankelijkheidsproblemen vinden. Denk aan verkeerd gebruikte ARIA-labels, incorrect geformatteerde content of afbeeldingen zonder alternatieve tekst. Maar, er zitten limitaties aan automatische software. Zo kan software niet bepalen of een alternatieve tekst correct is.

Hieronder staan een aantal handige tools voor het onderzoeken van visuele onderdelen van websites.

Image Alt Text Viewer

De alternatieve tekst kwam al aan bod in de paragraaf over axe DevTools. Het handmatig controleren van iedere afbeelding kost veel tijd. Daarom gebruik ik graag de Image Alt Text Viewer-extensie. Deze geeft visueel weer of er een alternatieve tekst gebruikt is. Als er een tekst is toegevoegd aan de afbeelding, zie je direct welke tekst dit is. Ook deze extensie is te downloaden voor Chrome, Firefox en Edge.

In de onderstaande screenshot zien we dat een afbeelding van lampen de alternatieve tekst ‘Potentiële klanten verrassen’ heeft. Deze tekst voegt niets toe voor gebruikers van een schermlezer. Zeker niet omdat deze tekst ook in de titel van de afbeelding staat. (We hebben de feedback van de auteur op deze afbeelding inmiddels verwerkt, red.)

Bij dit soort afbeeldingen kan de alternatieve tekst beter leeggelaten worden. Zoals het bij het artikel hiernaast is gebeurd. Zo weten schermlezers dat het om een decoratieve afbeelding gaat, waardoor deze wordt overgeslagen. Deze handige extensie visualiseert zo in één klik alle alternatieve teksten op een pagina.

Zwart-wit weergave

Deze tool is een musthave voor iedereen die zich met toegankelijkheid bezighoudt. Met één druk op de knop zet je een pagina om naar een zwart-wit weergave (grijstinten). Daarmee controleer je razendsnel of informatie niet alleen via kleur wordt overgebracht. Dat is belangrijk voor mensen met kleurenblindheid, maar ook voor gebruikers met een slecht scherm, fel zonlicht of een monitor met lage kleurweergave.

In de volgende screenshot zien we een voorbeeld van een bewust niet-toegankelijke website van Deque. In de normale weergave is duidelijk dat de rode tekst ‘contact Deque Systems’ klikbaar is, omdat deze tekst een andere kleur heeft dan de lopende tekst. Deze tool is te downloaden voor Chrome of Firefox.

Maar wanneer we de zwart-wit weergave activeren, is dat onderscheid ineens veel minder duidelijk. Alles verandert naar grijstinten, waardoor de linktekst visueel bijna opgaat in de rest van de tekst. Als je links alleen herkenbaar maakt met kleur, missen sommige bezoekers dus het signaal dat er überhaupt iets aanklikbaar is.

Dit raakt direct aan WCAG 1.4.1 Gebruik van kleur. Kleur mag niet de enige manier zijn om informatie of interactie te communiceren. Links zijn daar een klassiek voorbeeld van. Een goede oplossing is om links óók op een andere manier herkenbaar te maken. Dit kan bijvoorbeeld door ze te onderstrepen, dikgedrukt te maken of door een icoon toe te voegen.

Color Contrast Analyser

Veel automatische software heeft ingebouwde contrastcheckers. Maar, deze worden veelal via de browser gebruikt, waardoor je alleen webpagina’s kunt controleren. Als alternatief kun je een tool downloaden, zodat je ook apps, designs en pdf-documenten op contrastverhoudingen kunt controleren.

Een van de meest gebruikte tools voor het controleren van kleurcontrast is de Color Contrast Analyser. Deze gratis tool is te downloaden voor Windows en Mac. Na het installeren van deze intuïtieve tool kun je direct aan de slag.

Gebruik het pipetje om twee kleuren te selecteren of vul de HEX-code direct in. In het onderstaande voorbeeld zien we weer een demo-website van Deque, die bewust ontoegankelijk gemaakt is. De groene tekst van ‘Beginner’ is onderzocht via de Color Contrast Analyser. Deze tool geeft direct weer dat de verhouding 2,2:1 is. Daaronder staat dat dit onvoldoende is voor normale of grote tekst.

Is het niet mogelijk om op je (werk)computer extra software te installeren? Geen probleem. Chrome’s DevTools heeft bijvoorbeeld een ingebouwde contrastchecker. Kies simpelweg een stuk tekst en de browser vertelt je direct of dit voldoende contrast is. Als alternatief kun je een tool gebruiken vanuit de browser, zoals deze kleurcontrastchecker.

Stylus-extensie

WCAG 1.4.12 Text Spacing is een criterium dat je niet even snel met een automatische scan afvangt. Het gaat namelijk om wat er gebeurt als een gebruiker zelf extra ruimte instelt tussen regels, woorden en letters.

Daarom gebruik ik graag de Stylus-extensie. Hiermee kun je de CSS van een website tijdelijk overschrijven, zodat je precies de voorwaarden van 1.4.12 kunt simuleren.

Het uitgangspunt van 1.4.12 is dat tekst leesbaar en bruikbaar moet blijven als een gebruiker de volgende waarden toepast:

• Regelhoogte (regelafstand) naar ten minste 1,5 keer de lettergrootte.
• Afstand tussen alinea’s naar ten minste 2 keer de lettergrootte.
• Letterafstand (spatiëren van letters) naar ten minste 0,12 keer de lettergrootte.
• Spatiëren van woorden naar ten minste 0,16 keer de lettergrootte.

Om dit te testen, installeer je eerst de Stylus-extensie. Vervolgens maak je een nieuwe stijl aan (voor de domeinnaam die je test) en voeg je de volgende CSS toe. Zie het screenshot voor de plek waar je dit invult.

* {
line-height: 1.5 !important;
letter-spacing: 0.12em !important;
word-spacing: 0.16em !important;
}
p {
margin-bottom: 2em !important;
}

Met deze styling dwing je de pagina om de ‘stresstest’ van 1.4.12 te doorstaan. Daarna loop je de content door en controleer je of er geen functionaliteit of content verloren gaat. Denk aan tekst die:

• Wordt afgekapt doordat containers een vaste hoogte hebben
• Over elkaar heen valt (vooral in navigatie, labels, buttons en cards).
• Uit beeld verdwijnt of achter andere elementen terechtkomt.
• Onleesbaar wordt doordat woorden of letters tegen andere onderdelen aanlopen

Stylus maakt dit testen dus heel praktisch. Je kunt in één klik de extra spacing aan- en uitzetten, problemen snel reproduceren en een screenshot maken van het probleem. Daardoor is het voor developers ook direct duidelijk waar de CSS te rigide is en welke componenten aangepast moeten worden. Deze extensie is beschikbaar voor Chrome, Edge en Firefox.

Window Resizer

Window Resizer Voor het testen van 1.4.4 Resize text en 1.4.10 Reflow wil je vaak snel schakelen tussen verschillende schermbreedtes. Dat kan natuurlijk door steeds je browservenster handmatig te slepen, maar dat kost veel tijd en je eindigt zelden op exact dezelfde afmetingen. Daarom gebruik ik graag de Window Resizer Chrome-extensie (ook te downloaden voor Firefox en Edge). Hiermee zet je je venster met één klik op vaste formaten zoals 320px, 768px of 1280px breed. Zo kun je heel gericht controleren of de layout en tekst zich goed blijven gedragen.

Bij 1.4.10 Reflow is vooral de breedte van 320 CSS-pixels belangrijk. Door de viewport naar 320px te zetten, zie je meteen of onderdelen netjes ‘mee vouwen’ of dat er problemen ontstaan. Denk aan horizontaal scrollen om tekst te kunnen lezen, knoppen die buiten beeld vallen of kolommen die over elkaar heen schuiven. Met Window Resizer kun je dit snel per pagina herhalen, zonder dat je telkens opnieuw hoeft te gokken naar de juiste vensterbreedte.

Voor 1.4.4 Resize text combineer ik Window Resizer vaak met de browserzoom. Ik zet bijvoorbeeld eerst het venster op 1280 px breed en zoom daarna naar 200%. Daarna test ik hetzelfde op 768 px en op 320 px. Zo zie je snel of teksten niet worden afgekapt in knoppen, of form labels nog zichtbaar zijn, en of navigatie- en interactie-elementen bruikbaar blijven. Zeker bij componenten met vaste hoogtes of strakke layouts vallen dit soort issues direct op.

Deze extensie maakt het testen vooral makkelijker, omdat je consistent werkt. Je controleert steeds dezelfde breedtes en kunt bevindingen ook heel duidelijk opschrijven, bijvoorbeeld ‘breekt bij 320px’ of ‘knoptekst valt weg bij 200% zoom op 768px’. Daardoor is het voor developers ook eenvoudiger om het probleem te reproduceren en op te lossen.

Pdf-documenten onderzoeken

Bij het onderzoeken van pdf-bestanden gelden in de basis dezelfde toegankelijkheidscriteria als bij websites. Ook hier check je dingen als kleurcontrast, duidelijke (herkenbare) links, toegankelijke formulieren, en een logische structuur/semantiek met koppen, lijsten en tabellen.

Alleen zit het in pdf’s net anders in elkaar. Wat er op het scherm ‘goed uitziet” kan onder water alsnog verkeerd zijn opgebouwd. Een kop kan bijvoorbeeld visueel groot en vet zijn, maar technisch gewoon platte tekst. En de leesvolgorde kan afwijken van wat je verwacht, zeker bij kolommen, tekstvakken of complexe layouts. Daarom test je bij pdf-documenten niet alleen de weergave, maar vooral ook de onderliggende opbouw: tags, structuur en volgorde.

PAC 2026

PAC is een gratis tool om pdf’s te controleren op toegankelijkheid. Het is vooral populair, omdat je met één druk op de knop kunt scannen op (delen van) PDF/UA- en WCAG-eisen. Daarnaast krijg je een overzichtelijk resultaat en rapport van.

Een belangrijke praktische kanttekening: PAC is een Windows-tool (Windows 10/11) en vereist o.a. .NET Framework. Op macOS kun je het dus niet lokaal gebruiken. (Er bestaat wel een webvariant, axesCheck, maar dat is een andere oplossing en niet dezelfde ‘gratis Windows-app’.) PAC is sterk in het signaleren van issues: je krijgt bijvoorbeeld meldingen over ontbrekende of foutieve tags, problemen met documentinstellingen (zoals titel/taal), en diverse PDF/UA-structuurvoorwaarden. Daarnaast ondersteunt het ook een visuele controle en preview om bevindingen te beoordelen.

Adobe Acrobat Pro

Zeker voor diegenen die Creative Cloud van Adobe al afnemen, is Acrobat Pro een goede tool. De tool is weliswaar betaald, maar je krijgt er ontzettend veel voor terug. Een van de belangrijkste onderdelen van de tool is de mogelijkheid om de tags van het bestand terug te zien. Met een klik op de knop van een ‘tag’ kun je direct zien hoe het document is opgebouwd. Zo zie je bijvoorbeeld of een visuele tussenkop daadwerkelijk een header is en geen dikgedrukte tekst. Ook zie je snel of een tabel van een header is voorzien.

In het volgende voorbeeld zien we bijvoorbeeld in de tags dat de visuele opmaak programmatisch is bepaald door een tabel, terwijl dit geen echte tabel met gegevens is. Daardoor krijgt de content onterecht tabel-semantiek, wat verwarrend kan zijn voor schermlezers.

Daarnaast kun je via ‘Bestand’ naar ‘Eigenschappen’. Hier kun je eenvoudig drie aspecten van een pdf-bestand controleren. Ten eerste zie je snel of het bestand voorzien is van een logische en beschrijvende documenttitel. Daarnaast staat hier weergegeven of het bestand gecodeerd is / voorzien is van tags. Tenslotte kun je zien of er een documenttaal gedefinieerd is en vooral of dit de juiste is.

Daarnaast biedt Adobe Acrobat Pro nog meer toegankelijkheidsfuncties die handig zijn als eerste controle of startpunt. Zo kun je via ‘Tools’ > ‘Accessibility’ een Toegankelijkheidscontrole (Accessibility Check) uitvoeren. Deze scan controleert onder andere of er tags aanwezig zijn, of er een titel is ingesteld, of er alternatieve tekst bij afbeeldingen staat en of tabellen basisstructuur hebben.

Dit is vooral handig om snel de grootste aandachtspunten te vinden. Ook heeft Acrobat Pro functies zoals ‘Autotag Document’ en (bij gescande pdf’s) OCR / tekstherkenning. Daarmee kan Acrobat proberen om een ongestructureerd of gescand document automatisch om te zetten naar een doorzoekbare pdf met een eerste opzet van tags. Dat kan veel tijd besparen, zeker bij documenten die nog helemaal ‘plat’ zijn.

Belangrijk is wel dat deze automatische functies duidelijke beperkingen hebben. De tool kan vaak niet betrouwbaar bepalen wat de bedoelde structuur is.

Apps onderzoeken

Het testen van toegankelijkheid voor websites en apps lijkt op elkaar, maar in de praktijk pak je het net anders aan. Bij websites werk je vooral met HTML, CSS en ARIA en test je in de browser. Tools zoals extensies en DevTools helpen je snel om issues te vinden, en je kunt makkelijk variëren met viewportgroottes, zoom en custom CSS om WCAG-criteria te controleren.

Bij apps zit je vaker in een andere wereld. Je test niet alleen de UI, maar ook hoe het scherm zich gedraagt met VoiceOver of TalkBack, hoe de focusvolgorde loopt, of componenten een goede toegankelijke naam hebben en of knoppen groot genoeg zijn om te bedienen. Veel checks zijn daardoor meer flow-based: je doorloopt schermen en interacties, in plaats van ‘één pagina scannen’.

Appt-app

Met de Appt-app kun je gratis leren hoe je een toegankelijke app ontwikkelt. In de app staan meer dan 200 artikelen over onderwerpen zoals toegankelijkheidsrichtlijnen, hulpmiddelen voor mensen met een beperking en praktische codevoorbeelden.

Handig als je snel iets wil opzoeken tijdens het ontwerpen of bouwen, maar ook als je stap voor stap je kennis wil uitbreiden. De app is beschikbaar in het Nederlands én in het Engels en voor zowel iOS– als Android-apparaten.

Abra Desktop

Abra Desktop is een Nederlandse tool om de toegankelijkheid van mobiele apps te testen vanaf je Mac. De software is (nog) niet beschikbaar voor Windows-computers. De tool detecteert aangesloten Android- en iOS-toestellen en laat je vervolgens per app rapporten en schermen aanmaken, waarna je per scherm een automatische scan kunt draaien of handmatig issues kunt toevoegen.

De tool koppelt eventuele bevindingen direct aan de interne documentatie en Abra Academy. Dit maakt het makkelijker voor developers om de issues op te lossen en voor auditors om deze te vertalen naar de opdrachtgever.

Zelf digitale toegankelijkheid testen

Tools zijn ideaal om snel richting te krijgen tijdens een toegankelijkheidsaudit, maar ze vereisen altijd een mens die de output controleert. Zie zo’n scan dus vooral als een hulpmiddel om sneller te vinden waar je moet kijken.  Combineer het altijd met handmatige checks.

Maak het jezelf makkelijk: bouw een vaste routine op. Eerst zelf doorlopen, daarna een automatische scan, en vervolgens gericht verdiepen in de onderdelen waar vaak fouten voorkomen. Zo haal je het tempo uit tooling, maar houd je de kwaliteit van een echte beoordeling.