Methodiek

Methodiek

Methodiek & testconfiguratie

Hoe meten we de toegankelijkheid?

Zoals eerder genoemd: Voor dit onderzoek hebben we geen volledige audit op de toegankelijkheid van alle functionaliteiten gedaan, maar hebben we gekozen voor een pragmatische aanpak. Kan iemand die geen muis kan gebruiken, of het scherm niet kan zien, überhaupt een bestelling plaatsen?

Blinde en sommige slechtziende bezoekers gebruiken een schermlezer tezamen met het toetsenbord om de website voorgelezen te krijgen en op de website te navigeren en om deze te kunnen bedienen. Voor dit onderzoek testen we met VoiceOver, de ingebouwde schermlezer voor MacOS.

Hoe makkelijk is het om met keyboard te bestellen?

Bezoekers met een motorische beperking gebruiken vaak alleen het toetsenbord. Of ze gebruiken hulpmiddelen die werken zoals een toetsenbord.

We testen handmatig in stapjes, vanaf het accepteren van de cookies, opzoeken en kiezen van een product, het aanmaken van een account, invullen van bezorggegevens tot en met het drukken op de knop om te gaan betalen. Dit geeft goed weer of een bezoeker met een beperking de webwinkel kan begrijpen en gebruiken. 

De betalingssystemen zelf, zoals iDEAL of Paypal hebben we buiten beschouwing gelaten, dit onderzoek gaat puur over de webwinkels. Betaalsystemen zijn al druk bezig volledig toegankelijk te worden.

Daarnaast beoordelen we de code kwaliteit van alle stappen via de geautomatiseerde tool axe DevTools.

In de Europese Unie gebruiken we de Web Content Accessibility Guidelines (WCAG), die beschrijven waar een toegankelijke website aan moet voldoen. We vroegen ons af of de code van de website WCAG overtredingen bevat die grote problemen in de bedienbaarheid of begrijpbaarheid van de website veroorzaken.

Zoals bijvoorbeeld knoppen en links zonder naam, plaatjes zonder alternatieve teksten, teksten met een laag kleurcontrast of menu’s die alleen uitklappen als je met de muis klikt en niet werken met het toetsenbord.

En als laatste: kan iemand die blind is, of een bezoeker die motorisch beperkt is, om hulp vragen via de website?

Goed om vooraf te melden

Dit onderzoek is een momentopname. We hebben de toegankelijkheid gemeten in de periode van 1 juli tot en met 31 oktober 2021, op de websites, in desktopweergave. 

Man met vergrootglas onderzoekt een website

Websites zijn voortdurend in ontwikkeling, het kan dus zijn dat onze meetresultaten afwijken van de huidige stand van zaken. 

We hebben alleen de bestelflow getest en melden de blockers om te bestellen. Daarnaast vermelden we wat ons opviel en waar gebruikers moeite mee kunnen hebben bij het bedienen van de website. Alleen het oplossen van de hier gemelde problemen lost niet alle problemen met de toegankelijkheid van de gehele website op.

Testconfiguratie

  • Laptop: Macbook Pro met MacOS Big Sur 11.4, getest op een schermbreedte van ca. 1370 pixels.
  • VoiceOver: met Safari 14.1.1 met een schermbreedte van ca. 1370 pixels.
  • Toetsenbord in
    • Chrome 91.0.4472.114 t/m 95.0.4638.69 (Official Build) (x86_64)
    • Safari Version 14.1.1 t/m 15.0
    • FireFox 90 t/m 94 (64-bits)
  • Axe DevTools: met axe-core version 4.2.3 t/m 4.3.5, in FireFox, met best practices off.
  • Adblockers waren uitgeschakeld.

Hulpmiddelen in de browsers tijdens het onderzoek:

Wijze van testen met VoiceOver: Eerst de relevante delen van de tekst laten voorlezen en daarna met het toetsenbord de pagina doorlopen om de gewenste functionaliteit te bereiken en te gebruiken.

Informatie over het gebruik van VoiceOver:

De 18 stappen

We hebben 18 stappen gedefinieerd die met elkaar het gehele besteltraject omvatten en namen deze stappen met alleen het toetsenbord en met de schermlezer VoiceOver.

Een dame linkt bolletjes aan elkaar door middel van een lijn. Dit staat symbool voor stapsgewijze aanpak.

Elke stap beantwoordt een vraag die begint met ‘kan ik’:

  1. cookies accepteren en daarna de website gebruiken;
  2. het hoofdmenu gebruiken;
  3. de zoekfunctie op de voorpagina gebruiken;
  4. het filter bij de zoekresultaten gebruiken;
  5. een item kiezen uit de zoekresultaten;
  6. een product bekijken: titel, prijs, omschrijving;
  7. opties wijzigen/ingeven: bijvoorbeeld kleur, maat, aantal;
  8. een artikel in het winkelwagentje stoppen;
  9. het winkelwagentje openen en uitlezen wat ik heb besteld;
  10. naar bestellen;
  11. een account aanmaken;
  12. inloggen;
  13. een bezorgadres ingeven;
  14. een bezorgmoment kiezen;
  15. het eindbedrag en de bezorgkosten uitlezen;
  16. een wijze van betalen kiezen;
  17. de bestelknop drukken om te betalen of te bestellen;
  18. om hulp vragen via de website.

Puntentelling voor de stappen

Voor elke stap, voor het toetsenbord en voor VoiceOver gaven we: 

  • 10 punten voor elke stap die goed uit te voeren is;
  • 5 punten als een stap met moeite en puzzelen is te nemen; 
  • 0 punten aIs het onmogelijk is de stap te nemen.  
  • – 10 punten voor het aantal blokkades om te bestellen met VoiceOver.
Dame geeft feedback door middel van smileys.

Totaal zijn er dus 460 punten te verdienen als alles goed werkt.

Alle stappen zijn gemeten, ook de stappen die niet meer bereikbaar waren voor een bezoeker met een fysieke beperking  Als een stap onmogelijk was, namen we die met de muis om daarna verder te testen.

Als een stap niet op de website voorkwam werden er 10 punten toegekend om toch de vergelijking goed te houden. Dit geeft bij HelloFresh een iets vertekend positief beeld omdat daar veel stappen ontbreken.We hebben alleen de acties om een bestelling te doen getest, dus niet het toevoegen aan een verlanglijstje of het invoeren van een kortingscode. Ook het vergelijken van producten of andere functies op de website die niet gerelateerd zijn aan het uitzoeken en bestellen van een product werden niet getest.

Puntentelling voor de codekwaliteit

Daarnaast keken we naar de codekwaliteit van de bezochte pagina’s met Axe, een tool die sommige toegankelijkheidseisen automatisch kan testen. We gebruikten de instelling “Best Practices = off”, zodat alleen de WCAG-specifieke testen werden gerapporteerd.  We keken naar de verschillende soorten fouten. 

Axe rapporteerde geautomatiseerd ongeveer 30% van de fouten in de code en problemen in het kleurcontrast van de teksten ten opzichte van de achtergrond.

De website start met 100 punten. Ernstige fouten leveren 10 minpunten op, dit zijn bijvoorbeeld:

  • knoppen, links of plaatjes zonder naam of alternatieve tekst, waardoor de blinde bezoeker informatie mist of de navigatie niet meer kan begrijpen;
  • formulieren die niet goed voorgelezen worden of te bedienen zijn, waardoor de gebruiker bijvoorbeeld niet kan inloggen of een bezorgadres kan ingeven;
  • voldoende kleurcontrast tussen teksten en de achtergrond, waardoor oudere en slechtziende de teksten niet goed kunnen lezen.

Dit zijn allemaal fouten waarbij een bezoeker belangrijke informatie niet kan uitlezen of waarbij een essentiële functionaliteit niet bediend kan worden.

Minder ernstige codefouten leveren 1 minpunt op, zoals bijvoorbeeld:

  • het verkeerd gebruik van ARIA;
  • dubbele ID’s op een pagina;
  • verkeerd gebruik of ontbreken van autocomplete;
  • verkeerd geneste HTML-elementen.

Berekening eindscore

Totaal te behalen punten aantal: 
360 voor de stappen en 100 punten voor de codekwaliteit = 460 punten.

De eindscore is als volgt berekend:
Eindscore = ( punten stappen toetsenbord + punten stappen VoiceOver – (aantal maal een “nee” voor VoiceOver *10 ) + punten codekwaliteit ) / 460 * 100%

Bijvoorbeeld voor Ikea:

  • punten stappen toetsenbord = 140
  • punten stappen voiceover = 125
  • punten codekwaliteit = 63
  • punten aftrek voor het aantal blokkades met VoiceOver = 2 * 10 = 20
Een rekenmachine met de berekening die in de tekst benoemd wordt.

Eindscore = ( 140 + 125 + 63 – 20 ) / 460 * 100% = 67%

Alleen de blokkades voor VoiceOver zijn meegenomen in de berekening omdat dit over het algemeen precies hetzelfde probleem is als bij het toetsenbord.

Context aan de resultaten

Tot zo ver over de methodiek, puntentelling en de testconfiguratie. Dit geeft de resultaten wat meer context en maakt het het ook duidelijk op welke punten er getoetst is. Meer weten over de resultaten van het onderzoek? Klik dan op de knop hieronder.

Overtuigd van het belang van een toegankelijke webshop?

Wij bouwen graag mee.