App of website testen met VoiceOver op iPhone en iPad

VoiceOver is de ingebouwde screenreader op je iPhone en iPad. Een screenreader leest hardop voor wat op het scherm staat. Handig voor mensen die minder of niets kunnen zien.

Met VoiceOver kun je ook snel ontdekken of een app of website logisch werkt zonder zicht. Je hoort bijvoorbeeld namen van knoppen, links, koppen, velden, foutmeldingen, afbeeldingen en andere onderdelen. 

Zo'n test vervangt geen volledig toegankelijkheidsonderzoek. Wel helpt het om veel praktische problemen zelf te vinden. Zeker als je nog weinig ervaring hebt met  (het bouwen voor) screenreaders zal er een wereld voor je open gaan.

Je hoeft VoiceOver niet perfect te beheersen om ermee te testen. Het doel is niet om te doen alsof je blind bent. We willen controleren of belangrijke onderdelen begrijpelijk en bruikbaar zijn met een screenreader.

Belangrijk voordat je begint

VoiceOver verandert de bediening van je iPhone of iPad compleet. Gewoon tikken  werkt dan niet meer! Eerst moet je VoiceOver aanzetten. Je bedient je apparaat daarna met speciale gebaren.

Zodra VoiceOver aan staat:

• tik je een keer om een onderdeel te selecteren en te laten voorlezen;
• tik je twee keer om het geselecteerde onderdeel te activeren;
• swipe je naar rechts om naar het volgende onderdeel te gaan;
• swipe je naar links om naar het vorige onderdeel te gaan.

Het is dus slim om deze uitleg goed bij de hand te houden voordat je VoiceOver aanzet op je iPhone of iPad.

Tip: oefen eerst in de VoiceOver-oefenomgeving van Apple. Daar kun je gebaren proberen zonder iets op je apparaat te openen of te wijzigen. Je vindt deze oefening onder bij Instellingen onder Toegankelijkheid> VoiceOver > Zelfstudie voor VoiceOver

Wat kun je testen met VoiceOver?

Met VoiceOver kun je onder andere controleren of:

• knoppen een duidelijke naam hebben;
• links begrijpelijk zijn zonder extra context;
• formulieren goede labels, instructies en foutmeldingen hebben;
• afbeeldingen goede alternatieve teksten hebben;
• de volgorde van onderdelen logisch is;
• koppen op websites goed zijn opgebouwd;
• sliders, menu's, tabs en pop-ups bruikbaar zijn;
• statusmeldingen worden voorgelezen;
• belangrijke informatie niet alleen visueel wordt getoond;

Uiteindelijk wil je dat alles met VoiceOver te bereiken en te bedienen is.

Belangrijke begrippen

VoiceOver-cursor

De VoiceOver-cursor is de plek waar VoiceOver nu naar kijkt. VoiceOver leest voor wat in die cursor staat.

Je verplaatst de VoiceOver-cursor meestal met een swipe naar links of rechts.

Rotor

De rotor is een menu in VoiceOver. Je gebruikt de rotor om snel te wisselen tussen instellingen of soorten onderdelen.

Op websites kun je de rotor bijvoorbeeld gebruiken voor:

• koppen;
• links;
• formuliervelden;
• afbeeldingen;
• woorden of tekens;
• voorleessnelheid.

Je bedient de rotor door met twee vingers op het scherm te draaien, alsof je aan een knop draait.

Als de gewenste optie actief is, swipe je met een vinger omhoog of omlaag om die optie te gebruiken. Kies je bijvoorbeeld Koppen, dan ga je met omhoog of omlaag naar de vorige of volgende kop.

Split-tap

Normaal activeer je een onderdeel met een dubbele tik. Er is ook een handig alternatief: split-tap.

Houd een onderdeel met een vinger vast en tik met een andere vinger ergens op het scherm. Dat activeert het onderdeel dat je vasthoudt.

Dit werkt vaak prettiger bij kleine knoppen of als dubbel tikken lastig gaat.

Schermgordijn

Met het schermgordijn wordt het scherm zwart, terwijl het apparaat actief blijft. Dit is handig om te testen of je echt op gehoor werkt.

Zet het schermgordijn alleen aan als je weet hoe je het weer uitzet:

drie keer tikken met drie vingers

Als Zoom ook aanstaat, gebruikt Apple een ander gebaar. Laat Zoom daarom liever uit tijdens deze test.

VoiceOver in het Apple-ecosysteem

Apple introduceerde VoiceOver op iPhone in 2009. Op de latere iPad was VoiceOver vanaf de introductie beschikbaar.

VoiceOver werkt op iPhone en iPad anders dan op Mac. Op Mac gebruik je vooral het toetsenbord. Op iPhone en iPad gebruik je vooral gebaren op het scherm.

Voor websites test je VoiceOver standaard in Safari. Voor apps test je uiteraard in de app zelf.

VoiceOver aan- en uitzetten

Je kunt VoiceOver op verschillende manieren aan- en uitzetten.

Via instellingen

Ga naarInstellingen > Toegankelijkheid > VoiceOver

Zet VoiceOver daar aan of uit.

Via Siri

Vraag Siri bijvoorbeeld Zet VoiceOver aan of Zet VoiceOver uit

Via toegankelijkheidsknop

Je kunt VoiceOver koppelen aan de toegankelijkheidsactivering. Dit doe je onder Instellingen > toegankelijkheid > Activeringsknop

Afhankelijk van je apparaat gebruik je daarna:

• drie keer klikken op de zijknop;
• drie keer klikken op de thuisknop;
• drie keer klikken op de bovenste knop;
• een snelkoppeling in het bedieningspaneel, als je die hebt toegevoegd.

De precieze fysieke knop hangt af van je iPhone- of iPad-model.

Eerst veilig oefenen

Apple heeft een oefenomgeving voor VoiceOver.

Ga naar Instellingen > Toegankelijkheid > VoiceOver en zet VoiceOver aan en open daarna VoiceOver-oefening

Daar kun je tikken, dubbeltikken en swipen oefenen. VoiceOver vertelt dan wat het gebaar doet, zonder dat je per ongeluk een app opent of een instelling verandert.

Basisgebaren

Deze gebaren heb je nodig voor bijna elke test.

Gebaren met twee, drie en vier vingers

Gebruik deze lijst als naslag. Je hoeft niet alle gebaren uit je hoofd te leren.

De rotor gebruiken

De rotor is belangrijk bij het testen van websites. Je gebruikt hem om snel door bepaalde onderdelen te gaan.

Zo gebruik je de rotor:

1. Draai met twee vingers op het scherm tot je de gewenste optie hoort.
2. Stop bij bijvoorbeeld Koppen, Links, Formulierregelaars of Afbeeldingen.
3. Swipe met een vinger omlaag of omhoog om naar het volgende of vorige onderdeel van dat type te gaan.

Je kunt zelf instellen welke opties in de rotor staan.

Ga daarvoor naar Instellingen > Toegankelijkheid > VoiceOver > Rotor

Voor webtests vind ik persoonlijk de volgende handig:

• koppen;
• links;
• formuliervelden;
• afbeeldingen;
• landmarks of herkenningspunten, als beschikbaar;
• woorden;
• tekens.

Je kunt er ook voor kiezen om een tweede stem voor een andere taal of de snelheidsregelaar in de rotr te zetten. Automatisch wisselen gaat niet altijd goed, en de stem optie kan daarom helpen bij het testen van apps of websites in een andere taal.

Testen met VoiceOver

Het stuk waar je uiteindelijk voor kwam, hoe pas je bovenstaande nu toe? Hieronder vind je verschillende testen die je zelf met VoiceOver kunt doorlopen. We beginnen met het lezen van een scherm, daarna kijken we hoe je specifieke onderdelen verder kunt testen.

Test 1: verken het scherm

Open de app of website die je wilt testen. Zet VoiceOver aan. Swipe met een vinger naar rechts door het scherm.

Controleer:

• hoor je waar je bent?
• is de volgorde logisch?
• worden alle belangrijke onderdelen voorgelezen?
• hoor je geen dubbele of overbodige teksten?
• worden knoppen, links en velden als zodanig herkend?
• kom je vast te zitten?

Gebruik daarna ook je vinger om over het scherm te slepen. VoiceOver leest dan voor wat er op dat moment onder je vinger zit. Zo merk je of onderdelen op het scherm wel of niet door VoiceOver worden gevonden.

Test 2: activeer knoppen en links

Selecteer een knop of link met een swipe naar rechts of links.

Activeer het onderdeel met dubbel tikken met een vinger of met split-tap houd het onderdeel vast met een vinger en tik met een andere vinger op het scherm

Controleer:

• heeft de knop een duidelijke naam?
• zegt VoiceOver dat het om een knop of link gaat?
• is duidelijk wat er gebeurt na activeren?
• verandert de focus logisch na openen of sluiten?
• kun je ook terug met het Z-gebaar met twee vingers?

Test 3: test een website in Safari

Open de website in Safari.

Gebruik eerst swipe naar rechts om de gewone volgorde te controleren van onderdelen. Gebruik daarna de rotor voor specifieke onderdelen.

Koppen

Zet de rotor op Koppen. Swipe omhoog of omlaag.

Controleer:

• is er een duidelijke hoofdkop?
• volgen koppen elkaar logisch op?
• kun je aan de koppen begrijpen waar de pagina over gaat?
• ontbreken er zichtbare koppen in de rotor?
• staan er teksten in de rotor die eigenlijk geen kop zijn?

Links

Zet de rotor op Links.

Controleer:

• zijn linkteksten duidelijk zonder extra context?
• hoor je niet alleen lees meer, hier of klik hier?
• is duidelijk of een link naar een download, andere pagina of externe website gaat?

Formulieren

Zet de rotor op Formulierregelaars of ga met swipes door het formulier.

Controleer:

• heeft elk veld een duidelijk label?
• wordt duidelijk welke velden verplicht zijn?
• worden instructies voorgelezen?
• worden foutmeldingen voorgelezen?
• is duidelijk hoe je een fout oplost?
• kun je het formulier verzenden?

Afbeeldingen

Zet de rotor op Afbeeldingen, als die optie beschikbaar is.

Controleer:

• heeft een informatieve afbeelding een nuttige alternatieve tekst?
• worden decoratieve afbeeldingen niet onnodig voorgelezen?
• hoor je geen bestandsnaam zoals image-1234.png?
• wordt zichtbare tekst in een afbeelding ook als gewone tekst aangeboden?

Let op: VoiceOver Recognition kan soms zelf door middel van Apple AI afbeeldingen of schermonderdelen beschrijven. Dat is handig voor gebruikers, maar het is geen vervanging voor goede alt-teksten en toegankelijke code.

Test 4: test een app

Open de app die je wilt testen. Begin op het eerste scherm.

Swipe naar rechts door het hele scherm.

Controleer:

• is de schermtitel duidelijk?
• hoor je wat je moet doen?
• hebben knoppen, tabs en iconen duidelijke namen?
• wordt de status van schakelaars, tabs en geselecteerde opties voorgelezen?
• klopt de volgorde van onderdelen?
• kun je alles activeren met een dubbele tik?
• kun je terug of sluiten zonder vast te lopen?

Test daarna minimaal deze onderdelen als ze in de app zitten:

• menu;
• tabbar;
• formulier;
• foutmelding;
• zoekfunctie;
• filter of sortering;
• slider;
• datumkiezer;
• pop-up of dialog;
• betaal- of bevestigingsstap.

Test 5: test meldingen en veranderingen

Veel fouten ontstaan wanneer iets op het scherm verandert.

Denk aan:

• een foutmelding na verzenden;
• een succesmelding;
• een laadstatus;
• nieuwe zoekresultaten;
• een geopende dialog;
• een menu dat openklapt;
• een stap in een proces.

Controleer:

• hoort de gebruiker dat er iets verandert?
• komt de VoiceOver-cursor op een logische plek?
• wordt een foutmelding direct genoeg voorgelezen?
• kun je verder zonder het scherm te zien?

Voorbeeld van een probleem:

Je drukt op Verzenden, er verschijnt visueel een foutmelding, maar VoiceOver blijft op de knop staan en leest niets nieuws voor.

Test 6: test scrollen en verborgen inhoud

Gebruik drie vingers om te scrollen:

• drie vingers omhoog swipen: scroll omlaag;
• drie vingers omlaag swipen: scroll omhoog.

Controleer:

• kun je alle inhoud bereiken?
• worden nieuwe onderdelen na scrollen voorgelezen?
• blijft de volgorde logisch?
• raken vaste balken of overlays niet in de weg?
• kun je onderaan de pagina of lijst komen?

Extra: gebruik schermgordijn als controle

Als je de basisgebaren kent, kun je het schermgordijn gebruiken. Zet het schermgordijn aan via: drie keer tikken met drie vingers

Het scherm wordt zwart, maar het apparaat blijft werken zoals je nu gewend bent.

Controleer nog eens een korte taak, bijvoorbeeld:

• open het menu;
• zoek een link;
• vul een veld in;
• sluit een melding;
• ga terug naar het vorige scherm.

Het gebruik van het schemrgordijn helpt om je, vaak onbewuste, afhankelijkheid van de visuele presentatie te onderdrukken. Zo merk je nog beter of de informatie echt duidelijk is.

Gebruik deze test alleen als je zeker weet dat je VoiceOver weer uit kunt zetten.

Veelvoorkomende problemen

Zaken die we vaak mis zien gaan:

• VoiceOver leest alleen knop of afbeelding voor.
• Een icoon heeft geen naam.
• Een linktekst is niet duidelijk.
• Een formulier heeft velden zonder label.
• Een foutmelding wordt niet voorgelezen.
• Een status of geselecteerde tab wordt niet genoemd.
• De focus springt naar een vreemde plek.
• Een dialog opent, maar VoiceOver blijft op de pagina erachter.
• Een slider of swipe-onderdeel is niet goed te bedienen.
• Belangrijke tekst staat alleen in een afbeelding.
• De app of website werkt alleen met gewone swipegebaren, maar niet met VoiceOver-gebaren.

Handige gebaren

Meer leren?

Apple heeft uitgebreide handleidingen voor VoiceOver op iPhone en iPad. Die zijn handig als je meer gebaren wilt leren of wilt weten waarom iets op jouw apparaat anders werkt.

De volgende pagina's zijn in het Engels:

• Turn on and practice VoiceOver on iPhone
• Use VoiceOver gestures on iPhone
• Control VoiceOver using the rotor on iPhone
• Use VoiceOver in apps on iPhone
• Use VoiceOver gestures on iPad
• Use VoiceOver in apps on iPad