Técnicas para as WCAG 2.0

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

-

G179: Garantir que não existe perda de conteúdo nem de funcionalidade quando o texto é redimensionado e que as caixas de texto não sejam redimensionadas

Aplicabilidade

Todas as tecnologias que refluam o texto quando as janelas são redimensionadas.

Esta técnica está relacionada com:

Descrição

Alguns agentes de utilizador suportam a alteração do tamanho do texto sem alterar outras dimensões da caixa de texto. Pode ocorrer perda de conteúdo ou de funcionalidade quando o texto sai fora do espaço que lhe foi atribuído. Contudo, as propriedades de disposição podem fornecer uma forma de continuar a apresentar o conteúdo de forma eficaz. Os tamanhos do bloco podem ser definidos para um tamanho suficientemente grande, de modo a que o texto não saia fora do espaço quando redimensionado para 200%. O texto pode moldar-se quando deixa de caber no bloco, e o bloco pode ter um comprimento suficiente que permita a todo o texto continuar a caber no bloco. O bloco pode fornecer barras de deslocamento quando o texto redimensionado sair fora do espaço.

Exemplos

Exemplo 1: Uma disposição de página com várias colunas

O HTML e o CSS são utilizados para criar uma disposição de duas colunas para uma página de texto. A utilização do valor predefinido da propriedade white-space, normal, faz com que o texto se molde. Assim, à medida que o tamanho do texto é aumentado para 200%, o texto reflui e a coluna de texto aumenta de tamanho. Se a coluna for demasiado grande para a janela, o agente de utilizador fornece barras de deslocamento, de modo a que o utilizador possa deslocar o texto para lê-lo, uma vez que o autor especificou a regra CSS overflow:scroll ou overflow:auto.

Exemplo 2

A disposição de um jornal com blocos de texto nas colunas. Os blocos têm uma largura fixa, mas não têm um comprimento definido. Quando o texto é redimensionado no browser, o texto molda-se e torna os blocos mais compridos.

Exemplo 3: Tamanhos relativos da caixa e do texto em percentagem e unidades "em"

A utilização de unidades relativas no texto e na caixa permite que a caixa aumente para acomodar o texto, sem quaisquer cortes. Esta imagem mostra o texto com um tamanho e tipo de letra "normal" no Internet Explorer. A caixa cinzenta é a caixa div.

captura de ecrã de unidades relativas com tamanho de texto normal.

Esta imagem mostra o mesmo texto e caixa utilizando o tamanho de letra "maior" no Internet Explorer. A caixa cinzenta aumentou para incluir o texto maior.

captura de ecrã do dimensionamernto relativo com o tamanho do texto maior.

Código Exemplo:

<style type="text/css">
  div { background-color:#ccc; line-height:120%; position:relative; }
  div.RelativeRelative { font-size:100%; width:8.1em; height:6.7em; }
</style>

<div class="RelativeRelative">
  Now is the time for all good men to come to the aid of their country.
</div>

Testes

Procedimento

  1. Aumente o tamanho do texto para 200%.

  2. Verifique se todo o conteúdo e funcionalidade estão disponíveis.

Resultados Esperados