Técnicas para as WCAG 2.0

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

-

F68: Falha dos Critérios de Sucesso 1.3.1 e 4.1.2 devido à associação de controlos de etiqueta e de interface de utilizador que não são determináveis de forma programática

Aplicabilidade

Controlos HTML e XHTML que utilizem etiquetas visíveis.

Esta falha está relacionada com:

Descrição

Esta falha descreve um problema que ocorre quando não é utilizado nenhum elemento label para associar explicitamente um controlo de formulário a uma etiqueta, em que o design visual utiliza uma etiqueta.

Nota 1: Os elementos que utilizam etiquetas explicitamente associadas são:

Nota 2: O elemento label não é utilizado para o seguinte, uma vez que as etiquetas para estes elementos são fornecidas através do atributo value (para botões Submeter e Repor), do atributo alt (para botões de imagem) ou do próprio conteúdo do elemento (botão).

Exemplos

Exemplo de Falha 1:

O exemplo seguinte demonstra um formulário que apresenta visualmente tabelas para controlos de formulário, mas não utiliza o elemento label para associá-las aos respectivos controlos. O código exemplo abaixo é uma falha, uma vez que a tecnologia de apoio pode não conseguir determinar que label está associado a que controlo.

Código Exemplo:

<form>
 First name: 
 <input type="text" name="firstname">
 <br />
 Last name: 
 <input type="text" name="lastname">
 <br />
 I have a dog <input type="checkbox" name="pet" value="dog" />
 I have a cat <input type="checkbox" name="pet" value="cat" />
</form>

Exemplo de Falha 2:

Nos seguintes códigos exemplo, os nomes associados aos controlos de entrada de texto não são correctamente determinados pela tecnologia de apoio.

Código Exemplo:

<form action="..." method="post">
<p>
<label>
   First Name
   <input type="text" name="firstname">
</label>
<label>
   <input type="text" name="lastname">
   Last Name
</label>
</p>
</form>

Código Exemplo:

<form action="..." method="post"> 
<p> 
<label>First Name </label>
<input type="text" name="firstname"> 
<label>Last Name</label> 
<input type="text" name="lastname"> 
</p> 
</form>

Exemplo de Falha 3:

A caixa de texto de procura no seguinte código exemplo não tem nenhum nome. O nome pode ser fornecido com o atributo title ou com um elemento label oculto com CSS.

Código Exemplo:

<input type="text" value="Type your search here"><input type="submit" type="submit" value="Search">

Testes

Procedimento

Para todos os elementos input de tipo radio, checkbox, text, file ou password, para todos os textareas e para todos os elementos select existentes na página Web:

  1. Verifique se o design visual utiliza uma etiqueta de texto que identifique a finalidade do controlo.

  2. Verifique se um elemento label associa o texto ao elemento input.

Resultados Esperados