Skip to main content

Zelf de toegankelijkheid van een website testen

Door Apps & Websites, Tips & Trics

Het testen van een website op toegankelijkheid kun je op verschillende manier doen. Voor overheidsinstanties is het verplicht om een toegankelijkheidsonderzoek uit te laten voeren door een organisatie die hiervoor bevoegd is, zoals Digitaal Toegankelijk.nl. Ook zonder verregaande technische kennis of programmeervaardigheden is het mogelijk om de toegankelijkheid van een website te peilen. Hierdoor krijg je inzicht in de huidige situatie, zodat je zelf gerichte stappen kunt zetten om de website inclusiever te maken.

meisje met een telefoon in de hand zit bij een laptop en lacht

In dit artikel worden enkele manieren besproken om zelf de toegankelijkheid van een website te testen. De hieronder beschreven methodes geven slechts een indicatie van de toegankelijkheid van een website, ze bieden geen volledig beeld. Voor een volledig beeld is het belangrijk om een toegankelijkheidsonderzoek uit te laten voeren.

Waar moet je op letten?

Zo divers als mensen zijn, zo allesomvattend is digitale toegankelijkheid. Waar moet je op letten bij het testen van toegankelijkheid? Als het de eerste keer is dat je in de wereld van de toegankelijkheid duikt, kan het overweldigend overkomen.

Digitale toegankelijkheid wordt gemeten aan de hand van de webrichtlijnen van de WCAG. Hierin staat per onderdeel van de website beschreven hoe deze zo toegankelijk mogelijk gemaakt kan worden. Zo worden onder andere de content, afbeeldingen, techniek en multimedia van websites besproken. Met deze handige WCAG checklist wordt het nalopen van een website een stuk eenvoudiger. 

Hoe test je de toegankelijkheid van een website zelf?

Maar, hoe loop je de punten van de WCAG na? Hieronder staan verschillende methoden die zonder technische kennis uitgevoerd kunnen worden. 

meisje zit op een gele stoel met een telefoon in de hand

1. Navigatie met het toetsenbord 

Niet iedere internetgebruiker navigeert op dezelfde manier. Het gebruik van een muis is niet voor iedereen vanzelfsprekend. Voor mensen die een motorische beperking hebben kan het gemakkelijker zijn om het toetsenbord te gebruiken, in plaats van de muis. Check dus of jouw website te gebruiken is met het toetsenbord.

Dit doe je door met de tabtoets naar onderdelen van de site te navigeren. De combinatie shift-tab wordt gebruikt om naar een vorig element te gaan. Het is aan te raden om op deze wijze meerdere pagina’s van de site door te lopen. Probeer bijvoorbeeld eens een contactformulier in te vullen of op een bepaalde pagina te eindigen. (WCAG 2.1.1 & 2.1.2)

Optimalisatie-tips voor navigatie met het toetsenbord

  • Highlight het geselecteerde element met een duidelijk contrasterende kleur. Hierdoor is het eenvoudig te zien welk onderdeel momenteel geselecteerd wordt. In de onderstaande screenshot is een voorbeeld te zien vanuit de header van Digitaal Toegankelijk.nl. (WCAG 2.4.7)
  • Daarnaast is het mogelijk om extra opties te bieden voor toetsenbordgebruikers. Deze verschijnen vaak wanneer iemand een website opent en de tabtoets indrukt. Via deze opties kunnen gebruikers direct naar de hoofdcontent springen, zodat ze niet het hele menu door hoeven te lopen.

Screenshot van de header van Digitaal Toegankelijk.nl, waarin te zien is dat het geselecteerde element gehighlight is door een kader eromheen.

2. Inzoomen 

Om aan de richtlijnen van de WCAG te voldoen, moet de content op je website vergroot kunnen worden tot 200% en daarbij niet aan bruikbaarheid inboeten. Hierdoor stel je bezoekers met een visuele beperking in staat om gebruik te maken van je website. (WCAG 1.4.4)

Optimalisatie-tips voor vergroten tot 200%

Beperk je tijdens het testen niet tot één browser, maar gebruik ook andere browsers. 

3. Toegankelijkheid getest door Lighthouse

Gelukkig hoeft niet alles handmatig getest te worden. Wist je dat er een handige tool voor het testen van digitale toegankelijkheid in Google Chrome zit ingebouwd? Deze tool heet ‘Lighthouse’ en je vindt hem in Google’s Developers Tools. Deze optie is op twee manieren te openen. De eerste optie is door via een klik op de rechtermuisknop naar ‘Inspect’ of ‘inspect element’ te klikken. De tweede manier is via snelkoppelingen vanuit het toetsenbord. Voor Mac computers is dit Control, Command en C, voor Windows computers is dit Control, Shift en I. 

screenshot van de pop-up die je ziet als je klikt op je rechtermuisknop. Je kunt dan kiezen voor 'Inspect' om Lighthouse te openen.

Via de twee pijltjes in de taakbalk kom je bij het de optie ‘Lighthouse’. De pijltjes zijn in onderstaande afbeelding te zien.

Screenshot van het Inspect venster, waarin je vervolgens op Lighthouse kunt klikken.

Eenmaal in het menu van Lighthouse is het mogelijk om de website op toegankelijkheid (Accessibility) te laten testen. Google geeft in het rapport dat volgt foutmeldingen aan voor contrastratio’s, navigatieproblemen, missende beschrijvingen en andere onderdelen uit de WCAG. Naast het benoemen van de problemen worden er ook direct mogelijke oplossingen aangedragen. Handig beginpunt voor het verbeteren van de toegankelijkheid van je website!

4. Screenreaders

Volgens het Oogfonds kent Nederland zo’n 250.000 mensen met een visuele beperking. Deze groep is tijdens het surfen op het net afhankelijk van schermlezers om geschreven content te begrijpen. Deze software leest webpagina’s, WhatsApp-gesprekken en andere apps voor aan gebruikers. Een bekend voorbeeld van een schermlezer is Apple’s VoiceOver. Deze software zit standaard ingebouwd in iPhones. 

handen bij een screenreader

Door zelf een schermlezer te installeren/gebruiken via je laptop of smartphone krijg je enorm veel inzicht in de gebruiksvriendelijkheid van je website. Het is wel belangrijk om je website dan eerlijk te testen en je ogen volledig gesloten te houden. Zo ervaar je de navigatie via een schermlezer het beste.

Alt-tekst

Maar, hoe zorg je ervoor dat schermlezers weten wat er op een website vermeld staat? Software kan immers geen afbeeldingen ‘lezen’. Het eerste punt is afbeeldingen en hyperlinks te voorzien van beschrijvingen. Op deze manier kunnen schermlezers ook visuele content oplezen aan gebruikers. Lees voor tips het artikel over het maken van alternatieve beschrijvingen

Daarnaast is het van belang dat schermlezers begrijpen hoe onderdelen van de website gestructureerd zijn, zodat de content in chronologische volgorde getoond kan worden. Eerder verzamelde we de belangrijkste punten voor optimalisatie voor schermlezers.

Website laten testen

Het ligt voor de hand, maar je gaat de website zelf nooit zo goed kunnen testen als andere gebruikers wel zouden kunnen. De beste (onofficiële) methode om te testen is door de website door iemand met een beperking te laten gebruiken. De kans is groot dat deze testers tegen struikelblokken aanlopen die jij zelf niet had gezien. 

Digitaal Toegankelijkheid.nl verbindt website-eigenaren en testers met elkaar. In een (digitale) testsessie vragen we leden van ons testpanel om hun eerlijke oordeel te geven over jouw website, app of ander digitaal product. Meer weten? Neem vrijblijvend contact met ons op!

Toegankelijkheid begint ook bij jezelf

Door Blind, Slechtziend, Visuele Beperking 2 Reacties

Ik probeer jullie in mijn blogs een inkijkje te geven in hoe het mij als blinde afgaat in de digitale wereld. En doordat ik ook in heel veel hulpgroepen voor blinden zit, kom ik er ook steeds meer achter dat we als het gaat over digitale toegankelijkheid, we vaak iets over het hoofd zien. Namelijk dat de ene blinde de andere niet is. En dat hoe je digitale toegankelijkheid ervaart, ook in sterke mate afhankelijk is van de investering die je als blinde zelf wilt doen in je kennis en kunde.

Profielfoto Edwin

Edwin Ruyer

Edwin is muzikant, blind, en blogt voor Digitaal Toegankelijk om de wereld te laten zien hoe hij leeft met zijn beperking.

Het klinkt heel logisch maar het wordt heel vaak vergeten. Hoe vaak ik wel niet hoor “Jantje is ook helemaal blind en loopt wél met een hond”. Of “Pietje is ook helemaal blind en kan wél een Bossche bol met mes en vork eten”. Buiten het feit dat ik vind dat je bij het eten van een Bossche bol je er helemaal onder hoort te zitten, vind ik dit soort gedachtes nogal kort door de bocht. Net als iedereen, is elke blinde uniek en heeft elke blinde zijn eigen kwaliteiten. Dus ook op het gebied van internet is de ene blinde handiger dan de andere. En vindt de ene blinde het super interessant, terwijl het voor de andere een noodzakelijk kwaad is.

mensen bij een laptop

Schermlezer of software

Iets algemeens zeggen blinden en de digitale wereld is dus ingewikkeld. Allereerst al doordat elke blinde weer een andere manier gebruikt om content op de computer of je telefoon om te zetten in braille of spraak. Er zijn vele verschillende schermlezers met verschillende toepassingen en bijbehorende voor- en nadelen. Wanneer je bijvoorbeeld met excel wil werken, heb je niets aan de schermlezer van de iPhone. Dan heb je meer aan Supernova of Jaws op Windows. Wil je daarentegen met muziekprogramma’s aan de slag, dan heb je juist niets aan Windows en kun je beter een Mac aanschaffen.

Tijdsinvestering

Het is als je blind bent en online dingen gedaan wilt krijgen, daarom belangrijk om na te denken over waar jij je schermlezer voor nodig hebt, zodat je op basis daarvan kan uitzoeken welke toepassing voor jou handig is. Daarnaast is het resultaat helemaal afhankelijk van de tijd die je bereid bent te investeren in het ontdekken van alle mogelijkheden van die schermlezer of aanpassing. In mijn ervaring is het namelijk zo dat zelfs op sites waarvan geroepen wordt dat ze niet toegankelijk zijn, je er toch dingen mee kan doen.

Ed aan tafel met zijn telefoon

Er is hulp!

Dus wat ik iedere blinde telefoon- en computergebruiker wil aanraden is om je te verdiepen in het hulpmiddel wat je gebruikt voordat je gefrustreerd roept dat iets niet lukt. En als je zelf geen zin of tijd hebt om het wiel uit te vinden, dan bieden Facebook en WhatsApp soelaas met heel veel hulpgroepen, specifiek gericht op de afzonderlijke hulpmiddelen.

Het uitzoeken hoeft ook niet vervelend te zijn, want ik beloof je dat het een enorme kick geeft wanneer je iets voor elkaar krijgt door een zelf ontdekt slimmigheidje.  Zo was ik aan het begin van de eeuw de eerste blinde in Nederland die het voor elkaar kreeg om met nieuwsgroepen muziek en films te downloaden. Daarna heb ik dat heel veel blinden met veel plezier en toewijding geleerd.

Kortom: open je blik, neem de tijd en duik in dat hulpmiddel. Je kan altijd meer dan je denkt!

Digitaal toegankelijk

Onderzoek: apps van supermarkten voor blinden en slechtzienden

Door Apps & Websites, Blind, Onderzoek, Slechtziend, Visuele Beperking Geen Reacties

Tijdens de corona crisis zagen supermarkten een enorme stijging in het aantal online shoppers. Om aan deze toenemende vraag te voldoen hebben veel supermarkten extra personeel in dienst genomen om het logistieke aspect van de online bestellingen te ondersteunen. Helaas hebben supermarkten niet gelet op de digitale toegankelijkheid van de apps die gebruikt worden om online boodschappen te doen. Hierdoor is het niet voor iedereen mogelijk om thuis via een app boodschappen te bestellen.

Klanten die, vanwege bijvoorbeeld een visuele beperking, gebruik maken van een schermlezer, lopen vaak tegen obstakels aan in de apps van supermarkten. Digitaal Toegankelijk.com bracht samen met Charissa Kalloe de digitale toegankelijkheid van 12 supermarkten in kaart. De apps die getest zijn, behoren toe aan supermarktketens Albert Heijn, Plus, Dirk, Lidl, Coop, Deen, Ekoplaza, Jumbo, Spar, Aldi, Hoogvliet en DekaMarkt. 

Charissa is zeer slechtziend en maakt daarom veel gebruik van Apple’s VoiceOver. Ze heeft de hindernissen die ze tijdens het gebruik van de schermlezer ondervindt gedeeld met het testteam. De testen zijn op basis van deze informatie afgenomen. Naast het feit dat ze haar ervaring gedeeld heeft, is ze ook verantwoordelijk voor 8 van de 12 testen.

Tijdens de test werd gekeken hoe de apps via Apple’s schermlezer VoiceOver te gebruiken zijn. Diverse aspecten van het online boodschappen doen kwamen aan bod, zoals het zoeken naar producten, het toevoegen van producten aan het winkelmandje en het daadwerkelijk bestellen. Voor een groep mensen vergen deze stappen nog altijd onnodig veel energie. Bij sommige supermarkten was het zelfs helemaal niet mogelijk om met behulp van een schermlezer de app te gebruiken. 

Appie App

Bij de app van Albert Heijn was vooral het begin verfrissend vergeleken met de andere apps. Zo zijn alle knoppen gelabeld op het beginscherm, waardoor deze goed voorgelezen worden. Het zoeken van een product gaat ook goed en tevens is het mogelijk om met VoiceOver het gezochte product toe te voegen aan de winkelmand. Bij het zoeken worden er suggesties gegeven op basis van de ingetypte karakters en ook dat werkt goed. De volledige productnaam, prijs en gewicht worden in één keer benoemd. Ook enkele productkenmerken en informatie worden benoemd.

De zigzagbeweging waarmee VoiceOver gebruikers normaalgesproken naar het vorige scherm kunnen gaan werkt helaas niet. Het was even zoeken naar de volledige productenlijst, maar uiteindelijk is deze gevonden onder het tabje ‘meer’ rechtsonderaan de pagina. Hier staat de knop producten met alle categorieën. De locatie van deze lijst is enigszins onlogisch en daardoor moeilijk te vinden.

Binnen de producten die hier staan, wordt netjes omschreven wat de gebruiker aantreft en voor welke prijs. Deze zijn weer makkelijk toe te voegen aan de winkelmand.

Het toevoegen aan de winkelmand kan op twee manieren. Als het product nog niet is toegevoegd, kan het toegevoegd worden door er dubbel op te klikken. Daarnaast kan de gebruiker het getal dat het aantal producten geeft omhoog vegen om een veelvoud van de producten aan de mand toe te voegen.

Al in het beginscherm staan onderaan 5 tabjes waar onder andere ook het boodschappenlijstje te vinden is. Als de knop ‘mijn lijstje’ geselecteerd wordt, wordt er opgelezen hoeveel producten er op het lijstje staan. Helaas werkt dit niet wanneer een andere knop, zoals ‘bonus’, aan wordt geklikt en daarna op ‘mijn lijstje’ wordt geklikt. Daarnaast worden prijzen opgelezen zoals ze ook gelezen worden en is er een totaalprijs vermeld.

Er is ook een knop met ‘recepten’. Als deze optie aangeklikt wordt en een vinger over het scherm bewogen wordt, lijkt het alsof de app denkt dat er wordt gescrold. Hierdoor kunnen de recepten niet aangeklikt worden. Als er vanaf boven steeds naar beneden geveegd wordt, kunnen de recepten wel aangeklikt worden. Al met al is de Appie van Albert Heijn heel goed te doen.

Conclusie

  • De knoppen zijn juist gelabeld
  • Zoekfunctie werkt goed
  • Productinformatie wordt in één keer opgenoemd
  • De zigzagbeweging werkt niet
  • Productenlijst moeilijk te vinden
  • Recepten kunnen niet gemakkelijk opgelezen worden

Plus

Bij de Plus app moet er eerst een supermarkt in de buurt aangeklikt worden en toestemming geven worden dat Plus de locatie gebruikt. Hierna verschijnt een scherm met een plattegrond waar verschillende plaatsen opgelezen worden. Helaas gebeurt er niets wanneer er op één van die plaatsen geklikt wordt. Helemaal links staat de ongelabelde knop ‘IC Close, mogelijk sluit’ die de gebruiker weer naar het beginscherm stuurt.

Na het kiezen van een supermarkt zonder te weten in welke plaats deze is, komt de gebruiker op het startscherm. Het eerste dat wordt opgelezen is een zoekveld. De zoekfunctie werkt naar behoren. 

De zoekresultaten geven ook een compleet beeld van het product. Dat wil zeggen, de naam, de prijs en het gewicht. De ingrediënten, voedingswaarde en allergieën worden voorgelezen door VoiceOver. Het vervelende is wel dat je eerst langs al deze informatie moet navigeren, voordat je de knop ‘toevoegen’ tegenkomt. Na het toevoegen verandert de ‘toevoegen’ knop in de ongelabelde knop ‘IC plus’, waarmee het aantal verhoogd kan worden. 

Onderaan de app staan verschillende tabjes die niet worden uitgesproken door VoiceOver. Als je één van die tabjes selecteert, vertelt VoiceOver wel wat er mogelijk staat. Helaas gaat dit alleen op voor de tab met de zoekfunctie. Bij de andere tabs zegt VoiceOver echter niets behalve dat het geselecteerd is. Hiermee kan een gebruiker van een schermlezer eigenlijk niets behalve op de gok een tab aanklikken.

Op de homepagina zie je producten die ervoor zorgen dat je boodschappen gratis worden bezorgd. Het zijn een aantal producten die horizontaal naast elkaar staan. Wanneer er doorheen genavigeerd wordt, wordt het volgende opgelezen:

‘Gratis bezorging, gratis bezorging, gratis bezorging, gratis bezorging, gratis bezorging.

Bij €10, bij 3 stuks, bij €10, bij €10, bij €10.

Aquarius, Capri-sun en Fuze Tea, Leffe, Hertog-Jan, Corona en Hoegaarden, Lay’s Oven, Sun Breaks, Snack a Jacks en Quaker Cruesli en nog 2 productgroepen.’

VoiceOver leest het per regel of rij terwijl het setjes van 5 zijn. Wat heel verwarrend is.

Screenshot van de app van Plus
Op de homepagina staat er op een gegeven moment ook ‘veilig boodschappen doen’. Hier vind ik informatie over boodschappen doen ivm de huidige corona situatie. Als er op de knop ‘meer informatie’ wordt gedrukt, wordt de gebruiker naar de website geleid. Dit werkt goed.

De zigzag functie werkt de ene keer wel en de andere keer niet. Als er, ‘IC nav close’ knop staat of ‘IC arrow left mogelijk vorige’, om een scherm af te sluiten, werkt het niet. Als er een knop ‘ aanbiedingen terug knop’ staat, werkt het wel. Dit heeft waarschijnlijk te maken met het feit dat de knop de ene keer wel is gelabeld en de andere keer niet.

Er bestaat ook een optie om met de microfoon zoekopdrachten in te geven. Helaas stopte VoiceOver toen ik dit aanzette. Deze optie is in combinatie met VoiceOver helaas niet te doen.

Naast dat het beginscherm erg rommelig is, is het dus wel mogelijk om via een omweg producten in het winkelmandje te krijgen. Het is te doen, maar of het ook echt handig is, is de vraag.

Conclusie

  • Opstarten van de app gaat moeizaam met VoiceOver
  • Bij veel (belangrijke) knoppen ontbreekt een label
  • Zoekfunctie werkt naar behoren
  • Productinformatie wordt in het geheel opgelezen
  • Producten toevoegen aan het mandje gaat moeilijk
  • Acties zijn niet toegankelijk
  • De voice functie is niet bruikbaar in combinatie met een schermlezer

Dirk

Na het openen van de Dirk app wordt direct een melding weergegeven om toestemming te geven voor mijn locatie. Hierna verschijnt een plattegrond te zien om de dichtstbijzijnde winkel te kiezen. Na de ervaring met de Plus app is gekozen om direct naar het eind te scrollen. Onderweg komt de gebruiker de knop ‘Dit is mijn Dirk’ tegen.

Het welkomstbericht vormt direct een uitdaging. Als naar links of rechts geveegd wordt, leest de schermlezer op dat de gebruiker niet verder kan, terwijl er zichtbaar is dat er meerdere pagina’s zijn. De gebruikelijke methode om door zo’n slider te navigeren, met drie vingers, werkt hier niet. Een alternatieve manier van dubbel tikken en vasthouden werkt wel. Dit geeft wel aan hoe weinig toegankelijk de Dirk app is.

Hierna komt het beginscherm, dat begint met een knop die niet gelabeld is. Als daar op geklikt wordt blijkt het de boodschappenlijst te zijn. Naast de ongelabelde knop, wordt ‘0’ dus wat er in het lijstje terecht komt.dus dat is dan wat er in het lijstje terecht komt.

Na verder navigeren worden er 2 knoppen gevonden om producten te zoeken, namelijk ‘home search icon Dirk’ en ‘Home speech icon Dirk’. Als de zoekfunctie met stem geopend wordt, wordt de VoiceOver stem ook weer gedempt en is deze stem niet meer te horen. Dit werkt dus niet.

De normale zoekfunctie werkt prima en laat ook weer de suggesties zien. In de Dirk app wordt een geheel bedrag weer in delen opgesplitst. Daarnaast wordt ook het gewicht benoemd bij het product. Door middel van de ‘plus icon mogelijk voeg toe’ knop, kan het product worden toegevoegd aan mijn lijst. Als hetzelfde product nogmaals toegevoegd moet worden, blijkt dit een stuk lastiger te zijn. Tijdens het heen en weer navigeren wordt de ‘plus icon’ de ene keer wel en de andere keer niet voorgelezen.

De ingrediënten, voedingswaarde en omschrijving worden wel goed weergegeven.

De zigzag functie werkt hier ook niet. De tabs onderaan het beginscherm worden goed voorgelezen door VoiceOver. Tevens is de folder ook niet toegankelijk in de Dirk app.

Als er gekozen wordt voor de tab producten, worden eerst allerlei categorieën opgelezen. Na het selecteren van een desbetreffende categorie, wordt de gebruiker opnieuw verplicht om met VoiceOver te navigeren door alle andere categorieën om naar de producten te gaan die binnen de gekozen categorie behoren. Behoorlijk omslachtig dus.

Eenmaal aangekomen bij de producten, wordt alles afzonderlijk voorgelezen door VoiceOver. De productnaam, 3 en daarna 65 een ‘plus icon’ en daarna 500ml. Allemaal informatie die in één regel zou kunnen. Door het op te splitsen in 3 of 4 keer navigeren wordt het zeer onduidelijk voor gebruikers van schermlezers.

De zoekfunctie werkt goed, de tabs onderaan zijn ook gelabeld helaas is de rest van de app niet prettig om mee te werken.

Conclusie

  • Supermarkt kiezen gaat moeizaam
  • Het welkomstbericht is niet toegankelijk
  • Bij veel knoppen ontbreekt een label
  • De voice functie is niet bruikbaar in combinatie met een schermlezer
  • De zoekfunctie werkt goed
  • De zigzagfunctie werkt niet
  • De folders kunnen niet voorgelezen worden
  • Het vinden van producten gaat moeizaam
  • Productinformatie wordt regel voor regel voorgelezen

Lidl

Het lijkt erop dat de gebruiker verplicht wordt om een filiaal te kiezen om gebruik te maken van de Lidl app. Dit lukt tijdens de test echter niet en maakt de app daarom niet bruikbaar voor mensen met een schermlezer.

Coop

De Coop supermarkten app begint ook met een welkomstbericht met verschillende pagina’s. Hierbij is er ook een slider, maar deze slider werkt niet in combinatie met VoiceOver. Gelukkig werkt de functie om met 3 vingers naar links te vegen wel, waarna de knop ‘ontdek onze app’ verschijnt.

Bij het selecteren van een product, wat redelijk soepel gaat, komt nog een struikelblok aan het licht. De prijzen worden omgekeerd opgelezen. €1,80 wordt opgelezen als 80 en 1, wat zorgt voor veel verwarring. Als er op de knop ‘knop mogelijk voeg toe’ geklikt wordt, krijgt de gebruiker geen feedback of er wel of niet iets in het mandje zit.

Er verschijnt een melding die het belang van het kiezen van de juiste supermarkt toelicht. De knop ‘kies supermarkt’ en zorgt voor een lijst met alle Coop winkels. Ook is hier een zoekfunctie op postcode beschikbaar. De app laat de dichtstbijzijnde Coop supermarkt zien, waarna deze geselecteerd kan worden. Dit gaat een stuk eenvoudiger dan bij Lidl waar praktisch onmogelijk is om een filiaal te kiezen. 

De tabs onderaan de app worden ook goed voorgelezen. Rechtsonder wordt de winkelmand voorgelezen. Dit werkt super! 

Producten in de aanbieding staan onder het tabje aanbiedingen. Het lijkt erop dat dit wordt voorgelezen. Ook hier wordt steeds weer een losse regel voorgelezen, eerst de productnaam daarna het gewicht of aantal en daarna de oude prijs en vervolgens de actieprijs. Het is dus wel veel vegen, maar het werkt wel!

Over het algemeen werkt de Coop app goed, zeker in vergelijking met apps van andere supermarkten. Veel zaken doen het goed met VoiceOver. Het testteam is positief verrast!

Conclusie

  • Het welkomstbericht is niet toegankelijk
  • Prijzen worden omgekeerd voorgelezen
  • Gebruiker krijgt geen feedback als een product aan de winkelmand is toegevoegd
  • Filiaal kiezen gaat soepel
  • De winkelmand wordt opgelezen
  • Producten in de aanbieding worden per regel voorgelezen in plaats van per product

Deen

De volgende supermarkt in het onderzoek is Deen. Deze supermarkt heeft vooral vestigingen in Noord-Holland, maar daarbuiten ook enkele winkels in Flevoland, Utrecht, Gelderland en Overijssel. Het startscherm van de app is al direct niet toegankelijk. De vier elementen die het scherm vullen (boodschappen, bloemen, vers en acties) zijn met Apple’s VoiceOver niet te gebruiken. Daarnaast kan er niet gescrold worden naar de opties onder deze vier categorieën. 

Om boodschappen te doen, moet er dus gebruik worden gemaakt van het (ongelabelde, dus onuitspreekbare) hamburger menu of het menu onderin de app. Het onderscheid dat de app maakt tussen boodschappen, vers en biologisch zorgt voor verwarring, ook voor app gebruikers zonder visuele beperking. Bij de optie ‘vers’ is het heel moeilijk om te navigeren. Zo kent dit gedeelte geen overzicht van categorieën, maar bestaat het uit verschillende losse pagina’s met vlees- en visproducten.

De zoekfunctie is een uitkomst voor het vinden van producten. Echter is het niet mogelijk om, wanneer een product gevonden is, deze vanuit dit scherm toe te voegen aan het winkelmandje. Ook de zigzagbeweging werkt niet in de app. Daarnaast zijn de knopen niet gelabeld, waardoor deze door VoiceOver ingevuld worden. De folders zijn als afbeeldingen geüpload, waardoor deze ook niet met een schermlezer gelezen kunnen. 

Het was tijdens de test vrijwel onmogelijk om het boodschappenlijstje compleet te krijgen. De app van Deen is onbruikbaar met een schermlezer.

Conclusie

  • Het beginscherm is, met uitzondering van de zoekfunctie, niet te gebruiken met een schermlezer
  • Bij veel knoppen ontbreekt een label
  • De indeling van de productcategorieën is onlogisch
  • Producten kunnen moeilijk toegevoegd worden
  • De folders zijn niet leesbaar

Ekoplaza

De app van Ekoplaza leverde helaas geen betere resultaten op. De algemene navigatie met VoiceOver gaat moeizaam. De overzichtspagina’s waar producten op staan zijn praktisch niet te gebruiken. Dit komt vooral doordat het niet duidelijk is wanneer een product in het winkelmandje zit. De schermlezer is niet in staat om dit op te lezen. Daarnaast worden prijzen opgebroken, de hele euro’s en centen worden apart opgelezen. Dit is op zich niet verschrikkelijk (helaas ook niet zeldzaam in apps), wanneer er een oude prijs en een actieprijs naast elkaar staan wordt het pas echt onduidelijk. Neem de schermafbeelding hieronder. De schermlezer leest hier eerst ‘1’ op, gevolgd door ‘2’ en ‘99’ waarna de schermlezer eindigt met 25. 

Screenshot van de app van Ekoplaza

Het is onmogelijk om op te maken wat de prijs van producten is. Daarnaast wordt ieder onderdeel van een product (zelfs het productnummer) los opgelezen. Hierdoor weet een gebruiker niet welke prijs bij welk product hoort. De app van Jumbo laat zien hoe het anders kan, door zowel het gewicht, de prijs en de naam van een product in één keer op te lezen. 

Verder zijn diverse knoppen niet gelabeld, waardoor veel standaard functies niet te gebruiken zijn voor mensen met een visuele beperking. Denk aan het bepalen van het aantal producten in een mandje of een product als favoriet bewaren. Tijdens de test werd er vaak een doodlopend punt van de app bereikt, doordat ook hier de zigzagbeweging niet werkt waardoor gebruikers niet naar een vorig scherm kunnen springen. 

De gebruikservaring van de app van Ekoplaza met een schermlezer was helaas niet beter dan bij de app van Deen. 

  • De algemene navigatie gaat moeizaam
  • Productpagina’s zijn niet te gebruiken
  • Prijzen worden omgekeerd voorgelezen
  • Productinformatie wordt per regel opgelezen
  • Bij veel knoppen ontbreekt een label

Jumbo

Na kleinere ergernissen en moeilijkheden bleek de app van de Jumbo beter te werken dan eerdere supermarkten uit de test. Om de app te gebruiken moeten gebruikers namelijk inloggen of een winkel kiezen. De knop die gebruikt wordt om een specifieke winkel te kiezen is om te beginnen niet gelabeld. Daarnaast is het niet mogelijk om een winkel te zoeken zonder locatievoorzieningen aan te zetten, wat zonder schermlezer wel mogelijk is. 

Overige knoppen zijn beter gelabeld en daardoor gemakkelijker te gebruiken. De grootste plus van Jumbo zit hem in het feit dat producten in het geheel voorgelezen worden, dus inclusief prijs, gewicht en naam. Helaas is de knop voor het toevoegen van een product aan de winkelmand niet gelabeld, waardoor deze op de gok gebruikt moet worden.

In de app geeft Jumbo de veelbelovende optie om via spraak boodschappen te bestellen. Dit geeft aan dat Jumbo het belang van digitale toegankelijkheid inziet. Helaas was deze functie op het moment van de test niet bruikbaar. 

Over het algemeen is de online winkelervaring van Jumbo redelijk toegankelijk. Toch zijn er ook voor deze supermarktketen nog steeds verbeterpunten.

Conclusie

  • Het kiezen van een filiaal gaat moeizaam
  • Knoppen zijn redelijk goed gelabeld
  • Productinformatie wordt in het geheel opgelezen
  • Knop voor het toevoegen van producten is niet gelabeld
  • De voice functie is niet bruikbaar in combinatie met een schermlezer

Spar 

De enige Nederlandstalige app van Spar in de App Store, Spar City, was ten tijde van de test niet te gebruiken. Om de app te kunnen gebruiken moet de gebruiker een account aanmaken. Dit was vanwege een foutmelding niet mogelijk.

Aldi

De app van Duitse prijsvechter Aldi is helaas niet zo toegankelijk. Net als bij andere supermarkten zijn veel knoppen niet gelabeld, zoals de knop om producten aan het boodschappenlijstje toe te voegen, en worden aanbiedingen als afbeeldingen geüpload zonder dat ze van een alternatieve beschrijving voorzien zijn. Dit maakt het begrijpen van de app met behulp van een schermlezer niet gemakkelijk. 

Screenshot van de app van Aldi Helaas blijft het gebruik van afbeeldingen niet beperkt tot alleen de aanbiedingen. Ook de grote banner ‘Belangrijke informatie’ leidt naar een onleesbare afbeelding waarin belangrijke informatie omtrent het coronavirus staat. Voor mensen met een visuele beperking is het via de app dus niet mogelijk om regels en restricties omtrent winkelen in de supermarkt op te vragen.

Het samenstellen van een boodschappenlijstje gaat niet zonder slag of stoot. De producten zijn onderverdeeld in categorieën als ‘verse groente en fruit’ en ‘Aziatisch assortiment’, maar niet in subgroepen. Hierdoor moeten 6 pagina’s doorzocht worden om tomaten te vinden. Doordat de knop voor zoeken niet gelabeld is, wordt handmatig zoeken naar producten de gebruiker niet makkelijk gemaakt.

Het is wel mogelijk om met een schermlezer boodschappen te bestellen bij de Aldi, maar de winkelervaring is verre van prettig.

Conclusie

  • Bij veel knoppen ontbreekt een label
  • Afbeeldingen zijn niet voorzien van een alternatieve beschrijving
  • Belangrijke informatie omtrent corona kan niet voorgelezen worden
  • Boodschappenlijstjes samenstellen gaat moeizaam

Hoogvliet

Na het opstarten van de app van Hoogvliet komen enkele informatieve berichten in het scherm. De knoppen om naar het volgende bericht te gaan zijn niet gelabeld, gelukkig vult VoiceOver deze in met ‘mogelijk pijl naar rechts’. De app kan met en zonder account gebruikt worden. Helaas is het niet mogelijk om een winkel te selecteren wanneer de schermlezer geactiveerd is. Hierdoor is de app per definitie niet te gebruiken zonder account voor gebruikers met een schermlezer. 

Screenshot van de app van Hoogvliet

Als de schermlezer wordt uitgezet, de app geconfigureerd wordt en de schermlezer weer geactiveerd wordt is deze wel te gebruiken. Onderstaand scherm is het eerste dat gebruikers van de app horen.

Het zoekveld werkt naar behoren, de overige onderdelen van het startscherm helaas niet. Om te beginnen kan de schermlezer niets herkennen van het scherm, omdat de reclame van de bananen en de knoppen en banners daaronder niet gelabeld zijn. Daarnaast is het niet mogelijk om naar de onderdelen hieronder te scrollen, wat voor gebruikers zonder schermlezer wel mogelijk is. 

De zoekfunctie werkt wel, waardoor er wel producten gezocht kunnen worden. Helaas laat Hoogvliet hier ook veel steken vallen. Zo is de knop die gebruikt wordt om producten aan het winkelmandje toe te voegen is niet gelabeld. Productinformatie is gekoppeld, waardoor deze in één rits wordt opgelezen. Dit zorgt ervoor dat het duidelijker is welke prijs bij welk product hoort en zijn andere eigenschappen makkelijker aan het product toe te kennen. De prijs wordt echter omgekeerd opgelezen, zo kost een pak cherry tomaten 49,1 in plaats van 1,49. 

In het boodschappenlijstje is het met een schermlezer niet mogelijk om het aantal producten naar boven aan te passen, slechts naar beneden. 

De boodschappen app van Hoogvliet is niet met een schermlezer te gebruiken. Ook wanneer de schermlezer tijdelijk wordt uitgeschakeld zodat de app wel gebruikt kan worden, blijft het zeer moeizaam om hier digitaal boodschappen te doen.

Conclusie

  • Het startscherm kan niet bediend worden
  • Bij veel knoppen ontbreekt een label
  • Het selecteren van een winkel is niet mogelijk met schermlezer
  • De zoekfunctie werkt naar behoren
  • Prijzen worden omgekeerd opgelezen
  • Functies van het boodschappenlijstje werken niet

DekaMarkt

Bij de app van DekaMarkt verschijnt een zelfde slider als in de app van Dirk. Deze slider werkt niet op de traditionele manier, wel met de alternatieve methode. Dit is uiteraard alles behalve toegankelijk. Gebruikers die deze alternatieve methode niet kennen, zullen de app verlaten zonder deze te kunnen gebruiken. 

De slider op het beginscherm van de app kan niet worden voorgelezen. Niet alleen staan hier aanbiedingen, ook de belangrijke maatregelen tegen de verspreiding van het coronavirus worden hier vermeld. Deze zijn voor gebruikers van VoiceOver dus niet te begrijpen.

Een ongelabelde knop ‘speech item Deka knop’ wijst de gebruiker op de mogelijkheid om via de microfoon boodschappen te bestellen. Helaas is ook bij Dekamarkt deze functie niet beschikbaar. Na enig navigeren blijkt dat dit niet de enige knop is die niet is voorzien van een label. Bij vrijwel iedere knop moet VoiceOver invullen wat de functie van de knop is, zo ook bij het toevoegen van een product aan het boodschappenlijstje. Gebruikers krijgen ook geen feedback als er een product is toegevoegd. Omdat de boodschappenlijst gelabeld is als ‘knop’ is het ook moeilijk om deze lijst te vinden.

Eenmaal in het boodschappenlijstje wordt het de gebruiker wel makkelijker gemaakt. Producten die hier staan worden in het geheel voorgelezen en hier is een goed-werkende zoekfunctie beschikbaar.

Al met al is de app van DekaMarkt zeer moeilijk te gebruiken met een schermlezer.

Conclusie

  • Het welkomstscherm is niet toegankelijk
  • De afbeeldingen kunnen niet worden opgelezen
  • Bij veel knoppen ontbreekt een label
  • De voice functie is niet bruikbaar in combinatie met een schermlezer
  • Geen feedback wanneer een product is toegevoegd aan het mandje

Online boodschappen doen met een schermlezer

De resultaten van het onderzoek zijn eigenlijk schokkend. Zo zijn apps van meerdere landelijke supermarktketens niet te gebruiken via een schermlezer, waardoor deze voor een grote groep blinden en slechtzienden niet toegankelijk zijn. Het is duidelijk dat er tijdens het creëren van de apps geen rekening is gehouden met deze groep. Standaardfuncties die niet werken blijken eerder regel te zijn dan uitzondering. Ook wordt er verzaakt om een van de meest simpele mogelijkheden voor een toegankelijke app in te zetten; het labelen van knoppen. 

Er was niet één app die een optimale gebruiksvriendelijk bood. Wel waren er twee apps die boven de andere uitsteken. De supermarkt die de test ‘gewonnen’ heeft is Coop supermarkten, gevolgd door de apps van Jumbo en Albert Heijn. Echter, uit het onderzoek blijkt dat beide apps talloze verbeterpunten kennen.

Digitale toegankelijkheid voor apps

Eerder schreven we al dat het internet slecht toegankelijk is voor blinden en slechtzienden. Dit onderzoek wijst uit dat ook alledaagse taken als boodschappen doen online niet voor iedereen even eenvoudig zijn. In de praktijk zijn de struikelblokken die hierboven beschreven zijn vaak eenvoudig op te lossen. 

Het belangrijkste aspect bij het ontwikkelen van digitale producten is de gebruikservaring van mensen met een beperking. Door dit in de praktijk te laten testen zijn bedrijven en (semi)overheidsorganisaties zeker van de toegankelijkheid van apps en websites. Om direct aan de slag te kunnen kan dit artikel met praktische tips voor het optimaliseren van websites voor gebruikers van schermlezers gebruikt worden. Via onderstaande knop is het mogelijk om direct contact op te nemen met specialisten van Digitaal Toegankelijk.com voor advies op maat.

Digitaal toegankelijk

Toegankelijkheidsopties van iOS en Android

Door Apps & Websites, Auditieve Beperking, Cognitieve Beperking, Spraakbeperking, Taalberperking, Tips & Trics, Tools, Visuele Beperking Geen Reacties

Er zijn talloze oplossingen die bijdragen aan meer digitale toegankelijkheid. Deze bestaan zowel uit hardware, zoals schermlezers  of brailleleesregels, als uit software, denk aan programma’s die pagina’s leesbaar maken voor schermlezers. Veel van deze externe oplossingen worden behandeld in het nieuwsgedeelte van deze  website. 

Wat veel mensen niet weten, is dat de apparaten die wij dagelijks gebruiken al veel opties bieden om het internet toegankelijker te maken voor mensen met een beperking. Hieronder worden de toegankelijkheidsopties van iPads, iPhones en telefoons en tablets die op Android draaien, van merken zoals Samsung, Google, LG, Nokia, Sony en HTC.

Apple’s iOS

Apple neemt toegankelijkheid serieus en heeft de afgelopen jaren flink ingezet op digitale toegankelijkheid voor de besturingssoftware voor mobiele apparaten, iOS, en voor iMacs en MacBooks, macOS. In een eerder artikel werd Apple’s VoiceOver al besproken, de interne schermlezer ingebouwd in iOS. Hieronder staan andere toegankelijkheids oplossingen van het Amerikaanse bedrijf.

Een witte iPhone met zwart scherm op een houten tafel

Made for iPhone-gehoorapparaten

Bij het ontwikkelen  van deze gehoorapparaten  heeft Apple de fabrikanten ondersteund om de koppeling met iPhones mogelijk te maken. Hiervoor moesten geluidsprocessors voor iPhones en iPads ontwikkeld worden. Door drie keer op de thuisknop te klikken kun je eenvoudig de instellingen van het gehoorapparaat  aanpassen. Hierdoor wordt het mogelijk om de instellingen van het apparaat op de omgeving in te stellen. Zo kun je eenvoudig het gehoorapparaat aanpassen naar een rumoerig restaurant, zodat tafelgenoten beter verstaan kunnen worden. Een andere oplossing die je iPhone biedt, is het eenvoudig kunnen bekijken van de batterijstatus van je hoortoestel.  

Ondersteuning bij lezen

Voor mensen die moeite hebben met lezen, vanwege dyslexie of een taalachterstand, is er de optie om boeken, e-mails, websites en berichten te laten voorlezen. Als deze optie is ingeschakeld kan eenvoudig de opdracht gegeven worden aan een iPhone of iPad om de tekst op het scherm voor te lezen. 

Ondersteuning bij schrijven

Een andere optie die Apple biedt is het omzetten van gesproken boodschappen naar geschreven teksten. Zo wordt het voor analfabeten mogelijk om WhatsApps of e-mails te sturen. De berichten die inkomen kunnen eenvoudig voorgelezen worden door het apparaat.

Audio beschrijvingen bij films

Voor kijkers met een auditieve beperking is ondertiteling soms niet genoeg. Spannende muziek of geluiden uit de omgeving worden bijvoorbeeld niet meegenomen in de ondertiteling. Voor deze groep heeft Apple audio beschrijvingen toegevoegd aan films uit iTunes. Netflix heeft deze optie al langer.

Aangepaste weergave

De algemene weergave van de telefoons kan ook naar wens aangepast worden. Gebruikers die gevoelig zijn voor prikkels kunnen bijvoorbeeld donkere modus inschakelen, grijstinten activeren of andere kleuren filters toepassen op het scherm. Op deze manier maakt Apple  het gebruik van de telefoons voor iedereen mogelijk. 

Voorbeeld van donkere modus op iPhone

Voorbeeld van donkere modus op iPhone.

Toegankelijkheidsfuncties inschakelen

De oplossingen die hierboven beschreven zijn kunnen gemakkelijk ingeschakeld worden. iPhone gebruikers naar het beginscherm en klikken op ‘instellingen’, waarna het kopje ‘Toegankelijk’ zichtbaar wordt. Hier kan de gebruiker het apparaat aanpassen aan persoonlijke wensen.

Google’s Android

Wereldwijd draaien nog steeds de meeste telefoons  op het besturingssysteem van Google: Android. Ook Google neemt de toegankelijkheid van de  apparaten die op Android draaien serieus. Zo zijn de volgende oplossingen ontwikkeld voor gebruikers van Android telefoons en tablets.

Een schermlezer gebruiken

Google heeft Talkback ontwikkeld als interne schermlezer voor Android-apparaten. Deze oplossing beschrijft de knoppen en opties die op het scherm worden weergegeven, zodat ook mensen met een visuele beperking deze kunnen gebruiken. Daarnaast worden gebruikers  via een audioboodschap op de hoogte gesteld van nieuwe meldingen. Talkback is te activeren door beide volumetoetsen drie seconden in te drukken of door via ‘Instellingen’ naar ‘Toegankelijkheid’ en vervolgens naar ‘TalkBack’ te gaan.

Naast TalkBack heeft Android ook BrailleBack ontwikkeld. Deze software maakt het mogelijk om via Bluetooth brailleleesregels te verbinden aan smartphones. Hierdoor kan de gebruiker tekst bewerken of het apparaat bedienen via de brailleleesregel. 

Toestel extern bedienen

Via de functie ‘Toegang via schakelaar’ is de mobiele telefoon ook te bedienen  via een schakelaar of toetsenbord. Hierdoor worden smartphones makkelijker te gebruiken voor mensen met een motorische beperking. Naast een externe schakelaar of toetsenbord kunnen ook de knoppen op de zijkanten van de smartphone ingesteld worden om het toestel te bedienen. Op deze pagina staat meer informatie over het instellen van ‘Toegang via schakelaar’ voor Android.

Niet alleen is het mogelijk om Android  smartphones en tablets te bedienen met toetsenborden of schakelaars. Ook heeft Google het mogelijk  gemaakt om telefoons via spraak te bedienen. Door opdrachten op te lezen kan de gebruiker het Android-apparaat taken geven, welke anders via het touchscreen zouden gaan. Deze optie is te vergelijken met Apple’s Siri. 

Een samsung telefoon met Android

Opties voor aangepaste weergave

Als de gebruiker moeite heeft om teksten te lezen op Android telefoons, kan de weergavegrootte en de lettergrootte naar wens worden aangepast. Hiernaast kan het ingebouwde vergrootglas gebruikt worden om tijdelijk in te zoomen op onderdelen van het scherm. 

Voor mensen die gevoelig zijn voor prikkels heeft Android diverse oplossingen ontwikkeld. Denk hierbij aan het kunnen inschakelen van een donker thema, kleurinversie, kleurcorrectie of tekst met hoog contrast. Donker thema en kleurinversie zorgen beiden voor meer donkere  tinten op het scherm. 

Het verschil tussen deze twee opties is dat bij kleurinversie alle kleuren omgedraaid worden, zo wordt zwarte tekst op een witte achtergrond witte tekst  op een zwarte achtergrond, en andersom. Ook verandert de kleur van media, zoals afbeeldingen en video’s. Bij donker thema wordt alleen de gebruikersinterface van Android en apps donkerder  gemaakt, kleuren in media veranderen niet. 

Hulp bij lezen

Android biedt de mogelijkheid handige live oplossingen op het gebied van digitale toegankelijkheid. Zo kunnen gesprekken en video’s live getranscribeerd of vastgelegd worden. Zo kan een gebruiker met een auditieve beperking in realtime een telefoongesprek houden. 

Koppeling met een gehoorapparaat

Ook bij Android is het mogelijk om gehoorapparaten te koppelen aan een smartphone. Dit gaat eenvoudig via ‘Verbonden apparaten’ in het menu ‘Instellingen’. Hier kan een Bluetooth apparaat worden toegevoegd  aan de lijst met bestaande apparaten. Zo kan een hoortoestel bediend worden vanaf de telefoon en gemakkelijk aangepast worden aan de omgeving. 

Toegankelijkheids apps  van Android

In de digitaal winkel van Android, Google Play, is een heel groot aanbod apps ook de Android Toegankelijkheidstools te vinden. Deze app is een verzameling van toegankelijkheidsapps die gebruikt kunnen worden om Android-apparaten toegankelijker te maken voor gebruikers. Veel van de oplossingen die hiervoor genoemd zijn, zijn te vinden in dit pakket. 

Ook voor developers biedt Android een helpende hand. De Accessibility Scanner helpt ontwikkelaars om een app te testen op het gebied van digitale toegankelijkheid. Apps worden beoordeeld op basis van contentlabels, grootte van het tikdoel, klikbare items en tekst- en beeldcontrast.

Het ontwikkelen van een digitaal toegankelijke website of app is een complex proces. In  de praktijk merken wij dat het developers veel helpt om een product te laten testen door mensen met een beperking. Digitaal Toegankelijk.com stelt testgroepen samen en begeleid testsessies op dit gebied. Op deze pagina staat dit proces uitgebreider beschreven

Naast het opzetten en uitvoeren van testsessies geven wij ook advies én ontwikkelen we toegankelijke online producten. Meer weten? Neem vrijblijvend contact op via onderstaande knop. 

Maak ook jouw website of app toegankelijk!

We komen graag langs om te bepalen welke stappen jullie kunnen zetten richting een toegankelijk product

Afspraak maken