IDs de rótulo válidos

A Silktide verifica os rótulos de formulários que identificam o respetivo campo através de um ID e confirma se o ID existe na página e pertence a um elemento que pode realmente receber um rótulo. Um rótulo que aponta para nada ou para o tipo errado de elemento deixa um campo sem nome, sem que isso seja evidente.

Em , um <label> é associado ao respetivo campo de formulário definindo o atributo for do rótulo com o valor do id do campo. A associação é quebrada quando o ID está incorreto, quando o ID do campo é alterado ou quando o destino não é um campo de formulário.

<!-- Problema: não existe nenhum elemento com id="fullname" -->
<label for="fullname">Nome completo</label>
<input type="text" id="full-name">

Porque é importante

O rótulo é o que permite a um anunciar um campo. Quando a referência for está quebrada, o rótulo e o campo são dois elementos sem relação: o visitante ouve um «texto de edição» sem nome e tem de adivinhar o que deve introduzir. Nada muda visualmente — o rótulo continua junto ao campo —, por isso estas falhas passam despercebidas até que alguém que depende desta associação tente utilizar o formulário.

Como corrigir

Encontre o campo a que o rótulo se destinava e faça com que o valor for do rótulo corresponda exatamente ao id do campo (os IDs distinguem maiúsculas de minúsculas):

<!-- Corrigido: a referência corresponde ao id do campo -->
<label for="full-name">Nome completo</label>
<input type="text" id="full-name">

Se o rótulo apontar para algo que não pode receber um rótulo — como uma <div> que funciona como um controlo personalizado — use : adicione ao elemento aria-labelledby apontando para o texto que o identifica.
Se o rótulo não tiver um campo correspondente, remova-o.

Como a Silktide faz esta verificação

Encontra todos os elementos <label> com um atributo for em cada página.
Procura o elemento cujo id corresponde ao valor de for.
Comunica o rótulo se não existir nenhum elemento correspondente.
Se existir, comunica o rótulo se o destino não for um elemento de formulário que possa receber rótulos — um botão, um campo de entrada (exceto os ocultos), uma lista pendente, uma área de texto, um medidor, uma saída ou uma barra de progresso.

Resolução de problemas

O campo é adicionado por scripts

A Silktide analisa cada página tal como é apresentada. Se o campo de destino só existir em alguns estados da página — por exemplo, depois de abrir um painel —, o destino do rótulo poderá estar em falta quando for feita a verificação. Considere apresentar o rótulo e o respetivo campo em conjunto.