Een website die werkt voor slechtziende bezoekers

Een slechtziende bezoeker zit niet per se met een screenreader achter de computer. Vaker zit ze heel dicht op het scherm, met de browser op 200 procent, of met een vergrootglas dat een klein deel van het scherm flink uitvergroot. Ze leest uw tekst gewoon, alleen anders dan u gewend bent. Een website voor slechtzienden draait daarom niet om een speciale versie of een knopje “grotere letters”, maar om een gewone site die blijft werken als iemand vergroot, meer contrast nodig heeft of maar een stukje tegelijk ziet.

Slechtziend is een breed begrip

Onder slechtziendheid valt veel. De ene bezoeker ziet alles wazig. De andere mist het midden van het beeld en kijkt langs de randen, of ziet juist alleen een smal stuk in het midden, alsof hij door een rietje kijkt. Weer een ander is gevoelig voor fel licht en zet alles op donker. Veel ouderen krijgen op latere leeftijd met een of meer van deze problemen te maken.

Wat ze delen: ze gebruiken het scherm, maar met hulpmiddelen. En die hulpmiddelen werken alleen goed als de site meewerkt.

De hulpmiddelen die slechtziende bezoekers gebruiken

• Zoomen in de browser. Met Ctrl en plus (of Cmd en plus op een Mac) wordt de hele pagina groter. De lay-out moet zich daaraan aanpassen.
• Alleen tekst vergroten. Sommige browsers en telefoons kunnen alleen de tekstgrootte verhogen. Dan moeten vakken en knoppen meegroeien, anders loopt tekst over of valt hij weg.
• Vergrootsoftware. De ingebouwde vergroting van Windows en macOS, of gespecialiseerde programma’s zoals ZoomText of SuperNova. Die vergroten een deel van het scherm sterk, vaak tien keer of meer, en de gebruiker schuift de vergrootlens over de pagina.
• Hoog contrast en donkere modus. Instellingen in het besturingssysteem die kleuren omdraaien of vervangen.
• Voorlezen als aanvulling. Veel vergrootprogramma’s kunnen ook tekst voorlezen. Slechtziende gebruikers lezen dan een deel en laten een deel voorlezen.

Lay-out die meeschaalt

Het belangrijkste wat een website voor slechtzienden moet kunnen, is vergroot worden zonder kapot te gaan. WCAG heeft daar twee criteria voor op niveau AA:

• Tekst vergroten tot 200 procent (1.4.4) zonder dat inhoud of functies verloren gaan. Meer hierover in tekst vergroten tot 200 procent.
• Reflow (1.4.10): bij een breedte van 320 CSS-pixels, wat overeenkomt met 400 procent zoom op een scherm van 1280 pixels breed, moet de inhoud in één kolom passen zonder dat de bezoeker horizontaal hoeft te scrollen. Uitleg staat in reflow volgens WCAG.

In de praktijk gaat het mis op voorspelbare plekken. Een kop met een vaste hoogte waarin de tekst bij vergroting over de rand loopt. Een menu dat bij zoom half buiten beeld valt. Een tabel die niet smaller kan en de hele pagina breder maakt. Een vaste balk bovenaan die bij 400 procent de helft van het scherm in beslag neemt. Elk van die dingen dwingt een slechtziende bezoeker tot heen en weer scrollen, en daarbij raakt hij de draad kwijt.

Zelf proberen is eenvoudig: open uw site op een computer, zoom in tot 400 procent en probeer een gewone taak uit te voeren, zoals een contactformulier invullen of een product bestellen.

Contrast en kleur

Voor wie wazig ziet, maakt contrast het verschil tussen leesbaar en onleesbaar. WCAG vraagt een contrastverhouding van minimaal 4,5:1 voor normale tekst en 3:1 voor grote tekst, en ook 3:1 voor de randen van knoppen, invoervelden en andere bedieningselementen.

Lichtgrijze tekst op wit is de bekendste fout. Andere zijn tekst over een foto zonder donkere laag eronder, placeholdertekst die zo licht is dat niemand hem ziet, en invoervelden zonder zichtbare rand. Hoe u dat meet en oplost, staat op kleurcontrast verbeteren.

Houd er ook rekening mee dat sommige bezoekers de kleuren van het systeem laten vervangen, bijvoorbeeld in de modus voor hoog contrast van Windows. Informatie die alleen via een achtergrondkleur of achtergrondafbeelding wordt getoond, kan dan verdwijnen. Een knop zonder rand en alleen een gekleurd vlak wordt soms onzichtbaar.

Ontwerpkeuzes die het verschil maken bij vergroting

Wie met een vergrootlens werkt, ziet steeds een klein stukje van de pagina. Dat heeft gevolgen die u met gewone ogen niet opmerkt.

Houd bij elkaar wat bij elkaar hoort

Staat een label helemaal links en het invoerveld helemaal rechts, dan ziet een vergrootgebruiker ze niet tegelijk. Hetzelfde geldt voor een prijs ver van de bestelknop, of een melding “Product toegevoegd” in de rechterbovenhoek terwijl hij links onderaan op de knop klikte. Zet samenhangende dingen dicht bij elkaar.

Meldingen waar de aandacht is

Een foutmelding of bevestiging die ver weg verschijnt, wordt gemist. Zet meldingen bij het veld of de knop waar het om gaat.

Geen inhoud die verdwijnt als de muis beweegt

Tooltips en uitklapmenu’s die verdwijnen zodra de muis een paar pixels verschuift, zijn voor vergrootgebruikers lastig. Zij moeten de muis bewegen om de vergrote tekst te kunnen lezen. WCAG 1.4.13 vraagt dat zulke inhoud blijft staan zolang de muis erop is en dat de bezoeker hem kan wegklikken.

Een duidelijke focus

Veel slechtziende bezoekers gebruiken naast de muis ook het toetsenbord. Een goed zichtbare focusrand helpt hen om te zien waar ze zijn.

Lettergrootte, tekst en beeld

Een basislettergrootte die prettig leest zonder vergroting helpt iedereen, ook mensen die net een beetje slechter zien en geen hulpmiddelen gebruiken. Stel de lettergrootte in met relatieve eenheden zoals rem, zodat de instelling van de bezoeker in de browser doorwerkt.

Gebruik echte tekst en geen tekst in afbeeldingen. Een afbeelding met tekst wordt bij vergroting wazig en kan geen ander contrast krijgen. Kies een rustig lettertype met duidelijk verschillende letters, en vermijd dunne, lichte letterdiktes voor lopende tekst.

Geef bovendien elke afbeelding met informatie een goede alt-tekst. Slechtziende bezoekers die laten voorlezen, of die een afbeelding niet goed kunnen onderscheiden, hebben daar iets aan.

Waar u vandaag mee begint

1. Zoom uw homepage en een belangrijke pagina in tot 200 en daarna 400 procent. Noteer wat breekt.
2. Meet het contrast van uw lopende tekst, links en knoppen.
3. Vul uw contactformulier in op 400 procent zoom. Ziet u label, veld en foutmelding samen?
4. Zet uw telefoon op de grootste tekstinstelling en bekijk uw site.

De meeste problemen die u zo vindt, zitten in het thema of de paginabouwer en zijn met CSS op te lossen. Wilt u het hele plaatje zien, met de onderdelen die voor andere groepen bezoekers spelen, lees dan hoe u een website toegankelijk maakt.