Je site bij 200 procent tekstvergroting testen

Het doel is smal: kan een bezoeker bij 200 procent tekstgrootte nog alle functionele onderdelen zien en gebruiken? Je test dus niet de hele site, maar drie routes: het hoofdmenu, een formulier en de weg van winkelwagen naar bevestiging.

De toegankelijkheidstutorials van W3C leggen uit dat ze best-practice richtlijnen bieden die WCAG-criteria combineren, en dat elke tutorialpagina de gebruikte criteria vermeldt. Gebruik die pagina's voor de achterliggende eisen. Deze gids is een praktische werkprocedure en toetst niet of je aan een norm voldoet.

Let op het verschil tussen tekst vergroten en pagina inzoomen. Bij tekstvergroting groeit meestal alleen de letter en niet de afbeelding of het raster, al verschilt dat per browser en instelling. Dat kan andere fouten opleveren dan zoomen; controleer in je eigen browser wat de instelling doet. Test daarom met de instelling voor tekstgrootte van je browser of besturingssysteem, en noteer exact welke je gebruikte.

Een vergelijkbare test vraagt dezelfde omstandigheden. Leg vast voor je begint.

1. Kies een desktopbrowser en een smalle schermbreedte, bijvoorbeeld een telefoonformaat, en noteer beide.
2. Stel de tekstgrootte in op 200 procent via de instelling die jouw browser aanbiedt. Waar die staat, verschilt per browser en versie; controleer dat zelf.
3. Maak een testaccount en een testproduct, zodat je de checkout zonder echte betaling kunt doorlopen. Gebruik de testmodus van je betaalprovider als die bestaat.
4. Open een leeg document met kolommen: pagina, stap, wat je verwacht, wat je zag, ernst.

Doe daarnaast één testrondje alleen met het toetsenbord (Tab, Shift+Tab en Enter), zonder muis. Wie vergroot, gebruikt soms ook het toetsenbord, en zo vind je ook onbereikbare knoppen waar de muis nog overheen kan.

Loop elke route in vaste volgorde.

Navigatie: open het menu, ga door alle niveaus, sluit het weer. Controleer of menupunten afgekapt zijn, over elkaar vallen of buiten beeld staan. Controleer ook of het zoekveld en het winkelwagenicoon nog bereikbaar zijn.

Formulier: vul elk veld in. Controleer of labels leesbaar blijven en bij hun veld horen, of foutmeldingen zichtbaar zijn en of de verzendknop volledig te zien en te activeren is.

Checkout: voeg het testproduct toe, ga naar de kassa, kies verzending en betaling, en rond af. Controleer vooral samenvattingen, couponvelden, keuzerondjes en de bevestigingsknop. Dit zijn plekken waar vaste hoogtes vaak inhoud afsnijden.

Noteer per probleem een scherm, de stap en de ernst: blokkeert de taak, hindert of cosmetisch. Een afgekapte bevestigingsknop is anders dan een iets krappe kop.

De oorzaak is een hypothese. Controleer die in de ontwikkelaarstools van de browser voor je een opdracht uitgeeft.

Fictieve invoer: je test een webwinkel met drie routes op twee schermbreedtes, dus zes combinaties. Bij de checkout op telefoonformaat zie je dat de knop 'Bestelling plaatsen' onder de rand van het blok valt en niet met het toetsenbord te bereiken is. Bij het menu zie je dat het laatste item buiten beeld staat.

Verwachte technische controles: noteer de combinatie (checkout, telefoon), de ernst (blokkeert), de browser en de vermoedelijke oorzaak (vaste hoogte). Geef de ontwikkelaar de stappen om het te reproduceren. Reken niet op een hersteltermijn of een effect op conversie; dat is niet te voorspellen uit deze test.

Controle na herstel: herhaal exact dezelfde zes combinaties met dezelfde instelling en markeer elk punt als opgelost of nog open. Test ook of de wijziging op andere schermbreedtes niets nieuws breekt. Controleer daarna ook zelf of inhoud tijdens het laden of na de wijziging verspringt; dat is een eigen controle en geen conclusie uit de bronnen. De MDN-uitleg over webperformance beschrijft dat prestaties ook gaan over hoe soepel inhoud blijft tijdens interactie, en de cursus van web.dev behandelt meetmethoden. Wil je zien welke openbare signalen je site toont, bekijk die dan met Marketing Scan. Een publieke scan meet zichtbare signalen en vervangt deze handmatige test niet.