Técnicas para as WCAG 2.0

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

-

G162: Colocar etiquetas para aumentar a previsibilidade das relações

Aplicabilidade

Todas as tecnologias que suportem formulários.

Esta técnica está relacionada com:

Descrição

Quando as etiquetas estão posicionadas num local visualmente previsível para o utilizador, é mais fácil compreender formulários complexos e localizar campos específicos. As etiquetas para a maioria dos campos estão posicionadas imediatamente antes do campo, ou seja, para idiomas escritos da esquerda para a direita, à esquerda do campo ou acima do mesmo, e para idiomas escritos da direita para a esquerda, à direita do campo ou acima do mesmo. As etiquetas para os botões de opção e caixas de verificação estão posicionadas a seguir ao campo.

Estas posições estão definidas, uma vez que é a posição normal (e, por conseguinte, a mais previsível) da etiqueta para os campos, botões de opção e caixas de verificação.

As etiquetas estão posicionadas antes dos campos de entrada de dados, uma vez que o comprimento dos campos pode variar. Posicioná-las antes dos campos permite alinhar as etiquetas. Também facilita a localização das etiquetas com um ampliador de ecrã, uma vez que se encontram imediatamente antes do campo e também podem ser encontradas numa coluna vertical (quando o início dos campos está alinhado verticalmente). Finalmente, se o campo incluir dados, é mais fácil compreendê-los ou verificá-los se o utilizador ler a etiqueta primeiro e depois o conteúdo, em vez de fazer ao contrário.

As caixas de verificação e os botões de opção têm uma largura uniforme, enquanto as respectivas etiquetas, muitas vezes, não têm. Assim, ter o botão de opção ou a caixa de verificação em primeiro permite alinhar os botões e as etiquetas verticalmente.

Exemplos

Exemplo 1: Etiquetas acima dos campos de texto

Dois campos de formulário com etiquetas posicionadas imediatamente acima.

Exemplo 2: Etiquetas à esquerda dos campos de texto

Dois campos de formulário com etiquetas posicionadas imediatamente à esquerda

Exemplo 3: Etiquetas à direita dos botões de opção

Um grupo de controlos de formulário contém dois botões de opção com etiquetas posicionadas imediatamente à direita.

Recursos

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

Testes

Procedimento

Para cada campo de formulário na página Web:

  1. Verifique se o campo de formulário tem uma etiqueta visível.

  2. Se o campo de formulário for uma caixa de verificação ou um botão de opção, verifique se a etiqueta se encontra imediatamente a seguir ao campo.

  3. Se o campo de formulário não for uma caixa de verificação ou um botão de opção, verifique se a etiqueta se encontra imediatamente antes do campo.

Resultados Esperados