Técnicas para as WCAG 2.0

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

-

H65: Utilizar o atributo title para identificar controlos de formulário quando o elemento label não puder ser utilizado

Aplicabilidade

Controlos de formulário HTML e XHTML que não estejam identificados utilizando value, alt ou conteúdo do elemento.

Esta técnica está relacionada com:

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

Descrição

O objectivo desta técnica é utilizar o atributo title para identificar controlos de formulário quando o design visual não pode incluir a etiqueta (por exemplo, se não existir nenhum texto no ecrã que possa ser identificado como uma etiqueta), ou quando possa ser confuso apresentar uma etiqueta. Os agentes de utilizador, incluindo as tecnologias de apoio, podem ler o atributo title .

Exemplos

Exemplo 1: Um menu pendente que limita o âmbito da procura

Um formulário de procura utiliza um menu pendente para limitar o âmbito da procura. O menu pendente está imediatamente adjacente ao campo de texto utilizado para introduzir o termo da procura. A relação entre o campo de procura e o menu pendente é clara para os utilizadores que conseguem ver o design visual, que não tem espaço para uma etiqueta visível. O atributo title é utilizado para identificar o menu select . O atributo title pode ser lido por leitores de ecrã ou apresentado como uma descrição às pessoas que utilizam ampliadores de ecrã.

Código Exemplo:

<label for="searchTerm">Search for:</label>
<input id="searchTerm" type="text" size="30" value="" name="searchTerm">
<select title="Search in" id="scope">
…
</select> 

Exemplo 2: Campos de entrada para um número de telefone

Uma página Web inclui controlos para introduzir um número de telefone dos Estados Unidos, com três campos para o indicativo, a central telefónica e os últimos quatro dígitos.

Código Exemplo:

<fieldset><legend>Phone number</legend>
<input id="areaCode" name="areaCode" title="Area Code" 
type="text" size="3" value="" >
<input id="exchange" name="exchange" title="First three digits of phone number" 
type="text" size="3" value="" >
<input id="lastDigits" name="lastDigits" title="Last four digits of phone number" 
type="text" size="4" value="" >
</fieldset> 

Exemplo 3: Uma Função de Procura

Uma página Web inclui um campo de texto, no qual o utilizador pode introduzir termos de procura, e um botão intitulado "Procura" para efectuar a procura. O atributo title é utilizado para identificar o controlo de formulário e o botão encontra-se imediatamente a seguir ao campo de texto, de modo a ser claro para o utilizador que o campo de texto é onde deve introduzir o termo da procura.

Código Exemplo:

<input type="text" title="Type search term here" value="Type search term here"/> <input type="submit" value="Search"/>

Recursos

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

Testes

Procedimento

  1. Identifique cada controlo de formulário que não esteja associado a um elemento label .

  2. Verifique se o controlo tem um atributo title .

  3. Verifique se o atributo title identifica a finalidade do controlo.

Resultados Esperados