WCAG 1.4.12: Spaziatura del testo

Cosa Significa Questa Regola

WCAG 1.4.12 Spaziatura del testo appartiene alla Linea guida 1.4 (Distinguibile) e prende di mira un problema molto specifico: molte persone con difficoltà di lettura, ipovisione o disabilità cognitive hanno bisogno di sostituire la spaziatura del testo predefinita di una pagina web per rendere i contenuti leggibili per loro. Se il layout di un sito si rompe — il testo viene tagliato, i pulsanti si sovrappongono, le etichette dei moduli scompaiono o i contenuti diventano irraggiungibili — quando la spaziatura viene aumentata, il sito non soddisfa questo criterio.

Il criterio definisce quattro proprietà di spaziatura che devono rimanere funzionali quando sono impostate contemporaneamente ai seguenti valori minimi:

• Altezza della riga (interlinea): almeno 1,5 volte la dimensione del font dell’elemento.
• Spaziatura tra le lettere (tracking): almeno 0,12 volte la dimensione del font dell’elemento.
• Spaziatura tra le parole: almeno 0,16 volte la dimensione del font dell’elemento.
• Spaziatura dopo i paragrafi: almeno 2 volte la dimensione del font dell’elemento.

Una pagina supera questo criterio se, dopo che tutte e quattro queste sostituzioni sono state applicate, le persone possono ancora leggere tutto il testo, usare tutti i controlli interattivi e accedere a tutti i contenuti della pagina senza scorrimento orizzontale con una viewport larga 320 pixel CSS, senza tagli o troncamenti e senza sovrapposizioni di contenuti al punto da renderli illeggibili o inutilizzabili.

Una pagina non supera il criterio se l’applicazione di queste sostituzioni provoca uno qualsiasi dei seguenti problemi: il testo viene tagliato da un contenitore con altezza fissa e overflow: hidden; le etichette interattive o il testo dei pulsanti scompaiono; i menu a discesa o i tooltip si sovrappongono al contenuto principale in modo inutilizzabile; oppure qualsiasi contenuto diventa permanentemente inaccessibile.

È importante sottolineare che il criterio non richiede di impostare personalmente questi valori di spaziatura. Richiede solo che il layout non si rompa quando l’utente (o la sua tecnologia assistiva, estensione del browser o foglio di stile utente) applica queste sostituzioni. I valori di spaziatura sono soglie per il test, non requisiti di design.

Esiste un’unica eccezione esplicita: i componenti in cui una particolare presentazione visiva è essenziale per l’informazione trasmessa — per esempio, un logotipo, uno spartito musicale reso in SVG o un’immagine CAPTCHA — sono esentati. Tuttavia, questa eccezione è limitata e non dovrebbe essere usata come scusa generale per esentare menu di navigazione o componenti a scheda.

Questo criterio si applica a tutti i contenuti testuali resi nel browser tramite CSS, inclusi titoli, paragrafi, etichette, testo dei pulsanti, testo segnaposto, elementi di elenco, celle di tabella e link di navigazione. Non si applica al testo reso all’interno di immagini o elementi canvas, poiché questi non sono influenzati dalle sostituzioni di spaziatura CSS.

Perché È Importante

La spaziatura del testo influisce direttamente sulle persone con un’ampia gamma di disabilità e profili di lettura. Secondo l’Organizzazione Mondiale della Sanità, circa 2,2 miliardi di persone nel mondo hanno qualche forma di deficit visivo o cecità, e molte di loro usano lo zoom del browser o fogli di stile personalizzati per rendere i contenuti leggibili. Oltre ai deficit visivi, si stima che il 15–20% della popolazione mondiale abbia la dislessia, una condizione per la quale l’aumento della spaziatura tra le lettere, tra le parole e dell’interlinea è un intervento comprovato per la leggibilità — supportato da ricerche, incluse studi pubblicati sulla rivista Annals of Dyslexia.

Per le persone con disabilità cognitive come ADHD o difficoltà di elaborazione, una spaziatura del testo troppo stretta aumenta il carico cognitivo della lettura rendendo più difficile seguire le righe e distinguere le singole parole. Queste persone installano spesso estensioni del browser come Readability Bookmarklet, Stylus o impostazioni di accessibilità a livello di piattaforma che applicano una spaziatura personalizzata a tutti i siti web che visitano.

Consideriamo uno scenario concreto: una studentessa universitaria con dislessia visita una piattaforma di e-commerce turca per controllare la politica di reso di un prodotto prima di un esame. Usa un’estensione del browser che imposta l’interlinea a 1,7 e la spaziatura tra le lettere a 0,14em a livello globale. Nella pagina di dettaglio del prodotto, il testo sulla politica di reso si trova all’interno di un <div> ad altezza fissa, con stile height: 120px; overflow: hidden;. Con la sua spaziatura personalizzata attiva, sono visibili solo le prime due righe e non esiste alcun meccanismo per mostrare il resto. Non può completare il suo compito e perde fiducia nella piattaforma. Questo è esattamente il tipo di errore che WCAG 1.4.12 è progettato per prevenire.

Oltre all’accesso per le persone con disabilità, ci sono benefici secondari. I layout flessibili e resilienti alla spaziatura tendono a essere più robusti nei mercati internazionali — il testo turco, per esempio, contiene spesso forme di parola più lunghe a causa della morfologia agglutinante, e i layout che non possono adattarsi alle variazioni di spaziatura tendono anche a rompersi con stringhe più lunghe. I layout accessibili migliorano anche indirettamente la SEO: i contenuti leggibili e accessibili tendono ad avere tassi di rimbalzo più bassi e migliori segnali di coinvolgimento, che i motori di ricerca considerano nei ranking.

Regole Axe-core Correlate

WCAG 1.4.12 richiede test manuali e non può essere verificato completamente solo con strumenti automatizzati. Questo perché i motori automatizzati non possono prevedere come si comporterà un layout sotto sostituzioni di stile applicate dall’utente senza applicare effettivamente tali sostituzioni e misurare il risultato renderizzato — un processo che richiede un’ispezione visiva o un confronto di rendering headless. Per questo motivo, il motore axe-core non include una regola automatizzata dedicata per 1.4.12.

• Test manuale con il Text Spacing Bookmarklet: L’approccio di test raccomandato è il Text Spacing Bookmarklet creato da Steve Faulkner (ora mantenuto dalla comunità dell’accessibilità). Questo bookmarklet inietta un foglio di stile nella pagina corrente che imposta contemporaneamente tutte e quattro le proprietà di spaziatura ai loro valori soglia minimi. La persona che esegue il test verifica quindi visivamente (o con un lettore di schermo) se qualche contenuto è tagliato, sovrapposto o inaccessibile. L’approccio con il bookmarklet è lo standard di riferimento nel documento Understanding del W3C per 1.4.12.
• Perché l’automazione non è sufficiente: Gli scanner automatizzati come axe-core analizzano il DOM e gli stili calcolati così come esistono al momento della scansione. Non simulano le sostituzioni dei fogli di stile dell’utente né ri-renderizzano la pagina per rilevare overflow di layout o tagli causati da tali sostituzioni. Un contenitore con overflow: hidden e altezza fissa supererà una scansione automatizzata perché, preso isolatamente, non è un errore di accessibilità — lo diventa solo quando la spaziatura viene aumentata. Solo applicando la sostituzione e osservando il risultato chi esegue il test può confermare un errore.
• Verifiche automatizzate supplementari: Sebbene nessuna regola di axe corrisponda direttamente a 1.4.12, chi revisiona dovrebbe anche notare che la regola scrollable-region-focusable di axe e le regole sul contrasto dei colori possono far emergere problemi correlati che contribuiscono a una scarsa esperienza di spaziatura del testo. Inoltre, l’audit di accessibilità di Lighthouse può segnalare contenitori di dimensioni fisse in determinati contesti, sebbene non specificamente per la conformità alla spaziatura.

Come Eseguire i Test

1. Installa il Text Spacing Bookmarklet. Vai alla pagina dello Steve Faulkner Text Spacing Bookmarklet (accessibile tramite il documento Understanding del W3C o una ricerca web per "text spacing bookmarklet WCAG"). Trascina il bookmarklet nella barra dei segnalibri del tuo browser. In alternativa, crea un segnalibro manualmente e incolla il JavaScript del bookmarklet come URL.
2. Apri la pagina da testare nel tuo browser al livello di zoom predefinito (100%). Vai alla pagina o al componente che vuoi valutare — per esempio, una pagina di elenco prodotti, un modulo di checkout o un menu di navigazione.
3. Attiva il bookmarklet. Fai clic sul bookmarklet. Questo inietta CSS che imposta line-height: 1.5 !important, letter-spacing: 0.12em !important, word-spacing: 0.16em !important e il margin-bottom dei p a 2em !important in tutta la pagina.
4. Ispeziona visivamente l’intera pagina. Scorri tutte le aree di contenuto. Cerca: testo tagliato nella parte inferiore di un contenitore; etichette di pulsanti o testo dei link che sono scomparsi o parzialmente nascosti; menu di navigazione o menu a discesa in cui gli elementi si sovrappongono; campi di modulo in cui il testo segnaposto o l’etichetta è tagliato; e finestre modali o tooltip in cui il contenuto supera i limiti del contenitore.
5. Interagisci con gli elementi interattivi. Spostati con il tasto Tab su tutti gli elementi focalizzabili, attiva i menu a discesa, apri le modali e invia i moduli. Verifica che tutti i controlli interattivi rimangano utilizzabili e che le loro etichette visibili siano completamente leggibili con la spaziatura applicata.
6. Testa con un lettore di schermo per verificare eventuali perdite funzionali. Con il bookmarklet ancora attivo, usa NVDA con Firefox o JAWS con Chrome per navigare nella pagina per titoli, landmark ed elementi interattivi. Verifica che l’ordine di lettura e i contenuti annunciati corrispondano a ciò che vede una persona vedente. Usa VoiceOver su Safari su macOS o iOS per coprire le piattaforme Apple.
7. Testa con una viewport di 320px di larghezza. Ridimensiona la finestra del browser a 320 pixel CSS di larghezza (o usa la modalità responsive degli strumenti di sviluppo del browser). Riattiva il bookmarklet. Verifica che i contenuti siano ancora accessibili senza scorrimento orizzontale e che il testo non sia tagliato con viewport strette combinate con spaziatura aumentata.
8. Documenta gli errori. Per ogni errore, registra: il tipo di elemento, la sua classe o ID CSS, la specifica proprietà di spaziatura che causa l’errore e uno screenshot prima e dopo l’attivazione del bookmarklet.

Come Correggere

Contenitore ad altezza fissa che taglia il testo — Non corretto

<!-- Failure: fixed height with overflow:hidden clips text when line-height increases -->
<div class='product-description' style='height: 80px; overflow: hidden;'>
  <p>Bu ürün doğal malzemelerden üretilmiştir ve 2 yıl garanti kapsamındadır.</p>
</div>

Contenitore ad altezza fissa che taglia il testo — Corretto

<!-- Fix: use min-height instead of height, and allow overflow to be visible or auto -->
<div class='product-description' style='min-height: 80px; overflow: visible;'>
  <p>Bu ürün doğal malzemelerden üretilmiştir ve 2 yıl garanti kapsamındadır.</p>
</div>
<!-- If you need to truncate for design reasons, use a "Read more" button pattern
     that expands the content rather than hiding it with overflow:hidden -->

Etichetta del pulsante tagliata da un’altezza fissa del pulsante — Non corretto

<!-- Failure: fixed height on button causes label text to be cut off
     when letter-spacing and line-height are increased -->
<button style='height: 36px; overflow: hidden; white-space: nowrap;'>
  Sepete Ekle
</button>

Etichetta del pulsante tagliata da un’altezza fissa del pulsante — Corretto

<!-- Fix: use min-height and padding instead of fixed height.
     padding ensures the button grows with its content. -->
<button style='min-height: 36px; padding: 8px 16px;'>
  Sepete Ekle
</button>

Tooltip o menu a discesa che trabocca senza scroll — Non corretto

<!-- Failure: tooltip has a max-height and overflow:hidden,
     causing content to be cut off when spacing is increased -->
<div role='tooltip' id='info-tip' style='max-height: 60px; overflow: hidden;'>
  Bu alan zorunludur. Lütfen geçerli bir e-posta adresi giriniz.
</div>

Tooltip o menu a discesa che trabocca senza scroll — Corretto

<!-- Fix: remove the max-height restriction or use overflow:auto
     so content remains accessible when spacing is overridden -->
<div role='tooltip' id='info-tip' style='max-width: 280px; overflow: auto;'>
  Bu alan zorunludur. Lütfen geçerli bir e-posta adresi giriniz.
</div>

Spaziatura dei paragrafi che rompe il layout della card — Non corretto

<!-- Failure: card uses absolute positioning and a fixed container height.
     When paragraph margin-bottom is set to 2em by the user,
     text overflows and overlaps the card footer. -->
<div class='card' style='position: relative; height: 200px; overflow: hidden;'>
  <p>Ürün açıklaması burada yer alır ve birden fazla satır içerebilir.</p>
  <div class='card-footer' style='position: absolute; bottom: 0;'>
    <a href='/urun/detay'>Detayları Gör</a>
  </div>
</div>

Spaziatura dei paragrafi che rompe il layout della card — Corretto

<!-- Fix: use flexbox or grid with a natural document flow.
     The footer follows the content instead of being absolutely positioned.
     min-height allows the card to grow with its content. -->
<div class='card' style='display: flex; flex-direction: column; min-height: 200px;'>
  <p style='flex: 1;'>Ürün açıklaması burada yer alır ve birden fazla satır içerebilir.</p>
  <div class='card-footer'>
    <a href='/urun/detay'>Detayları Gör</a>
  </div>
</div>

Errori Comuni

• Usare height invece di min-height sui contenitori di testo. Un height fisso su qualsiasi elemento che contiene testo causerà il taglio del contenuto non appena l’utente aumenta l’interlinea o la spaziatura tra le lettere. Sostituisci tutte le altezze fisse sui contenitori che contengono testo con min-height in modo che il contenitore possa crescere.
• Impostare overflow: hidden sui contenitori che contengono testo in paragrafi. Questa è la causa singola più comune degli errori 1.4.12. L’overflow nascosto taglia il testo che si espande verticalmente quando la spaziatura aumenta. Usa overflow: visible o overflow: auto a seconda del contesto di design.
• Usare white-space: nowrap sulle etichette di pulsanti o link senza un’adeguata flessibilità del contenitore. Quando la spaziatura tra le lettere aumenta, il testo con nowrap può superare i limiti del suo elemento padre o essere tagliato, soprattutto negli elementi di navigazione a larghezza fissa.
• Posizionare in modo assoluto elementi di footer o di azione all’interno di una card ad altezza fissa. Quando il contenuto della card cresce a causa delle sostituzioni di spaziatura, gli elementi posizionati in modo assoluto nella parte inferiore della card si sovrappongono al testo. Usa invece un layout a colonna con flexbox.
• Applicare max-height con overflow: hidden a sezioni comprimibili che si trovano nello stato espanso. Gli accordion animati che si espandono a un valore di max-height calcolato in base a misurazioni in pixel taglieranno il testo a quel limite di pixel quando la spaziatura viene modificata, anche quando sono completamente aperti.
• Usare il CSS line-clamp (webkit-line-clamp) senza un meccanismo visibile per espandere l’intero contenuto. Limitare il testo a un numero fisso di righe è accettabile solo se esiste un controllo chiaramente etichettato e accessibile da tastiera per mostrare l’intero contenuto. Limitare il testo senza alcun meccanismo di espansione non soddisfa 1.4.12.
• Fare affidamento su JavaScript per impostare dinamicamente le altezze degli elementi in pixel. Gli script che misurano le altezze degli elementi e poi fissano questi valori in pixel come stili inline bloccheranno il contenitore a una dimensione che ignora le sostituzioni di spaziatura dell’utente. Usa dimensionamenti intrinseci e lascia che sia il CSS a gestire il layout.
• Supporre che le scansioni automatizzate di accessibilità rileveranno tutti gli errori 1.4.12. I team che si affidano esclusivamente ad axe o Lighthouse senza eseguire il Text Spacing Bookmarklet non rileveranno tutti gli errori di spaziatura basati sul layout. Il test manuale con il bookmarklet è obbligatorio per questo criterio.
• Non testare i menu di navigazione e i mega-menu con il bookmarklet. I componenti di navigazione sono spesso costruiti con altezze in pixel fisse e overflow nascosto per creare un risultato visivo curato. Sono anche tra i componenti che più spesso non soddisfano 1.4.12 perché l’aumento della spaziatura fa andare a capo le voci di menu, che vengono poi tagliate.
• Trattare i valori di spaziatura come requisiti di design anziché come soglie di test. Alcuni team rispondono a 1.4.12 aggiornando i loro stili predefiniti per allinearli ai valori soglia, il che è inutile e può entrare in conflitto con l’intento del designer. Il criterio richiede solo che il layout non si rompa quando tali valori vengono applicati — non che siano i valori predefiniti.

Relazione con le Normative di Accessibilità della Turchia

WCAG 1.4.12 Spaziatura del testo è direttamente rilevante per il quadro giuridico di accessibilità in via di sviluppo in Turchia. Il recente sviluppo più significativo è la Circolare Presidenziale 2025/10, pubblicata nella Gazzetta Ufficiale n. 32933 il 21 giugno 2025. Questa circolare stabilisce obblighi vincolanti per un’ampia gamma di organizzazioni per garantire l’accessibilità digitale nei loro siti web e applicazioni mobili.

La circolare copre un’ampia serie di tipologie di enti. Le istituzioni e le agenzie pubbliche a tutti i livelli di governo sono tenute a conformarsi. Le entità del settore privato incluse nel campo di applicazione comprendono piattaforme di e-commerce, banche e istituzioni finanziarie, ospedali e fornitori di servizi sanitari, società di telecomunicazioni con 200.000 o più abbonati, agenzie di viaggio, società di trasporto private e scuole private autorizzate dal Ministero dell’Istruzione Nazionale (MoNE). Queste organizzazioni sono tenute a soddisfare la conformità di Livello AA con le WCAG, che include 1.4.12, come parte dei loro obblighi ai sensi della circolare.

La conformità al Livello AA è anche un prerequisito per ottenere il Logo di Accessibilità (Erişilebilirlik Logosu) rilasciato dal Ministero della Famiglia e dei Servizi Sociali (Aile ve Sosyal Hizmetler Bakanlığı). Questo logo segnala alle persone, in particolare a quelle con disabilità, che un prodotto digitale è stato sottoposto ad audit e soddisfa lo standard di accessibilità richiesto. Per le organizzazioni che servono la comunità delle persone con disabilità in Turchia — stimata in diversi milioni di persone, incluse quelle con deficit visivi, cognitivi e di lettura — il logo ha un peso sia reputazionale sia regolatorio.

In termini pratici, una piattaforma di e-commerce turca che utilizza contenitori di descrizione del prodotto ad altezza fissa con overflow: hidden, o un portale governativo il cui menu di navigazione taglia il contenuto quando una persona applica sostituzioni di spaziatura tramite un’estensione del browser o un’impostazione di accessibilità del sistema operativo, non solo sta venendo meno ai propri utenti — è potenzialmente non conforme agli obblighi stabiliti dalla circolare 2025/10. Gli errori di Spaziatura del testo sono particolarmente rilevanti per le persone turche con dislessia e ipovisione che si affidano a strumenti di spaziatura personalizzata, e per le persone che accedono a servizi governativi o commerciali su dispositivi mobili, dove le impostazioni di dimensione del testo del sistema operativo possono anch’esse innescare instabilità del layout simili alle sostituzioni di spaziatura.

Le organizzazioni che mirano a ottenere l’Erişilebilirlik Logosu dovrebbero includere un audit manuale della spaziatura del testo utilizzando il Text Spacing Bookmarklet come fase obbligatoria del loro processo di audit di accessibilità, insieme alle scansioni automatizzate e ai test con lettori di schermo. Correggere gli errori 1.4.12 — principalmente sostituendo le altezze fisse con min-height, rimuovendo overflow: hidden non necessari dai contenitori di testo e adottando tecniche di layout CSS flessibili — è in genere realizzabile senza modifiche significative al design e rappresenta un miglioramento ad alto valore e basso costo dell’accessibilità di qualsiasi servizio digitale turco.