Panoramica
Gli utenti con disabilità visive spesso configurano il ridimensionamento del testo a livello di sistema operativo (ad esempio, Tipo dinamico su iOS o Ridimensionamento dei caratteri su Android/ChromeOS). Per impostazione predefinita, i browser mobile ignorano queste impostazioni di accessibilità a livello di sistema operativo per evitare che i siti web legacy con pixel fissi si interrompano visivamente.
Anziché mantenere la pagina statica o affidarti a calcoli di layout JavaScript personalizzati e fragili, attiva la scalabilità del testo del sistema operativo nativo utilizzando il tag <meta name="text-scale">. Quando è attiva, il browser ridimensiona dinamicamente la dimensione del carattere principale (1rem) in base alla preferenza del sistema operativo dell'utente, consentendo di ridimensionare automaticamente e in modo ottimale tutte le dimensioni, i layout e la spaziatura dei caratteri relativi (rem/em).
Implementazione
1. Attiva il ridimensionamento del testo del sistema operativo
Posiziona l'elemento <meta name="text-scale"> all'interno dell'elemento <head> del documento. In questo modo, i browser che supportano questa funzionalità capiscono che il tuo layout è moderno, adattabile e sicuro da scalare:
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<!-- Opt this page into OS-level dynamic type and accessibility text scaling -->
<meta name="text-scale" content="scale" />
<title>Adaptive Accessibility Layout</title>
</head>
2. Utilizza tipografia e spaziatura relative
Definisci le dimensioni dei caratteri utilizzando unità relative (rem o em) anziché pixel fissi (px). Utilizza valori senza unità per le altezze delle righe in modo che vengano ridimensionate proporzionalmente alle dimensioni dei caratteri calcolate per ogni elemento.
Utilizza unità relative per i margini e la spaziatura interna se la spaziatura è associata alle dimensioni del testo o deve adattarsi alla scalabilità del testo. La spaziatura indipendente dal testo può utilizzare unità fisse, se appropriato, a condizione che il ridimensionamento non causi ritaglio del testo, sovrapposizione, perdita di contenuti o un layout inutilizzabile:
body {
font-family: system-ui, sans-serif;
/* Inherits the root font-size, which scales automatically with the OS setting */
line-height: 1.5; /* Unitless so it scales proportionally with computed font-size */
padding: 1.5rem; /* Scales proportionally to prevent dense crowding at larger scales */
}
h1 {
font-size: 2.25rem; /* Scales proportionally to the root base */
margin-bottom: 1rem;
}
Imposta le dimensioni del testo di base su body solo quando il design richiede dimensioni diverse da quelle predefinite del browser ereditate; in caso contrario, lascia che vengano ereditate. Imposta le dimensioni di elementi specifici, come le intestazioni, con unità relative come rem o em. Utilizza rem per una dimensione relativa alle dimensioni del carattere principale e em quando le dimensioni devono dipendere dalle dimensioni del carattere dell'elemento principale. Non impostare dimensioni dei caratteri personalizzate su :root o html.
Tipografia fluida
La tipografia fluida PUÒ utilizzare unità relative alla visualizzazione, come vw, a condizione che le dimensioni dei caratteri includano anche un componente relativo ai caratteri, come rem o em. Per altre tecniche di scalabilità fluida, tra cui le unità di query container e clamp(), consulta Scalabilità fluida.
Evita di dimensionare il testo esclusivamente con unità dell'area visibile:
/* ❌ DO NOT DO THIS: The font size does not respond fully to user text scaling */
.heading {
font-size: 5vw;
}
Combina invece un valore relativo al carattere con una scalabilità relativa all'area visibile e utilizza limiti minimi e massimi relativi:
.heading {
font-size: clamp(2rem, 1.25rem + 2vw, 4rem);
}
Verifica che il testo possa essere ridimensionato fino ad almeno il 200% delle dimensioni predefinite senza perdita di contenuti o funzionalità. Per la tipografia fluida, una regola generale utile è mantenere la dimensione massima del carattere non superiore a 2,5 volte quella minima. Testa anche il riflusso con una larghezza della visualizzazione di 320 pixel CSS (equivalente a uno zoom del 400% da una visualizzazione di 1280 pixel CSS); i contenuti DEVONO rimanere disponibili senza scorrimento bidimensionale, tranne nei casi in cui sia essenziale.
3. Utilizza i breakpoint adattabili scalabili
I breakpoint adattabili NON DEVONO presupporre che il testo rimanga alle dimensioni predefinite. Se un punto di interruzione deve rispondere allo spazio disponibile per il testo, preferisci layout basati sui contenuti, query container o query supporti basate su em anziché soglie di pixel fisse.
Testa i layout adattabili con la scalabilità del testo del sistema operativo e lo zoom del browser attivati. Il testo DEVE rimanere leggibile e i contenuti DEVONO rimanere visibili senza sovrapposizioni, ritagli o scorrimento orizzontale.
4. Assicurati che il testo vada a capo e che le altezze siano flessibili
Quando il testo viene ridimensionato, gli elementi richiedono più spazio verticale e orizzontale per evitare troncamenti o sovrapposizioni. Per mantenere i componenti solidi, progetta i layout in modo che si espandano dinamicamente intorno ai contenuti, anziché forzare coordinate rigide:
- Consenti l'espansione dei contenitori di testo: i componenti e i contenitori che includono testo DEVONO essere in grado di espandersi per adattarsi al testo ridimensionato. Evita valori
heightoblock-sizefissi e valorimax-heightomax-block-sizerestrittivi che possono causare ritaglio o overflow. Preferisci il dimensionamento basato sui contenuti; utilizzamin-heightomin-block-sizesolo quando è necessaria una dimensione minima. - Consenti il testo a capo naturale: non limitare il testo a capo sull'asse in linea con
white-space: nowrapsui blocchi che contengono frasi. Consenti al testo di andare a capo in modo naturale. - Utilizza il wrapping flessibile di Flexbox e Grid (esempio facoltativo): per le gallerie di schede a più colonne, utilizza colonne con ridisposizione come
repeat(auto-fit, minmax(min(100%, 16rem), 1fr))in modo che gli elementi vengano impilati verticalmente se vengono superate le soglie di larghezza relative:
/* Card container using min-height to ensure expansion and auto-fit to reflow if needed */
.card {
padding: 1.5rem;
border: 1px solid #ccc;
border-radius: 8px;
/* Use min-height so the box expands vertically when the font is enlarged */
min-height: 10rem;
}
5. NON eseguire l'override della dimensione del carattere principale
Quando esegui l'attivazione tramite l'elemento <meta name="text-scale" content="scale">, NON impostare esplicitamente la radice font-size nel foglio di stile. Sono incluse le dichiarazioni su :root o html e si applica a unità assolute, unità relative e valori calcolati.
Ad esempio, non eseguire l'override della dimensione del carattere principale con un valore fisso:
/* ❌ DO NOT DO THIS: This can prevent the browser from applying text scaling */
html {
font-size: 16px;
}
Non combinare l'attivazione di <meta name="text-scale" content="scale"> con env(preferred-text-scale) per applicare manualmente la scalabilità del testo del sistema operativo. Il browser applica la scalabilità tramite l'attivazione dei metadati, quindi l'utilizzo di entrambi può comportare una doppia scalabilità:
/* ❌ DO NOT DO THIS: The meta opt-in already applies the operating system text scale */
:root {
font-size: calc(1rem * env(preferred-text-scale));
}
Lascia la dimensione del carattere principale al browser. Il browser gestisce automaticamente la scala del testo del sistema operativo e la applica ai contenuti con dimensioni relative alla dimensione del carattere principale.
Strategie di fallback
Sui browser in cui <meta name="text-scale" content="scale"> non è supportato, il layout si riduce correttamente. La pagina mostrerà il layout con le dimensioni dei caratteri di base predefinite standard del browser (in genere 16 px) e l'utente potrà comunque utilizzare le opzioni standard di zoom manuale della pagina o di pizzicamento per aumentare lo zoom.