Tilpasning af tekststørrelse

Hvad kriteriet kræver

Når en bruger zoomer tekst til 200% — via browserzoom, OS-tekststørrelse eller pinch-to-zoom — skal siden stadig fungere. Ingen beskåret tekst, ingen overlappende containere, ingen tabt funktionalitet og ikke behov for vandret scrolling for at læse sætninger. Succeskriteriet er ældre end 1.4.10 Reflow, som er strengere; at overholde Reflow betyder normalt, at man også automatisk overholder 1.4.4.

Sådan opfyldes det

• Brug relative enheder (rem, em, %) til skriftstørrelser og containerhøjder i stedet for faste pixelværdier.
• Undgå faste height-deklarationer på tekstcontainere — brug min-height hvis det er nødvendigt.
• Sæt ikke viewport-meta-tags, der deaktiverer brugerzoom (user-scalable=no eller maximum-scale=1).
• Byg fleksible layouts (flexbox, CSS grid), så containere vokser med deres indhold.
• Test ved 200% browserzoom på en typisk desktop-viewport; kontrollér, at overskrifter, knapper og formularfelter ikke overlapper.

Hyppige fejl

• <meta name="viewport" content="user-scalable=no">, der blokerer zoom på mobil — også en langvarig 1.4.4-fejl.
• Knapper med fast pixel-højde, der beskærer etiketteksten ved 200% zoom.
• Navigationsmenuer, der flyder ud af deres container ved 200% og bliver utilgængelige.
• Modaldialogbokse angivet i pixels, der ikke længere kan rumme deres indhold ved zoom.
• Formularetiketter, der bryder ind i det næste felts område, når teksten vokser.

Hvorfor det er vigtigt

Mennesker med synsnedsættelse bruger rutinemæssigt 150–200% zoom som daglig indstilling. Fejler man 1.4.4, kan disse brugere enten ikke læse siden eller er nødt til at scrolle vandret på hver linje — begge dele vil de opgive. Rettelsen kræver normalt at skifte fra px til rem på tværs af design-tokens, hvilket er en engangs-refaktorering.