Valor incorreto “” para o atributo “for” no elemento “label”: Um ID não pode ser uma string vazia.

O atributo for num elemento <label> indica ao navegador qual controlo de formulário a label descreve. Quando um utilizador clica ou toca na label, o navegador transfere o foco para o controlo associado. Para que isto funcione, o valor de for deve corresponder exatamente ao id de um elemento de formulário como <input>, <textarea>, <select>, ou <button>.

Uma string vazia ("") não é um ID válido de acordo com a especificação HTML. O padrão HTML do WHATWG exige que um valor de atributo id deve conter pelo menos um caráter e não deve conter espaços em branco ASCII. Uma vez que nenhum elemento pode ter um id de string vazia, uma <label> com for="" nunca pode referenciar algo com sucesso, tornando-se tanto markup inválido como uma associação quebrada.

Porque isto é importante

Acessibilidade: Os leitores de ecrã dependem do emparelhamento for/id para anunciar para que serve um controlo de formulário. Uma label com um atributo for vazio não cria associação programática, o que significa que os utilizadores de tecnologia assistiva podem não saber o que um campo está a pedir. Isto impacta diretamente a conformidade WCAG.

Usabilidade: Uma label adequadamente associada expande a área clicável do seu controlo de formulário. Por exemplo, clicar numa label associada a uma checkbox irá alternar a checkbox. Um atributo for vazio quebra este comportamento.

Conformidade com padrões: O validador W3C sinaliza isto porque viola a especificação HTML. Manter o markup válido ajuda a garantir comportamento consistente entre navegadores e torna o seu código à prova de futuro.

Como corrigir

Tem três opções:

1. Definir for para um id válido: Dê ao controlo de formulário associado um id único e referencie-o no atributo for da label.
2. Remover for e usar associação implícita: Envolva o controlo de formulário dentro do elemento <label>. Isto cria uma associação implícita sem necessitar de for ou id.
3. Remover o atributo for: Se a label é puramente decorativa ou não pretende ser associada a um controlo, simplesmente remova o atributo for vazio.

Exemplos

❌ Atributo for vazio (desencadeia o erro)

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

A label não tem associação significativa com o input porque for="" não é uma referência válida.

✅ Correção: Use um par for/id válido

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

O for="username" agora corresponde ao id="username" no input, criando uma associação explícita.

✅ Correção: Use associação implícita através do aninhamento

<label>
  Username:
  <input type="text" name="username">
</label>

Envolver o input dentro da <label> cria uma associação implícita. Não são necessários atributos for ou id.

❌ Múltiplas labels com atributos for vazios

<form>
  <label for="">Email:</label>
  <input type="email" name="email">
  <label for="">Subscribe to newsletter</label>
  <input type="checkbox" name="subscribe">
</form>

✅ Corrigido com associações adequadas

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <label for="subscribe">Subscribe to newsletter</label>
  <input type="checkbox" id="subscribe" name="subscribe">
</form>

Cada id deve ser único dentro do documento, e cada atributo for deve referenciar exatamente um id. Se as suas labels são geradas por uma framework ou CMS com valores for vazios, verifique a configuração do template ou componente para garantir que valores id adequados estão a ser produzidos.

Saiba mais:

MDN Reference

MDN - label - The Label element

→