Regra de acessibilidade: O espaçamento de texto inline deve ser ajustável com folhas de estilo personalizadas

Sobre esta regra de acessibilidade

Alguns utilizadores precisam de ajustar o espaçamento de texto para tornar o conteúdo legível. Pessoas com baixa visão podem aumentar o espaçamento entre letras ou palavras para reduzir o congestionamento visual. Pessoas com deficiências cognitivas, dislexia, ou perturbações de déficit de atenção frequentemente têm dificuldade em seguir linhas de texto muito próximas — aumentar line-height, letter-spacing, ou word-spacing pode tornar a leitura significativamente mais fácil.

Quando as propriedades de espaçamento de texto são definidas inline com !important, elas ganham a maior especificidade na cascata CSS. Isto significa que as folhas de estilo do utilizador, extensões do navegador e ferramentas de tecnologia assistiva não podem substituir esses valores. O texto fica bloqueado num espaçamento fixo que pode ser difícil ou impossível de ler para alguns utilizadores.

Esta regra relaciona-se com o WCAG 2.1 Critério de Sucesso 1.4.12: Espaçamento de Texto (Nível AA), que exige que não ocorra perda de conteúdo ou funcionalidade quando os utilizadores ajustam:

Altura da linha para pelo menos 1,5 vezes o tamanho da fonte
Espaçamento após parágrafos para pelo menos 2 vezes o tamanho da fonte
Espaçamento entre letras para pelo menos 0,12 vezes o tamanho da fonte
Espaçamento entre palavras para pelo menos 0,16 vezes o tamanho da fonte

Se declarações !important inline impedem estes ajustes, o conteúdo falha este critério.

Como corrigir

A correção é simples: não use !important em atributos style inline para line-height, letter-spacing, ou word-spacing. Você tem algumas opções:

Remova !important da declaração de estilo inline. Sem !important, os utilizadores podem substituir o valor com uma folha de estilo personalizada.
Mova estilos para uma folha de estilo externa ou incorporada. Esta é geralmente a melhor abordagem porque separa conteúdo da apresentação e dá aos utilizadores mais controlo através da cascata.
Se !important for verdadeiramente necessário, aplique-o numa folha de estilo em vez de inline. Estilos !important inline são virtualmente impossíveis de substituir pelos utilizadores, enquanto !important ao nível da folha de estilo ainda pode ser substituído por regras !important do utilizador.

Note que outras propriedades de estilo inline como font-size não são sinalizadas por esta regra — apenas as três propriedades de espaçamento de texto (line-height, letter-spacing, word-spacing) são verificadas.

Exemplos

Incorreto: Estilos inline com `!important`

Estes exemplos falham porque !important em propriedades de espaçamento de texto inline impede substituições pelo utilizador.

<!-- line-height com !important — não pode ser substituído -->

<p style="line-height: 1.5 !important;">
  Este texto está bloqueado numa altura de linha específica.
</p>

<!-- letter-spacing com !important — não pode ser substituído -->

<p style="letter-spacing: 2px !important;">
  Este texto tem espaçamento de letras fixo.
</p>

<!-- word-spacing com !important — não pode ser substituído -->

<p style="word-spacing: 4px !important;">
  Este texto tem espaçamento de palavras fixo.
</p>

<!-- Misto: word-spacing está bem, mas letter-spacing tem !important -->

<p style="word-spacing: 4px; letter-spacing: 2px !important; line-height: 1.8;">
  Mesmo um !important numa propriedade de espaçamento causa uma falha.
</p>

Correto: Estilos inline sem `!important`

Estes exemplos passam porque os utilizadores podem substituir os valores inline com uma folha de estilo personalizada.

<!-- line-height sem !important — substituível -->

<p style="line-height: 1.5;">
  Os utilizadores podem ajustar esta altura de linha com uma folha de estilo personalizada.
</p>

<!-- letter-spacing sem !important — substituível -->

<p style="letter-spacing: 2px;">
  Os utilizadores podem ajustar este espaçamento de letras.
</p>

<!-- word-spacing sem !important — substituível -->

<p style="word-spacing: 4px;">
  Os utilizadores podem ajustar este espaçamento de palavras.
</p>

<!-- Múltiplas propriedades de espaçamento, todas sem !important -->

<p style="word-spacing: 4px; letter-spacing: 2px; line-height: 1.8;">
  Todas as três propriedades de espaçamento podem ser substituídas pelo utilizador.
</p>

<!-- font-size com !important está bem — não é uma propriedade de espaçamento de texto -->

<p style="font-size: 200%;">
  Isto não aciona a regra.
</p>

Melhor prática: Use uma folha de estilo externa

<!-- HTML -->

<p class="readable-text">
  Os estilos são definidos na folha de estilo, dando aos utilizadores controlo total.
</p>

/* CSS */
.readable-text {
  line-height: 1.8;
  letter-spacing: 0.05em;
  word-spacing: 0.1em;
}

Ao manter estilos de espaçamento de texto numa folha de estilo, você torna fácil para os utilizadores aplicarem as suas próprias substituições enquanto mantém o seu design padrão.

Learn more: