Técnicas para as WCAG 2.0

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

-

C17: Ajustar elementos de formulário que contenham texto

Aplicabilidade

(X)HTML, CSS.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é garantir que os controlos de formulário baseados em texto são redimensionados quando o tamanho do texto for alterado no agente de utilizador. Isto permite aos utilizadores introduzir texto e ler o que introduziram nas caixas de entrada de dados, visto que o texto é apresentado com o tamanho pretendido pelo utilizador.

Os controlos de formulário baseados em texto incluem caixas de entrada de dados (texto e área de texto), bem como botões.

Exemplos

Exemplo 1: Um formulário de contacto

Um formulário “Contacte-nos” dispõe de informação introdutória e, em seguida, controlos de formulário para os utilizadores introduzirem o primeiro nome, apelido, número de telefone e endereço de e-mail. Todo o texto e os controlos de formulário foram implementados de uma forma ajustável. Isto inclui especificar o tamanho de letra para os controlos de formulário, visto que o tamanho de letra não é herdado no Internet Explorer.

O componente XHTML:

Código Exemplo:

<h1>Contact Us</h1>
<p>Please provide us with your details and we will contact you as soon as we can. Note that all of the form fields are required.</p>
<label for="fname">First Name</label><input type="text" name="fname" id="fname" /><br />
<label for="lname">Last Name</label><input type="text" name="lname" id="lname" /><br />
<label for="phone">Telephone</label><input type="text" name="phone" id="phone" /><br />
<label for="email">Email</label><input type="text" name="email" id="email" /><br />
<input type="submit" name="Submit" value="Submit" id="Submit" />

O componente CSS:

Código Exemplo:

h1 { font-size: 2em; }
            p, label, input { font-size: 1em; }

Este é um exemplo prático deste código: Exemplo de redimensionamento de entrada de dados com CSS.

Exemplo 2: Botão de opção

Este exemplo funciona no IE com a sua funcionalidade de tamanho de texto. Contudo, não é ajustado no Firefox 2.0.

O componente XHTML:

Código Exemplo:

<input type="radio" name="r1" value="r1" id="r1" class="geomsize" />
<input type="checkbox" name="c1" id="c1" value="c1" class="geomsize" />

O componente CSS:

Código Exemplo:

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

Este é um exemplo prático deste código: Exemplo de redimensionamento de botões de opção e caixas de verificação com CSS.

Testes

Procedimento

  1. Introduza algum texto nos controlos de formulário baseados em texto que recebem o texto introduzido pelo utilizador.

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

  3. Verifique se o texto nos controlos de formulário baseados em texto foi aumentado até 200%.

Resultados Esperados