Técnicas para as WCAG 2.0

Ir para o conteúdo (Pressione a tecla Enter)

-

C8: Utilizar letter-spacing CSS para controlar o espaçamento numa palavra

Aplicabilidade

Todas as tecnologias que suportem CSS.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é demonstrar como o aspecto visual do espaçamento no texto pode ser melhorado através de folhas de estilo, mantendo a sequência de texto com significação. A propriedade CSS letter-spacing ajuda os programadores a controlar o espaço em branco entre caracteres. Isto é preferível a adicionar caracteres em branco para controlar o espaçamento, visto que os caracteres em branco podem alterar o significado e a pronúncia da palavra.

Exemplos

Exemplo 1: Separar caracteres numa palavra

O seguinte CSS acrescentaria o equivalente a um espaço entre cada carácter num cabeçalho de nível 2:

Código Exemplo:

h2
{
        letter-spacing: 1em;
}

Assim, para a marcação:

Código Exemplo:

<h2>Museum</h2>

o resultado apresentado terá o seguinte aspecto:

Código Exemplo:

M u s e u m

Recursos

Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.

Testes

Procedimento

Para cada palavra que pareça ter um espaçamento entre caracteres que não seja normal:

  1. Verifique se a propriedade CSS letter-spacing foi utilizada para controlar o espaçamento.

Resultados Esperados