El valor del atributo “for” del elemento “label” debe ser el ID de un control de formulario no oculto.

El elemento <label> asocia texto descriptivo con un control de formulario específico, permitiendo a los usuarios hacer clic en la etiqueta para enfocar o activar la entrada asociada. El atributo for crea este enlace haciendo referencia al id del control de formulario objetivo. Cuando el id referenciado no corresponde a un control de formulario válido y no oculto, la etiqueta queda huérfana — no está asociada con nada significativo.

El validador de W3C genera este error en varios escenarios:

• El atributo for hace referencia a un id que no existe en el documento.
• El atributo for hace referencia a un elemento que no es un elemento etiquetable (como un <div> o <span>).
• El atributo for hace referencia a un <input type="hidden">, que no es un control de formulario visible y no puede ser etiquetado.
• Hay un error tipográfico o discrepancia entre el valor for y el id del elemento previsto.

Los elementos etiquetables en HTML incluyen <input> (excepto type="hidden"), <select>, <textarea>, <button>, <meter>, <output>, y <progress>.

Esto es importante para la accesibilidad porque los lectores de pantalla dependen de la asociación for/id para anunciar lo que representa cada control de formulario. Sin una asociación válida, los usuarios que dependen de tecnología de asistencia pueden no entender lo que un campo de formulario está pidiendo. También impacta la usabilidad — una etiqueta correctamente enlazada amplía el área clickeable del control de formulario, facilitando la interacción, especialmente en dispositivos táctiles y para usuarios con discapacidades motoras.

Para solucionar este problema, verifica que el valor del atributo for coincida exactamente con el id de un control de formulario visible y etiquetable. Si estás etiquetando una entrada oculta, considera si la etiqueta es necesaria en absoluto (las entradas ocultas no están dirigidas al usuario). Si el elemento objetivo no es un control de formulario, cámbialo al elemento de formulario apropiado o usa un enfoque diferente como aria-labelledby.

Ejemplos

❌ for hace referencia a un ID no existente

<label for="username">Nombre de usuario</label>
<input id="user-name" type="text">

El valor for "username" no coincide con el id de la entrada que es "user-name".

✅ Solucionado: for e id coincidentes

<label for="username">Nombre de usuario</label>
<input id="username" type="text">

❌ for hace referencia a una entrada oculta

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

Un <input type="hidden"> no es un control de formulario visible y no puede ser etiquetado.

✅ Solucionado: eliminar la etiqueta innecesaria

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

Las entradas ocultas no necesitan etiquetas ya que los usuarios nunca interactúan con ellas directamente.

❌ for hace referencia a un elemento no etiquetable

<label for="info">Información</label>
<div id="info">Algunos detalles aquí</div>

Un <div> no es un elemento etiquetable, por lo que la asociación for es inválida.

✅ Solucionado: usar un control de formulario apropiado o etiquetado implícito

<label for="info">Información</label>
<textarea id="info"></textarea>

❌ for hace referencia a un elemento dentro de otro control de formulario

<label for="opt">Elige una</label>
<select>
  <option id="opt" value="a">Opción A</option>
</select>

Un elemento <option> no es un elemento etiquetable. La etiqueta debería apuntar al <select>.

✅ Solucionado: hacer referencia al elemento <select>

<label for="choice">Elige una</label>
<select id="choice">
  <option value="a">Opción A</option>
</select>

Usar etiquetado implícito como alternativa

En lugar de usar el atributo for, puedes envolver el control de formulario dentro del elemento <label>. Esto crea una asociación implícita sin necesidad de for o id en absoluto:

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

Este enfoque evita completamente el problema de discrepancia for/id y es igualmente válido para accesibilidad.

Encuentra problemas como este automáticamente

Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.

Iniciar prueba gratuita Ver precios