Técnicas para as WCAG 2.0

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

-

H90: Indicar os controlos de formulário obrigatórios

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 cursor 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.

Por predefinição, alguns agentes de utilizador (especificamente o leitor de ecrã Window-Eyes) não indicam o asterisco nas etiquetas de formulário. Existe uma preferência que os utilizadores do Window-Eyes podem modificar para ajustar este comportamento, mas a previsão é que a maioria dos utilizadores não efectue esta alteração.

Descrição

O objectivo desta técnica é fornecer uma indicação clara de que é obrigatório um controlo de formulário específico numa aplicação Web ou formulário para uma submissão com êxito dos dados. Um símbolo ou texto a indicar que o controlo é obrigatório são associados de forma programática ao campo utilizando o elemento label, ou o legend para grupos de controlos associados através de fieldset. Se for utilizado um símbolo, o utilizador é informado do seu significado antes da primeira utilização.

Exemplos

Exemplo 1: Utilizar texto para indicar o estado obrigatório

O campo de texto no exemplo abaixo tem a etiqueta explícita de "Nome próprio (obrigatório):". O atributo for dos elementos label corresponde ao atributo id do elemento input e o texto label indica que o controlo é obrigatório

Código Exemplo:

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

Nota: Alguns autores abreviam "obrigatório" para "obrig.", mas é notório que esta abreviatura é confusa.

Exemplo 2: Utilizar um asterisco para indicar o estado obrigatório

O campo de texto no exemplo abaixo tem uma etiqueta explícita que inclui um asterisco para indicar que o controlo é obrigatório. É importante que o significado do asterisco seja definido no início do formulário. Neste exemplo, o asterisco está incluído num elemento span para permitir que o asterisco seja moldado de modo a ficar maior do que asterisco predefinido, uma vez que o asterisco pode ser difícil de ver por pessoas com deficiências da visão.

Código Exemplo:

CSS:
 .req {font-size: 150%} 

HTML:

<p> Required fields are marked with an asterisk (<abbr class="req" title="required">*</abbr>).</p>
<form action="http://www.test.com" method="post">
<label for="firstname">First name <abbr class="req" title="required">*</abbr>:</label> 
<input type="text" name="firstname" id="firstname" />

Exemplo 3: Utilizar uma imagem para indicar o estado obrigatório

O campo de texto no exemplo abaixo tem uma etiqueta explícita que inclui uma imagem para indicar que o controlo é obrigatório. É importante que o significado da imagem seja definido no início do formulário.

Código Exemplo:

<p><img src="req_img.gif" alt="Required Control" /> indicates that the form control is required</p>
<form action="http://www.test.com" method="post">
<label for="firstname">First name <img src="req_img.gif" alt="Required Control" />:</label> 
<input type="text" name="firstname" id="firstname" />
 ...

Exemplo 4: Indicar o estado obrigatório para grupos de botões de opção ou controlos de caixas de verificação

Os botões de opção e as caixas de verificação são tratados de forma diferente de outros controlos interactivos, uma vez que as caixas de verificação e os botões de opção individuais não são obrigatórios, mas indicam que é obrigatória uma resposta para o grupo. Os métodos utilizados nos exemplos 1 a 3 aplicam-se a botões de opção e a caixas de verificação, mas a indicação do estado obrigatório dever ser colocada no elemento legend, em vez de no elemento label .

Código Exemplo:

<fieldset>
<legend>I am interested in the following (Required):</legend>
<input type="checkbox" id="photo" name="interests" value="ph">
<label for="photo">Photography</label></br>
<input type="checkbox" id="watercol" name="interests" checked="checked" value="wa">
<label for="watercol">Watercolor</label></br>
<input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac">
<label for="acrylic">Acrylic</label>
…
</fieldset>

Recursos

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

Testes

Procedimento

  1. Para cada controlo de formulário obrigatório, verifique se o estado obrigatório é indicado no elemento label ou legend do controlo de formulário.

  2. Para cada indicador de estado obrigatório que não seja fornecido em texto, verifique se o significado do indicador é explicado antes do controlo de formulário que o utiliza.

Resultados Esperados