Ridimensionamento del testo

Cosa richiede

Quando un utente porta il testo al 200% — tramite lo zoom del browser, la scalatura del testo del sistema operativo o lo zoom a pizzico — la pagina deve continuare a funzionare correttamente. Nessun testo troncato, nessun contenitore sovrapposto, nessuna funzionalità persa, nessuno scorrimento orizzontale necessario per leggere le frasi. Questo criterio di successo è più datato di 1.4.10 Riadattamento, che è più restrittivo; soddisfare Riadattamento implica generalmente il soddisfacimento automatico di 1.4.4.

Come soddisfare questo criterio

• Utilizzare unità relative (rem, em, %) per le dimensioni dei caratteri e le altezze dei contenitori, non valori fissi in pixel che non possono crescere.
• Evitare dichiarazioni height fisse sui contenitori di testo — usare min-height se necessario.
• Non impostare tag viewport meta che disabilitino lo zoom dell’utente (user-scalable=no o maximum-scale=1).
• Costruire layout flessibili (flexbox, CSS grid) in modo che i contenitori crescano con il proprio contenuto.
• Testare al 200% di zoom del browser su un viewport desktop tipico; verificare che titoli, pulsanti e campi modulo non si sovrappongano.

Errori comuni

• <meta name="viewport" content="user-scalable=no"> che blocca lo zoom su dispositivi mobili — è anche un’inadempienza consolidata del criterio 1.4.4.
• Pulsanti con altezza fissa in pixel che troncano il testo dell’etichetta al 200% di zoom.
• Menu di navigazione che fuoriescono dal proprio contenitore al 200% e diventano irraggiungibili.
• Finestre di dialogo modali dimensionate in pixel che non contengono più il proprio testo quando si ingrandisce la visualizzazione.
• Etichette di modulo che si sovrappongono all’area del campo successivo quando il testo cresce.

Perché è importante

Le persone con ipovisione utilizzano abitualmente uno zoom del 150-200% come impostazione quotidiana. Il mancato soddisfacimento del criterio 1.4.4 significa che tali utenti non riescono a leggere la pagina oppure devono scorrere orizzontalmente a ogni riga — entrambe le situazioni li porteranno ad abbandonare la pagina. La correzione comporta solitamente il passaggio da px a rem sull’intero set di token di design, operazione che si esegue una sola volta.