Webtoegankelijkheid in e‑commerce: 5 quick wins

Als je denkt aan 'toegankelijkheid', zie je misschien vooral mensen die slechtziend zijn voor je. Maar ook andere mensen hebben baat bij een toegankelijke website. Denk aan mensen met een tijdelijke beperking zoals een gebroken arm of iemand die onderweg is en geen optimale werkplek heeft. Als je website niet toegankelijk is, mis je potentieel een deel van je omzet. Tegelijkertijd beloont Google websites met hoge accessibility en wordt het zelfs een verplichting in de EU.

In deze blog duiken we in de wereld van webtoegankelijkheid op webshops. Waar we niet alleen de noodzaak van inclusiviteit bespreken, maar ook de voordelen voor jouw e-commerce platform. Ontdek waarom het niet alleen een verplichting is om aan de wet te voldoen maar ook een strategische zet om de conversie te verhogen en een breder publiek te bereiken.

Wat verstaan we precies onder webtoegankelijkheid? Voor webwinkels is het vooral belangrijk dat producten besteld kunnen worden door iedereen die de website bezoekt. Lukt dit niet met behulp van een toetsenbord dan raak je al een klantgroep kwijt.

Een ‘screenreader’ is een programma waarmee iemand die slechtziend of blind is de website kan lezen. Wanneer je bijvoorbeeld een pop-up toont waarin een product geconfigureerd kan worden, is het vaak zo dat dit niet gezien wordt door de screenreader, omdat de code niet goed in elkaar zit. Het gevolg: je bezoeker kan het product niet toevoegen aan zijn of haar shopping cart. Zelfs voor grote merken en ketens zien we dat dit nog niet goed gebeurt. Bij H&M kun je bijvoorbeeld je maat niet selecteren waardoor een aankoop zelfs onmogelijk wordt. Bol.com doet het beter: daar kun je wel via het toetsenbord een bestelling afronden.

Daarom is het belangrijk dat developers rekening houden met screenreaders en bijvoorbeeld interactieve elementen op de website goed aan te geven bij de screenreader.

Om webtoegankelijkheid te meten hanteert de Web Content Accessibility Guidelines (WCAG) drie niveaus: A, AA en AAA, die laten zien hoe goed je website scoort. Voor de EU-regelgeving van 2025 zou jouw website minimaal AA moeten scoren. Hierbij geldt dat je aan álle punten moet voldoen, anders zak je alsnog naar een A. Wat precies de consequenties zijn van niveau A moeten op dit moment nog bekend worden gemaakt. Digitoegankelijk legt uit wat de WCAG precies inhoudt en laat je zien wat de richtlijnen zijn en onder welk niveau ze hangen.

Je website moet dus toegankelijk zijn volgens de wet, maar het geeft je ook voordelen:

• Een toegankelijke website is semantisch goed opgebouwd waardoor je vindbaarheid op Google en andere zoekmachines vergroot zal worden.

• Het aantal bezoekers dat je website kan gebruiken wordt vergroot met ongeveer 20% en biedt daarmee meer verkoopmogelijkheden.

• De website is voor iedereen gebruiksvriendelijker waardoor mensen minder snel de website vroegtijdig zullen verlaten.

• Het is maatschappelijk verantwoord en daardoor zal de website en je bedrijf een beter imago krijgen.

Hoe maak je een begin aan het toegankelijk maken van je webshop? Dit zijn 5 ‘quick wins’ die door marketeers, e-commerce managers en developers toe te passen zijn:

1 - Beschrijf je afbeeldingen

Je hebt vast al eens een ‘alt’-tag gezien bij afbeeldingen, maar wat doet dit precies? De ‘alt’-tag gebruik je om afbeeldingen te omschrijven voor een screenreader (hierboven uitgelegd). Wanneer je bijvoorbeeld een afbeelding gebruikt om een kortingsactie te mailen, zullen gebruikers van een screenreader dit niet kunnen zien. Als je de afbeelding een passende alt-tag geeft, weet je zeker dat de kortingscode te lezen - of toegankelijk - is voor iedereen.

Is een alt-tag ook nodig bij een puur decoratieve afbeelding? Niet per se. Wel is het handig om de alt-tag dan leeg op de afbeelding te hebben, want anders zal een screenreader de hele url van de afbeelding voorlezen.

Wat te doen: marketeers en e-commerce managers doen er goed aan om alle afbeeldingen, die tekst bevatten of op een andere manier informatief is, te voorzien van een gevulde alt-tag. Developers zorgen ervoor dat er altijd een alt-tag aanwezig is, ook al is dit niet ingevoerd in het CMS.

2 - Toegankelijk toetsenbord

Is je website navigeerbaar zonder muis? Zijn de belangrijkste pagina’s en functies te bereiken én af te maken? Het toetsenbord toegankelijk maken van je webshop is erg belangrijk om het bruikbaar te maken voor mensen die hier afhankelijk van zijn. Voeg een “skip-to-content” button toe zodat de gebruiker niet elke keer na het bezoeken van een nieuwe pagina het hele menu door moet.

Je kunt dit testen door je muis weg te leggen en met je toetsenbord door je website te navigeren door gebruik te maken van TAB, ESC, Enter en pijltjestoetsen. Kan je naar een product toe en deze ook afrekenen? Zijn andere belangrijke functies van je website ook met het toetsenbord bereikbaar?

Wat te doen: laat developers testen of het nog mogelijk is om met het toetsenbord door de website te navigeren wanneer ze bijvoorbeeld nieuwe functies op de webshop implementeren.

3 - Voeg hover en focus states toe aan knoppen

Veel websites zetten de focus-state uit op knoppen omdat dit niet mooi is en niet volgens design, terwijl hover-states ons helpen begrijpen dat we kunnen interacteren met het element waar we met de muis overheen gaan. Focus-states hebben mensen nodig die juist zonder muis maar met toetsenbord door de website gaan.

Wat te doen: een designer kan hierbij helpen om goede en mooie hover- en focus-states te maken. Hierdoor is een knop of klikbaar element te begrijpen voor elke bezoeker. Developer zorgt ervoor dat deze states op elke knop of klikbaar element komt te staan

4 - Zorg dat de taal van je website goed is ingesteld

Dit helpt screenreaders om te weten welke taal er voorgelezen moet worden. Veel sites zijn Engels ingesteld terwijl er Nederlands op geschreven wordt. Zo denkt een screenreader dat het in het Engels voorgelezen moet worden, wat ervoor zorgt dat de tekst niet meer te begrijpen is. Staan er een paar paragrafen in het Engels? Zet je de taal dan alleen op die paragraaf naar Engels. Een zogenaamde ‘lang-attribute’ laat je gemakkelijk op de html-tag van je website zetten, of kan je zelfs aanpassen binnen het CMS.

Wat te doen: developers zetten de taal goed of laten dit goed beheerbaar zijn binnen het CMS zodat marketeers of e‑commerce managers dit zelf kunnen aanpassen.

5 - Zorg voor genoeg contrast

Dit is belangrijk voor mensen met beperkt zicht, kleurenblindheid of zelfs wanneer de zon te fel op je scherm schijnt. Een goed kleurcontrast heeft een minimale ratio van 4.5:1 voor kleine tekst en 3:1 voor grote tekst. Wil je het contrast van je webshop checken? Dit doe je bijvoorbeeld op https://colourcontrast.cc/

Wat te doen: in de designfase zou je al moeten rekening houden met het contrast van je website of webshop. Designers kunnen helpen om de styleguide en het design van de website te toetsen op contrast.

Na het lezen van deze blog vraag je je wellicht af hoe jouw webshop scoort op toegankelijkheid. Hiervoor zou je een audit kunnen aanvragen bij gespecialiseerde bedrijven, maar je kunt ook zelf een quickscan doen met behulp van onderstaande tools;

• Screenreader
  Het eerste wat je kan gebruiken is een screenreader, om te kijken wat gebruikers van dit soort software horen wanneer ze de website navigeren. Op een Mac is de gratis VoiceOver van Apple zelf een hele goede applicatie. Bij Windows ben je in goede handen met NVDA.

• aXe van Deque
  Dit is een tool die je via de Chrome extension store installeert en gebruikt om de algehele toegankelijkheid van je website te testen. Na installatie krijg je in je console van de browser een extra tab, waarin je een deel of de hele pagina laat scannen door aXe. Na de scan komen de meest voorkomende issues naar boven en worden ze gerangschikt in ernst.

• Silktide Toolbar
  Ook dit is een tool vanuit de Chrome extension store die je gebruikt om zelf te zien wat iemand met kleurenblindheid, tunnelvisie of staar ziet op jouw webshop. Hierin zit ook een screenreader verwerkt die je kunt gebruiken. Als designer of marketeer kun je dit goed gebruiken om te zien of de website goed toegankelijk is voor iedereen.