Website toegankelijkheid testen: zo doe je het zelf

Alleen het toetsenbord

Leg je muis weg. Klik één keer in de adresbalk en druk daarna steeds op Tab. Met Shift+Tab ga je terug, Enter opent een link of knop en de spatiebalk zet een vinkje. Loop zo van je homepage naar een product, leg het in je winkelwagen en ga door tot de knop waarmee je gaat betalen.

Let onderweg op vier dingen:

• Zie je steeds waar je bent, met een rand of kleurverschil om het actieve onderdeel?
• Kom je bij elke knop, elk menu en elk keuzeveld?
• Raak je ergens vast? Cookiebanners, uitklapmenu's en chatvensters zijn de bekende plekken.
• Verdwijnt de aanwijzer soms, alsof hij naar iets springt wat je niet ziet?

Wie geen muis kan gebruiken, of met een schermlezer werkt, bestelt op precies deze manier. Blijft hij hangen in je cookiebanner, dan ziet hij je assortiment nooit.

WCAG 2.1.1 · 2.1.2 · 2.4.3 · 2.4.7

Inzoomen en een smal scherm

Druk op Ctrl++ (op een Mac Cmd++) tot je browser 200% aangeeft. Alle tekst moet nog leesbaar zijn, zonder dat woorden over elkaar vallen of halverwege worden afgekapt.

Zoom daarna door tot 400%. Op een venster van 1280 pixels breed gedraagt je pagina zich dan alsof hij op een scherm van 320 pixels staat. Moet je opzij scrollen om een zin te lezen, of valt de knop naar de winkelwagen buiten beeld? Dan loopt iemand die slecht ziet hier vast, en vaak ook wie op een kleine telefoon winkelt.

WCAG 1.4.4 · 1.4.10

Kleurcontrast

Dit is de fout die we het vaakst tegenkomen. In ons onderzoek onder 259 Nederlandse webshops had 87,3% van de homepages tekst met te weinig contrast. Dat is een ondergrens: we maten alleen de homepage en alleen automatisch. Je eigen site ken je uit je hoofd, dus kijk gericht naar deze plekken:

• lichtgrijze tekst bij prijzen, levertijden en kleine lettertjes;
• tekst die over een foto of een bannerbeeld staat;
• witte tekst op een lichte merkkleur, vaak op knoppen;
• randen van invoervelden die bijna wegvallen tegen de achtergrond.

De norm is een verhouding van minstens 4,5 tegen 1 voor gewone tekst, en 3 tegen 1 voor grote koppen en voor de randen van knoppen en velden. Twijfel je, vraag je bouwer dan om de kleurcodes uit je huisstijl en reken ze na met onze contrastchecker.

WCAG 1.4.3 · 1.4.11

Afbeeldingen zonder beschrijving

Wie niet ziet, hoort bij een afbeelding de beschrijving die erachter staat. Ontbreekt die, dan hoort hij niets of een bestandsnaam als "IMG_4032". Zet afbeeldingen tijdelijk uit voor je eigen site: op hun plek verschijnt dan de beschrijving, of niets.

Een productfoto beschrijft wat de klant moet weten, zoals kleur en model. Een sierlijn mag leeg blijven. Let vooral op knoppen die alleen een pictogram zijn, zoals het vergrootglas of het winkelwagentje. Die moeten zeggen wat ze doen. Goede en foute voorbeelden per soort afbeelding staan in alt-tekst voor je webshop.

WCAG 1.1.1

Formulieren en foutmeldingen

Open je afrekenpagina of je contactformulier. Dit is de enige test waarbij je zelf iets verstuurt, dus doe het met een veld leeg, zodat er geen bestelling ontstaat.

Labels. Elk veld hoort een vast label te hebben. Grijze voorbeeldtekst ín het veld verdwijnt zodra je typt, en dan weet je niet meer wat er gevraagd werd.

Automatisch invullen. Biedt je browser je naam en adres aan? Dat scheelt typwerk, vooral voor wie motorisch beperkt is.

Foutmeldingen. Laat een verplicht veld leeg en klik op verder. De melding moet zeggen welk veld fout is en wat je moet doen. Een rood randje alleen is niet genoeg.

Keuzes. Keuzerondjes, zoals voor de verzendmethode, horen een vraag erboven te hebben.

Een onbegrijpelijke foutmelding kost je een klant die al wilde betalen.

WCAG 1.3.1 · 1.3.5 · 3.3.1 · 3.3.2

Linkteksten

Lees je pagina eens alleen op de links. Schermlezergebruikers vragen vaak een lijst van alle links op, los van de tekst eromheen. Drie keer "Lees meer" of "Klik hier" in die lijst zegt dan niets. Nog vaker staan er links zonder enige tekst, zoals een pictogram van Instagram. Op 64,5% van de 259 homepages in ons onderzoek stond zo'n link. Een goede linktekst zegt waar je uitkomt: "Bekijk alle wandelschoenen".

WCAG 2.4.4

Video, geluid en bewegend beeld

Drie vragen, en bij elk nee hoort een aanpassing:

1. Heeft elke video met gesproken tekst ondertiteling die je kunt aanzetten?
2. Kun je een carrousel of bewegende banner pauzeren als hij langer dan vijf seconden beweegt?
3. Start er nergens vanzelf geluid zonder dat je het meteen kunt uitzetten?

Een carrousel die doordraait is voor iemand met concentratieproblemen een muur. Wie een schermlezer gebruikt, hoort zijn eigen voorleesstem niet meer zodra er muziek begint.

WCAG 1.2.2 · 1.4.2 · 2.2.2

Kort met een schermlezer

Eerlijk vooraf: dit is even wennen. De stem praat snel en de bediening voelt onhandig. Zet de spreeksnelheid lager en geef jezelf tien minuten. Je luistert alleen of je dezelfde informatie krijgt als iemand die kijkt.

Luister naar je productpagina. Hoor je de naam van het product en de prijs? Zegt de knop "in winkelwagen" of alleen "knop"? En als je in test 5 een foutmelding kreeg: wordt die ook voorgelezen?

WCAG 1.3.1 · 2.4.6 · 4.1.2