Snelle toegankelijkheidstests die iedereen kan uitvoeren

Je hoeft geen WCAG-expert te zijn om toegankelijkheidsproblemen te kunnen vinden. Veel van de meest voorkomende fouten ontdek je al met een paar eenvoudige stappen. Zonder speciale kennis en in minder dan vijf minuten per test.

De problemen die je met deze tests kan vinden raken echte mensen:

Mensen met een visuele beperking die afhankelijk zijn van voldoende contrast of een schermlezer.
Mensen met een motorische beperking die alleen het toetsenbord kunnen gebruiken.
En mensen met een cognitieve beperking die duidelijke structuur en herkenbare patronen nodig hebben.

In dit artikel laat ik je wat snelle tests zien die je direct kunt uitvoeren. Per test beschrijf ik wat je zoekt, hoe je test en waar je meer leest als je dieper wilt gaan.

Wat je nodig hebt

Voor de meeste tests heb je genoeg aan een browser en een toetsenbord. Voor een paar tests gebruik je een extra hulpmiddel:

Colour Contrast Analyser (CCA): een gratis programma waarmee je de contrastverhouding tussen twee kleuren meet. Download Colour Contrast Analyser.
headingsMap: een browserextensie die de koppenstructuur van een pagina toont in een overzichtelijk venster. Beschikbaar voor Firefox, Chrome en Edge.
Ontwikkelaarstools van je browser: de Inspector die je opent met rechtermuisknop → “Inspecteren” of met F12.

Test altijd in minstens twee browsers. Sommige browsers hebben een eigen focusstijl waardoor problemen misschien niet direct opvallen.

Toetsenbord en focus

De tests in deze groep voer je uit met alleen je toetsenbord. Druk op Tab om vooruit te navigeren, Shift + Tab om terug te gaan en Enter of Spatie om elementen te activeren.

Navigeren met het toetsenbord

Taak	Toets
Naar het volgende bedieningselement	`Tab`
Naar het vorige bedieningselement	`Shift` + `Tab`
Link activeren	`Enter`
Knop activeren	`Enter` of `Spatie`
Selectievakje selecteren	`Spatie`
Navigeren tussen keuzerondjes	`↑` (pijltje naar boven) en `↓` (pijltje naar beneden)
Keuzerondje selecteren	`Spatie`
Keuzelijst openen	`Spatie`
Navigeren in een keuzelijst	`↑` (pijltje naar boven) en `↓` (pijltje naar beneden)
Element sluiten	`Esc`

Taak met bijbehorende toets of toetsen

Skiplink

Wat je zoekt: een link die verschijnt zodra je op Tab drukt. Die link slaat het navigatiemenu over, zodat je direct bij de hoofdcontent komt.

Zo test je:

Herlaad de pagina.
Druk op Tab. Er verschijnt een skiplink, meestal met tekst als “Ga naar inhoud” of “Direct naar content”.
Druk op Enter en controleer of de focus voorbij het navigatiemenu springt.
Controleer of de skiplink bij de eerste drie focusbare elementen zit.

Veelvoorkomend probleem: de skiplink ontbreekt helemaal, of de link is er wel maar verplaatst de focus niet.

Meer informatie en volledige testprocedure: succescriterium 2.4.1 Blokken omzeilen.

Focusindicator

Wat je zoekt: een zichtbare rand of markering rond het element dat op dat moment de toetsenbordfocus heeft. Je moet altijd kunnen zien wáár je bent op de pagina.

Zo test je:

Herlaad de pagina.
Navigeer met Tab door de pagina.
Controleer bij elk element of je een zichtbare focusindicator ziet. Dat is meestal een rand, een schaduw of een kleurverandering.

Veelvoorkomend probleem: de focusindicator is weggehaald met CSS (outline: none), of de indicator is zo subtiel dat je hem nauwelijks ziet.

Meer informatie en volledige testprocedure: succescriterium 2.4.7 Focus zichtbaar.

Focusvolgorde

Wat je zoekt: een logische volgorde waarin elementen de focus krijgen. De focusvolgorde volgt normaal gesproken de visuele leesrichting: van links naar rechts en van boven naar beneden.

Zo test je:

Herlaad de pagina.
Navigeer met Tab door de pagina en let op de volgorde. Springt de focus onverwacht naar een ander deel van de pagina?
Open een dialoogvenster (als dat er is) en controleer of de focus binnen het venster blijft tot je het sluit.
Sluit het dialoogvenster en controleer of de focus teruggaat naar de knop die het opende.

Veelvoorkomend probleem: de focus springt door de pagina in een onlogische volgorde, of de focus gaat door verborgen elementen.

Meer informatie en volledige testprocedure: succescriterium 2.4.3 Focus volgorde.

Visuele weergave

De tests in deze groep controleren of de pagina leesbaar en bruikbaar blijft bij verschillende instellingen.

Contrast

Wat je zoekt: tekst die voldoende contrast heeft met de achtergrond. Onvoldoende contrast maakt tekst lastig leesbaar, vooral voor mensen met een visuele beperking.

Zo test je:

Open de Colour Contrast Analyser.
Pak de voorgrondkleur (de tekstkleur) en de achtergrondkleur.
De tool toont de contrastverhouding. Normale tekst heeft minstens 4,5:1 nodig. Grote tekst (vanaf 24px of 18,5px vetgedrukt) heeft minstens 3:1 nodig.
Controleer ook de tekst in hover- en focustoestanden van links en knoppen.

Veelvoorkomend probleem: lichtgrijze tekst op een witte achtergrond, of witte tekst op een lichtgekleurde foto.

Meer informatie en volledige testprocedure: succescriterium 1.4.3 Contrast (minimum).

Herschalen

Wat je zoekt: of tekst vergroot kan worden tot 200% zonder dat content verdwijnt of onbruikbaar wordt.

Zo test je:

Open de pagina in je browser op 100% zoom.
Vergroot naar 200% (Ctrl + + of Cmd + +).
Controleer of alle tekst daadwerkelijk groter is geworden.
Controleer of alle content nog steeds zichtbaar en bruikbaar is. Wordt er niks afgesneden? Overlappen er elementen?

Veelvoorkomend probleem: tekst in vaste pixels die niet meeschaalt, of een menu dat onbruikbaar wordt bij 200%.

Meer informatie en volledige testprocedure: succescriterium 1.4.4 Herschalen.

Reflow

Wat je zoekt: of de pagina bij 400% zoom geen horizontale scrollbalk krijgt. De content past zich aan naar één kolom, zodat je alleen verticaal hoeft te scrollen.

Zo test je:

Open de pagina in je browser op 100% zoom.
Vergroot naar 400%.
Controleer of je alleen verticaal hoeft te scrollen en niet horizontaal.
Controleer of alle content nog beschikbaar en bruikbaar is. Verdwijnen er menu’s of knoppen?

Veelvoorkomend probleem: horizontaal scrollen bij 400%, content die buiten beeld valt, of een navigatiemenu dat niet meer opent.

Meer informatie en volledige testprocedure: succescriterium 1.4.10 Reflow.

Tekst en code

De tests in deze groep controleren of de content en de onderliggende code kloppen.

Koppen

Wat je zoekt: een logische koppenstructuur die de pagina overzichtelijk maakt. Koppen geven structuur aan de pagina en helpen mensen die een schermlezer gebruiken om snel naar de juiste sectie te navigeren.

Zo test je:

Open de headingsMap-extensie in je browser.
Bekijk de koppenlijst. Volgen de niveaus logisch op elkaar? Een <h3> hoort onder een <h2>, niet direct onder een <h1>.
Controleer of de kopteksten beschrijven waar de sectie over gaat.
Bekijk de pagina visueel. Zijn er teksten die eruitzien als een kop (groot, vetgedrukt) maar niet in de koppenlijst staan? Dan ontbreekt de code.

Veelvoorkomend probleem: kopniveaus worden overgeslagen (van <h2> naar <h4>), of kopelementen worden alleen voor de opmaak gebruikt zonder dat de tekst een sectie introduceert.

Meer informatie en volledige testprocedure: succescriterium 1.3.1 Info en relaties.

Linkdoel

Wat je zoekt: links waarvan je kunt begrijpen waar ze naartoe gaan. De linktekst (eventueel samen met de omliggende tekst) maakt duidelijk wat je kunt verwachten als je klikt.

Zo test je:

Scan de pagina op links. Lees alleen de linktekst, zonder de rest van de zin.
Is het doel van de link duidelijk? “Lees meer” of “klik hier” zegt niks. “Lees meer over paginatitels” is wél duidelijk.
Controleer of links met dezelfde tekst ook naar dezelfde bestemming gaan.
Staan er links met alleen een afbeelding of icoon? Klik met rechtermuisknop, kies “Inspecteren” en controleer of er een tekstalternatief is dat de bestemming beschrijft.

Veelvoorkomend probleem: meerdere “Lees meer”-links op één pagina die elk naar een andere bestemming gaan, of links met alleen een afbeelding zonder tekstalternatief.

Meer informatie en volledige testprocedure: succescriterium 2.4.4 Linkdoel (in context).

Paginatitel

Wat je zoekt: een beschrijvende en unieke titel in het browsertabblad. De paginatitel is het eerste wat een schermlezer voorleest bij het openen van een pagina.

Zo test je:

Kijk naar het browsertabblad. Beschrijft de titel waar de pagina over gaat?
Open een paar andere pagina’s op dezelfde website. Verandert de titel per pagina?
Open de ontwikkelaarstools en zoek het <title>-element in de <head>. Controleer of er precies één <title> is en dat het niet leeg is.

Veelvoorkomend probleem: alle pagina’s hebben dezelfde generieke titel (zoals alleen de naam van de organisatie), of de titel ontbreekt helemaal.

Meer informatie en volledige testprocedure: succescriterium 2.4.2 Paginatitel.

Taal van de pagina

Wat je zoekt: een correct taalattribuut in de code, zodat voorleessoftware de juiste taal en uitspraak gebruikt.

Zo test je:

Open de ontwikkelaarstools (F12).
Zoek het <html>-element bovenin de code.
Controleer of er een lang-attribuut staat, bijvoorbeeld lang="nl" voor Nederlands.
Controleer of de waarde klopt bij de taal van de pagina.

Veelvoorkomend probleem: het lang-attribuut ontbreekt, of de waarde is "en" terwijl de pagina in het Nederlands is geschreven.

Meer informatie en volledige testprocedure: succescriterium 3.1.1 Taal van de pagina.

Tekstalternatieven voor afbeeldingen

Wat je zoekt: of afbeeldingen een tekstalternatief hebben dat de content of het doel van de afbeelding beschrijft.

Zo test je:

Klik met rechtermuisknop op een afbeelding en kies “Inspecteren”.
Controleer of het <img>-element een alt-attribuut heeft.
Beschrijft het tekstalternatief wat er op de afbeelding te zien is? Een foto van een gebouw met alt="gebouw" is te vaag. alt="Het stadhuis van Amsterdam aan de Dam" is wél beschrijvend.
Is de afbeelding puur decoratief? Dan hoort het alt-attribuut leeg te zijn (alt="").
Wordt de afbeelding gebruikt als link of knop? Dan beschrijft het tekstalternatief de bestemming of de actie, niet de afbeelding zelf.

Veelvoorkomend probleem: het alt-attribuut ontbreekt, is leeg terwijl de afbeelding informatief is, of bevat een bestandsnaam zoals “IMG_2847.jpg”.

Meer informatie en volledige testprocedure: succescriterium 1.1.1 Niet-tekstuele content.

Om te onthouden

Je hoeft niet alles tegelijk te testen. Elke test uit dit artikel kun je in een paar minuten uitvoeren en levert direct bruikbare resultaten op. Samen dekken ze een groot deel van de meest voorkomende toegankelijkheidsproblemen.

Begin vandaag nog: Kies al eens één pagina en voer de toetsenbordtests uit. Je hebt er niks anders voor nodig dan je Tab-toets. Doe daarna ook de andere tests en maak er een gewoonte van bij elke nieuwe pagina of wijziging.

Gerelateerde succescriteria

Dit artikel behandelt de volgende WCAG-succescriteria: