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éfice de atenção frequentemente têm dificuldade em acompanhar 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, ganham a maior especificidade na cascata CSS. Isto significa que folhas de estilo do utilizador, extensões do browser, e ferramentas de tecnologia assistiva não conseguem 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 Critério de Sucesso 1.4.12 das WCAG 2.1: Espaçamento de texto (Nível AA), que requer que não ocorra perda de conteúdo ou funcionalidade quando os utilizadores ajustam:

Altura de 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 impedirem 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. 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 os estilos para uma folha de estilo externa ou incorporada. Esta é geralmente a melhor abordagem porque separa o 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 praticamente impossíveis de os utilizadores substituírem, 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 do utilizador.

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

<p style="line-height: 1.5 !important;">
  Este texto está bloqueado a uma 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 entre letras fixo.
</p>

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

<p style="word-spacing: 4px !important;">
  Este texto tem espaçamento entre 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 entre letras.
</p>

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

<p style="word-spacing: 4px;">
  Os utilizadores podem ajustar este espaçamento entre 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 estã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 os estilos de espaçamento de texto numa folha de estilo, facilita aos utilizadores aplicar as suas próprias substituições enquanto mantém o seu design padrão.

Learn more: