Wehkamp
Onze bevindingen over de webwinkel van Wehkamp
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.
Wehkamp
URL voorpagina: https://www.wehkamp.nl/
Datum van testen: 2 augustus 2021, hertest op 8 september
De kwaliteit van de webtoegankelijkheid wisselt sterk per stap. Maar over het algemeen blijkt dat er niet wordt getest met een toetsenbord of schermlezer. Het is voor een toetsenbord- of schermlezer gebruiker onmogelijk om een account aan te maken.
Opvallend is dat een schermlezer gebruiker een iets betere ervaring heeft dan een toetsenbord gebruiker. Dit komt hoofdzakelijk omdat je met een schermlezer op meerdere manieren kunt navigeren en daardoor delen kunt overslaan. Ook is het ontbreken van een visuele focus voor een schermlezer geen probleem.
De grootste problemen die wij tegenkwamen:
- bij veel componenten ontbreekt de visuele focus;
- de productpagina bevat een toetsenbord-val bij de afbeeldingen-caroussel, waardoor de toetsenbord gebruiker niet bij de optie kan komen om een product in het winkelwagentje te stoppen;
- het is onmogelijk een account aan te maken met alleen het toetsenbord of schermlezer;
- veel functionaliteit werkt wel met een muis, maar niet met een toetsenbord. Dit blokkeert ook schermlezer gebruikers om in te loggen en te bestellen.
Problemen per stap bij Wehkamp
Stap 1: kan ik cookies accepteren, en daarna de website gebruiken:
Er is geen zichtbare toetsenbordfocus, wat het navigeren moeilijk maakt. Het is niet duidelijk wanneer het cookie modal focus krijgt. Als de snel link ‘Navigatie overslaan’ niet wordt gebruikt kom je in een toestenbord val terecht. Je kunt niet meer uit de navigatie-loop komen.
Met een hulpmiddel om de focus wel te zien blijkt dat het modal na het hoofdmenu focus krijgt. De links accepteren, weigeren en cookieverklaring staan in lichtgrijs op een witte achtergrond en zijn moeilijk te lezen. De knop ‘Alles accepteren’ kan gekozen worden. Al met al een hele puzzel.
Stap 2. kan ik het hoofdmenu gebruiken:
Er is gedeeltelijk geen visuele focus en de submenu’s klappen niet uit bij toetsenbordfocus.
Stap 3. kan ik de zoekfunctie op de voorpagina gebruiken
Je kunt met het toetsenbord de zoekfunctie bereiken. Ook suggesties zijn te selecteren. Wat onverwacht is, is dat het lijkt alsof de loep een verzend knop is, maar er is geen verzend knop. Omdat de visuele focus ontbreekt, ga je dan ongewild naar de klantenservice pagina.
Stap 4. kan ik het filter bij de zoekresultaten gebruiken:
Door het ontbreken van de visuele focus is het een hele puzzel om bij het filter de juiste opties voor de maat, kleur en mouwlengte te kiezen. Het is jammer dat er geen speciale skiplink is om meteen het filter over te slaan en naar de resultaten te springen.
VoiceOver: Er is een kopje ‘filters’, zodat je daar meteen kunt starten met lezen, dat is fijn. De filters worden niet goed voorgelezen. Soms is de relatie tot wat je kiest weg. Dan worden alleen de keuzes voorgelezen en niet wat je kiest (bijvoorbeeld herenmaten).
Stap 5. kan ik een item kiezen uit de zoekresultaten:
De afbeeldingen en naam van een product krijgen visuele focus. Wel moet je eerst het gehele filter doortabben En omdat het filter geen visuele focus krijgt is het een heel karwei om bij de product links te komen.
VoiceOver: met wat zoeken in de links- en koppenlijst zijn de producten te bereiken. Wat was het fijn geweest als er een duidelijk kopje boven de producten had gestaan.
Stap 6. kan ik een product bekijken: titel, prijs, omschrijving:
Er is voor een schermlezer geen onderscheid tussen het uitspreken van de prijs en de kortingsprijs.
Stap 7. kan ik opties wijzigen/ingeven: kleur, maat, aantal:
De carrousel voor de afbeeldingen van het product is een toetsenbord-val, je kunt er niet langs verder tabben noch in Chrome, noch in FireFox of Safari. Hierdoor is de rest van de pagina onbereikbaar. Met de muis zijn we verder gegaan om over de caroussel heen te komen. Pas toen was het mogelijk een maat te kiezen.
Omdat de schermlezer makkelijk delen van de webpagina kan overslaan is de carrousel hier geen probleem. De opties voor het wijzigen van kleur en maat zijn toegankelijk. De modals om een maat te kiezen en voor het maatadvies worden goed voorgelezen.
Opmerking: Na het kiezen van een maat gaat de toetsenbordfocus weer naar bovenaan de pagina, dit is hinderlijk.
Stap 8. kan ik een artikel in het winkelwagentje stoppen:
Niet met het toetsenbord. Vanwege de toestenbord-val bij de carrousel is de knop in winkelwagen onbereikbaar.
Stap 9. kan ik het winkelwagentje openen en uitlezen wat ik heb besteld:
De knop om een product te verwijderen wordt alleen voorgelezen als ‘knop’ en de optie om het aantal te wijzigen heeft geen gekoppeld label, zodat niet voorgelezen wordt wat hier aan te passen.
Account aanmaken: De knop ‘Maak een account’ reageert niet op het toetsenbord. Het aanmaken van een nieuw account is dus onmogelijk.
Foutmeldingen worden niet voorgelezen bij het formulier met de persoonsgegevens.
Stap 11. kan ik een account aanmaken:
Bij het inloggen op een bestaand account wordt het label van het wachtwoord niet voorgelezen.
Stap 13. kan ik een bezorgadres ingeven:
Vanwege het ontbreken van visuele focus is het lastig te zien hoe je de bezorgwijze kunt selecteren. Met tabs tellen lukt het selecteren van de optie thuisbezorgen.
VoiceOver: Er wordt niet uitgesproken welk keuzerondje voor de bezorgwijze is geselecteerd.
Stap 16. kan ik een wijze van betalen kiezen:
Het selecteren van een betalingsmethode is een enorme puzzel vanwege de opzet en het ontbreken van de visuele focus. De combinatie van een keuzerondje (dat eigenlijk een knop is) en een accordeon, (de opties klappen open als je een keuze maakt). Het is het tevens onmogelijk een andere betaalwijze te kiezen als je eenmaal een keuze hebt gemaakt.
Met VoiceOver: De knop naar Betaal met Apple Pay wordt alleen voorgelezen als ‘knop’. Ook hier zijn de bezorg- en betaalopties niet te wijzigen met het toetsenbord, de interactie is onverwacht omdat je niet van keuzerondje naar keuzerondje kunt gaan. alleen met de muis.
Stap 17. kan ik op de bestelknop drukken om te betalen of te bestellen:
Als een keuze voor een bezorg- en betaalwijze is gemaakt is de ‘Naar betaling’ knop actief. Aangezien de voorgaande stappen niet te doen zijn, is ook deze optie niet bereikbaar. Maar als bezorg- en betaalwijze met de muis wordt gekozen, is de knop ‘Plaats bestelling’ zelf uit te lezen en bereikbaar. Al staat deze wel ingebed bij de betalingswijze.
18. kan ik om hulp vragen:
Alleen via de telefoon, Facebook of Twitter. Niet via e-mail. Vragen stellen via de chatbox is alleen te bereiken na inloggen. Opties voor facebook en twitter zijn niet open te klappen met een toetsenbord op de contactpagina. De links staan echter wel in de footer.
De chatbox is te bedienen met een toetsenbord, antwoorden worden echter niet uitgesproken voor VoiceOver.
Codekwaliteit Wehkamp
Totaal 14 van de 100 punten.
- knoppen zonder toegankelijke naam;
- links zonder toegankelijke naam;
- ARIA formuliervelden zonder toegankelijke naam;
- formuliervelden zonder gekoppelde labels;
- select elementen zonder toegankelijke naam;
- geneste interactieve elementen;
- afbeeldingen zonder alternatieve tekst;
- onvoldoende kleurcontrast voor sommige teksten.
Reactie van Wehkamp
De laatste jaren hebben wij ons sterk gefocust op het verder optimaliseren van onze website en app, met als doel onze klanten de meest inspirerende, zorgvuldig samengestelde en relevante online shop voor mode en wonen te bieden.
We erkennen de mogelijkheid om ook de benoemde doelgroep met een beperking beter te servicen. We nemen de suggesties dan ook ter harte en gaan bekijken hoe we de toegankelijkheid voor deze doelgroep kunnen verbeteren.