MediaMarkt
Onze bevindingen over de webwinkel van MediaMarkt
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.
MediaMarkt
URL voorpagina: https://www.mediamarkt.nl/
Datum van testen: 5 oktober 2021
De webshop van MediaMarkt kan een grote verbeterslag gebruiken. De bestelflow is heel lastig te begrijpen en uit te voeren als je niet kunt zien. Het is theoretisch mogelijk om te bestellen als je blind bent, maar het vereist een ongelofelijke vasthoudendheid en begrip over hoe de betaling is opgezet in de code.
De grootste problemen die wij tegenkwamen:
- onverwachte tabvolgorde voor het toetsenbord;
- geen goede foutafhandeling of feedback bij formulieren;
- ontbreken van toegankelijke namen voor belangrijke knoppen zoals het winkelwagentje.
Problemen per stap bij de MediaMarkt
Stap 1. kan ik cookies accepteren, en daarna de website gebruiken.:
Het modal krijgt geen toetsenbordfocus. Het is te bereiken door de gehele site door te tabben. In het modal krijgen de knoppen ‘Huidige instelling opslaan’ en ‘Alles Accepteren’ geen visuele focus.
Stap 2. kan ik het hoofdmenu gebruiken:
Toestenbord: De tabvolgorde is onverwacht. Eerst krijgt het service menu focus, daarna het logo, de zoekfunctie, inloggen in het winkelmandje, daarna pas de link ‘Kies categorie’.
Omdat alleen het service menu een visuele focus heeft is het lastig uit te vinden waar je bent.
VoiceOver: Het winkelmandje en de zoekknop en het uitklap V-tje bij zoek winkel hebben geen toegankelijke naam, alleen een icoon.
Stap 3. kan ik de zoekfunctie op de voorpagina gebruiken:
Al krijgt het zoek icoontje geen visuele focus, blijkbaar is het op ‘return’ drukken het starten van de zoekactie.
Ook wordt het zoek-icoontje niet goed voorgelezen.
Stap 4. kan ik het filter bij de zoekresultaten gebruiken:
Om het filter te bereiken moet je eerst alle resultaten doortabben. Lastig is dat de focus niet op het filter blijft, om meerdere dingen aan te klikken moet steeds weer de gehele pagina doorgetabt worden.
Voice Over: Er is geen kopje naar filter, dat is jammer. Hierdoor is het lastig ontdekken en navigeren. De keuzevakjes staan in een fieldset, helaas ontbreekt de legend, die is vervangen door een link. De select ‘Sorteren op’ heeft geen label.
Stap 5. kan ik een item kiezen uit de zoekresultaten:
De volgorde van de informatie bij een product is verwarrend. Eerst wordt de afbeelding voorgelezen, dan de prijs en daarna de titel (het kopje). Voor een schermlezer gebruiker is het moeilijk om te ontdekken wat bij elkaar hoort, omdat men verwacht dat wat onder een kopje wordt voorgelezen bij dat kopje hoort. Nu is dat onduidelijk en kan tot een verkeerde keuze leiden.
Stap 6. kan ik een product bekijken: titel, prijs, omschrijving:
De prijs wordt cijfer per cijfer voorgelezen. Dit komt omdat de code voor het bedrag cijfer per per cijfer is opgemaakt (in een aparte span). Zo is het onduidelijk dat het de prijs is, mede omdat een valutateken ontbreekt.
Stap 7. kan ik opties wijzigen/ingeven: kleur, maat, aantal:
Het is onmogelijk om met het toetsenbord een andere kleur te kiezen, de code is hiervoor niet juist opgemaakt. Ook de tooltips werken niet met een toetsenbord.
Stap 9. kan ik het winkelwagentje openen en uitlezen wat ik heb besteld:
VoiceOver: De knop ‘winkelwagentje’ heeft geen toegankelijke naam in het menu, maar via de pop-up na het drukken op de bestelknop kun je wel naar het winkelwagentje. Dus alleen in de bestelflow is het winkelwagentje te bereiken.
Het logo in het winkelwagentje heeft geen alternatieve tekst dus de link naar de voorpagina wordt niet goed voorgelezen.
Stap 11. kan ik een account aanmaken:
Toetsenbord: De toestenbord volgorde is niet van boven naar beneden, eerst krijgen de items in de card focus, dan gaat de focus naar beneden naar de ‘verder’ knop. Hierbij wordt het formulier met de persoonlijke gegevens overgeslagen. Daarna krijgt het formulier de focus. Dit is extra lastig omdat niet alle elementen de visuele focus krijgen.
Na het invullen van het formulier wordt de ‘verder’ knop overgeslagen. Dus moet de bezoeker weer naar boven om deze te kiezen.
VoiceOver: Dezelfde problemen als bij toetsenbord.
Extra: De labels bij het adres worden niet goed voorgelezen.
Het telefoonnummer wordt voorgelezen als ‘Voornaam’
Stap 12. kan ik inloggen:
VoiceOver: Met moeite, foutmeldingen worden niet voorgelezen bij de invoervelden.
De tekst ‘ik ga akkoord met het privacy statement’ staat in de code tussen het ‘inloggen’ formulier, terwijl het visueel bij het ‘bestellen zonder account’ staat. Dit is verwarrend omdat de info in het inlogformulier nergens gekozen kan worden. Het staat in de code bij het verkeerde formulier.
Stap 13. kan ik een bezorgadres ingeven:
Het is mogelijk om het bezorgadres te wijzigen, al is het lastig verder te gaan omdat de ‘verder’ zo onlogisch in de tabvolgorde staat.
Stap 14. kan ik een bezorgmoment kiezen:
Het is niet mogelijk te kiezen tussen bezorgen, bezorgen op afspraak of ophalen in de winkel. Deze keuzes zijn niet met het toetsenbord te bereiken. Omdat ‘bezorgen’ het al vooraf ingevulde antwoord is kan men wel verder.
Stap 16. kan ik een wijze van betalen kiezen:
Toetsenbord: Als je de betaalmethode niet goed kiest is er geen feedback over wat je nog moet invullen (kies bank bijvoorbeeld bij iDEAL). De knop ‘verder’ werkt dan niet. Dit is ook een een probleem voor ziende muis gebruikers.
VoiceOver: De keuzerondjes voor het kiezen van de betaalwijze hebben geen labels. Als je de tekst naast het keuzerondje leest heeft de afbeelding van het logo geen alternatieve tekst, gelukkig staat in tekst de naam van de betaalwijze ernaast.
Het keuzerondje wordt gebruikt als uitklap voor extra keuzes. De keuze voor de betaalwijze staat in een tabel. Dit is een extra complicatie omdat navigeren in een tabel anders gaat.
Al met al is dit verschrikkelijk complex om in te vullen.
Stap 18. kan ik om hulp vragen:
Er is een telefoonnummer dat alleen via de zoekfunctie te vinden is. Hierdoor is het mogelijk contact op te nemen als je kunt horen.
Contactformulier: Het is het mogelijk hulp te vragen via een contactformulier. Het is hier verplicht een vestiging of ordernummer te kiezen, wat onlogisch is als je moeite hebt om een bestelling online te doen.
De foutafhandeling is lastig, er is alleen een waarschuwing als je het ordernummer niet hebt ingevuld. Anders reageert de ‘verstuur’ knop niet.
Voor de selectie van de categorie is een alternatieve constructie gemaakt, alleen hoorbaar voor schermlezers. Dit is gedaan omdat het design van de select knoppen deze onbruikbaar maakt voor schermlezers. Dit is moeilijk en onverwacht gedrag.
Codekwaliteit MediaMarkt
Totaal 3 van de 100 punten.
De enstigste fouten die wij tegenkwamen:
- onvoldoende kleurcontrast voor sommige teksten;
- afbeeldingen zonder alternatieve tekst;
- links zonder toegankelijke naam;
- geneste interactieve elementen;
- knoppen zonder toegankelijke naam;
- formuliervelden zonder gekoppelde labels;
- formuliervelden met dubbel gekoppelde labels;
- frames zonder toegankelijke naam;
- select elementen zonder toegankelijke naam.
Reactie MediaMarkt
Herkennen jullie je in deze beoordeling?
Wij zijn ons bewust van het feit dat er verbetermogelijkheden liggen voor onze website op het gebied van toegankelijkheid voor mensen met een (visuele) beperking, maar wij zullen deze beoordeling meenemen in onze eigen lokale ontwikkelingen en in die van ons hoofdkantoor in Duitsland. Het nieuwe web platform waar wij in maart ’22 op over gaan, zal deze toegankelijkheid bij overgang direct verbeteren.
Wat is jullie visie wat betreft toegankelijkheid?
Wij willen benadrukken dat wij iedere consument/bezoeker aan onze website een prettige gebruikservaring bieden. Dit betekent dat wij van mening zijn dat onze website voor een ieder goed toegankelijk moet zijn.
Staan er verbeteringen op de planning? Zo ja, wat zijn die en wanneer? Zo nee, waarom niet?
Zoals aangegeven zal het nieuwe web platform per maart ’22 al verbetering bieden. Daarnaast hebben wij een dedicated team op ons Duitse hoofdkantoor wat zich enkel bezighoudt met de toegankelijkheid van onze (nieuwe) website. Zij zijn op dit moment een toegankelijkheidsonderzoek aan het doen in Duitsland en zijn o.b.v. dit onderzoek een eigen styleguide aan het opstellen die op alle MediaMarkt websites zullen worden toegepast.
Denken jullie de toegankelijkheid op orde te hebben wanneer de nieuwe regelgeving ingaat in 2025?
Wij kunnen garanderen dat onze website voldoet aan de door de nieuwe regelgeving gestelde toegankelijkheidseisen per 2025.