Controlos HTML e XHTML que utilizem etiquetas externas.
Esta técnica está relacionada com:
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>).
O JAWS 7.10 foi testado no Windows XP com o Internet Explorer 6.0 e o Firefox 1.5. Lê as etiquetas explícitas e as etiquetas implícitas dos campos de texto no modo de cursor virtual do PC e no modo de leitura do formulário. No modo de formulário não lê as etiquetas implícitas das caixas de verificação e dos campos dos botões de opção.
O Window-Eyes 5.5 foi testado no Windows XP com o Internet Explorer 6.0 e o Firefox 1.5. Irá sempre ler a etiqueta explícita de um campo de formulário. Não lê a etiqueta implícita do controlo de formulário no modo de procura ligado, mas irá ler a etiqueta implícita ao navegar de controlo para controlo no modo de procura desligado.
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.
O JAWS 6.0 e posterior podem ser definidos para ler o label e o title quando os dois itens forem diferentes; contudo, muito poucos utilizadores têm conhecimento desta definição.
O WindowEyes 5.5 tem uma tecla de atalho, ins-E, que irá apresentar informações adicionais, incluindo o atributo title, para o item com o foco.
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:
input type="text"
input type="checkbox"
input type="radio"
input type="file"
input type="password"
textarea
select
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).
Botões Submeter e Repor (input type="submit" ou input type="reset")
Botões de imagem (input type="image")
Campos de entrada ocultos (input type="hidden")
Botões de script (elementosbutton ou <input type="button">)
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" />
Código Exemplo:
<input type="checkbox" id="markuplang" name="computerskills" checked="checked">
<label for="markuplang">HTML</label>
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>
Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.
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:
Verifique se existe um elemento label que identifique a finalidade do controlo antes do elemento input .
Verifique se o atributo for do elemento label corresponde ao id do elemento input .
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:
Verifique se existe um elemento label que identifique a finalidade do controlo depois do elemento input .
Verifique se o atributo for do elemento label corresponde ao id do elemento input .
Verifique se o elemento label está visível.
Os passos 1 e 2 são verdadeiros. Para o Critério de Sucesso 3.3.2, o passo 3 é igualmente verdadeiro.