Werkt uw website nog als bezoekers de tekst vergroten?

Druk eens op Ctrl en de plustoets, vijf keer achter elkaar, terwijl uw eigen homepage open staat. Op een Mac is het Cmd en plus. Grote kans dat er iets gebeurt wat u niet verwachtte: een knop waarvan de tekst half verdwijnt, een kop die over een foto heen schuift, of een menu dat ineens twee regels hoog is en de rest van de pagina bedekt. Voor veel bezoekers is tekst vergroten op een website geen experiment maar dagelijkse praktijk. Dit artikel laat zien hoe u het goed test en welke fouten u het vaakst tegenkomt.

Wat WCAG vraagt: 200 procent zonder verlies

Succescriterium 1.4.4 van WCAG, “herschalen van tekst”, hoort bij niveau AA. De eis is kort: tekst moet tot 200 procent vergroot kunnen worden zonder hulpsoftware, zonder dat er inhoud of functionaliteit verloren gaat. Dus geen afgesneden zinnen, geen overlappende tekst, geen knoppen die onbereikbaar worden.

Twee dingen vallen buiten deze eis. Ondertitels in video hoeven niet mee te schalen, en afbeeldingen van tekst ook niet, al zijn die om andere redenen een probleem (zie tekst in afbeeldingen).

Wie vergroot? Mensen die slechtziend zijn, maar ook gewoon mensen boven de vijftig die hun leesbril niet bij de hand hebben, of iemand op een laptop met een klein scherm. Hoe slechtziende bezoekers uw site verder gebruiken, leest u in een website die werkt voor slechtziende bezoekers.

Twee manieren van vergroten, twee testen

Er zijn grofweg twee manieren waarop bezoekers tekst groter maken, en ze gedragen zich anders.

Browserzoom

Met Ctrl en plus vergroot de browser alles: tekst, afbeeldingen, marges. De pagina wordt in feite smaller, en een goede responsive site schakelt dan over naar de tablet- of mobiele weergave. Dit is de gebruikelijke manier om criterium 1.4.4 te testen, en meestal gaat het hier redelijk goed bij moderne thema’s.

Alleen de tekstgrootte

In de instellingen van de browser kunt u ook alleen de standaardlettergrootte verhogen. In Chrome heet dat “Lettergrootte” onder Weergave, in Firefox kunt u kiezen voor “Alleen tekst zoomen”. Ook op telefoons is de systeemtekstgrootte instelbaar. Dan blijft de lay-out gelijk en groeit alleen de tekst. Juist hier komen de hardnekkige fouten boven: vakken die niet meegroeien, waardoor de tekst eruit loopt of wordt afgesneden.

Test daarom beide.

Zo test u in tien minuten

1. Kies drie pagina’s. Uw homepage, een pagina met een formulier en een pagina met veel inhoud, zoals een productpagina of dienst.
2. Zoom naar 200 procent met Ctrl en plus. In Chrome en Edge ziet u het percentage in de adresbalk.
3. Loop de pagina van boven naar onder door. Let op: tekst die over andere tekst heen valt, woorden die halverwege stoppen, knoppen die buiten beeld vallen, een header die zo hoog wordt dat er nauwelijks nog ruimte over is.
4. Probeer de belangrijkste taak. Open het menu, vul het formulier in, leg een product in de winkelwagen. Lukt alles nog?
5. Zet de zoom terug op 100 procent en verhoog alleen de lettergrootte in de browserinstellingen naar de grootste stand. Loop dezelfde pagina’s opnieuw door.
6. Noteer per probleem de pagina en het onderdeel. Een schermafbeelding erbij scheelt later veel uitleg.

Deze test is een van de onderdelen van een bredere zelftest die we beschrijven op toegankelijkheid zelf testen in 30 minuten.

De fouten die u het vaakst tegenkomt

Vaste hoogtes

Een blok met een vaste hoogte in pixels groeit niet mee met de tekst. De tekst loopt eruit, of wordt afgesneden als het blok overflow: hidden heeft. Dit ziet u veel bij kaarten met een gelijke hoogte, bannerteksten en knoppen.

/* groeit niet mee */
.kaart { height: 320px; overflow: hidden; }

/* groeit wel mee */
.kaart { min-height: 320px; }

Lettergroottes in pixels

Een thema dat de lettergrootte vastzet in pixels (font-size: 16px) negeert in sommige browsers de tekstgrootte die de bezoeker heeft ingesteld. Met relatieve eenheden zoals rem of em volgt de tekst die voorkeur wel. Browserzoom werkt in beide gevallen, maar de tweede test hierboven laat het verschil zien.

Afkappen met puntjes

Productnamen of titels die na één regel worden afgekapt met “…” zijn bij vergroting soms niet meer te lezen. Laat de tekst liever doorlopen over meerdere regels.

Een vaste header

Een header die bovenaan blijft staan bij scrollen, neemt bij 200 procent soms een derde van het scherm in. Overweeg de header bij inzoomen of op kleine schermen niet vast te zetten.

Viewport-instellingen op mobiel

Sommige thema’s blokkeren inzoomen op telefoons met user-scalable=no of maximum-scale=1 in de viewport-tag. Haal dat weg. Bezoekers moeten op hun telefoon kunnen inzoomen.

Verder dan 200 procent

Bij 200 procent houdt het niet op. Wie verder inzoomt, tot 400 procent, krijgt te maken met een ander WCAG-criterium: de inhoud moet dan in één kolom passen zonder dat de bezoeker horizontaal hoeft te scrollen. Dat heet reflow, en het werkt anders genoeg om apart te bekijken. Lees daarover reflow: uw website op 400 procent zoom.

Ook de ruimte tussen regels en letters speelt mee. Sommige bezoekers vergroten niet alleen de tekst, maar ook de regelafstand. Dat valt onder een eigen criterium, en geeft vaak dezelfde problemen met vaste hoogtes.

Wat u zelf kunt doen, en wanneer u hulp nodig heeft

De test zelf kan iedereen doen. Het herstel hangt af van waar het probleem zit. Een te kleine standaardletter of een vaste hoogte in een eigen CSS-regel is vaak snel aangepast in de thema-instellingen of het veld voor extra CSS. Zit het in de opbouw van het thema of een page builder, dan is het lastiger, omdat een update van het thema uw aanpassing kan overschrijven. Werk in dat geval met een childthema of laat het iemand doen die het thema kent.

Zoomen hoort bij de basis van een site die voor iedereen werkt. Op de pagina over website toegankelijk maken vindt u de andere onderdelen op een rij.