Técnicas para as WCAG 2.0

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

-

C21: Especificar o espaçamento entre linhas em CSS

Aplicabilidade

Todas as tecnologias que suportem CSS.

Esta técnica está relacionada com:

Descrição

Muitas pessoas com incapacidades cognitivas têm dificuldade em acompanhar as linhas do texto quando um bloco de texto tem um espaçamento simples. Fornecer um espaçamento entre 1,5 e 2 permite-lhes iniciar uma nova linha mais facilmente assim que terminarem a linha anterior.

Exemplos

Exemplo 1

Definir o elemento para uma altura de linha de 1,5. Defina as características do elemento na folha de estilo.

Código Exemplo:

p { line-height: 150%; }

No conteúdo, o elemento terá uma altura de linha de 1,5 em todo o documento.

Código Exemplo:

<p> Lorem ipsum dolor sit …  </p>

Exemplo 2

Definir uma classe para uma altura de linha de 1,5 (espaçamento entre linhas com espaço e meio). Defina a classe na folha de estilo.

Código Exemplo:

p.tall {line-height:150%}

No conteúdo, seleccione a classe.

Código Exemplo:

<p class="tall"> Lorem ipsum dolor sit …  </p>

Exemplo 3

Definir uma classe para uma altura de linha com espaçamento duplo. Defina a classe na folha de estilo.

Código Exemplo:

p.tall {line-height:200%}

No conteúdo, seleccione a classe.

Código Exemplo:

<p class="tall"> Lorem ipsum dolor sit …  </p>

Testes

Procedimento

  1. Abra o conteúdo num browser.

  2. Verifique se o espaçamento entre linhas em blocos de texto é entre 1,5 e 2.

Resultados Esperados