O valor do atributo “for” do elemento “label” deve ser o ID de um controlo de formulário não oculto.

O elemento <label> associa texto descritivo a um controlo de formulário específico, permitindo aos utilizadores clicar no rótulo para focar ou ativar o input associado. O atributo for cria esta ligação ao referenciar o id do controlo de formulário alvo. Quando o id referenciado não corresponde a um controlo de formulário válido e não oculto, o rótulo torna-se órfão — não está associado a nada significativo.

O validador W3C gera este erro em vários cenários:

• O atributo for referencia um id que não existe no documento.
• O atributo for referencia um elemento que não é um elemento rotulável (como um <div> ou <span>).
• O atributo for referencia um <input type="hidden">, que não é um controlo de formulário visível e não pode ser rotulado.
• Há um erro tipográfico ou incompatibilidade entre o valor for e o id do elemento pretendido.

Os elementos rotuláveis em HTML incluem <input> (exceto type="hidden"), <select>, <textarea>, <button>, <meter>, <output>, e <progress>.

Isto é importante para a acessibilidade porque os leitores de ecrã dependem da associação for/id para anunciar o que cada controlo de formulário representa. Sem uma associação válida, os utilizadores que dependem de tecnologia assistiva podem não compreender o que um campo de formulário está a pedir. Também impacta a usabilidade — um rótulo devidamente ligado expande a área clicável do controlo de formulário, tornando-o mais fácil de interagir, especialmente em dispositivos tácteis e para utilizadores com deficiências motoras.

Para corrigir este problema, verifique se o valor do atributo for coincide exatamente com o id de um controlo de formulário visível e rotulável. Se está a rotular um input oculto, considere se o rótulo é necessário (inputs ocultos não são visíveis ao utilizador). Se o elemento alvo não é um controlo de formulário, mude-o para o elemento de formulário apropriado ou use uma abordagem diferente como aria-labelledby.

Exemplos

❌ for referencia um ID inexistente

<label for="username">Username</label>
<input id="user-name" type="text">

O valor for "username" não coincide com o id do input "user-name".

✅ Corrigido: for e id coincidentes

<label for="username">Username</label>
<input id="username" type="text">

❌ for referencia um input oculto

<label for="token">Token</label>
<input id="token" type="hidden" value="abc123">

Um <input type="hidden"> não é um controlo de formulário visível e não pode ser rotulado.

✅ Corrigido: remover o rótulo desnecessário

<input id="token" type="hidden" value="abc123">

Inputs ocultos não precisam de rótulos uma vez que os utilizadores nunca interagem com eles diretamente.

❌ for referencia um elemento não rotulável

<label for="info">Information</label>
<div id="info">Some details here</div>

Um <div> não é um elemento rotulável, portanto a associação for é inválida.

✅ Corrigido: usar um controlo de formulário adequado ou rotulação implícita

<label for="info">Information</label>
<textarea id="info"></textarea>

❌ for referencia um elemento dentro de outro controlo de formulário

<label for="opt">Choose one</label>
<select>
  <option id="opt" value="a">Option A</option>
</select>

Um elemento <option> não é um elemento rotulável. O rótulo deve apontar para o <select>.

✅ Corrigido: referenciar o elemento <select>

<label for="choice">Choose one</label>
<select id="choice">
  <option value="a">Option A</option>
</select>

Usar rotulação implícita como alternativa

Em vez de usar o atributo for, pode envolver o controlo de formulário dentro do elemento <label>. Isto cria uma associação implícita sem necessitar de for ou id:

<label>
  Age
  <input type="number">
</label>

Esta abordagem evita completamente o problema de incompatibilidade for/id e é igualmente válida para acessibilidade.

Encontre problemas como este automaticamente

O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.

Iniciar teste gratuito Ver preços