Webwinkel onderzoek 2021: resultaten

Het onderzoek

We onderzochten 15 grote bedrijven uit de Twinkle100, waarbij het gehele bestelproces rechtstreeks via de website gaat. Daardoor zijn bijvoorbeeld Picnic, de Mirage Retail Group en The Learning Network niet meegenomen.

Geen van de 15 websites heeft een toegankelijkheidsverklaring over de website opgenomen op de website. Alleen Apple verantwoordt de toegankelijkheid van de producten, niet van de website zelf.

Kan ik bestellen met een toetsenbord en schermlezer?

Bij 7 van de 15 webwinkels is het onmogelijk om te bestellen als je geen muis kunt gebruiken en bij 8 van de 15 webwinkels als je daarnaast ook een schermlezer gebruikt op het moment van testen.

Tabel 1: Kan ik bestellen met een toetsenbord of schermlezer?

Kan ik om hulp vragen via de website?

Bij 60% van de websites is het moeilijk om om hulp te vragen via de website. De chatbox werkt niet goed, essentiële informatie zit verstopt onder onbereikbare knopjes of is alleen bereikbaar als je bent ingelogd of goed  zoekt.

Bezoekers zouden niet via social media om hulp hoeven te vragen, niet iedereen heeft immers WhatsApp, Facebook of Twitter. 

Bezoekers die doof of slechthorend zijn, maar ook verlegen mensen hebben niet veel aan alleen een telefoonnummer. Biedt verschillende mogelijkheden aan op de website, ook als iemand niet is ingelogd. Tenminste via e-mail of een contactformulier en de telefoon.

Tabel 2: Kan ik om hulp vragen via de website?

Score voor de stappen

Hoe gemakkelijk zijn de verschillende bestelstappen uit te voeren met toetsenbord en schermlezer? 

Tabel 3: score voor de 18 stappen.

Codekwaliteit per website

Tabel 4: codekwaliteit per website.

Alle websites bevatten ernstige fouten in de code. 

Opvallend is dat een bezoeker bij Albert Heijn wel een bestelling kan afronden ondanks dat er heel veel aan de code kan worden verbeterd. Dit komt omdat we alle fouten per pagina hebben gemeten, sommige fouten hadden geen betrekking op het bestellen zelf, maar op bijvoorbeeld gerelateerde artikelen, het invoeren van een kortingscode of op het verlanglijstje.

Eindscore per website

De totaalscore is gebaseerd op:

• hoe makkelijk kan de bezoeker de stappen voltooien;
• de codekwaliteit;
• het kleurcontrast voor teksten.

Tabel 5: de eindscore per website

Waar wordt de ontoegankelijkheid door veroorzaakt?

De belangrijkste problemen.
In bijlage 2 is een klein overzicht van vakjargon opgenomen om de onvermijdelijke technische termen in dit rapport uit te leggen.

1. Form over function

Functionaliteit te mooi willen maken. Fancy design elementen zoals uitschuif panelen, tooltips en pop-upvensters voor bijvoorbeeld contactinformatie of de inhoud van een winkelwagentje. 

Bij het kiezen van een betaalwijze gebruiken veel shops keuzerondjes, gecombineerd met een uitklapoptie eronder voor de betaalopties. Als je dit niet kunt zien, is het vrijwel onmogelijk te begrijpen. Zo kan een blinde bezoeker volkomen missen hoe betalingsinformatie ingevoerd moet worden. 

Essentiële informatie, die gewoon als tekst op webpagina kan worden vermeld, staat verstopt en kan niet worden geopend met het toetsenbord. Een belangrijke regel is: als het heel moeilijk toegankelijk te maken is, is het waarschijnlijk te ingewikkeld van opzet.

De bezoeker wil voornamelijk dat een website makkelijk werkt en dat hij/zij kan bestellen.

2. Informatie wordt alleen visueel begrijpelijk weergegeven

Een blinde bezoeker weet niet wat een knop doet, als die knop alleen een icoontje bevat en geen tekst; dus alleen als ‘Knop’ wordt voorgelezen. Dat is heel lastig als die knop nou net het winkelwagentje (de Hema) of de bestelknop is (About You).

Bij aanbiedingen staat vaak de adviesprijs doorgestreept en de aanbiedingsprijs daarnaast in het rood. Dat kun je zien. Maar als dit verschil niet ook wordt voorgelezen, weet een blinde bezoeker niet wat de echte prijs is.

Betalen is bij Wehkamp voor een schermlezer gebruiker onmogelijk omdat de afbeeldingen van de verschillende banken met de betaalopties geen alternatieve tekst hebben.

3. Teksten zijn slecht leesbaar

Teksten moeten goed leesbaar zijn. Albert Heijn en Coolblue gebruiken in hun huisstijl blauw, wat geen goede kleur is om voor teksten te gebruiken. De kleur is te licht.

Veel websites maken gebruik van lichtgrijs voor teksten en icoontjes. Veel bezoekers kunnen dit slecht onderscheiden van een witte achtergrond.

4. Toetsenbordnavigatie werkt niet (goed)

Toetsenbord gebruikers gebruiken de tabtoets om te navigeren: om van link naar knop naar invulveld te springen. En dan is het fijn als je kunt zien waar je aan het navigeren ben. Dit heet visuele focus. Ontbreekt die, zoals bij de Hema, dan is een website ongelofelijk lastig te begrijpen en te bedienen met een toetsenbord.

Andere veel voorkomende problemen die wij tegenkwamen:

• bij sommige webwinkels moet je met het toetsenbord eerst door de gehele pagina navigeren voordat een pop-up, uitschuifvenster of chatbox bereikt of gesloten kan worden. Hierdoor wordt het gebruik van de website een bewerkelijke en tijdrovende klus;
• submenu items in het hoofdmenu die alleen openen als je er met de muis overheen gaat en niet met een toetsenbord bediend kunnen worden;
• steeds opnieuw van bovenaan de pagina moeten beginnen om met het toetsenbord te navigeren als je een optie van een product kiest.

Het is een heidens karwei om voor elke pagina eerst alle menu-onderdelen en de opties in het filter te moeten doorlopen voordat je bent bij wat je eigenlijk wilt doen. 

Bij Wehkamp zit in de caroussel voor de afbeeldingen van een product een toetsenbord-val, de toestenbord focus blijft in een rondje doorgaan, je kunt gewoon niet meer bij de ‘Voeg toe aan het winkelwagentje’ knop komen.

5. Fouten in de code

De code van de webpagina’s, de HTML, bevat bij alle websites ernstige fouten. 

Dit is niet alleen van invloed op de toegankelijkheid, maar ook op de werking en robuustheid van de website. Veel fouten in de code wijst op op het ontbreken van een goede kwaliteitscontrole in het gehele ontwikkeltraject. 

Opvallend is dat een account aanmaken en de bestelprocedure slechter presteren dan de zoekopties en weergave van de producten zelf. 

Veel voorkomende fouten in de code zijn verkeerd geprogrammeerde keuzerondjes, aankruisvakjes en drop-downs die alleen werken met een muis.

6. Ontbreken van een goede kwaliteitscontrole over het gehele traject

Er zijn grote verschillen in de kwaliteit van de toegankelijkheid binnen de verschillende stappen van het besteltraject. Bij Zalando is de webshop zelf redelijk toegankelijk, maar het betaalsysteem helemaal niet. 

Bij de kwaliteitscontrole van websites zou van het begin tot aan het eind van het besteltraject minimaal getest moeten worden met een toetsenbord en een schermlezer. Bovendien komt dit de kwaliteit van de code behoorlijk ten goede.  En ervaart de programmeur ook hoe het is om 150 keer de tabtoets in te moeten drukken om bij de bestelknop te komen. 

Vaak verschilt de kwaliteit van de toegankelijkheid tussen de verschillende componenten en functionaliteit.

Hulp nodig bij het volledig toegankelijk maken van je website?

• Plan een adviesgesprek in