Hema
Onze bevindingen over de webwinkel van de HEMA
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.
De Hema
Hema heeft in 2022 een eindscore van 50%. Vorig jaar was de score 46%.
URL voorpagina: https://www.hema.nl/
Datum van testen: 24 november 2022
Er is bij de website van de Hema geen rekening gehouden met webtoegankelijkheid. Wij zijn geen verandering ten opzichte van vorig jaar bij het doorlopen van de stappen, behalve wat verbetering van de codekwaliteit.
Omdat alle focusable elementen geen visuele focus krijgen is de site voor toetsenbord gebruikers volkomen onbruikbaar. De gehele site krijgt hierdoor een score van ‘nee, je kunt niet met toetsenbord bestellen’. De rest van de functionaliteit is beoordeeld alsof er visuele focus is.
Om de site toch te kunnen testen gebruiken we de addon Focus Finder in FireFox.
De grootste problemen die wij tegenkwamen:
- het ontbreken van een visuele focus bij de gehele website;
- kleurcontrast: het lichtblauw, oranje en geel en lichtgrijs zijn te licht om te gebruiken voor tekst;
- gebrek aan kennis over hoe te navigeren met een toetsenbord en hoe HTML moet worden toegepast in formulieren.
- keuzerondjes en keuzevakjes zijn onbereikbaar met het een toetsenbord waardoor bestellen niet mogelijk is. Dit is heel makkelijk te verhelpen in de code.
Problemen per stap bij de Hema
Stap 1: kan ik cookies accepteren, en daarna de website gebruiken:
Het modal met de cookiebanner krijgt geen toetsenbordfocus en staat onderaan de pagina in de code. De items in het modal hebben geen visuele focus, dus het is heel lastig uit te vinden wanneer je op accepteren moet drukken.
VoiceOver: Het modal is te bereiken via doortabben en via de knoppenlijst want er is een H2 kopje Cookiestatement.
Stap 2. kan ik het hoofdmenu gebruiken:
De knoppen en links hebben geen duidelijke, of zelfs helemaal geen, toegankelijke naam, zoals het winkelmandje.
Stap 3. kan ik de zoekfunctie op de voorpagina gebruiken:
‘Suggesties’ in de zoekfunctie klapt niet dicht na verlaten focus, waardoor de filters eronder onzichtbaar blijven.
Stap 4. kan ik het filter bij de zoekresultaten gebruiken:
De categorieën zijn links, dat is verwacht gedrag. Echter, de filters boven de producten zijn opgemaakt als keuzevakjes, maar het blijken links te zijn. Dit is onverwacht omdat deze twee verschillend bediend worden met een toetsenbord. Elke selectie brengt weer een verversing van de pagina, wat het selecteren van meerdere keuzes lastig maakt.
Stap 5. kan ik een item kiezen uit de zoekresultaten:
Je kunt een item selecteren. Al zijn er veel onzichtbare tabstops. De extra informatie die de muis gebruiker krijgt op hover, over de maten, komt niet tevoorschijn op focus.
VoiceOver: De prijs wordt in stukjes voorgelezen. Dit maakt het moeilijker een keuze te maken. De extra informatie voor muis gebruikers ontbreekt hier ook.
Stap 7. kan ik opties wijzigen/ingeven: kleur, maat, aantal:
De maat keuzes zijn links, terwijl ze er niet zo uitzien.
Het aantal is heel lastig wijzigen met een toetsenbord. De link reageert traag en de keuze is moeilijk te zien.
VoiceOver: Het is onmogelijk met VoiceOver het aantal aan te passen omdat hier niet het juiste HTML element wordt gebruikt en er geen auditieve feedback is over wat je aan het doen bent.
Stap 9. kan ik het winkelwagentje openen en uitlezen wat ik heb besteld:
Na het drukken op de knop ‘In winkelmandje’ in het hoofdmenu opent een modal aan de zijkant om direct naar bestellen te gaan. Dit modal krijgt geen toetsenbordfocus. Het is te bereiken door over de pagina heen te navigeren en vanaf boven weer opnieuw te beginnen. Hier komt de focus op de bestelknop. Het venster is niet te sluiten met het toetsenbord.
De knop ‘verwijder’ kan niet met het toetsenbord gebruikt worden.
Na het aanpassen van de maat en het aantal laadt de pagina opnieuw, zodat de gebruiker weer van bovenaf aan moet navigeren met het toetsenbord. De knop om een kortingscode in te voeren krijgt geen toetsenbordfocus. De tooltips bij de bezorgopties krijgen geen toetsenbordfocus en kunnen niet worden uitgelezen.
Na het drukken op de knop ‘in winkelmandje’ en in het hoofdmenu opent een modal aan de zijkant om direct naar bestellen te gaan.
Na drukken op de knop ‘In winkelmandje’ is het lastig om te ontdekken of er wat gebeurt. Het modal krijgt geen toetsenbordfocus en heeft ook geen echt kopje.
Het is voor een schermlezer gebruiker heel lastig om binnen de bestelflow te ontdekken hoe te bestellen. Dit kan alleen door in de linklijst de link ‘Bestellen’ te vinden. Je moet dan wel weten naar welk woord je moet zoeken.
Stap 11. kan ik een account aanmaken:
Nee, zie bij het ingeven van het bezorgadres.
Stap 13. kan ik een bezorgadres ingeven:
Toetsenbord: De keuze voor afhalen en bezorgen is onbereikbaar voor een toetsenbord. Ook de keuzes voor aanhef, land en keuze nieuwsbrief of ander factuuradres krijgen geen toetsenbordfocus. Er staat ook nergens aangegeven welke velden verplicht zijn.
Omdat ‘hoe wil je aangesproken worden?’ een verplicht veld is, is dit een blocker om te bestellen. Een toetsenbord gebruiker kan geen bezorgadres ingeven.
Stap 14. kan ik een bezorgmoment kiezen:
VoiceOver: Nee, de optie om de bezorgdatum te selecteren geeft geen feedback over wat in te vullen en wat is gekozen.
Stap 16. kan ik een wijze van betalen kiezen:
Nee, de keuzerondjes om een betalingswijze te kiezen krijgen geen toetsenbordfocus.
Stap 18. kan ik om hulp vragen:
Tijdens het bestellen staat op elke pagina rechts de informatie voor de klantenservice. De informatie op de website zelf is ontoegankelijk.
De uitklap accordeons op de subpagina’s zijn niet te openen met een toetsenbord.
Vergelijking met vorig jaar
HEMA lijkt niet te zijn veranderd ten opzichte van vorig jaar. De eindscore is iets omhoog, omdat de codekwaliteit beter door de test kwam. Echter zijn de belangrijkste stappen nog steeds niet te doorlopen met het toetsenbord en/of de screen reader. Je kan geen account aanmaken, geen bezorgadres ingeven, geen bezorgmoment kiezen en geen betaalmethode kiezen. Je kunt dus geen bestelling plaatsen bij de HEMA als je geen muis kunt gebruiken.
Codekwaliteit Hema
De ernstigste problemen die wij tegenkwamen:
- knoppen zonder toegankelijke naam;
- onvoldoende kleurcontrast voor sommige teksten;
- links zonder toegankelijke naam;
- formuliervelden zonder gekoppelde labels;
- afbeeldingen zonder alternatieve tekst.
