Tekstgrootte aanpassen

Wat het vereist

Wanneer een gebruiker de tekst vergroot tot 200% — via browserzoom, OS-tekstschaling of pinch-to-zoom — moet de pagina nog steeds werken. Geen afgesneden tekst, geen overlappende containers, geen verloren functionaliteit, geen horizontaal scrollen om zinnen te lezen. Het succescriterium is ouder dan 1.4.10 Reflow, dat strenger is; aan Reflow voldoen betekent doorgaans automatisch ook aan 1.4.4 voldoen.

Hoe er aan te voldoen

• Gebruik relatieve eenheden (rem, em, %) voor lettergroottes en containerhoogten, niet vaste pixelwaarden die niet kunnen groeien.
• Vermijd vaste height-declaraties op tekstcontainers — gebruik min-height indien nodig.
• Stel geen viewport-metatags in die gebruikerszoom uitschakelen (user-scalable=no of maximum-scale=1).
• Bouw flexibele lay-outs (flexbox, CSS grid) zodat containers meegroeien met hun inhoud.
• Test bij 200% browserzoom op een typisch desktopviewport; controleer of koppen, knoppen en formuliervelden niet overlappen.

Veelvoorkomende fouten

• <meta name="viewport" content="user-scalable=no"> dat zoom op mobiel blokkeert — ook een bestaande 1.4.4-fout.
• Knoppen met vaste pixelhoogte die de labeltekst afsnijden bij 200% zoom.
• Navigatiemenu’s die hun container overlopen bij 200% en onbereikbaar worden.
• Modale dialoogvensters in pixels die niet langer in hun inhoud passen wanneer er wordt ingezoomd.
• Formulierlabels die in het gebied van het volgende veld overlopen wanneer de tekst groeit.

Waarom het ertoe doet

Mensen met slechtziendheid gebruiken regelmatig 150–200% zoom als dagelijkse instelling. Falen bij 1.4.4 betekent dat die gebruikers de pagina ofwel niet kunnen lezen, ofwel op elke regel horizontaal moeten scrollen — beide situaties zullen zij opgeven. Het herstel betekent doorgaans het overstappen van px naar rem in de ontwerptokens, wat een eenmalige refactoring is.