Coolblue

Coolblue

Onze bevindingen over de webwinkel van Coolblue

Logo Coolblue

Coolblue

URL voorpagina: https://www.coolblue.nl/
Datum van testen: 21-26 Juli 2021

Er is duidelijk aandacht besteed aan webtoegankelijkheid en codekwaliteit. De toetsenbord toegankelijkheid werkt redelijk goed. 

De formulieren voor het aanmaken van een account en het bestellen zijn echter een stuk minder toegankelijk. Bestellen lukt wel, maar het is soms een tijdrovende puzzel.

De grootste problemen die wij tegenkwamen:

  • het is met een toetsenbord onmogelijk een optie te kiezen bij een product (bijvoorbeeld de maat van het product);
  • de toegankelijkheid voor schermlezers is niet goed genoeg. Informatie ontbreekt of wordt niet goed voorgelezen. De website is waarschijnlijk niet goed doorgetest met gebruik van een schermlezer;
  • de blauwe kleur van Coolblue is te licht om voor normale tekst te gebruiken tegen een witte achtergrond;
  • de toetsenbordfocus en gebruiksvriendelijkheid voor pop-up modals en tooltips kunnen verbeterd worden.

Problemen per stap bij Coolblue

Stap 3. kan ik de zoekfunctie op de voorpagina gebruiken:
De knop met het bestelwagentje, om een product direct toe te voegen, wordt alleen voorgelezen als ‘knop’. En is daarmee dus niet te onderscheiden van andere knoppen zonder naam. De link naar het product zelf wordt wel goed voorgelezen.  

Coolblue: Weergave van een knoppenlijst in VoiceOver op de zoekresultatenpagina.
Coolblue: Weergave van een knoppenlijst in VoiceOver op de zoekresultatenpagina.

Stap 7. kan ik opties wijzigen/ingeven: kleur, maat, aantal:
De maat is niet te wijzigen met enkel een toetsenbord, omdat de keuze voor de maat geen toetsenbordfocus krijgt.

Stap 11. kan ik een account aanmaken:
Het inlogformulier is goed, de formulieren voor het aanmaken van een nieuw account kunnen beter. 

Toetsenbord: Bij versturen van foutmeldingen blijft de toetsenbordfocus op de ‘doorgaan’ knop staan. in plaats van weer naar bovenaan in het formulier te gaan. De lijst met foutmeldingen staat helemaal onderaan het formulier. Dit is verwarrend en onverwacht, je zou deze lijst boven het formulier verwachten.

De tooltips bij de invoervelden krijgen geen toetsenbordfocus en zijn dus niet uit te lezen.

VoiceOver: De toetsenbordfocus gaat meteen naar het eerste formulierelement, waardoor de blinde bezoeker in eerste instantie alle bovenstaande informatie mist. De beschrijvingen bij de velden (zoals bijvoorbeeld veiligheid van een wachtwoord) worden niet voorgelezen.
Er wordt niet uitgesproken dat er foutmeldingen zijn na het versturen van het formulier. 

Coolblue: Weergave van de foutmeldingen bij het account-aanmaken formulier.
Coolblue: Weergave van de foutmeldingen bij het account-aanmaken formulier.

Stap 14. kan ik een bezorgmoment kiezen:
De toetsenbordnavigatie bij de pagina bezorging en betaalwijze is lastig. Er zijn keuzerondjes binnen keuzerondjes, waardoor het onlogisch wisselen is van een tabtoets naar de pijltjestoetsen. Het vergt wat uitproberen en trial-and-error om de opties goed te krijgen. 

Stap 18. kan ik om hulp vragen:
De link naar de klantenservice opent een menu aan de linkerkant. De veelgestelde vragen krijgen geen visuele toetsenbordfocus, dus bij het tabben door de vragen is het maar gokken waar je bent. Openen van een vraag kan met de spatiebalk, het zijn keuzevakjes gestyled als knoppen. Dat is verwarrend.

Op de pagina klantenservice zelf is veel informatie beschikbaar, er zijn veel verschillende manieren van contact opnemen, de informatie over het telefoonnummer is niet te openen en uit te lezen met een toetsenbord.

'Coolblue: Weergave van het met de muis uitklappen van het telefoonnummer.
Coolblue: Weergave van het met de muis uitklappen van het telefoonnummer.

Codekwaliteit

Totaal 39 van de 100 punten.

De ernstigste fouten die wij tegenkwamen:

  • onvoldoende kleurcontrast voor sommige teksten;
  • geneste interactieve elementen;
  • knoppen zonder toegankelijke naam;
  • links zonder toegankelijke naam;
  • formuliervelden zonder gekoppelde labels;
  • formuliervelden met dubbele labels.

Reactie van Coolblue

We brengen continu verbeteringen toe aan onze website, ook op het gebied van toegankelijkheid. We gaan deze input zeker meenemen!

Neem contact met ons op