Verificação HTML: Elemento "label" com múltiplos descendentes rotulávies.

Sobre este problema HTML

A especificação HTML define um <label> como uma legenda para um controlo de formulário específico. Quando você usa a técnica de rotulagem implícita — envolvendo um controlo de formulário dentro de um <label> — o navegador associa automaticamente o texto do rótulo com esse único controlo. Se múltiplos elementos rotulávies aparecem dentro do mesmo <label>, a associação torna-se ambígua. Os navegadores podem escolher o primeiro, o último, ou comportar-se de forma inconsistente entre implementações.

Os elementos rotulávies incluem <input> (exceto type="hidden"), <select>, <textarea>, <button>, <meter>, <output>, e <progress>. Qualquer combinação de dois ou mais destes dentro de um único <label> desencadeia este erro de validação.

Isto é importante para a acessibilidade. Os leitores de ecrã dependem da associação rótulo-para-controlo para anunciar para que serve um campo de formulário. Quando a associação é ambígua, a tecnologia assistiva pode anunciar o rótulo errado para um controlo, ou saltar um completamente, deixando os utilizadores confusos sobre que informação inserir.

Para corrigir esta questão, divida o <label> para que cada um envolva exatamente um controlo de formulário, ou use o atributo for para associar explicitamente cada rótulo com um controlo pelo seu id.

Exemplos

❌ Incorreto: múltiplos elementos rotulávies dentro de um rótulo

<label>
  Name
  <input type="text" name="name">
  Age
  <input type="number" name="age">
</label>

O único <label> contém dois elementos <input>, então o navegador não consegue determinar a que controlo o texto do rótulo se refere.

✅ Correto: rótulos separados para cada controlo

<label>
  Name
  <input type="text" name="name">
</label>
<label>
  Age
  <input type="number" name="age">
</label>

❌ Incorreto: misturar diferentes elementos rotulávies dentro de um rótulo

<label>
  Preferences
  <select name="color">
    <option>Red</option>
    <option>Blue</option>
  </select>
  <textarea name="notes"></textarea>
</label>

✅ Correto: usar atributos `for` explícitos

<label for="color">Favorite color</label>
<select id="color" name="color">
  <option>Red</option>
  <option>Blue</option>
</select>

<label for="notes">Notes</label>
<textarea id="notes" name="notes"></textarea>

✅ Correto: único descendente rotulável com associação implícita

Este é o padrão que funciona perfeitamente — um <label> envolvendo exatamente um controlo:

<label>
  Age
  <select name="age">
    <option>Young</option>
    <option>Old</option>
  </select>
</label>

❌ Incorreto: inputs ocultos não contam, mas outros inputs sim

Note que <input type="hidden"> não é um elemento rotulável, então não vai desencadear este erro por si só. No entanto, combinar um input visível com outro controlo rotulável ainda causa a questão:

<label>
  Subscribe
  <input type="checkbox" name="subscribe">
  <button type="button">More info</button>
</label>

✅ Correto: separar cada controlo no seu próprio rótulo

<label>
  Subscribe
  <input type="checkbox" name="subscribe">
</label>
<button type="button">More info</button>

Neste caso, o <button> não precisa de um <label> de todo — o seu conteúdo de texto serve como o seu nome acessível. Apenas controlos de formulário que precisam de uma legenda visível devem ser envolvidos num <label>.