Técnicas para as WCAG 2.0

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

-

H44: Utilizar elementos label para associar etiquetas de texto a controlos de formulário

Aplicabilidade

Controlos HTML e XHTML que utilizem etiquetas externas.

Esta técnica está relacionada com:

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

As especificações HTML e XHTML permitem etiquetas implícitas e explícitas. Contudo, algumas tecnologias de apoio não processam correctamente as etiquetas implícitas (por exemplo, <label>First name <input type="text" name="firstname"></label>).

Os agentes de utilizador irão apresentar uma descrição quando o ponteiro do rato estiver sobre um elemento input que contenha um atributo title . Os atributos title são expostos à tecnologia de apoio e são apresentados como descrições em vários browsers gráficos. As descrições não podem ser abertas através do teclado, como tal estas informações podem não estar disponíveis a utilizadores de teclado sem problemas de visão.

Se não existir nenhum label disponível, o JAWS e o Window-Eyes lêem o atributo title quando o controlo de formulário recebe o foco.

Descrição

O objectivo desta técnica é utilizar o elemento label para associar explicitamente um controlo de formulário a uma etiqueta. Um elemento label é ligado a um controlo de formulário específico através da utilização do atributo for . O valor do atributo for tem de ser igual ao valor do atributo id do controlo de formulário.

O atributo id pode ter o mesmo valor do atributo name, mas ambos têm de ser fornecidos, e o id tem de ser exclusivo na página Web.

Esta técnica é de tipo suficiente para os Critérios de Sucesso 1.1.1, 1.3.1 e 4.1.2, independentemente de o elemento label estar ou não visível. Ou seja, pode ser ocultado utilizando o CSS. Contudo, para o Critério de Sucesso 3.3.2, o elemento label tem de estar visível, uma vez que fornece assistência a todos os utilizadores que necessitam de ajuda para compreender a finalidade do campo.

Tenha em atenção que o label está posicionado a seguir aos elementos input de type="checkbox" e type="radio".

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 1: Um campo de entrada de texto

O campo de texto no exemplo abaixo tem a etiqueta explícita de "Nome próprio:". O atributo for do elemento label corresponde ao atributo id do elemento input .

Código Exemplo:

<label for="firstname">First name:</label> 
<input type="text" name="firstname" id="firstname" />

Exemplo 2: Uma caixa de verificação

Código Exemplo:

<input type="checkbox" id="markuplang" name="computerskills" checked="checked">
<label for="markuplang">HTML</label>

Exemplo 3: Um grupo de botões de opção

Um grupo relacionado e pequeno de botões de opção com uma descrição clara e etiquetas para cada um dos elementos.

Nota: Para fornecer instruções e associações claras para um conjunto grande de botões de opção relacionados, deve ser considerada a técnica H71: Fornecer uma descrição para grupos de controlos de formulário utilizando elementos fieldset e legend .

Código Exemplo:

                                 <h1>Donut Selection</h1>

<p>Choose the type of donut(s) you would like then select 
   the "purchase donuts" button.</p>

<form action="http://example.com/donut" method="post">
<p>
  <input type="radio" name="flavor" id="choc" value="chocolate" />
    <label for="choc">Chocolate</label><br/>
  <input type="radio" name="flavor" id="cream" value="cream"/>
    <label for="cream">Cream Filled</label><br/>
  <input type="radio" name="flavor" id="honey" value="honey"/>
    <label for="honey">Honey Glazed</label><br/>
  <input type="submit" value="Purchase Donuts"/>
</p>
</form>

Recursos

Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.

Testes

Procedimento

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

  1. Verifique se existe um elemento label que identifique a finalidade do controlo antes do elemento input .

  2. Verifique se o atributo for do elemento label corresponde ao id do elemento input .

  3. Verifique se o elemento label está visível.

Para todos os elementos input de tipo caixa de verificação ou botão de opção existentes na página Web:

  1. Verifique se existe um elemento label que identifique a finalidade do controlo depois do elemento input .

  2. Verifique se o atributo for do elemento label corresponde ao id do elemento input .

  3. Verifique se o elemento label está visível.

Resultados Esperados