Website testen met VoiceOver op Mac: beginnersgids screenreader-testen

VoiceOver is de ingebouwde screenreader van macOS. Een screenreader leest hardop voor wat op het scherm staat. Ook kun je met het toetsenbord door een website navigeren.

Met VoiceOver kun je snel ontdekken of een website logisch werkt zonder muis en zonder naar het scherm te kijken. Je hoort informatie als koppen, links, knoppen, formulieren, afbeeldingen en tabellen. Het helpt om veel praktische problemen makkelijk zelf te vinden.

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

Wat test je met VoiceOver?

Met VoiceOver kun je onder andere controleren of:

• de pagina een logische kopstructuur heeft
• links duidelijke teksten hebben
• knoppen begrijpelijk worden voorgelezen
• formulieren goede labels en foutmeldingen hebben
• afbeeldingen goede alternatieve teksten hebben
• de volgorde op de pagina logisch is
• tabellen begrijpelijke rij- en kolomkoppen hebben
• onderdelen met het toetsenbord te bereiken en te bedienen zijn

Belangrijke begrippen

VO-toets

Veel VoiceOver-commando's beginnen met VO. 

Dat is geen losse toets. VO betekent: de VoiceOver-toets.

Standaard kun je hiervoor gebruiken:

• Control + Option
• Caps Lock

Als er bijvoorbeeld VO + Spatie staat, druk je dus op de combinatie Control + Option + Spatie of Caps Lock + Spatie.

VoiceOver-cursor

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

Dit is niet altijd hetzelfde als de gewone toetsenbordfocus. Dat verschil is in het  begin soms wat verwarrend, maar went snel.

In de afbeelding staat aan de linkerkant rond het logo van Toegankelijk Online de normale toetsenbordfocus, in dit geval de standaard blauwe lijn van Chrome. Rechts staat een zwarte lijn; dit is de VoiceOver-cursor die rond het menu staat dat voorgelezen wordt. 

Rotor

De rotor is een menu in VoiceOver. Je gebruikt de rotor om snel te wisselen tussen de onderdelen waar VoiceOver doorheen navigeert, zoals koppen, links, formulieren, tabellen en afbeeldingen. 

Ook kun je via de rotor snel instellingen aanpassen, zoals voorleessnelheid of taal als je er meerdere geïnstalleerd hebt. Het Rotor-menu is via de VoiceOver instellingen naar wens aan te passen.

Je opent de rotor met VO + U.

Interactie met onderdelen in je website

Soms kom je met VoiceOver op een groep, tabel of ander onderdeel dat je eerst moet binnengaan. Apple noemt dat 'interacteren'.

Het is een uniek concept dat andere screenreaders niet kennen. VoiceOver ziet een element daarmee soms als meerdere lagen, waarbij je een laagje dieper kunt gaan om meer informatie te vinden.

• Ga een onderdeel in met VO + Shift + Pijl omlaag.
• Ga een onderdeel uit met VO + Shift + Pijl omhoog.

VoiceOver in het Apple-ecosysteem

Apple introduceerde VoiceOver in 2005 met Mac OS X 10.4 Tiger. VoiceOver is inmiddels een standaardonderdeel van macOS, iOS en iPadOS.

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

Voor het testen van websites op Mac testen we VoiceOver standaard met Safari. VoiceOver is, als Apple product, ontwikkeld voor Safari. Andere browsers kunnen ook werken, maar de resultaten kunnen verschillen (soms beter, soms minder).

macOS instellen voor navigatie met toetsenbord

Voor sommige macOS-versies kun je het beste eerst toetsenbordnavigatie voor het besturingssysteem zelf aanzetten. Dan kun je met Tab beter door knoppen, velden en andere onderdelen bewegen.

Ga daarvoor naar Systeeminstellingen > Toegankelijkheid > Toetsenbord

Zet daar Volledige toetsenbordtoegang of toetsenbordnavigatie aan.

Op sommige macOS-versies staat deze instelling op een andere plek, bijvoorbeeld onder Systeeminstellingen > Toetsenbord > Toetscombinaties en op oudere macOS-versies heet Systeeminstellingen nog Systeemvoorkeuren.

Safari instellen

Zet daarna in Safari aan dat je met Tab alle onderdelen op een webpagina kunt bereiken.

Ga in Safari naar Safari > Instellingen > Geavanceerd 

Zet deze optie aan: Druk op Tab om elk onderdeel op een webpagina te markeren.

Zonder deze instelling springt Tab in Safari vaak alleen naar velden en keuzemenu's. Met de instelling neemt Safari ook links, knoppen en andere onderdelen beter mee.

VoiceOver aan- en uitzetten

Je kunt VoiceOver op verschillende manieren starten:

• druk op Command + F5
• houd Command ingedrukt en druk drie keer snel op je Touch ID knop, als je Mac of toetsenbord Touch ID heeft
• open het toegankelijkheidssnelmenu met Option + Command + F5
• ga naar Systeeminstellingen > Toegankelijkheid > VoiceOver

Als VoiceOver start, verschijnt vaak een welkomstvenster. Je kunt hier ook de interactieve VoiceOver-oefeningen starten. Dat is handig als je nog nooit met VoiceOver hebt gewerkt.

Stem en snelheid aanpassen in de VoiceOver Utility

De stem en snelheid kun je aanpassen in VoiceOver Utility, de losse app voor instellingen van VoiceOver. Hier pas je ook je rotor aan en kun je andere stemmen toevoegen.

Als VoiceOver aanstaat, open je VoiceOver Utility met VO + Fn + F8.
Op sommige toetsenborden werkt VO + Fn + 8 ook.

Je vindt VoiceOver Utility ook via Systeeminstellingen > Toegankelijkheid > VoiceOver

Tijdens het gebruik kun je de steminstellingen ook met sneltoetsen aanpassen:

• Wissel naar je instelling naar keuze met VO + Command + Pijl links of VO + Command + Pijl rechts
• pas de gekozen instelling aan met VO + Command + Pijl omhoog of VO + Command + Pijl omlaag

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 de pagina, daarna kijken we hoe je specifieke onderdelen kunt testen.

Test 1: lees de pagina

Open de pagina die je wilt testen in Safari. Zet VoiceOver aan.

Gebruik daarna deze commando's:

Let tijdens het lezen op de volgende punten:

• Begrijp je waar de pagina over gaat?
• Wordt de belangrijkste informatie in een logische volgorde gelezen?
• Hoor je rare teksten, dubbele teksten of bestandsnamen?
• Mis je informatie die wel zichtbaar is?
• Kom je onderdelen tegen die niet duidelijk worden uitgelegd?

Test 2: koppen

Koppen helpen screenreadergebruikers om snel te begrijpen hoe een pagina is opgebouwd.

Open de rotor met VO + U

Ga met Pijl links en Pijl rechts naar Koppen. Loop daarna met Pijl omhoog en Pijl omlaag door de koppen.

Controleer het volgende:

• is er een duidelijke hoofdkop?
• volgen de koppen elkaar logisch op?
• kun je aan de koppen begrijpen waar de pagina over gaat?
• worden er geen kopniveaus overgeslagen zonder goede reden?
• zijn zinnen alleen als kop opgemaakt als ze echt een kop zijn?
• missen er koppen in de lijst die wel op de pagina staan?

Je kunt ook snel naar de volgende kop met VO + Command + H

Test 3: links en knoppen

Links en knoppen moeten in veel situaties zonder extra context duidelijk zijn.

Gebruik de rotor VO + U. Kies de lijst Links of Formulierregelaars, afhankelijk van wat je wilt controleren.

Je kunt ook deze sneltoetsen gebruiken:

Controleer:

• zegt een link meer dan alleen lees meer, klik hier of meer informatie?
• is duidelijk wat er gaat gebeuren als je de link opent?
• wordt een knop als knop voorgelezen?
• heeft een icoonknop een duidelijke naam?
• kun je het onderdeel bedienen met het toetsenbord?

Test 4: formulieren

Formulieren gaan vaak mis. Controleer elk veld apart.

Gebruik Tab, Shift + Tab, de rotor of VO + Pijl rechts om door het formulier te gaan.

Controleer:

• wordt bij elk veld een duidelijk label voorgelezen?
• is duidelijk welke velden verplicht zijn?
• worden instructies op het goede moment voorgelezen?
• hoor je een foutmelding als je iets verkeerd invult?
• is duidelijk hoe je de fout oplost?
• kun je verzenden zonder muis?

Voorbeeld van een probleem

Een veld heeft alleen de zichtbare tekst E-mail, maar VoiceOver leest alleen tekstveld voor. Dan mist het veld waarschijnlijk een goed gekoppeld label.

Test 5: afbeeldingen

Zoek afbeeldingen met VO + Command + G

Controleer de volgende punten:

• heeft een informatieve afbeelding een nuttige alternatieve tekst?
• wordt een decoratieve afbeelding netjes genegeerd?
• hoor je geen bestandsnaam zoals image-1234.png?
• wordt zichtbare tekst in een afbeelding ook als gewone tekst aangeboden, in de lopende tekst of via de alt tekst?

Niet elke afbeelding heeft een lange beschrijving nodig. Een decoratieve afbeelding mag juist leeg zijn voor screenreaders.

Test 6: tabellen

Zoek de volgende tabel met VO + Command + T

Tabellen zijn een voorbeeld waarin je de lagen die VoiceOver gebruikt, tegenkomt. Ga daarna de tabel in met VO + Shift + Pijl omlaag

Navigeer door de cellen met de pijltjestoetsen terwijl je de VO-toets gebruikt.

Handige commando's:

Controleer het volgende:

• wordt duidelijk hoeveel rijen en kolommen de tabel heeft?
• worden kolomkoppen goed voorgelezen?
• worden rijkoppen goed voorgelezen als die nodig zijn?
• is de tabel echt een gegevenstabel?
• kun je de inhoud cel voor cel begrijpen?

Extra: controleer de gewone Tab-volgorde

Deze test is ook belangrijk voor mensen die geen screenreader gebruiken, maar wel afhankelijk zijn van het toetsenbord. Gebruik daarom nu even geen VoiceOver-commando's, maar alleen:

• Tab;
• Shift + Tab;
• Enter;
• Spatie;
• de pijltjestoetsen waar dat logisch is.

Controleer:

• kom je langs alle interactieve onderdelen?
• is de volgorde logisch?
• zie je waar de focus staat?
• kun je menu's openen en sluiten?
• kun je dialogs of pop-ups gebruiken en weer sluiten?
• blijft de focus nergens vastzitten?

Veelvoorkomende problemen

Let vooral op deze signalen:

• VoiceOver leest een knop alleen voor als groep of afbeelding.
• Een linktekst zegt alleen lees meer.
• Een formulierveld heeft geen naam.
• Een foutmelding wordt niet voorgelezen.
• Een icoonknop heeft geen toegankelijke naam.
• Koppen staan in een onlogische volgorde.
• Er is zichtbare tekst die VoiceOver niet voorleest.
• VoiceOver leest dubbele of overbodige tekst.
• De focus springt naar een onverwachte plek.
• Een menu, pop-up of slider is niet met het toetsenbord te bedienen.

Handige sneltoetsen

Meer leren?

Apple heeft een uitgebreide VoiceOver-handleiding. Deze is handig als je meer commando's wilt leren of wilt weten waarom iets op jouw Mac anders werkt.

• Apple VoiceOver User Guide for Mac
• Get started with VoiceOver on Mac
• VoiceOver commands and gestures on Mac
• Keyboard shortcuts and gestures in Safari on Mac