Toegankelijkheid testen
Website toegankelijkheid testen: zo pak je het stap voor stap aan
Je test de toegankelijkheid van je website het best met een combinatie van een automatische scan en handmatige controles. In deze stappen leer je wat je wanneer doet, en welke problemen het vaakst voorkomen.
Waarom een combinatie van tests het meeste oplevert
Automatische tests vinden snel problemen die je met code kunt toetsen, zoals ontbrekende alt-attributen, te weinig contrast of velden zonder label. AI-contentanalyse beoordeelt daarnaast of teksten zinvol zijn, zoals een alt-tekst of linktekst die iets zegt in plaats van 'afbeelding' of 'klik hier'. Handmatig testen geeft het complete beeld, bijvoorbeeld of een pagina logisch te volgen is en een formulier prettig in te vullen.
Met automatische tests, AI-analyse en handmatige tests krijg je een compleet beeld van wat bezoekers met een beperking ervaren, en weet je waar verbeteringen het meeste opleveren.
Stappenplan voor het testen van je website
Doorloop de stappen per pagina of proces. Begin klein en herhaal het regelmatig.
Bepaal wat je test
Kies een representatieve selectie: de homepage, een contentpagina, een formulier, een productpagina, de inlogpagina en het bestel- of aanvraagproces. Test complete processen, niet alleen losse pagina's.
Tip: Begin met de pagina's met het meeste verkeer of de belangrijkste doelen.
Start met een automatische scan
Een scan, zoals de gratis WCAG-check van AccessRadar of een tool op basis van axe-core, vindt snel veelvoorkomende problemen zoals ontbrekende alt-teksten, te weinig contrast en velden zonder label. Met het verbeterplan van AccessRadar komen daar wekelijkse scans en AI-contentanalyse bij.
Tip: Beschouw een schone scan nooit als bewijs dat de pagina voldoet.
Test met het toetsenbord
Loop de pagina door zonder muis. De controles staan hieronder in een eigen onderdeel.
Test met een screenreader
Een screenreader leest de pagina voor en laat zien hoe de structuur, koppen, labels en meldingen overkomen. Gangbare opties zijn NVDA op Windows, VoiceOver op Mac en iPhone en TalkBack op Android.
Tip: Luister of koppen, linkteksten en knoppen zonder de visuele context nog duidelijk zijn.
Test zoomen en kleine schermen
Zoom de pagina in tot 200% en controleer of alle tekst leesbaar blijft. Controleer daarna bij een breedte van 320 CSS-pixels (400% zoom) of je zonder horizontaal scrollen kunt lezen.
Tip: Test ook in staande en liggende stand op een telefoon of tablet.
Test kleur en contrast
Meet het contrast van tekst, iconen en randen van invoervelden met een contrasttool. Bekijk de pagina ook eens in grijstinten om te zien of informatie alleen via kleur wordt overgebracht.
Test formulieren en foutmeldingen
Vul een formulier bewust verkeerd in. Zijn de fouten in tekst benoemd, staan ze bij het veld en weet je hoe je ze herstelt?
Leg bevindingen vast en prioriteer
Noteer per bevinding de pagina, het WCAG-criterium, de impact en de oplossing. Los eerst problemen op waardoor bezoekers niet verder kunnen.
Tip: Een bevinding die een bestelproces blokkeert, gaat vóór een klein contrastprobleem in de footer.
Test opnieuw na elke wijziging
Toegankelijkheid is geen eenmalig project. Nieuwe content, een nieuw thema of een update kan nieuwe problemen veroorzaken.
Tip: Plan terugkerende scans in, zodat je nieuwe problemen snel opmerkt.
Toetsenbordnavigatie testen
Veel toegankelijkheidsproblemen vind je met alleen een toetsenbord. Leg je muis weg en loop deze controles langs.
- Gebruik Tab en Shift+Tab om vooruit en achteruit te gaan, Enter en de spatiebalk om te activeren, de pijltjestoetsen binnen menu's en tabbladen en Escape om iets te sluiten.
- Kun je elke link, knop, formulierveld en menu bereiken en bedienen?
- Zie je steeds waar de focus staat, en wordt die niet afgedekt door een plakkende header of cookiebanner?
- Volgt de volgorde de logische leesvolgorde van de pagina?
- Kom je uit elk venster, menu of onderdeel weer terug met het toetsenbord, zonder vast te lopen?
- Werkt de link 'Ga naar de inhoud' bovenaan de pagina en wordt die zichtbaar als hij de focus krijgt?
Veelvoorkomende toegankelijkheidsproblemen
Deze problemen zie je op veel websites. Ze zijn vaak snel te vinden en goed op te lossen.
Te weinig kleurcontrast
Lichtgrijze tekst op een witte achtergrond, of witte tekst op een lichte knop, is voor veel bezoekers moeilijk te lezen.
Tip: Controleer de kleuren van je huisstijl met een contrasttool. Gewone tekst heeft minimaal 4,5:1 nodig.
Afbeeldingen zonder of met een slechte alt-tekst
Zonder alt-tekst blijft de afbeelding voor screenreadergebruikers onzichtbaar. 'Afbeelding1.jpg' of een lange opsomming van zoekwoorden helpt ook niet.
Tip: Lees alleen de alt-teksten voor. Snap je dan nog waar de pagina over gaat?
Formuliervelden zonder label
Een placeholder verdwijnt zodra je typt en wordt niet door alle hulpsoftware als label gezien.
Tip: Gebruik voor elk veld een zichtbaar label dat aan het veld is gekoppeld.
Links en knoppen zonder duidelijke naam
'Klik hier', 'Lees meer' en knoppen met alleen een icoon zeggen niet wat er gebeurt.
Tip: Vraag een screenreader om alle links te tonen en kijk of ze zonder context te begrijpen zijn.
Onzichtbare focus of een toetsenbordval
Een focusrand die met CSS is weggehaald, of een venster waaruit je niet kunt ontsnappen, maakt een site onbruikbaar zonder muis.
Tip: Loop de pagina met Tab door en let op de focus.
Ontbrekende of onlogische koppen
Koppen die alleen voor de opmaak worden gebruikt of niveaus overslaan maken navigeren met een screenreader lastig.
Tip: Bekijk de kopstructuur van de pagina als een inhoudsopgave.
Content die niet meebuigt bij zoom
Bij 400% zoom verdwijnt tekst of moet je horizontaal scrollen om een regel te lezen.
Tip: Test bij een breedte van 320 CSS-pixels.
Zo vullen tests, AI-analyse en handmatig onderzoek elkaar aan
Zo verdeel je het werk en haal je het meeste uit elke methode.
| Onderwerp | Automatische tests | AI-contentanalyse | Handmatige beoordeling |
|---|---|---|---|
| Alternatieve teksten | Afbeeldingen zonder alt-attribuut | Of de tekst zinvol is en niet 'afbeelding' of een bestandsnaam, met suggesties | Of de tekst echt bij de afbeelding past |
| Kleurcontrast | Contrast van tekst op een vlakke achtergrond | Niet van toepassing | Contrast bij afbeeldingen, verlopen en iconen |
| Formulieren | Velden zonder label | Of labels en instructies duidelijk zijn | Of het formulier in de praktijk goed te doorlopen is |
| Links | Links zonder tekst | Of de linktekst, samen met de tekst eromheen, duidelijk maakt waar de link naartoe leidt | Of de link in de context logisch is |
| Toetsenbord en focus | Beperkte controles op focus en toetsenbordbediening | Niet van toepassing | Of alles bediend kan worden en de volgorde logisch is |
| Koppen | Overgeslagen koppenniveaus | Of koppen het onderwerp beschrijven en geen lege woorden zijn, zoals 'Info' | Of de structuur als geheel klopt |
Van testresultaat naar verbetering
Gebruik de uitkomsten als startpunt en werk de bevindingen af, te beginnen bij wat de meeste bezoekers raakt. Voor belangrijke websites geeft het meekijken van een toegankelijkheidsexpert of mensen met een beperking extra zekerheid.
Automatische tests én AI-contentanalyse
AccessRadar combineert automatische tests met AI-contentanalyse. Zo zie je niet alleen technische fouten, maar ook welke teksten je bezoekers echt helpen.
De AI-analyse leest de tekst van je pagina's en geeft suggesties, bijvoorbeeld voor:
- Alternatieve teksten: zegt de tekst iets zinvols, of is het 'afbeelding', een bestandsnaam of 'klik hier'?
- Linkteksten: wordt uit de linktekst en de tekst eromheen duidelijk waar een link naartoe leidt?
- Koppen en labels: beschrijven ze het onderwerp of het veld, of zijn het lege woorden zoals 'Info' of 'Veld 1'?
- Paginatitels en formulieren: is duidelijk waar een pagina over gaat en wat een veld verwacht?
Je krijgt concrete suggesties voor betere teksten, die je direct oppakt in je wekelijkse verbeterplan. Zo groeit je website elke week verder naar WCAG 2.2 AA-geschiktheid en bereik je meer klanten.
Lees hoe tests en AI-analyse samenwerken in het verbeterplan
Lees ook
Praktische uitleg over WCAG en digitale toegankelijkheid.
WCAG 2.2 AA-checklist: wat controleer je op je website?
Praktische WCAG 2.2 AA-checklist per categorie, met uitleg en tips om direct te verbeteren. Handig voor eigenaren, redacteuren en developers.
WCAG 2.2 uitgelegd: de toegankelijkheidsrichtlijnen voor websites
Wat is WCAG 2.2? Lees wat de niveaus A, AA en AAA betekenen, welke eisen centraal staan en waarom toegankelijkheid voor je website belangrijk is.
European Accessibility Act: wat betekent het voor jouw website of webshop?
Wat betekent de European Accessibility Act voor je website of webshop? Lees wie eronder valt, sinds wanneer het geldt en wat je nu moet doen.
Controleer je website gratis op WCAG
Vraag de gratis WCAG-check van AccessRadar aan en ontvang de resultaten van een automatische scan per e-mail, als startpunt voor je verbeterpunten.
Wil je daarna elke week verder? Het WCAG-verbeterplan voegt wekelijkse scans en AI-contentanalyse toe.
Een WCAG-scan ondersteunt je beoordeling. Een automatische WCAG-scan kan volledige WCAG 2.2 AA-geschiktheid niet vaststellen. Combineer regelmatige WCAG-scans met handmatig onderzoek en feedback van mensen met een beperking.
Veelgestelde vragen over het testen van toegankelijkheid
Kan ik mijn website gratis op toegankelijkheid testen?
Ja. Je kunt gratis starten met de WCAG-check van AccessRadar en daarnaast zelf handmatig testen met je toetsenbord, een screenreader en zoom. Zo krijg je een startpunt zonder kosten.
Is een automatische scan genoeg?
Een scan is een sterk begin: je ziet snel waar je website verbetering nodig heeft, en AI-contentanalyse beoordeelt of alt-teksten, linkteksten en koppen zinvolle tekst zijn. Handmatig testen vult dit aan met onder meer de logische volgorde en de ervaring bij het invullen van formulieren.
Hoe vaak moet ik mijn website testen?
Test bij elke grote wijziging en plan daarnaast terugkerende scans in, bijvoorbeeld wekelijks. Nieuwe content en updates kunnen nieuwe problemen veroorzaken.
Welke screenreader kan ik het best gebruiken?
Kies een screenreader die bij je omgeving past, zoals NVDA op Windows, VoiceOver op Mac en iPhone of TalkBack op Android. Test bij belangrijke pagina's met meer dan één combinatie van browser en screenreader.
Wanneer schakel ik een expert in?
Zelf testen is een goed begin. Voor complexe websites, voor een formele beoordeling of een toegankelijkheidsverklaring is een gespecialiseerde toegankelijkheidsexpert verstandig.