Ändra textstorlek

Vad kriteriet kräver

När en användare zoomar text till 200 % — via webbläsarzoom, operativsystemets textskalning eller nypzoom — måste sidan fortfarande fungera. Ingen klippt text, inga överlappande behållare, ingen förlorad funktionalitet, ingen horisontell rullning behövs för att läsa meningar. Kriteriet är äldre än 1.4.10 Omflöde, som är strängare; att uppfylla Omflöde innebär vanligtvis att 1.4.4 uppfylls automatiskt.

Hur du uppfyller det

• Använd relativa enheter (rem, em, %) för teckenstorlekar och behållarhöjder, inte fasta pixelvärden som inte kan växa.
• Undvik fasta height-deklarationer på textbehållare — använd min-height om det är nödvändigt.
• Ange inte viewport-metataggar som inaktiverar användarzoom (user-scalable=no eller maximum-scale=1).
• Bygg flexibla layouter (flexbox, CSS grid) så att behållare växer med sitt innehåll.
• Testa vid 200 % webbläsarzoom på en typisk skrivbordsvisningsport; kontrollera att rubriker, knappar och formulärfält inte överlappar.

Vanliga fel

• <meta name="viewport" content="user-scalable=no"> som blockerar zoom på mobil — också ett sedan länge känt 1.4.4-fel.
• Knappar med fast pixelhöjd som klipper etikettexten vid 200 % zoom.
• Navigationsmenyer som spiller ur sin behållare vid 200 % och blir onåbara.
• Modala dialoger angivna i pixlar som inte längre rymmer sitt innehåll vid zoom.
• Formuläretiketter som radbryter in i nästa fälts område när texten växer.

Varför det spelar roll

Personer med synnedsättning använder rutinmässigt 150–200 % zoom som daglig inställning. Att misslyckas med 1.4.4 innebär att dessa användare antingen inte kan läsa sidan eller måste rulla horisontellt på varje rad — båda situationer de kommer att överge. Åtgärden innebär vanligtvis att byta från px till rem i hela design-token-systemet, vilket är en engångsrefaktorering.