WCAG AA-checklist voor webshops: 15 punten om te controleren
De onderstaande lijst bevat de meest voorkomende toegankelijkheidsproblemen die we in webshops zien. De meeste kun je zelf controleren, zonder specialistische kennis — en een deel detecteert onze gratis scanner voor je. De punten zijn gerangschikt van eenvoudigst naar moeilijkst.
Tekst en afbeeldingen
1. Tekstcontrast (WCAG 1.4.3)
Lichtgrijze tekst op een witte achtergrond is een klassieker in webshops — en een van de meest voorkomende fouten. Gewone tekst moet een contrast van min. 4,5:1 hebben, grote tekst (koppen boven ca. 24 px) — 3:1. Controleer vooral: prijzen, productbeschrijvingen, teksten in de footer, promotiemeldingen.
2. Alt-teksten bij productfoto's (WCAG 1.1.1)
Elke productfoto heeft een alt-attribuut met een beschrijving nodig, bijv. alt="Zwarte stadsrugzak 20 l met laptopvak".
Een blinde persoon „bekijkt” de webshop met een schermlezer — zonder beschrijvingen koopt die
blindelings. Puur decoratieve afbeeldingen markeer je met een lege alt="".
3. Tekst vergroten tot 200% (WCAG 1.4.4)
Een slechtziende persoon vergroot de pagina in de browser (Ctrl en +). Controleer of bij 200%
niets „uit elkaar valt”: prijzen schuiven niet buiten beeld, „Kopen”-knoppen blijven zichtbaar.
Blokkeer pinch-zoom op de telefoon niet (user-scalable=no is een overtreding).
Navigatie en toetsenbord
4. De hele aankoop zonder muis (WCAG 2.1.1)
Leg de muis weg en doorloop met de Tab-toets het hele proces: product zoeken → productpagina → winkelwagen → bezorgformulier → betaling. Als je ergens „vastloopt” — loopt een klant met een beperking daar ook vast.
5. Zichtbare focus (WCAG 2.4.7)
Tijdens het tabben moet je duidelijk zien welk element actief is (omlijning, markering).
Veel templates verwijderen de outline „omdat het er lelijk uitziet” — dat is een
fout. Je mag hem mooi stylen, maar niet verwijderen.
6. Link „Direct naar inhoud” (WCAG 2.4.1)
Een toetsenbordgebruiker zou niet op elke subpagina door 30 menu-items moeten tabben. Het eerste element op de pagina moet direct naar de hoofdinhoud kunnen springen.
7. Zinvolle paginatitels (WCAG 2.4.2)
Elke subpagina moet een unieke <title> hebben: „Stadsrugzakken – Webshop X”,
en niet overal „Webshop X”. De titel is het eerste wat een schermlezergebruiker hoort.
Formulieren en aankoopproces
8. Labels bij formuliervelden (WCAG 3.3.2)
Elk veld (naam, adres, postcode, e-mail) moet een gekoppeld label hebben
(<label>), en niet alleen een placeholder — een placeholder verdwijnt zodra
er tekst wordt ingevuld en wordt niet door alle schermlezers correct voorgelezen.
9. Duidelijke foutmeldingen (WCAG 3.3.1, 3.3.3)
„Formulierfout” is te weinig. Schrijf wat er mis is en hoe je het herstelt: „Een postcode heeft het formaat 1234 AB”. Een fout mag niet alleen met kleur worden gemeld (een rood kader zegt een blinde persoon niets).
10. Knoppen met een duidelijke naam (WCAG 4.1.2)
Een winkelwagenicoon zonder enige tekst is voor een schermlezer gewoon „knop” — zonder
informatie over wat hij doet. Voeg aria-label="Toevoegen aan winkelwagen" of
zichtbare tekst toe.
Structuur en multimedia
11. Koppenhiërarchie (WCAG 1.3.1)
Koppen zijn de inhoudsopgave van de pagina: één <h1>, dan <h2>,
<h3> — zonder niveaus over te slaan „omdat het er mooier uitziet”.
Het uiterlijk pas je aan in CSS, niet met kopniveaus.
12. Taal van de pagina (WCAG 3.1.1)
Zorg dat je <html lang="nl"> hebt. Zonder dit leest de schermlezer je
Nederlandse aanbod voor met een Engels accent — het klinkt komisch, maar het is een echt probleem.
13. Ondertiteling en transcripties bij video (WCAG 1.2.2)
Een video die een product presenteert? Voeg ondertiteling toe. Dat helpt niet alleen dove en slechthorende mensen — de meeste gebruikers kijken video zonder geluid.
14. Grootte van aanraakelementen (WCAG 2.5.8)
Knoppen en links op de telefoon moeten min. 24×24 px zijn (aanbevolen 44×44 px). Een klein „×”-kruisje om een popup te sluiten of piepkleine links in de footer frustreren iedereen — niet alleen mensen met een beperking.
15. Toegankelijkheidsverklaring
Informeer gebruikers over de toegankelijkheidsstatus van je site en geef ze een kanaal om problemen te melden. Dat bouwt vertrouwen op en toont goede wil — je kunt een verklaring gratis genereren met onze tool (momenteel beschikbaar in het Pools).
Waar begin je?
Je hoeft niet alles tegelijk te herstellen. Begin met de gratis scan, die aangeeft welke punten uit deze lijst bij jou voorkomen, verbeter daarna de contrasten en alt-attributen (de meest voorkomende en goedkoopste herstellingen), en pak daarna het toetsenbord en de formulieren aan. Een volledig PDF-rapport voor het hele domein (tot 20 pagina's) bestel je voor €35.
Controleer punten 1–12 automatisch
Onze scanner controleert de meeste technische punten uit deze lijst in 60 seconden.