Associações exclusivas de rótulos

O Silktide verifica os rótulos de formulários que identificam o respetivo campo através de um ID e comunica os rótulos que partilham o mesmo ID com outro rótulo. Cada campo deve ter exatamente um rótulo associado, para ser sempre anunciado da mesma forma.

Em , um <label> é associado ao respetivo campo de formulário definindo o atributo for do rótulo com o valor do id do campo. Quando dois ou mais rótulos usam o mesmo valor de for, todos afirmam estar associados ao mesmo campo — normalmente porque um formulário foi copiado e colado e os IDs nunca foram atualizados.

<!-- Problema: ambos os rótulos apontam para id="name" -->
<label for="name">O seu nome</label>
<input id="name">

<label for="name">Nome da empresa</label>
<input id="company">

Por que isso é importante

A tem de escolher qual rótulo anunciar para o campo, e diferentes fazem escolhas diferentes — alguns leem o primeiro, outros leem ambos. Entretanto, o campo a que o segundo rótulo se destinava fica sem qualquer rótulo e, por isso, é anunciado como um campo sem nome. Clicar num rótulo também coloca o foco no respetivo campo, portanto um visitante que clique em "Nome da empresa" pode acabar a escrever na caixa errada.

Como corrigir

Dê a cada campo do formulário o seu próprio id exclusivo.
Aponte o atributo for de cada rótulo para o ID do único campo que descreve:

<!-- Corrigido: cada rótulo aponta para o seu próprio campo -->
<label for="name">O seu nome</label>
<input id="name">

<label for="company">Nome da empresa</label>
<input id="company">

Se várias partes de texto descrevem genuinamente um único campo, mantenha um único <label> e associe o texto adicional com aria-describedby, em vez de usar um segundo rótulo.

Como o Silktide testa isto

Encontra todos os elementos <label> com um atributo for em cada página.
Agrupa os rótulos pelo respetivo valor de for.
Quando dois ou mais rótulos partilham o mesmo valor, comunica todos os rótulos do grupo.

Resolução de problemas

Os rótulos estão em formulários separados

Os IDs têm de ser exclusivos em toda a página, não apenas dentro de um formulário. Dois formulários que contenham cada um <label for="email"> na mesma página continuam a entrar em conflito — altere o nome dos IDs para que sejam diferentes, por exemplo, signup-email e newsletter-email.