Bol.com
Onze bevindingen over de webwinkel van bol.com
De laatste versie van het webwinkel toegankelijkheidsonderzoek is nu beschikbaar.
Elk jaar voeren we een onderzoek uit naar de toegankelijkheid van de grootste webwinkels van Nederland. Je leest nu een onderzoek uit ons archief uit voorgaande jaren. Leer meer over de toegankelijkheid van webshops in ons meest recente onderzoek.
Bol.com
URL voorpagina: https://www.bol.com/nl/nl/
Datum van testen: 15 juli – 21 juli 2021
Er is aandacht aan toegankelijkheid besteed, maar de website is niet goed getest met het toetsenbord alleen of met een schermlezer. Daardoor is sommige functionaliteit moeilijk of zelfs onmogelijk, zoals contact opnemen met de klantenservice.
De grootste problemen die wij tegenkwamen:
- de chatbox Billie werkt niet met het toetsenbord of een schermlezer. Omdat er geen andere manier aangeboden wordt op de website om hulp te vragen, heeft de bezoeker een probleem;
- het is niet mogelijk een zakelijk account aan te maken met een toetsenbord of schermlezer;
- de prijs wordt niet goed voorgelezen bij de producten, de volgorde van de cijfers klopt niet en er wordt niet voorgelezen dat het de prijs betreft;
- kleurcontrast van het groen en rood en sommige grijze tekst is te laag ten opzichte van de witte achtergrond;
- de gebruiksvriendelijkheid voor toetsenbord gebruikers is niet goed. Er moet door teveel informatie worden heengetabt om de belangrijke functies te bereiken.
Problemen per stap bij Bol.com
Stap 1: kan ik cookies accepteren, en daarna de website gebruiken:
De cookiebanner krijgt toetsenbordfocus. Maar bij vooruit tabben blijft de focus hangen op de knop ‘weigeren’. Bij terug tabben (shift-tab) sla je de link ‘cookiebeleid’ over en tab je uit het venster terug naar de statusbalk van de browser. Bij vooruit tabben slaat de link ‘cookiebeleid’ weer over en gaat de focus naar Accepteren.
Hierdoor is het moeilijk voor een toetsenbord-gebruiker om de cookiebeleid link te selecteren als men er voorbij is getabt. De link in cookiebeleid is niet onderstreept, dit is lastig voor bezoekers die kleurenblind zijn.
Stap 2. kan ik het hoofdmenu gebruiken:
Het submenu is niet te openen met een toetsenbord.
Stap 4. kan ik het filter bij de zoekresultaten gebruiken:
Het filter kan niet gemakkelijk worden bereikt via navigatie of skiplink, koppen of links, er is geen kopje ‘filter’. Omdat het filter onderaan de code van de pagina staat zal het waarschijnlijk niet worden ontdekt door een schermlezer gebruiker.
Het filter zelf werkt goed, de focus wordt echter na het kiezen boven de gerelateerde categorie geplaatst, wat aanvinken een heel karwij maakt.
Stap 6. kan ik een product bekijken: titel, prijs, omschrijving:
De prijs wordt niet in de goede volgorde voorgelezen: 9,80 wordt voorgelezen als ‘negen tachtig komma’. Dit komt omdat de volgorde van de elementen in de code anders is dan de visuele volgorde.
Stap 8. kan ik een artikel in het winkelwagentje stoppen:
Om een item in de winkelwagen te stoppen moet je eerst door alle content en reviews tabben. Het modal ‘Het artikel is toegevoegd aan je winkelwagen’ krijgt geen toetsenbordfocus. Dus men kan niet meteen verder. De winkelwagen is wel te bereiken via het menu bovenin.
Voor een schermlezer: De ‘in Winkelwagen’ knop komt vele malen voor. Niet alleen voor het product, maar ook voor de gerelateerde producten. Met VoiceOver is niet te onderscheiden wat je in het winkelwagentje stopt als je het kiest. Druk je op de knop, dan is er ook geen auditieve bevestiging van wat je in het winkelwagentje hebt gestopt.
Stap 9. kan ik het winkelwagentje openen en uitlezen wat ik heb besteld:
De knop ‘bestellen’ heeft een tabindex=”1″. Dit betekent dat deze als eerste focus krijgt. Daarna springt de focus naar de skiplink . Dit is onverwacht. Als een besteller op de normale manier door het formulier heen tabt lijkt het nu net alsof de ‘bestellen’ knop wordt overgeslagen.
Stap 11. kan ik een account aanmaken:
Bij het aanmaken van een account is veel van de extra informatie in het aanmeldformulier niet goed beschikbaar voor schermlezers, omdat deze niet is gekoppeld aan de invoervelden en daardoor niet samen worden voorgelezen.
Stap 13. kan ik een bezorgadres ingeven:
Voor wijzigingen van het bezorgadres opent een modal. Dit modal krijgt pas aan het einde van de pagina de toetsenbordfocus, als je de achterliggende links buiten het modal door ’tabt’.
Voor een schermlezer is het niet duidelijk dat er een modal tevoorschijn komt en wat je op dat moment kunt invullen. Via de formulier lijst in de web rotor zou het eventueel kunnen, maar dit vergt wel een erg grote inspanning en zoektocht van de gebruiker.
Stap 16. kan ik een wijze van betalen kiezen:
Als je eenmaal voor een betalingswijze kiest is het lastig om met een schermlezer te begrijpen hoe van betaalmethode te wisselen.
Stap 18. kan ik om hulp vragen:
Het is onmogelijk contact op te nemen via de website voor toetsenbord- en schermlezer gebruikers, omdat de chatbot Billie niet toegankelijk is.
Codekwaliteit Bol.com
Totaal 45 van de 100 punten.
De ernstigste fouten die wij tegenkwamen:
- onvoldoende kleurcontrast voor sommige teksten;
- select elementen zonder toegankelijke naam;
- knoppen zonder toegankelijke naam;
- links zonder toegankelijke naam;
- afbeeldingen zonder alternatieve tekst.
Reactie van Bol.com
Herkennen jullie je in deze beoordeling?
Bij bol.com vinden we toegankelijkheid belangrijk en we werken er hard aan om dit voor zoveel mogelijk mensen mogelijk te maken. We zijn op de hoogte van het probleem met de Billie chatbot en dat sommige teksten te weinig kleurcontrast hebben. We zijn bezig ons kleurpalet te verbeteren maar passen ook teksten aan om aan de minimale contrasteisen te voldoen. Dit is een doorgaand proces. Deze bevindingen zijn doorgegeven aan de teams die ervoor verantwoordelijk zijn, zij zullen hier verder in duiken op zoek naar oplossingen.
Wat is jullie visie wat betreft toegankelijkheid?
Onze ambitie is om “de winkel van ons allemaal” te zijn, dus wij willen er ook zijn voor iedereen die tijdelijk of permanent moeite heeft met het lezen, begrijpen of gebruiken van onze website en app. Daarnaast geloven wij erin dat een toegankelijke webshop een betere ervaring biedt voor al onze klanten.
Staan er verbeteringen op de planning? Zo ja, wat zijn die en wanneer? Zo nee, waarom niet?
Wij werken continu aan het verbeteren van onze gebruikservaring en toegankelijkheid is de afgelopen 2 jaar een steeds belangrijker geworden bij de ontwerpkeuzes die we maken en de code die we schrijven. Met regelmaat werken we samen met externen om de toegankelijk van onze winkel te verbeteren.
Zo hebben we bijvoorbeeld in 2020 onze check-out herbouwd met digitale toegankelijkheid als een van de belangrijkste uitgangspunten. In dit traject hebben we samen gewerkt met experts aan de check-out. Ons design-system team is dit jaar gestart met het ontwerpen, bouwen en standaardiseren van onze UI componenten volgens de WCAG 2.1 richtlijnen. Het komende jaar verwachten we daarom veel verbetering te zien op dit vlak. Ook wordt onze chatbot Billie naar het leesniveau ‘B1’ niveau gebracht.
We starten bij aanvang van het nieuwe jaar met een aantal kennisdeling sessies op dit onderwerp om de bewustwording te vergroten. Daarnaast zijn we aan het onderzoeken welke processen en tools we kunnen inzetten om onze designers en engineers hier in hun dagelijks werk bij te helpen. We denken hierbij onder andere aan het uitnodigen van mensen met een beperking bij onze gebruiksonderzoeken en tools die helpen met het checken op WCAG-richtlijnen bij de implementatie van nieuwe features.
Denken jullie de toegankelijkheid op orde te hebben wanneer de nieuwe regelgeving ingaat in 2025?
Zie de antwoorden op bovenstaande, we doen er alles aan om zo snel mogelijk al de verbeteringen door te voeren.