Riadattamento

Cosa richiede

Quando il viewport ha una larghezza di 320 pixel CSS — corrispondente a un desktop da 1280 px con zoom al 400%, oppure a un piccolo dispositivo mobile — il contenuto deve riadattarsi in una singola colonna senza richiedere scorrimento orizzontale. L’utente non deve mai dover scorrere sia verticalmente che orizzontalmente per leggere un contenuto continuo. Sono previste eccezioni essenziali: tabelle dati, mappe complesse, campioni di codice e presentazioni in cui lo scorrimento bidimensionale è fondamentale per il contenuto.

Come soddisfarlo

• Costruire il layout mobile-first con flexbox o CSS grid che si riduce a una singola colonna a larghezze ridotte.
• Effettuare i test esattamente a 320 px di larghezza del viewport — oppure con zoom al 400% su una finestra da 1280 px — verificando ogni pagina.
• Utilizzare max-width: 100% su immagini, video e media incorporati affinché si ridimensionino con il viewport.
• Per la navigazione, comprimere la barra di navigazione orizzontale desktop in un menu mobile verticale al breakpoint appropriato.
• Per le tabelle dati, consentire lo scorrimento orizzontale all’interno di un contenitore overflow-x: auto — la tabella stessa è esente, ma il suo contenitore non deve spingere la pagina lateralmente.
• Evitare larghezze in pixel fissi sui contenitori del corpo o sulle finestre modali.

Errori comuni

• Sezioni hero a larghezza fissa (width: 1200px) che overflow il viewport a 320 px, costringendo allo scorrimento orizzontale.
• Finestre modali dimensionate in vw o px che superano i 320 px di larghezza e vengono tagliate su schermi ridotti.
• Campioni di codice in blocchi <pre> senza wrapping né contenitori di scorrimento, che allargano la pagina.
• Pagine marketing con elementi decorativi posizionati in modo assoluto che non tengono conto dei viewport stretti.
• Elementi sticky che si sovrappongono al contenuto con zoom al 400% perché dimensionati per il viewport a larghezza intera.
• Tabelle non racchiuse in un contenitore overflow, per cui l’intera pagina scorre orizzontalmente anziché solo la tabella.

Perché è importante

Il riadattamento è il criterio di successo che intercetta la maggior parte dei siti «responsive ma non davvero responsive» — un layout che si rompe a 320 pixel CSS corrisponde a un layout che si rompe con zoom al 400% per un utente ipovedente su desktop. I due casi sono matematicamente identici. Correggere il riadattamento significa di solito consolidare il design responsive già quasi completo, il che lo rende uno degli interventi WCAG con il miglior rapporto costi-benefici.