Spaziatura del testo

Silktide individua gli elementi i cui stili inline bloccano la spaziatura del testo — letter-spacing, word-spacing o line-height — con !important a un valore inferiore al minimo WCAG, impedendo agli utenti di modificarla.

Perché è importante

Le persone con dislessia o ipovisione spesso hanno bisogno di una maggiore spaziatura del testo per leggerlo: righe più alte e spazi più ampi tra lettere e parole. A questo scopo usano estensioni del browser e fogli di stile personalizzati che sovrascrivono la spaziatura della pagina.

Questi strumenti inseriscono CSS ordinario a livello dell'autore. Una dichiarazione !important all'interno dell'attributo style di un elemento prevale su ogni regola a livello dell'autore, indipendentemente dalla sua specificità: è l'unica struttura in una pagina che questi strumenti non possono sovrascrivere. Quando blocca la spaziatura al di sotto dei valori minimi, l'utente viene semplicemente escluso.

Il criterio di successo 1.4.12 (livello AA) richiede che il contenuto rimanga fruibile quando gli utenti aumentano la spaziatura del testo almeno fino a:

Altezza delle righe — 1,5 volte la dimensione del carattere
Spaziatura delle lettere — 0,12 volte la dimensione del carattere
Spaziatura delle parole — 0,16 volte la dimensione del carattere

Come risolvere il problema

Per ogni elemento segnalato, procedi in uno dei seguenti modi:

Rimuovi il flag !important dalla dichiarazione inline. Gli strumenti degli utenti potranno così sovrascriverla, senza modificare il design per tutti gli altri utenti.
Sposta la dichiarazione in un foglio di stile. Anche con !important, le regole del foglio di stile possono essere sovrascritte dagli strumenti degli utenti.
Aumenta il valore fino al minimo WCAG se è davvero necessario fissare la spaziatura.

<!-- Non conforme: bloccato al di sotto del minimo; gli strumenti degli utenti non possono sovrascriverlo -->
<p style="line-height: 1.2 !important">…</p>

<!-- Corretto: sovrascrivibile -->
<p style="line-height: 1.2">…</p>

<!-- Anche corretto: bloccato, ma a un valore che soddisfa già il minimo -->
<p style="line-height: 1.5 !important">…</p>

Come Silktide esegue il controllo

Individua gli elementi il cui attributo style dichiara letter-spacing, word-spacing o line-height con !important e che contengono direttamente testo visibile.
Determina il valore dichiarato in relazione alla dimensione del carattere dell'elemento.
Segnala l'elemento quando il valore bloccato è inferiore al minimo WCAG per quella proprietà.

Questo rispecchia le regole ACT del W3C per il criterio 1.4.12 (spaziatura delle lettere, spaziatura delle parole, altezza delle righe).

Silktide non segnala la spaziatura con !important nei fogli di stile: gli strumenti degli utenti possono comunque sovrascriverla — e non simula l'applicazione delle sovrascritture della spaziatura per rilevare layout danneggiati, cosa che attualmente nessuno strumento automatizzato è in grado di fare. Il superamento di questo controllo significa che nulla nella pagina impedisce agli utenti di modificare la spaziatura; verificare che il layout rimanga leggibile con una spaziatura modificata è un rapido test manuale con un bookmarklet per la spaziatura del testo.

Risoluzione dei problemi

Le librerie di componenti e gli script incorporati a volte scrivono stili inline con !important. Vengono comunque conteggiati per la tua pagina; controlla le impostazioni del fornitore o segnalagli il problema.

La spaziatura è bloccata a un valore conforme

I valori pari o superiori ai minimi WCAG superano il controllo anche quando sono bloccati: bloccare line-height: 1.6 !important non danneggia nessuno, perché supera già il valore a cui gli utenti lo aumenterebbero.