H&M
Onze bevindingen over de webwinkel van H&M
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.
H&M
URL voorpagina: https://www2.hm.com/nl_nl/
Datum van testen: 3 september 2021
Webtoegankelijkheid is duidelijk meegenomen in de website van de H&M. Er is feedback bij acties en foutmeldingen voor schermlezers.
De grootste problemen die wij tegenkwamen:
- de tabvolgorde in het hoofdmenu is niet zoals de zichtbare volgorde. De submenu-items openen niet op focus;
- niet alle invoervelden hebben een gekoppeld label;
- er kan meer aandacht worden besteed aan de foutafhandeling bij formulieren;
- niet alles is naar het Nederlands vertaald voor schermlezers: ‘search results’ in het kruimelpad, ‘Divided’ bij de filters;
- aria-labels zijn niet naar het Nederlands vertaald.
Problemen per stap bij H&M
Stap 1: kan ik cookies accepteren, en daarna de website gebruiken:
In Safari krijgt de Cookiebanner geen focus, deze staat helemaal onderaan de code, maar overlapt de linkerkant van het scherm. Je moet met het toetsenbord helemaal door alle links heen navigeren om er te komen. In Chrome krijgt de banner wel meteen focus.
Stap 2. kan ik het hoofdmenu gebruiken:
De tabvolgorde in het hoofdmenu is niet zoals de zichtbare volgorde. De submenu-items openen niet op focus.
Stap 4. kan ik het filter bij de zoekresultaten gebruiken:
Boven het filter aan de linkerkant is er een skiplink ‘Navigatie overslaan’, als je verder navigeert krijgt alleen de SALE knop focus, de rest wordt overgeslagen. De filteropties zijn niet te bereiken met het toetsenbord. Alleen als een filter actief is krijgt het fous. Er is geen visuele aanduiding welk filter gekozen is.
Het filter boven de resultaten is wel te gebruiken met een toetsenbord.
Stap 11. kan ik een account aanmaken:
De optie ‘Markt wijzigen’ is een verwarrende optie. Wat betekent dat? Voor alle bezoekers zou dat best meer uitleg verdienen zo midden in een formulier. ‘Nederland’ aanklikken zorgt voor een popup scherm met ‘Je staat op het punt je markt te wijzigen’. Dit komt vreemd over, kun je niet gewoon een land kiezen? Wat zijn de consequenties?
VoiceOver: De velden voor woonadres hebben geen goed gekoppeld label, waardoor bij elk invoerveld ‘woonadres’ wordt uitgesproken. Ook is het lastig te begrijpen wat je bij het landnummer en bij ‘Markt’ moet invullen.
Bij het verzenden van een leeg formulier wordt uitgesproken ‘bevestig je wachtwoord’ en krijgt het eerste invoerveld voor een e-mailadres de focus. Dit is verwarrend. Foutmeldingen staan niet gekoppeld aan de invoervelden.
Stap 12. kan ik inloggen:
VoiceOver: Foutmeldingen worden niet goed uitgesproken.
Stap 13. kan ik een bezorgadres ingeven:
Toetsenbord: De wijze van verzenden lijken keuzerondjes maar zijn knoppen, dit is verwarrend bij de bediening. Daarnaast is de visuele focus lastig te zien.
Codekwaliteit H&M
Totaal 62 van de 100 punten.
De ernstigste fouten die wij tegenkwamen::
- afbeeldingen zonder alternatieve tekst;
- [role=’img’] elementen zonder alternatieve tekst;
- geneste interactieve elementen.
Reactie van H&M
H&M is committed to accessibility. That commitment means H&M embraces guidelines and supports assistive technologies to insure the highest standards.
We are happy and proud that our efforts so far have led to a high digital accessibility rating. H&M wants to offer fashion fans an inspiring, relevant, and convenient shopping experience, both online and offline. Therefore, we continue to improve the customer experience both in physical stores and online for a personal and welcoming ambiance.
We will continue our work and keep improving our technical solutions making it easier for customers to navigate our online and physical stores and find their fashion favourites. To create modern and inspiring stores with improved service and assortment, tailored to the current needs of our customers and in line with our omni-channel strategy.