About you
Onze bevindingen over de webwinkel van About You
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.
About You
URL voorpagina: https://www.aboutyou.nl/
Datum van testen: 12-17 augustus 2021
Er is bij About You geen rekening gehouden met webtoegankelijkheid. Blokkades om te bestellen zijn: een account aanmaken, inloggen, een bezorgadres ingeven en een wijze van betalen kiezen.
De grootste problemen die wij tegenkwamen:
- veel knoppen en links hebben geen toegankelijke naam, veel afbeeldingen hebben geen alternatieve teksten;
- de website mist een goede koppenstructuur;
- grote delen van het inlog- en bestelsysteem zijn volledig ontoegankelijk.
Problemen per stap bij About You
Stap 2. kan ik het hoofdmenu gebruiken:
Geen visuele focus op de aanbiedingen en zoekfunctie. Submenu’s klappen niet open op toetsenbordfocus.
VoiceOver: de link voor de aanbiedingen is een afbeelding zonder alternatieve tekst, de zoekknop heeft geen toegankelijke naam en de submenu’s zijn onbereikbaar.
Stap 3. kan ik de zoekfunctie op de voorpagina gebruiken:
Toetsenbord: Het zoek-icoon krijgt geen visuele focus, maar met tabs tellen en gokken kan de knop bereikt worden. De suggesties zijn met de pijltjestoetsen te bereiken.
Daarna is het niet te zien hoe de zoekknop te bereiken, maar met op ‘Enter’ drukken lukt het ook.
VoiceOver: Het zoekicoon heeft geen naam (alleen knop), maar bij verder navigeren krijgt het invoerveld de focus. Het is zoeken en puzzelen.
Stap 4. kan ik het filter bij de zoekresultaten gebruiken:
Toetsenbord: De filters voor weergave, sortering, maat etc hebben geen visuele focus, dus dat is tellen waar je bent. Het is lastig dat de uitklapmenu’s voor de opties open blijven staan, daardoor is het onzichtbaar wat er bij sommige filters staat.
VoiceOver: Bij het kiezen van een item is er geen feedback over wat je precies hebt gekozen. De select weergave en sortering hebben geen label, bij het kiezen van de maat kun je niet terughoren wat je hebt gekozen.
Stap 6. kan ik een product bekijken: titel, prijs, omschrijving:
VoiceOver: Het H1-kopje staat helemaal onder het productinformatie, dit is verwarrend bij het navigeren naar de hoofdinhoud. Een schermlezer gebruiker verwacht dat onder het H1 kopje alle relevante informatie staat. Het is moeilijk om te horen welke informatie waarop betrekking heeft. Navigeren is moeilijk omdat een goede kopjesstructuur of meer context ontbreekt.
Stap 7. kan ik opties wijzigen/ingeven: kleur, maat, aantal:
VoiceOver: Het label van de kleur, de maat en de fabrikant wordt niet voorgelezen bij de keuzes. Uit wat voorgelezen wordt kan wel worden opgemaakt wat je kunt kiezen.
Stap 9. kan ik het winkelwagentje openen en uitlezen wat ik heb besteld:
Optie 1: via het modal.
Toetsenbord: Het modal om in het winkelwagentje te kijken krijgt pas toetsenbordfocus als je de gehele pagina bent door getabt. Daarna moet je door de gehele carrousel van ‘Past daarbij’ heen tabben om bij de knop ‘Naar de kassa’ te komen. Het modal sluit niet met de Escape key.
VoiceOver:
De enige manier om nu enigszins redelijk naar het winkelmandje te gaan is via de web router en de knop ‘Naar het winkelmandje’ te kiezen.
Optie 2: via het hoofdmenu en dan de link naar het winkelwagentje. Maar pas na een page reload in de huidige bestel flow.
VoiceOver: De link in het menu ‘naar het winkelwagentje’ heeft geen goede naam, die geeft alleen het cijfer aan van hoeveel items er in het mandje zitten. De aanhoudende schermlezer gebruiker zou kunnen gokken dat dit het winkelmandje is.
Stap 10. kan ik naar bestellen:
Toetsenbord: De knop ‘Nu bestellen en betalen’ krijgt geen visuele focus, dus het is weer tellen en raden.
VoiceOver: Ja, met de knop uit de web rotor: ‘Nu bestellen en betalen’.
Stap 11. kan ik een account aanmaken:
Toetsenbord: Na ‘Nu bestellen en betalen’ komt er een modal op met inloggen. De optie registreren is grijs, het lijkt alsof je dat niet kunt gebruiken. De kleur geeft alleen aan dat deze optie niet is geselecteerd. De optie ‘registreren’ is onbereikbaar met het toetsenbord, alleen aanklikbaar met de muis.
Dit is een blocker om verder te bestellen met toetsenbord en schermlezer.
Stap 12. kan ik inloggen:
Nee, inloggen kan niet omdat dit via hetzelfde modal gaat als registreren.
Stap 13. kan ik een bezorgadres ingeven:
Nee, alle visuele focus ontbreekt. Sommige formulierelementen zijn niet goed opgemaakt. Je kunt niet kiezen of je een man of een vrouw bent, je kunt geen ander land kiezen en je kunt niet kiezen of het factuuradres hetzelfde is als het bezorgadres.
Verder is het het kleurcontrast van de labels is erg laag.
VoiceOver: Er is geen label/invoerveld koppeling. De verborgen invoervelden voor een ander bezorgadres worden ook voorgelezen.
Stap 16. kan ik een wijze van betalen kiezen:
Nee, je kunt de wijze van betalen niet aanpassen. De opties krijgen daardoor geen focus.
Codekwaliteit About You
Totaal 35 van de 100 punten
De ernstigste fouten die wij tegenkwamen:
- knoppen zonder toegankelijke naam;
- links zonder toegankelijke naam;
- onvoldoende kleurcontrast voor sommige teksten;
- afbeeldingen zonder alternatieve tekst;
- ARIA instructies zonder toegankelijke naam;
- ARIA formuliervelden zonder toegankelijke naam.
Reactie About You
We are aware that barrier-free ordering for people with a (visual) disability is not yet possible in our fashion online shop. Due to the technical implementation, it is currently not possible for us to offer such a service. However, we are already working intensively on a solution that will enable people with visual disabilities to order in our online shop in the future.