Técnicas para as WCAG 2.0

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

-

F69: Falha do Critério de Sucesso 1.4.4 quando redimensionar o texto visualmente apresentado para 200% fizer com que o texto, a imagem ou os controlos fiquem cortados, truncados ou sobrepostos

Aplicabilidade

HTML, XHTML e CSS.

Esta falha está relacionada com:

Descrição

O objectivo desta condição de falha é descrever um problema que ocorre quando a alteração do tamanho do texto faz com que o texto seja cortado, truncado ou sobreposto, deixando de estar disponível ao utilizador. No geral, esta falha ocorre quando não há forma de o motor de apresentação de um agente de utilizador cumprir todas as sugestões de apresentação no HTML no novo tamanho de letra. Algumas das formas nas quais esta situação pode ocorrer incluem:

Exemplos

Exemplo de Falha 1:

O tamanho de letra é definido de uma forma ajustável, mas a caixa é definida para um tamanho de pixéis fixo. Um contorno cinzento mostra os limites da caixa de texto. Quando o texto é redimensionado, sai fora da caixa e sobrepõe o parágrafo seguinte.

Código Exemplo:

<div style="font-size:100%; width:120px; height:100px; border: thin solid gray;> 
  Now is the time for all good men to come to the aid of their country. 
</div>
<p>Now is the time for all good men to come to the aid of their country.</p>

Ilustração do exemplo 1:

Exemplo que mostra texto a sair da respectiva caixa, sobrepondo-se a outro texto na página.

Exemplo de Falha 2:

Este exemplo é idêntico ao último, com a excepção de que a caixa foi definida para cortar o texto. O texto já não está a passar para o parágrafo seguinte, mas encontra-se truncado. Isto também é uma falha.

Código Exemplo:

<div style="font-size:100%; width:120px; height:100px; overflow: hidden; border: thin solid gray;>
 Now is the time for all good men to come to the aid of their country. 
</div>
<p>Now is the time for all good men to come to the aid of their country.</p>

Ilustração do exemplo 2:

Exemplo que mostra texto truncado devido ao texto redimensionado.

(actualmente, não existe nenhuma indicada)

Testes

Procedimento

  1. Aumente o tamanho do texto do conteúdo até 200%.

  2. Verifique se não existe texto cortado, truncado ou sobreposto.

Resultados Esperados