WCAG-checklist voor webshops: de vier punten die er echt toe doen

Wat geldt er precies, en voor wie?

Richtlijn (EU) 2019/882 brengt e-commercediensten onder de toegankelijkheidseisen en verwijst voor de invulling naar de geharmoniseerde norm, die op zijn beurt WCAG 2.1 niveau AA voorschrijft. In Nederland houdt de ACM toezicht.

De uitzondering voor micro-ondernemingen die diensten aanbieden vraagt om twee dingen tegelijk: minder dan tien werknemers én een jaaromzet of balanstotaal onder twee miljoen euro. Voldoe je aan één van de twee maar niet aan de andere, dan val je gewoon onder de eisen.

Op welke vier punten gaat het meestal mis?

Van de vijftig succescriteria in WCAG 2.1 AA zijn er vier waarop webshops vrijwel altijd struikelen. Wie alleen deze vier aanpakt, lost het grootste deel van de praktische onbruikbaarheid op.

• Toetsenbordbediening. De hele bestelstroom moet met Tab, Enter en de spatiebalk te doorlopen zijn. Aangepaste dropdowns, modale vensters en cookiebanners zijn de bekende breekpunten.
• Zichtbare focus. Je moet kunnen zien waar je bent. Veel thema's zetten de standaard focusring uit omdat hij lelijk zou zijn, en maken de winkel daarmee onnavigeerbaar zonder muis.
• Contrast. Gewone tekst heeft minimaal 4,5 staat op 1 nodig, grote tekst 3 op 1. Lichtgrijs op wit is de meest voorkomende fout, meestal in prijzen, labels en de kleine lettertjes bij verzendkosten.
• Formulierlabels. Elk invoerveld heeft een label nodig dat aan het veld gekoppeld is. Een placeholder is geen label: hij verdwijnt zodra je begint te typen.

Hoe test je het zelf in vijf minuten?

Deze test duurt vijf minuten en vraagt geen software. Begin op een productpagina, leg je muis weg en gebruik uitsluitend het toetsenbord.

• Druk op Tab en kijk of je op elk moment kunt zien waar de focus staat.
• Loop naar de knop om het product in je winkelwagen te leggen en activeer hem met Enter of de spatiebalk.
• Ga naar de winkelwagen en vervolgens naar de checkout. Vul alle velden in zonder te klikken.
• Maak expres een fout, bijvoorbeeld een ongeldig e-mailadres, en kijk of de foutmelding je vertelt wát er mis is en waar.
• Kom je bij de betaalstap, dan werkt je checkout. Loop je ergens vast, dan heb je precies gevonden waar je bezoekers ook vastlopen.

Vergeet de cookiebanner niet. Die verschijnt als eerste en vangt in veel implementaties de focus zonder hem weer los te laten. Wie daar vast komt te zitten, komt nooit bij je producten.

Wat vindt een automatische controle wel en niet?

Een geautomatiseerde controle vindt ongeveer een derde van de problemen. Dat is nuttig als startpunt en waardeloos als eindpunt. Contrast, ontbrekende alt-teksten en ontbrekende labels komen er betrouwbaar uit; of een bestelstroom logisch te volgen is, komt er niet uit.

Wees ook voorzichtig met toegankelijkheidsoverlays. Ze beloven een oplossing in één regel script en leveren die niet: de onderliggende pagina verandert niet, belangenorganisaties raden ze af, en het extra script maakt je winkel trager. Investeer het geld liever in het herstellen van de vier punten hierboven.

Wat meet VeriShop hiervan?

VeriShop controleert of de checkout met het toetsenbord te bedienen is. Dat is bewust het criterium waar wij op meten: het is het punt waarop een ontoegankelijke winkel niet lastig maar onbruikbaar wordt, en het is van buitenaf betrouwbaar vast te stellen.

De bredere WCAG-conformiteit van je hele winkel meten wij niet, en dat zeggen wij liever dan dat wij het suggereren. Een volledige toetsing vraagt handmatig werk en gebruikers met een hulpmiddel. Wat wij meten is een harde ondergrens: kan iemand zonder muis afrekenen.