Espaçamento do texto

A Silktide encontra elementos cujos estilos inline bloqueiam o espaçamento do texto — letter-spacing, word-spacing ou line-height — com !important em um valor abaixo do mínimo da WCAG, impedindo os utilizadores de ajustá-lo.

Por que isso é importante

Pessoas com dislexia ou baixa visão frequentemente precisam que o texto fique mais espaçado para conseguir lê-lo: linhas mais altas, espaços maiores entre letras e palavras. Elas fazem isso usando extensões do navegador e folhas de estilo personalizadas que substituem o espaçamento da página.

Essas ferramentas injetam CSS comum no nível do autor. Uma declaração !important dentro do atributo style de um elemento supera todas as regras no nível do autor, independentemente de quão específicas sejam — é a única construção em uma página que essas ferramentas não conseguem substituir. Quando ela bloqueia o espaçamento abaixo dos mínimos, o utilizador fica simplesmente impedido de ajustá-lo.

O critério de sucesso 1.4.12 da (nível AA) exige que o conteúdo continue funcionando quando os utilizadores aumentam o espaçamento do texto para, no mínimo:

Altura da linha — 1,5 vez o tamanho da fonte
Espaçamento entre letras — 0,12 vez o tamanho da fonte
Espaçamento entre palavras — 0,16 vez o tamanho da fonte

Como corrigir

Para cada elemento sinalizado, faça uma das seguintes ações:

Remova o sinalizador !important da declaração inline. As ferramentas dos utilizadores poderão substituí-la, e o seu design permanecerá inalterado para todas as outras pessoas.
Mova a declaração para uma folha de estilos. Mesmo com !important, as regras da folha de estilos podem ser substituídas pelas ferramentas dos utilizadores.
Aumente o valor até o mínimo da WCAG se o espaçamento realmente precisar ser fixado.

<!-- Falha: bloqueado abaixo do mínimo; as ferramentas dos utilizadores não podem substituir isto -->
<p style="line-height: 1.2 !important">…</p>

<!-- Corrigido: pode ser substituído -->
<p style="line-height: 1.2">…</p>

<!-- Também está correto: bloqueado, mas com um valor que já atende ao mínimo -->
<p style="line-height: 1.5 !important">…</p>

Como a Silktide testa isso

Encontra elementos cujo atributo style declara letter-spacing, word-spacing ou line-height com !important e que contêm diretamente texto visível.
Determina o valor declarado em relação ao tamanho da fonte do elemento.
Reporta o elemento quando o valor bloqueado está abaixo do mínimo da WCAG para essa propriedade.

Isso reproduz as regras ACT do W3C para 1.4.12 (espaçamento entre letras, espaçamento entre palavras, altura da linha).

A Silktide não sinaliza espaçamentos !important em folhas de estilos — as ferramentas dos utilizadores ainda podem substituí-los — e não simula a aplicação das substituições de espaçamento para detectar layouts quebrados, algo que nenhuma ferramenta automatizada faz atualmente. Passar nesta verificação significa que nada na página impede os utilizadores de ajustar o espaçamento; testar se o seu layout continua legível com o espaçamento ajustado é um teste manual rápido com um bookmarklet de espaçamento do texto.

Solução de problemas

Bibliotecas de componentes e scripts incorporados às vezes escrevem estilos inline com !important. Eles contam da mesma forma para a sua página; verifique as configurações do fornecedor ou entre em contato com ele.

O espaçamento está bloqueado em um valor compatível

Valores iguais ou superiores aos mínimos da WCAG passam mesmo quando estão bloqueados — bloquear line-height: 1.6 !important não prejudica ninguém, pois o valor já excede aquele para o qual os utilizadores o aumentariam.