Ingrandimento / Zoom

Definizione — Per ingrandimento/zoom si intende la capacità di un’interfaccia di restare leggibile e utilizzabile quando l’utente aumenta la scala (es. zoom browser 200–400% o ingranditore di sistema). Un layout accessibile deve evitare tagli di contenuto, sovrapposizioni e scroll orizzontale sul testo, mantenendo tutte le funzioni disponibili.

Riferimenti WCAG

• 1.4.4 Resize text (AA): il testo deve poter essere ingrandito al 200% senza perdita di contenuti/funzionalità.
• 1.4.10 Reflow (AA): a 320px CSS di larghezza (≈ telefono in verticale) i contenuti scorrono su una sola colonna senza scroll orizzontale per il testo.
• 1.4.11 Non-text Contrast (AA): indicatori, bordi e componenti mantengono contrasto sufficiente anche ingranditi.

Buone pratiche

• Tipografia fluida: usa unità relative (rem, em), line-height generoso e spaziatura adattiva; evita px rigidi per testo e contenitori.
• Layout responsive: una colonna a 320px, griglie elastiche, immagini scalabili (max-width:100%) e niente overflow:hidden che tronca contenuti.
• Componenti flessibili: bottoni e input che crescono con il font; etichette su più righe; icone che non sostituiscono il testo.
• Evita: testi in immagine, modali fissi al viewport, user-scalable=no nella <meta viewport>, colonne affiancate obbligate a piccole larghezze.

Esempi

html { font-size: 100%; }          /* base scalabile */
body { font-size: 1rem; line-height: 1.6; }
.container { max-width: 70ch; padding: 1rem; }
img, table { max-width: 100%; height: auto; }

Test rapidi

• Porta lo zoom al 200%/400%: il testo resta leggibile? compaiono barre orizzontali sul corpo del contenuto?
• Riduci la larghezza finestra a ~320px: il layout “reflowa” su una colonna? modali e menu sono ancora usabili?
• Verifica focus visibile e ordine di focus dopo l’ingrandimento.