Sobre este problema HTML
O elemento label representa uma legenda para um controlo de formulário. Existem duas formas de associar um label com o seu controlo:
-
Associação implícita — Coloque o controlo de formulário diretamente dentro do elemento
label. Não é necessário nenhum atributoforporque o browser automaticamente emparelha a etiqueta com o controlo aninhado. -
Associação explícita — Use o atributo
fornolabel, definindo o seu valor para oiddo controlo de formulário alvo. O controlo não precisa de estar aninhado dentro dolabelneste caso.
Ambos os métodos são válidos por si só. O problema ocorre quando você os combina incorretamente: você aninha um input dentro de um label que tem um atributo for, mas o input ou não tem id ou tem um id que não corresponde ao valor do for. Isto cria uma contradição — o atributo for aponta para um id específico, mas o input aninhado não cumpre essa referência. Os browsers podem lidar com isto de forma inconsistente, e tecnologias assistivas como leitores de ecrã podem falhar ao anunciar a etiqueta corretamente, prejudicando a acessibilidade.
Por que isto importa
-
Acessibilidade: Os leitores de ecrã dependem do emparelhamento
for/idpara anunciar etiquetas para controlos de formulário. Umidincompatível ou em falta pode deixar o controlo sem etiqueta para utilizadores que dependem de tecnologia assistiva. -
Conformidade com padrões: A especificação HTML requer que quando um atributo
forestá presente, deve referenciar oidde um elemento rotulável. Uma incompatibilidade viola esta regra. -
Comportamento do browser: Alguns browsers vão recorrer à associação implícita quando o
fornão resolve, mas outros podem priorizar a associação explícita quebrada, deixando o controlo efetivamente sem etiqueta.
Como corrigir
Você tem duas opções:
-
Remover o atributo
forse oinputjá está aninhado dentro dolabel. A associação implícita é suficiente por si só. -
Adicionar ou corrigir o
idnoinputaninhado para que corresponda exatamente ao valor do atributofor.
Exemplos
❌ Input aninhado sem id correspondente
O atributo for diz "email", mas o input não tem id nenhum:
<label for="email">
Email
<input type="email" name="email">
</label>
❌ Input aninhado com id incompatível
O atributo for diz "email", mas o id do input é "user-email":
<label for="email">
Email
<input type="email" name="email" id="user-email">
</label>
✅ Corrigir removendo o atributo for (associação implícita)
Como o input está aninhado dentro do label, a associação é automática:
<label>
Email
<input type="email" name="email">
</label>
✅ Corrigir adicionando um id correspondente (associação explícita)
O valor do for e o valor do id são idênticos:
<label for="email">
Email
<input type="email" name="email" id="email">
</label>
✅ Corrigir usando associação explícita sem aninhamento
Se você preferir manter o atributo for, o input não precisa de estar aninhado:
<label for="email">Email</label>
<input type="email" name="email" id="email">
Na maioria dos casos, escolher ou associação implícita ou explícita — em vez de misturar ambas — é a forma mais simples de evitar este erro. Se você combinar ambas, apenas certifique-se de que o valor do for e o valor do id correspondem exatamente.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.