Hoe kunnen webshops toegankelijker? Dat laat bol.com zien! Rian Rietveld, Niels Peter Foppen
In december 2021 deed Rian uitgebreid onderzoek naar de toegankelijkheid van webshops. Bol.com heeft de feedback voortvarend opgepakt. Met als resultaat een kwalitatief betere én meer toegankelijke webshop.
Rian Rietveld van Level Level en Stef en Niels-Peter van bol.com vertellen hoe webshops toegankelijker kunnen. De aanleiding was een uitgebreid onderzoek dat Rian in december 2021 deed naar de toegankelijkheid van de 15 grootste Nederlandse webwinkels. Ze keek daarbij onder andere of iemand die blind is een bestelling kan plaatsen. Haar conclusie: de meeste webshops hebben nog veel werk te verrichten.
Voor bol.com betekende dit onderzoek een mooie aanleiding om de website verder toegankelijk te maken. Intussen is er al een heel aantal aanpassingen doorgevoerd, waarover zij in deze presentatie vertellen. Met als resultaat een kwalitatief betere én meer toegankelijke webshop.
Over Rian Rietveld
Rian is specialist webtoegankelijkheid en werkt in Rotterdam voor het webbureau Level Level als accessibility consultant. Daarnaast geeft ze les bij het online studie platform over toegankelijkheid: The A11Y Collective.
Ze begeleidt webprojecten en geeft in-house trainingen, workshops, cursussen en consultancy voor de grote webbureaus. Ze deelt haar kennis graag bij WordCamps en conferenties wereldwijd. Als ze niet aan het programmeren, reviewen of lesgeven is, werkt Rian graag in haar tuin.
Als interface ontwerper bij bol.com helpt Niels-Peter bij het inrichten en vormgeven van het design systeem. Hij houdt van de uitdagingen die komen kijken bij het bouwen van een vormgeving voor complexe producten en van de mogelijkheden die het kan geven bij het verbeteren van de gebruikerservaring en manier van werken.
Bij bol.com werkt Stef als UX strategist. Daarbij zorgt hij dat de UX-strategie overal duidelijk is, dat innovatieteams werken aan dezelfde doelen en iedereen denkt aan de klant in elke stadium van het ontwerp en ontwikkeling.
Bol.com is een grote organisatie waar verschillende UX-ontwerpers werken in verschillende onderdelen en teams. Zijn taak is daarom ook het leiden van de interne Design Community. Daarmee focussen ze op het delen van informatie (binnen én buiten bol.com), samenwerking en gewoon lol hebben.
Rian Rietveld, Niels-Peter Foppen en Stef van der Feen tijdens hun presentatie op het NCDT 2022
Tekstversie
Presentatie van Rian Rietveld van Level Level en Niels-Peter Foppen, Stef van der Feen van Bol.com.
Hoe toegankelijk zijn webwinkels in Nederland? En welke acties neemt Bol.com om de toegankelijkheid van te verbeteren?
Rian Rietveld start met vertellen over haar webwinkelonderzoek. Lees het hele onderzoek op Webwinkel onderzoek 2021.
De wet gaat veranderen, in juni 2025 moeten alle grote webshops in Nederland toegankelijk zijn voor mensen met een beperking.
Ik ben Rian Rietveld, is expert webtoegankelijkheid bij de WordPress agency Level Level en ik vroeg me af hoe toegankelijk webshops op dit moment zijn. Het is al snel 2025, wat is de stand van zaken nu.
Elk jaar publiceert het magazine Twinkle de Twinkle100, een overzicht van de 100 grootste webshops in Nederland. We selecteerden hieruit de 15 grootste webshops te weten: Bol.com, Mediamarkt, Zalando, de HEMA, Coolblue, Wehkamp, IKEA, Amazon, Jumbo, Albert Heijn, H&M, HelloFresh, de Bijenkorf, About You en Apple. Een lijst indrukwekkende lijst namen.
Hoe ga je de toegankelijkheid meten? Een compleet onderzoek van alle functionaliteit in deze 15 webshops kost erg veel tijd kwijt, dus kozen we voor een pragmatisch opzet.
Kun je als je blind bent, en toetsenbord en schermlezer moet gebruiken, überhaubt een bestelling doen?
Vanaf het accepteren van de cookies tot en met het gaan betalen?
Het betalingssysteem hebben we niet meegenomen want dat wordt beheerd door de banken.
We hebben het hele besteltraject in 18 stapjes opgedeeld. Kan ik:
cookies accepteren en daarna de website gebruiken
het hoofdmenu gebruiken
de zoekfunctie op de voorpagina gebruiken
het filter bij de zoekresultaten gebruiken
een item kiezen uit de zoekresultaten
een product bekijken: titel, prijs, omschrijving
opties wijzigen/ingeven: bijvoorbeeld kleur, maat, aantal
een artikel in het winkelwagentje stoppen
het winkelwagentje openen en uitlezen wat ik heb besteld
naar bestellen
een account aanmaken
inloggen
een bezorgadres ingeven
een bezorgmoment kiezen
het eindbedrag en de bezorgkosten uitlezen
een wijze van betalen kiezen
de bestelknop drukken om te betalen of te bestellen
om hulp vragen via de website
We gingen aan de slag om de stappen te nemen met het toetsenbord en de schermlezer VoiceOver. We hebben ook naar de code-kwaleit gekeken met een automatische tool: Axe DevTools.
En voor elk stapje gaven we een score: nul punten als het helemaal niet lukte om de stap te nemen, vijf punten als lukt met veel moeite en 10 punten als het goed ging.
Van de 15 onderzochte webshops kun je er maar 7 bestellen als je blind bent en soms alleen met met hangen en wurgen.
Bestellen lukte bij de Nederlandse websites Bol.com, Coolblue, Amazon, Albert Heijn. H&M, Hello Fresh en Apple. Bij de overige acht webwinkels kun je dus niet bestellen als je blind bent.
In cijfers:
Website
Score stappen (%)
Apple
94
H&M
89
Coolblue
83
HelloFresh
83
Amazon
83
IKEA
74
Bol.com
74
Zalando
72
Albert Heijn
79
Jumbo
72
De Bijenkorf
69
About You
64
HEMA
60
Wehkamp
60
MediaMarkt
50
Apple scoort hier in het beste 94%. Daarna H&M van 89%. Als slechtste kwamen uit de bus de HEMA (60%), Wehkamp (60%) en de MediaMarkt (50%). Daar is nog veel werk aan de winkel. En dan is er een grote groep in de middenmoot van webwinkels die het ook veel beter zouden kunnen doen.
Wat zijn nou de grootste problemen die we steeds weer tegen kwamen bij de webwinkels?
Als eerste vorm over functie
Het moet er gelikt uitzien, mooie heen en weer blader functies, visueel aantrekkelijke componenten. Het werkt het goed met je ogen en met de muis, maar als je muis niet kunt gebruiken dan is sommige functionaliteit gewoon helemaal onbruikbaar. Op het scherm staat een screenshot van het bestelmoment kiezen op de website van de Jumbo. Het ziet er heel mooi uit, je kunt met de pijltjes op de datum heen en weer schuiven om een datum te kiezen en dan komen eronder de beschikbare bezorgtijden. Deze constructie werkt niet met een toetsenbord dus dan houdt het bestellen op. Een schermlezer begrijpt ook niet wat je precies moet kiezen. Mooi maar onbruikbaar. Form over function.
Informatie alleen visueel weergeven
Het volgende probleem is informatie alleen visueel weergeven. Op het scherm staan drie aanbiedingen, scherp geprijsde aanbiedingen.
Er staan 2 prijzen bij elke aanbieding. De een lichtgrijs en doorgestreept, de andere prijs in een knalrood kader en daaronder staat in het rood “een dagdeal”. Dus, als je kunt zien, zie je connectie van rood is de dagdeal is de huidige prijs. Als je deze tekst voorgelezen krijgt dan hoor je alleen 2 prijzen en er is geen aankondiging van wat de huidige prijs is.
Slecht leesbare teksten
Oh wat houden designers van grijs op wit… Maar dat terzijde…
Op het scherm staat de cookiemelding bij Coolblue. Als je goed kunt zien en ook niet kleurenblind bent, dan zie je 2 links “hier” en “wijzigen” in het lichtblauw. Nu is “hier “zo'n beetje de slechtste link tekst die er is. Iedereen moet dan de hele zin gaan lezen om te begrijpen waar de link naartoe gaat. Maar de links hebben ook een slecht kleurcontrast en zijn bovendien niet onderstreept. Dus “hier” heeft een slechte linktekst, is slecht van kleurcontrast en slecht onderscheidbaar als link. Dat kan heel makkelijk veel beter.
Niet-werkende toetsenbordnavigatie
Het mij viel op dat blijkbaar bijna nooit wordt getest met alleen een toetsenbord. Op het een scherm staat het hoofdmenu van Albert Heijn. Als je met de muis over de “inloggen”-link gaat, opent er een submenu. Met een toetsenbord kun je hier niet bij, het submenu opent niet. Dit is dus niet getest. De developer denkt, het werkt met een muis, prima, ik ben klaar.
Kwaliteit van de HMTL-code
We hebben ook de kwaliteit van de code getest, de achterliggende code de HTML waar de website in geschreven is. Bij alle websites vonden we hier fouten in. En dat is zo jammer. Foutloze code werkt veel beter op alle verschillende apparaten waar we het internet gebruiken.
Kwaliteitscontrole over het hele traject
Als ik dit nou alles globaal bekijk, dan valt het me op dat er geen kwaliteitscontrole is over het hele traject. De verschillende componenten binnen een website verschillen enorm van kwaliteit. Op een en dezelfde website kan bijvoorbeeld het filter goed toegankelijk zijn, maar de bestelprocedure helemaal niet. Dan is er geen kwaliteitscontrole vanaf het begin tot aan het eind. Dat zou eigenlijk moeten. Controle of het werkt, niet alleen met je ogen en een muis maar ook met toetsenbord en schermlezer.
Wat zijn de grootste problemen bij bol.com?
Een groot probleem bij bol.com is de niet goed werkende toetsenbord-navigatie. Bijvoorbeeld de subitems in het het hoofdmenu. Het werkt met de muis, maar met een toetsenbord zijn de submenu-items onbereikbaar.
Een tweede probleem: Het is moeilijk om hulp te vragen. Alle vragen worden doorgeleid naar de chatbox Billie en nou is dat nou juist een ontoegankelijke chatbox. Er is geen manier om via de website zelf om hulp te vragen. Wel via social media zoals Twitter, maar dat vind ik nogal een zwaktebod. Het moet gewoon via de website zelf kunnen.
En dan, net zoals bij alle andere websites: fouten in de code, daar valt ook nog heel veel te verbeteren.
Hey bol.com, wat ga je eraan doen?
Bij bol.com werd al met oog op toegankelijkheid ontworpen en ontwikkeld. Dit waren initiatieven per product (bijvoorbeeld Checkout) waarbij tussen de producten weinig tot geen kennisuitwisseling plaatsvond en er niet volgens dezelfde richtlijnen en kaders werd toegewerkt naar een gezamenlijk eindresultaat.
Een eerste aanleiding om hier binnen de webwinkel meer focus in aan te brengen was de start van het Design System team. Componenten zijn we van de grond af aan opnieuw gaan opbouwen en documenteren. Met daarbij oog voor toegankelijkheid. Het Design System team heeft zichzelf als doel gesteld alles op te leveren compliant aan WCAG 2.1 AA.
Het onderzoek was voor ons een waardevolle en welkome aanleiding om binnen onze organisatie meer aandacht op dit onderwerp te vestigen. In februari 2022 hebben we vanuit ons Design System team een Accessibility Month georganiseerd met als doel het bewustzijn op dit onderwerp te vergroten. Gedurende deze maand deelden diverse externe en interne sprekers hun kennis over dit onderwerp.
Hoe gaat het design system team te werk?
Componenten ontwerpen wij op basis van best-practices en een checklist gelinkt aan WCAG richtlijnen.
Componenten ontwikkelen wij volgens WCAG richtlijnen en semantische HTML.
Er is een nauwe samenwerking tussen de designer en engineer tijdens het development proces.
Waar zijn jullie als eerste mee aan de slag gegaan?
In samenwerking met Google en Valsplat hebben we een Mobile Lab onderzoek gedaan met ervaringsdeskundigen. In dit onderzoek zijn gebruikers met een visuele beperking geïnterviewd tijdens hun aankoopproces op bol.com (via mobile). Zo hebben we beter inzicht gekregen in hun gewoonten, voorkeuren en uitdagingen.
Heeft het jullie manier van werken veranderd?
We bevinden ons nog in de fase waar we aan het uitzoeken zijn hoe we toegankelijkheid structureel onderdeel van ons werkproces kunnen maken. Waar dit in het Design System team al zit ingebakken is dit nog niet bij alle product teams het geval.
Daarom geven we zichtbaarheid aan wat toegankelijkheid betekent. We helpen onze design community en onze product teams met suggesties hoe ze hun proces kunnen verbeteren voor de lange termijn en werken aan optimalisaties op de korte(re) termijn.
Gaan jullie structureel testen op toegankelijkheid?
Het Mobile Lab onderzoek met visueel beperkte gebruikers is ons erg goed bevallen. Het heeft impact gemaakt en we zijn momenteel aan het kijken hoe we hier structureel vervolg aan kunnen geven.
Te denken valt aan een Definition-of-Done en acceptatie criteria voor design, development en software-testing.
Welke ambitie heeft het team?
Onze ambitie is om meer product teams aan de slag te laten gaan met toegankelijkheid. Om zo met elkaar te leren wat dat voor ons betekend en hoe we dat binnen bol.com kunnen organiseren. We beseffen ons dat we dit niet van de ene op andere dag voor elkaar krijgen
Vanuit het Design System hebben we een concrete ambitie om wat wij opleveren te laten doen voldoen aan de WCAG 2.1 AA richtlijnen.
Hoe zit het met het support van het management?
In maart 2022 heeft bol.com haar doel aangescherpt: “Continuously advance our platform for a better tomorrow for us all”. Directe managers steunen onze ambitie om de website toegankelijker te maken.
Hey bol.com, waar denken jullie volgend jaar te eindigen?
De positie op de ranglijst is voor ons niet zo interessant. Wat voor ons belangrijk is: dat we “beter” zijn geworden en dat we positieve reacties krijgen van onze klanten op deze verbeteringen.
Over Rian Rietveld
Over Niels-Peter Foppen
Over Stef van der Feen