Técnicas para as WCAG 2.0

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

-

C20: Utilizar medidas relativas para definir a largura das colunas, de modo a que as linhas possam ter, em média, 80 caracteres ou menos quando o browser for redimensionado

Aplicabilidade

CSS.

Esta técnica está relacionada com:

Descrição

A finalidade desta técnica é garantir que o CSS é utilizado de modo a que os utilizadores possam visualizar conteúdo, em que o comprimento das linhas tenha, em média, 80 caracteres ou menos. Isto permite que os utilizadores com algumas incapacidades visuais ou de leitura, com dificuldade em acompanhar a leitura de linhas de texto extensas, visualizem e interajam com o conteúdo de forma mais eficiente. Esta técnica permite também aumentar a largura das colunas à medida que os tamanhos de letra aumentam, o que reduz a possibilidade de cortes quando o tamanho de texto aumenta.

É de salientar que esta técnica não requer que os autores utilizem CSS para limitar a largura das linhas de texto para menos de 80 caracteres, na visualização predefinida. Pelo contrário, a recomendação para se utilizar medidas relativas em disposições CSS ajuda a garantir que os autores não definam larguras de coluna de um modo que impossibilite aos utilizadores visualizarem o conteúdo com comprimentos de linha de 80 caracteres ou menos.

Exemplos

Exemplo 1

Neste exemplo, a largura div é definida em unidades “em” na folha de estilo.

Nota: A propriedade CSS max-width não é suportada em versões do Internet Explorer 6 e versões anteriores.

Código Exemplo:

#main_content {max-width: 70em}

O bloco de texto ficaria colocado dentro do div no conteúdo.

Código Exemplo:

<div id="main_content"> 
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
</div>

Exemplo 2

Neste exemplo, a largura div é definida em percentagem na folha de estilo.

Código Exemplo:

#main_content {width: 90%}

O bloco de texto ficaria colocado dentro do div no conteúdo.

Código Exemplo:

<div id="main_content"> 
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
</div>

Recursos

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

Testes

Procedimento

  1. Verifique se as colunas são definidas em unidades relativas.

  2. Verifique se o comprimento da linha pode ser definido para 80 caracteres ou menos redimensionando a janela do browser.

Resultados Esperados