Digitale toegankelijkheid op jouw website testen

Naar aanleiding van ons webinar over digitale toegankelijkheid op 17 november 2022 willen we graag een aantal tools met jullie delen die ter sprake zijn gekomen. De meeste links verwijzen naar Google Chrome extensties, maar er zijn ook add-ons voor Firefox beschikbaar.

aXe controleert of de pagina voldoet aan WCAG 2.1 AAA richtlijnen. Dit geldt voor de gratis variant. Als betaalde gebruiker heb je meer opties. Let op: aXe toont ook Best practices, maar dit zijn dus niet violations. Deze kun je uitschakelen.

WAVE analyseert de structuur van je pagina en is een goede aanvulling op aXe. Er wordt gekeken naar koppen en landmarks. Je kunt de CSS uitschakelen om het 'skelet' van de pagina te bekijken. Wave heeft ook een built-in contrast checker om hexwaardes met elkaar te vergelijken. Let op: qua kleurcontrast geeft WAVE regelmatig fouten die niet kloppen. Een handmatige controle is hier wenselijk.

Accessibility Insights helpt je alle (toetsenbord)tab stops in kaart te brengen. Zijn alle interactieve elementen met het toetsenbord bereikbaar in een logische volgorde? Let op: deze tool test alleen de bereikbaarheid interactieve elementen, het toetst niet andere toetsenbordfunctionaliteit, zoals het gebruik van ESC bij het sluiten van uitklappers.

HeadingsMap toont alle koppen op een pagina. Koppen geven structuur aan de content. Het is vergelijkbaar met de inhoudsopgave van een boek. Bijkomend voordeel is dat een goede koppenstructuur ook erg belangrijk is voor SEO. De headingsmap geeft het aan wanneer er koppen worden overgeslagen. Let op: Manuele aanvulling is nodig. Ziet tekst eruit als een kop, dan moet deze ook in de headingsmap structuur staan. Koppen moeten ook logisch zijn.

De ContrastChecker controleert of de ratio tussen de voor- en achtergrond voldoende is. Voor normale tekst geldt 4.5:1, voor grote tekst 3:1 en voor interactieve elementen ook 3:1.

Google Lighthouse voert een audit uit en geeft vervolgens een accessibility score weer. 0 is het laagste, 100 het hoogste. Let op: een totaal ontoegankelijke website kan ook een top score van 100 halen.

High contrast test diverse contrasten (bijvoorbeeld greyscale). Door het contrast aan te passen, kun je ervaren hoe bijvoorbeeld iemand met kleurenblindheid de pagina ervaart.

Web developer geeft de mogelijkheid JS en CSS uit te schakelen. Het uitschakelen van de CSS en de JS levert het "skelet" van de pagina op.