Screen reader: hoe werkt het en waarom is het belangrijk voor jouw website?

Je website heeft bezoekers die hem nooit zien. Ze horen hem. Een screen reader leest de pagina voor: kop voor kop, link voor link, knop voor knop. En wat die stem voorleest is niet wat jij op je scherm ziet — het is wat er in je HTML staat.

Daar zit precies het probleem. Een knop die eruitziet als een knop maar in de code een gewone div is, blijft stil. Een afbeelding met de openingstijden erin wordt “afbeelding”. Een kop die alleen maar groot en vet is gemaakt telt niet mee als kop — en juist op koppen navigeert bijna driekwart van de gebruikers.

Hieronder lees je hoe een screen reader jouw pagina echt voorleest, welke vijf dingen het vaakst stukgaan en hoe je het in tien minuten zelf test. Heb je een Mac of een iPhone, dan hoef je daar niets voor te installeren. Benieuwd hoe jouw site klinkt in een screenreader? Die test hoort standaard bij onze WCAG-audit.

Inhoudsopgave

• Wat is een screen reader precies?
• Wie gebruikt er een?
• Hoe leest een screen reader jouw pagina voor?
• Welke screen readers zijn er?
• De vijf dingen die het vaakst stukgaan
• Test het zelf in tien minuten
• Wat een overlay-widget niet oplost
• Tot slot
• Veelgestelde vragen over screen readers

Wat is een screen reader precies?

Een screen reader is software die alles op het scherm omzet naar spraak of naar braille op een leesregel. Het is geen browserplug-in en geen instelling in je website: het is een programma dat tussen het besturingssysteem en de gebruiker in zit.

Voor websites werkt dat zo. Je browser leest je HTML en bouwt daaruit een tweede, onzichtbare structuur op: de accessibility tree. Daarin staat per element wat het is (kop, link, knop, invoerveld), hoe het heet en in welke staat het verkeert (uitgeklapt, aangevinkt, uitgeschakeld). De screen reader leest die boom voor, niet je vormgeving.

Dat verklaart waarom je site er prima uit kan zien en toch onbruikbaar kan zijn. Alles wat je met CSS regelt — grootte, kleur, positie, volgorde op het scherm — komt in die boom niet terug. Alleen je HTML bepaalt wat er te horen valt.

Wie gebruikt er een?

In de eerste plaats mensen die blind zijn of zo slechtziend dat lezen geen optie is. Daarnaast gebruiken mensen met een ernstige leesbeperking ze, en zetten sommige gebruikers ze situationeel in. Het is een kleinere groep dan bijvoorbeeld de groep die slecht contrast niet kan lezen, maar het is wel de groep voor wie een fout meteen fataal is: een knop zonder naam is niet lastig, die bestaat gewoon niet.

De Screen Reader User Survey van WebAIM (1.539 respondenten, december 2023 en januari 2024) geeft een aardig beeld van wat er gebruikt wordt. Op de desktop is JAWS met 40,5% de meestgebruikte, gevolgd door NVDA met 37,7% en VoiceOver met 9,7%. Ruim negen op de tien gebruikt daarnaast een screen reader op de telefoon, en daar is VoiceOver met 70,6% juist dominant.

De belangrijkste bevinding voor jou staat ergens anders in dat onderzoek: 71,6% zoekt informatie op een lange pagina in de eerste plaats via de koppen. Niet door alles af te luisteren, maar door van kop naar kop te springen, precies zoals jij een pagina scant. Je koppenstructuur is daarmee geen opmaakkwestie maar de navigatie zelf.

Hoe leest een screen reader jouw pagina voor?

Niet van boven naar beneden, of in elk geval zelden. Een ervaren gebruiker springt met één toets naar de volgende kop, vraagt een lijst op van alle links op de pagina, of gaat direct naar een oriëntatiepunt als de navigatie of de hoofdinhoud. Pas als dat allemaal niets oplevert, luistert iemand de pagina van voor naar achter af.

Het makkelijkst te begrijpen is een voorbeeld. Hieronder staat dezelfde pagina twee keer: eerst zoals hij klinkt als de HTML niet klopt, daarna zoals hij klinkt als het wel goed staat.

Zo klinkt een pagina die niet klopt

Afbeelding.
Afbeelding, zonnepanelen-header-2024-final.jpg.
Link. Link. Link. Link.
Lees meer, link. Lees meer, link. Lees meer, link.
Afbeelding.
Bewerkveld. Bewerkveld. Bewerkveld.
Knop.

Geen enkele kop, dus niets om op te navigeren. Drie identieke links waarvan je de bestemming niet hoort. Invoervelden zonder naam, dus je weet niet wat je invult. En een knop waarvan niet te horen is wat hij doet. Deze pagina is niet moeilijk te gebruiken, hij is onbruikbaar.

Zo klinkt dezelfde pagina als het klopt

Kop niveau 1: Zonnepanelen voor bedrijfsdaken.
Navigatie-oriëntatiepunt, lijst met 5 items.
Hoofdinhoud.
Kop niveau 2: Wat levert een dak van 500 vierkante meter op?
Afbeelding: installateur legt panelen op een plat bedrijfsdak.
Link: bekijk onze rekenvoorbeelden voor bedrijfsdaken.
Kop niveau 2: Offerte aanvragen.
Formulier. Bewerkveld, verplicht: bedrijfsnaam.
Bewerkveld, verplicht: e-mailadres.
Knop: vraag een vrijblijvende offerte aan.

Zelfde pagina, zelfde ontwerp, zelfde teksten. Het verschil zit volledig in de HTML: echte koppen in plaats van dikgedrukte regels, beschrijvende linkteksten, labels aan de invoervelden en een knop met een naam.

Welke screen readers zijn er?

• NVDA — gratis, voor Windows, van NV Access. Dit is waar je zelf mee test: gratis, snel geïnstalleerd en met bijna 38% van de gebruikers ruim vertegenwoordigd.
• JAWS — betaald, voor Windows. De meestgebruikte op de desktop, vooral op werkplekken waar de werkgever de licentie betaalt.
• VoiceOver — ingebouwd in macOS en iOS. Aanzetten met Cmd+F5 op een Mac. Op mobiel de duidelijke nummer één.
• TalkBack — ingebouwd in Android, de tegenhanger van VoiceOver.
• Verteller (Narrator) — ingebouwd in Windows, maar nauwelijks als primaire screen reader gebruikt.

Je hoeft niet in alle vijf te testen. Wie NVDA op Windows en VoiceOver op een iPhone probeert, dekt het grootste deel van de praktijk af en vindt vrijwel alle fouten die ertoe doen.

De vijf dingen die het vaakst stukgaan

1. Afbeeldingen zonder alt-tekst

Je hoort “afbeelding” of, erger nog, de bestandsnaam. Staat er informatie in die afbeelding — een prijs, een openingstijd, een stappenplan — dan is die informatie weg. Schrijf een alt-tekst die beschrijft wat je moet weten, en laat hem leeg bij afbeeldingen die puur decoratief zijn.

2. Knoppen en iconen zonder naam

Het klassieke voorbeeld is het winkelwagentje of het vergrootglas: een icoon zonder tekst. Op het scherm snapt iedereen het, in de accessibility tree staat er niets. Je hoort “knop” en dat is alles. Geef zulke knoppen een toegankelijke naam, bijvoorbeeld met een aria-label.

3. Koppen die geen koppen zijn

Dit is de duurste fout, want hij breekt de manier waarop bijna driekwart van de gebruikers navigeert. Een regel die je groot en vet hebt gemaakt is voor een screen reader gewone tekst. Gebruik h2 en h3 op volgorde en regel het formaat met CSS, niet andersom.

4. Invoervelden zonder label

Een formulier waarin je “bewerkveld, bewerkveld, bewerkveld” hoort, vul je niet in. Een placeholder telt niet: die verdwijnt zodra je begint te typen en wordt lang niet altijd voorgelezen. Koppel elk veld aan een echt label en geef aan welke velden verplicht zijn.

5. Links die allemaal “lees meer” heten

Gebruikers vragen regelmatig een lijst op van alle links op een pagina. Staat daar tien keer “lees meer” in, dan heeft die lijst geen waarde. Schrijf linkteksten die ook los van hun zin te begrijpen zijn.

Test het zelf in tien minuten

Je hoeft hier geen specialist voor te zijn. Zet de screen reader aan, draai je scherm weg of doe je ogen dicht, en probeer één ding te doen op je eigen site: een offerte aanvragen, een product in de winkelwagen leggen, het contactformulier versturen.

• Mac: Cmd+F5 zet VoiceOver aan en weer uit. Navigeer met Ctrl+Option en de pijltjestoetsen.
• iPhone: Instellingen, Toegankelijkheid, VoiceOver. Veeg naar rechts om naar het volgende element te gaan, dubbeltik om te activeren.
• Windows: download NVDA gratis bij NV Access. Navigeer met Tab en met H om van kop naar kop te springen.

Let tijdens die tien minuten op drie vragen. Kom ik met alleen het toetsenbord overal? Hoor ik bij elke knop en link wat hij doet? Klinkt de reeks koppen als een inhoudsopgave van de pagina?

En wees niet verbaasd als het onwennig gaat. Je eerste poging is altijd klungelig, want je bent de bediening aan het leren die een dagelijkse gebruiker al jaren in de vingers heeft. Dat je zelf traag bent zegt niets over je site. Wat je hoort wel.

Wat een overlay-widget niet oplost

Er zijn tools die een knopje op je site zetten waarmee bezoekers zelf lettergrootte, contrast en voorleesfuncties kunnen aanzetten. Die tools verkopen zichzelf als een oplossing in één regel code. Voor screenreadergebruikers zijn ze dat niet.

De reden is simpel: zo’n widget verandert je onderliggende HTML niet. Een knop zonder naam blijft een knop zonder naam. Bovendien heeft iemand die een screen reader gebruikt zijn eigen software al draaien, met eigen instellingen en sneltoetsen — een tweede voorleesfunctie in de pagina zit daarbij in de weg. Het echte werk zit in je HTML, en dat is precies wat wij doen als we een site WCAG / EAA compliant maken.

Tot slot

Een screen reader is geen randgeval waarvoor je een aparte versie van je website bouwt. Het is een andere manier om dezelfde pagina te lezen, en die manier werkt zodra je HTML klopt. Echte koppen, namen op je knoppen, labels op je velden, zinnige linkteksten en alt-teksten die ergens over gaan — dat is negentig procent van het verhaal.

Zet hem vandaag tien minuten aan op je eigen site. Wat je dan hoort, vertelt je meer dan welke scan ook.

Veelgestelde vragen over screen readers