Técnicas para as WCAG 2.0

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

-

C28: Especificar o tamanho de caixas de texto utilizando unidades 'em'

Aplicabilidade

CSS.

Esta técnica está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

No Internet Explorer 6, o Modo Alto Contraste do Windows redimensiona os tipos de letra baseados em percentagem em tabelas encaixadas, ficando estes demasiado ampliados. O Firefox e versões posteriores do IE não redimensionam os tipos de letra em Modo Alto Contraste, não apresentando este problema.

Descrição

O objectivo desta técnica é especificar a largura e/ou altura das caixas, que contêm texto ou que aceitam entrada de texto, em unidades em . Isto permite aos agentes de utilizador que suportam redimensionamento de texto redimensionar as caixas de texto de acordo com as alterações nas definições de tamanho de texto.

A largura e/ou altura das caixas de texto que foram especificadas utilizando outras unidades estão sujeitas a ficarem cortadas, visto que o texto fica fora dos limites da caixa quando o seu tamanho é ampliado.

As caixas normalmente controlam a colocação do texto dentro da página Web e podem incluir elementos de disposição, elementos estruturais e controlos de formulário.

Exemplos

Exemplo 1: Unidades 'em' para tamanhos de caixas de disposição que contenham texto

Neste exemplo, um elemento div, com um valor id value de "nav_menu", é utilizado para posicionar o menu de navegação ao longo do lado esquerdo da área de conteúdo principal da página Web. O menu de navegação consiste numa lista de links de texto, com um valor id de "nav_list." O tamanho do texto para os links de navegação e a largura da caixa são especificados em unidades 'em' .

Código Exemplo:

#nav_menu { width: 20em; height: 100em }

#nav_list { font-size: 100%; }

Exemplo 2: Unidades 'em' para controlos de formulário baseados em texto

Neste exemplo, os elementos input que contêm texto ou aceitam entrada de texto pelo utilizador recebem o nome de classe "form1." As regras CSS são utilizadas para definir o tamanho da letra em unidades percent e a largura destes elementos em unidades em . Isto permite que o texto dentro do controlo de formulário seja redimensionado, em resposta às alterações nas definições do tamanho de texto, sem ficar cortado (visto que a largura do controlo de formulário é também redimensionada de acordo com o tamanho de letra).

Código Exemplo:

input.form1 { font-size: 100%; width: 15em; }

Exemplo 3: Unidades 'em' em caixas pendentes

Neste exemplo, os elementos select recebem o nome de classe "pick." As regras CSS são utilizadas para definir o tamanho de letra em unidades percent e a largura em unidades em . Isto permite que o texto dentro do controlo de formulário seja redimensionado, em resposta às alterações nas definições do tamanho de texto, sem ficar cortado.

Código Exemplo:

input.pick { font-size: 100%; width: 10em; }

Exemplo 4: Unidades 'em' para controlos de formulário não baseados em texto

Neste exemplo, os elementos input que definem as caixas de verificação ou botões de opção recebem o nome de classe "choose". As regras CSS são utilizadas para definir a largura e altura destes elementos em unidades 'em'. Isto permite que o texto dentro do controlo de formulário seja redimensionado, em resposta às alterações nas definições do tamanho de texto.

Código Exemplo:

input.choose { width: 1.2em; height: 1.2em; }

Testes

Procedimento

Resultados Esperados