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
URL voorpagina: https://www.hema.nl/
Datum van testen: 18-19 oktober 2021
Er is bij de website van de Hema geen rekening gehouden met webtoegankelijkheid.
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.
Een pluspunt: de chatbox is goed toegankelijk met een toetsenbord en schermlezer.
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 select knop voor de categorieën werkt alleen met een muis. Lastig is dat de keuzes in het zoekveld open blijven staan nadat je er doorheen bent getabt.
VoiceOver: Met moeite. Sommige knoppen hebben geen naam, zoals de zoekknop; de link naar favorieten en het winkelwagentje vermeldt alleen de prijs in de linklijst. De select knop voor de categorieën is ook niet te gebruiken.
Het winkelmandje in het hoofdmenu heeft geen toegankelijke naam, alleen een title attribuut ‘bekijk je winkelmandje’. Voorgelezen wordt nu in de linklijst: 1 4. Hierbij is 1 het aantal en 4 de prijs.
De tekst ‘bekijk je winkelmandje’ staat niet in de linklijst maar wordt alleen voorgelezen als de link focus krijgt.
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 en bewerkelijk maakt.
De keuze van de prijsrange is niet in te vullen met een toetsenbord, ook de slider werkt niet.
De keuzerondjes bij ‘voorraad’ zijn in de HTML niet goed opgezet en daardoor niet aan te passen met een toetsenbord.
De optie ‘sorteer op’ is niet te te gebruiken op toetsenbordfocus.
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 als zij ‘hovert’ over de maten komt niet tevoorschijn op toetsenbordfocus.
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’ krijgt geen toetsenbordfocus. Na het aanpassen van de maat en het aantal laadt de pagina opnieuw, zodat de gebruiker weer van bovenaf aan moet gaan 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.
VoiceOver: Het winkelmandje in het hoofdmenu heeft geen toegankelijke naam, alleen een title attribuut ‘bekijk je winkelmandje’. Voorgelezen wordt nu: 1 4 bekijk je winkelmandje . 1 is het aantal, 4 is de prijs.
De tekst ‘bekijk je winkelmandje’ staat niet in de linklijst maar wordt alleen voorgelezen als de link toetsenbordfocus krijgt.
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 gebeurd. Het modal krijgt 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.
Op elke pagina wordt de inhoud van het winkelwagentje uitgelezen, ook al is deze niet te zien. Dit is verwarrend bij het navigeren en begrijpen van de inhoud van de pagina.
Bij het drukken op de link in het menu opent het venster ook en krijgt het gelukkig meteen de focus. Dan is het te doen om naar de knop ‘bestellen’ te gaan en die te kiezen.
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.
Omdat ‘hoe wil je aangesproken worden?’ een verplicht veld is, is dit een blocker om te bestellen. Een toetsenbord gebruiker kan geen bezorgadres ingeven.
Er staat nergens aangegeven welke velden verplicht zijn.
VoiceOver: Dezelfde problemen als toetsenbord, plus: er is geen feedback over welke velden verplicht zijn of niet goed ingevoerd zijn.
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:
Ja, via telefoon en ook de chatbox is goed toegankelijk.
De afbeeldingen onder het kopje ‘Waar ben je naar op zoek’ hebben echter geen alternatieve tekst dus als linktekst wordt de naam van het plaatje voorgelezen. De vraag-en antwoord accordeons op de pagina’s en subpagina’s van de klantenservice zijn ontoegankelijk. Ze zijn niet te openen met een toetsenbord.
Codekwaliteit Hema
Totaal 48 van de 100 punten.
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.
Reactie van de Hema
De afgelopen jaren zijn voor HEMA uitdagend geweest. Daarom is er minder geïnvesteerd dan we hadden gewild in de onze webshop en dat zien we helaas nog steeds terug.
Met nieuwe eigenaren, een nieuwe directie en een kraakheldere strategie is de toegankelijkheid van hema.nl een prioriteit. Inmiddels is een grote inhaalslag ingezet, met als doel om in 2025 volledig te kunnen voldoen aan de nieuwe regelgeving.
Inclusiviteit is een belangrijk thema voor HEMA. Wij zeggen elke dag dat HEMA voor iedereen is en dat willen we op alle vlakken waar maken. Daarom nemen we jullie rapport heel serieus. Het laat ons zien waar we te kort schieten en dat is waardevol als je jezelf wilt verbeteren.