Valor incorrecto “” para el atributo “for” en el elemento “label”: Un ID no debe ser una cadena vacía.

El atributo for en un elemento <label> le dice al navegador qué control de formulario describe la etiqueta. Cuando un usuario hace clic o toca la etiqueta, el navegador transfiere el foco al control asociado. Para que esto funcione, el valor de for debe coincidir exactamente con el id de un elemento de formulario como <input>, <textarea>, <select> o <button>.

Una cadena vacía ("") no es un ID válido según la especificación HTML. El estándar HTML de WHATWG requiere que el valor del atributo id debe contener al menos un carácter y no debe contener espacios en blanco ASCII. Dado que ningún elemento puede tener un id de cadena vacía, un <label> con for="" nunca puede referenciar exitosamente nada, convirtiéndolo tanto en marcado inválido como en una asociación rota.

Por qué esto importa

Accesibilidad: Los lectores de pantalla dependen del emparejamiento for/id para anunciar para qué sirve un control de formulario. Una etiqueta con un atributo for vacío no crea ninguna asociación programática, lo que significa que los usuarios de tecnología asistiva pueden no saber qué está pidiendo un campo. Esto impacta directamente el cumplimiento de WCAG.

Usabilidad: Una etiqueta asociada correctamente expande el área clicable de su control de formulario. Por ejemplo, hacer clic en una etiqueta asociada con una casilla de verificación activará la casilla. Un atributo for vacío rompe este comportamiento.

Cumplimiento de estándares: El validador W3C marca esto porque viola la especificación HTML. Mantener el marcado válido ayuda a asegurar un comportamiento consistente entre navegadores y hace tu código resistente al futuro.

Cómo solucionarlo

Tienes tres opciones:

1. Establecer for con un id válido: Dale al control de formulario asociado un id único y refiérelo en el atributo for de la etiqueta.
2. Eliminar for y usar asociación implícita: Envuelve el control de formulario dentro del elemento <label>. Esto crea una asociación implícita sin necesidad de for o id en absoluto.
3. Eliminar el atributo for: Si la etiqueta es puramente decorativa o no está destinada a asociarse con un control, simplemente elimina el atributo for vacío.

Ejemplos

❌ Atributo for vacío (desencadena el error)

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

La etiqueta no tiene una asociación significativa con la entrada porque for="" no es una referencia válida.

✅ Solución: Usar un par for/id válido

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

El for="username" ahora coincide con id="username" en la entrada, creando una asociación explícita.

✅ Solución: Usar asociación implícita mediante anidamiento

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

Envolver la entrada dentro del <label> crea una asociación implícita. No se necesitan atributos for o id.

❌ Múltiples etiquetas con atributos for vacíos

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

✅ Solucionado con asociaciones apropiadas

<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 debe ser único dentro del documento, y cada atributo for debe referenciar exactamente un id. Si tus etiquetas son generadas por un framework o CMS con valores for vacíos, verifica la configuración de la plantilla o componente para asegurar que se estén generando valores id apropiados.

Más información:

MDN Reference

MDN - label - The Label element

→