De Bijenkorf
Onze bevindingen over de webwinkel van de Bijenkorf
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 Bijenkorf
URL voorpagina: https://www.debijenkorf.nl/
Datum van testen: 6 september 2021
Op de website van de Bijenkorf valt er veel te verbeteren. De website is duidelijk niet getest met een toetsenbord alleen.
De grootste problemen die wij tegenkwamen:
- het hoofdmenu en alle uitklap modals aan de zijkant zijn slecht te bereiken met een toetsenbord of onvindbaar voor een schermlezer;
- het filter is lastig te gebruiken omdat opties open blijven staan en ook geen visuele focus krijgen;
- eens in de paar minuten wijzigt de afbeeldingen-slider onder het menu;
- als dit gebeurt verplaats de toetsenbordfocus zich weer naar de bovenkant van de pagina, wat zeer hinderlijk is tijdens het gebruik van een pagina.
Problemen per stap bij de Bijenkorf
Stap 1: kan ik cookies accepteren, en daarna de website gebruiken:
De cookie banner staat helemaal onderaan de pagina in de code en heeft geen kopje. De toestenbord gebruikers moeten de gehele pagina doortabben. De schermlezer gebruiker zal de cookiebanner moeilijk kunnen ontdekken.
Stap 2. kan ik het hoofdmenu gebruiken:
Toetsenbord: De eerste paar menu-items krijgen focus en hebben een duidelijke focus stijl.
Als daarna de focus naar het zoekveld gaat, opent een zoek-modal dat de gehele pagina overlapt. Bij verder navigeren blijft deze grijze overlay openstaan en het is met moeite te zien dat de opties ‘mijn account’, ‘favorieten’ en ‘winkelmandje’ focus krijgen. Het is mogelijk met de ‘pijltje naar rechts’ knop de zoekoptie te sluiten, maar het opent weer vanzelf als je verder wilt tabben. Het modal sluit wel met de escape toets.
De opties mijn account, verlanglijstje en winkelmandje openen allemaal een modal dat geen focus krijgt. Ze zijn alleen te bereiken door helemaal door de pagina heen te navigeren.
Op vervolgpagina’s zijn submenu’s die openen niet op toetsenbordfocus .
Stap 4. kan ik het filter bij de zoekresultaten gebruiken:
Alle opties zijn met het toetsenbord te kiezen. Lastig is wel dat de uitklap opties voor de verschillende categorieën geen visuele focus krijgen, dus het is weer tabjes tellen geblazen. Ook krijgen de keuzes twee keer focus, één keer op het keuzevakje en één keer op een link daarachter, alleen de laatste focus vinkt een optie visueel aan of uit. Dit is onverwacht gedrag.
Stap 7. kan ik opties wijzigen/ingeven: kleur, maat, aantal:
VoiceOver: Het kiezen van de maat is onbegrijpelijk omdat er geen label staat bij het keuzerondje (radiobutton). Hierdoor wordt niet uitgesproken welke maat je kunt kiezen. Ook wordt niet voorgelezen welke maten niet meer beschikbaar zijn.
Stap 9. kan ik het winkelwagentje openen en uitlezen wat ik heb besteld:
Toetsenbord: De handeling op zich, het openen van de winkelwagen, gaat goed. Echter de modal om verder te bestellen is slecht bereikbaar, want deze bevindt zich onderaan de pagina in de code en wordt ook niet aangekondigd. Het modal is niet weg te halen met de escape key.
VoiceOver: Het modal om verder te gaan staat helemaal onderaan de pagina in de code.
Stap 10. kan ik naar bestellen:
Toetsenbord: Met moeite, het modal staat onderaan de tabvolgorde.
Op de checkout pagina krijgt de optie voor ‘verwijderen’ geen visuele toetsenbord focus.
VoiceOver: Het modal staat helemaal onderaan de pagina. En dat modal bevat de enige link naar ‘bestellen’.
Stap 11. kan ik een account aanmaken:
VoiceOver: Er wordt niet aangegeven wat verplichte velden zijn en er wordt geen feedback uitgesproken voor foutmeldingen.
Stap 12. kan ik inloggen:
Met moeite, het modal staat onderaan de code.
Stap 13. kan ik een bezorgadres ingeven:
VoiceOver: Er wordt niet aangegeven wat verplichte velden zijn en er wordt geen feedback uitgesproken voor foutmeldingen
Stap 14. kan ik een bezorgmoment kiezen:
Nee, de keuzeopties krijgen geen toetsenbordfocus en het is onduidelijk hoe je een ander bezorgmoment kunt kiezen. Ook is de knop opslaan en sluiten uitgeschakeld totdat je de knop met DHL aanklikt. Dit is voor alle bezoekers even een puzzeltje.
Stap 16. kan ik een wijze van betalen kiezen:
Toetsenbord: Kiezen voor een bank met iDEAL is een hele puzzel omdat er geen visuele focus is voor de logo’s van de banken.
Codekwaliteit de Bijenkorf
Totaal 15 van de 100 punten.
- knoppen zonder toegankelijke naam;
- formuliervelden zonder gekoppelde labels;
- formuliervelden met dubbel gekoppelde labels;
- select elementen zonder toegankelijke naam;
- geneste interactieve elementen;
- onvoldoende kleurcontrast voor sommige teksten;
- afbeeldingen zonder alternatieve tekst;
- SVG elementen zonder alternatieve tekst.
Reactie van de Bijenkorf
De gebruikservaring van onze website staat bij ons op nr 1 en daar zijn we ook al meerdere malen goed uit reviews gekomen. Uiteraard hoort de toegankelijkheid daar ook bij en daar moeten we nog stappen maken. Er lopen momenteel verschillende initiatieven om deze te verbeteren.
De onderzoeksresultaten die je ons hebt toegestuurd gaan we meenemen als input voor de doorontwikkeling van onze site(s) komende jaren en richting 2025. In eerste instantie zullen we gaan kijken naar de layout shifts (CLS) die uit beide reviews kwam. In de aanloop naar 2025 blijven we uiteraard de technologieën en ontwikkelingen op dit gebied volgen.