Reflow

Definizione — Il reflow è la capacità di un contenuto di riadattarsi a larghezze ridotte (es. 320 CSS px, come uno smartphone in verticale) o a zoom elevati (200–400%), mantenendo leggibilità e funzionalità senza scroll orizzontale per i blocchi di testo. È un requisito WCAG 2.1 1.4.10 (AA) e si collega a Ingrandimento/Zoom e Mobile accessibility.

Perché serve

• Utenti ipovedenti leggono a zoom alto o in finestre strette; il reflow evita tagli, sovrapposizioni e perdita di contesto.
• Migliora l’esperienza su mobile e in modalità split-screen, contribuendo anche alle performance e alla SEO.

Buone pratiche tecniche

• Tipografia fluida: usa rem/em per testo e spazi; line-height generosa.
• Layout responsive: griglie elastiche, una colonna sotto i 320–360px; evita larghezze fisse e overflow:hidden su contenitori di testo.
• Media flessibili: immagini/video con max-width:100% e height:auto; tabelle dati con strategie di adattamento (scroll solo sulla tabella o trasformazione in lista).
• Componenti: bottoni e input che crescono con il font; icone non devono sostituire informazioni testuali.
• Viewport: non usare user-scalable=no e assicurati che lo zoom sia abilitato.

Esempi

html { font-size: 100%; }
body { font-size: 1rem; line-height: 1.6; }

.container { max-width: 70ch; margin: 0 auto; padding: 1rem; }
img, video { max-width: 100%; height: auto; }

/* Una colonna su schermi stretti */
.grid { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 48rem) { .grid { grid-template-columns: 1fr; } }

Gestione tabelle

• Scroll confinato: avvolgi la tabella in un contenitore con overflow-x:auto e role="region" con label, mantenendo il testo principale senza scroll orizzontale.
• Tabella → lista: per dataset piccoli, rendi la tabella come card/definizioni con le stesse informazioni.

Test rapidi

• Riduci la larghezza finestra a ~320px e aumenta lo zoom al 200–400%: compaiono barre orizzontali sul corpo del testo?
• Modali/overlay restano interamente visibili e utilizzabili (pulsanti accessibili) in portrait?
• Il focus e l’ordine del focus rimangono chiari dopo il reflow?

Errori comuni

• Contenitori con width fisse o min-width eccessive; testi in immagine.
• Griglie invertite (order) che rompono la sequenza logica (ordine di lettura).
• Elementi con overflow:hidden che tagliano contenuti e focus.