Wat zijn de meest voorkomende ecommerce-toegankelijkheidsproblemen?

WebAIM’s jaarlijkse crawl van een miljoen pagina’s vindt dat 96,3% van de homepages detecteerbare WCAG-fouten heeft. De top vijf: laag kleurcontrast, ontbrekende alt-tekst, ontbrekende formulierlabels, lege links en een ontbrekende documenttaal. Allemaal binnen dagen op te lossen met de juiste prioritering.

De meest voorkomende toegankelijkheidsfouten op frequentie

Gebaseerd op WebAIM’s Million (rapport 2024) en het toegankelijkheidsonderzoek van het Baymard Institute specifiek voor ecommerce:

1. Tekst met laag kleurcontrast (83% van de pagina’s) Het meest voorkomende en onderschatte probleem. Merkkleuren die om esthetische redenen zijn gekozen falen vaak de WCAG-eis van 4,5:1 voor bodytekst. Sale-prijslabels in rood, placeholder-tekst in lichtgrijs, witte tekst op knoppen met middentinten. Die raken elke gebruiker in lastige kijkomstandigheden, niet alleen mensen met een visuele beperking.

2. Ontbrekende alt-tekst (55% van de pagina’s) Productbeelden, promobanners en knoppen met alleen een icoon zonder beschrijvende alt-tekst sluiten schermlezergebruikers uit van de kern van de winkelervaring. Ontbrekende alt-tekst ontneemt zoekmachines ook productcontent, wat de organische posities raakt.

3. Ontbrekende formulierlabels (50% van de pagina’s) Checkout-formulieren, nieuwsbriefaanmeldingen en zoekvelden zonder correcte <label>-koppeling falen volledig voor schermlezergebruikers. Zij kunnen het doel van een veld niet bepalen zonder bijbehorend label. Placeholder-tekst is geen vervanging.

4. Lege links (45% van de pagina’s) Links zonder tekstinhoud. Icoonlinks zonder aria-labels, gelinkte productbeelden zonder alt-tekst, “lees meer”-links die niet beschrijven waar ze heen leiden. Schermlezers kondigen die aan als “link” zonder bestemming, wat gebruikers geen context geeft.

5. Ontbrekende documenttaal (<html lang>-attribuut) (28% van de pagina’s) Zonder taalverklaring gokken schermlezers welke uitspraakregels ze toepassen. Een foute gok maakt de hele site moeilijk te begrijpen voor schermlezergebruikers. Dit is een fix van één regel.

Ecommerce-specifieke problemen voorbij de basis

Ontoegankelijke maat- en variant-selectors. Custom-gebouwde variantkiezers (maatknoppen, kleurstalen) die als gestylede <div>- of <span>-elementen zijn gebouwd in plaats van formuliercontrols hebben geen toetsenbordondersteuning en geen schermlezercontext. Een toetsenbordgebruiker kan geen maat kiezen en dus niet toevoegen aan de winkelwagen.

Gebroken toetsenbordnavigatie in de checkout. Tab-volgorde die onvoorspelbaar springt, focus die in externe betaal-iframes verdwijnt zonder terug te keren, en modals die de focus niet vasthouden. Deze problemen zijn vrijwel universeel in custom checkout-implementaties.

Ontoegankelijke carrousels en sliders. Hero-sliders op de homepage en productbeeldgalerijen zonder toetsenbordbediening, zonder play/pauze voor automatisch doorschuivende content, en zonder live-regio-aankondigingen voor slidewisselingen. Auto-doorschuivende content zonder pauzemechanisme faalt WCAG 2.2.2 (Pause, Stop, Hide).

Ontbrekende skip-navigatie. Zonder een “ga naar hoofdinhoud”-link bovenaan de pagina moeten toetsenbord- en schermlezergebruikers op elke pagina door je hele navigatie tabben voordat ze de content bereiken. Dat is fors voor toetsenbordgebruikers met een motorische beperking.

Ontoegankelijke filter- en sorteersystemen. Categoriepagina-filters die met JavaScript resultaten bijwerken zonder herladen hebben ARIA-live-regio’s nodig om resultaatupdates aan schermlezergebruikers aan te kondigen. Zonder aankondiging weten gebruikers niet dat het filter is toegepast.

Fixes prioriteren op impact

Niet alle toegankelijkheidsproblemen hebben gelijke impact. Prioriteer op de kriticiteit van de gebruikersreis:

Tier 1 (Kritiek. Direct fixen):

• Toegankelijkheid van checkout-formulieren (labels, fouten, toetsenbord)
• Toetsenbordbediening van add-to-cart en koopactie
• Kleurcontrast op primaire CTA’s en navigatie

Tier 2 (Hoog. Binnen 30 dagen):

• Alt-tekst op productbeelden
• Toetsenbordondersteuning en focusbeheer in de navigatie
• Toegankelijkheid van maat-/variant-selectors

Tier 3 (Medium. Binnen 90 dagen):

• Toegankelijkheid van filters en sorteren
• Toetsenbordondersteuning van homepage-carrousels
• Structuur en leesvolgorde van contentpagina’s

Tier 4 (Basis. In de developmentworkflow):

• Documenttaal-attribuut
• Lege alt-tekst op decoratieve beelden
• ARIA-landmark-regio’s

Hoe je je specifieke problemen vindt

1. Draai de axe-browserextensie op je homepage, een productpagina en je checkout. Fix eerst alle critical- en serious-problemen
2. Doorloop je hele checkout-flow met alleen het toetsenbord (geen muis), documenteer elk faalpunt
3. Schakel VoiceOver (Mac) of NVDA (Windows) in en probeer een aankoop af te ronden. De ervaringskloof wordt direct duidelijk

De meeste webshops hebben 15-40 unieke toegankelijkheidsproblemen die binnen één sprint gericht developmentwerk teruggebracht kunnen worden tot onder de 5. Een UX-audit levert een volledige geprioriteerde remediëringslijst met concrete aanbevelingen op codeniveau.