Validación HTML: El elemento "label" no debe aparecer como descendiente del elemento "button".

Acerca de este problema HTML

El elemento <label> tiene un propósito específico en HTML: representa un título para un control de formulario. Puede asociarse con un control a través del atributo for (haciendo referencia al id del control) o envolviendo el control de formulario dentro del propio <label>. Colocar un <label> dentro de un <button> es semánticamente incorrecto porque un botón no es un control de formulario que se beneficie de ser etiquetado de esta manera — el propio contenido de texto del botón o el atributo aria-label ya sirve como su nombre accesible.

La especificación HTML define el modelo de contenido de <button> como contenido de fraseo, pero excluye explícitamente el contenido interactivo. Dado que <label> se clasifica como contenido interactivo (dirige el foco a su control asociado cuando se hace clic), anidar un <label> dentro de un <button> crea un comportamiento ambiguo. Cuando un usuario hace clic en la etiqueta, ¿debería activar el botón, o debería cambiar el foco al control asociado de la etiqueta? Los navegadores manejan este conflicto de forma inconsistente, lo que lleva a experiencias de usuario impredecibles.

Desde el punto de vista de la accesibilidad, este anidamiento es problemático porque los lectores de pantalla pueden anunciar el botón de una manera confusa, potencialmente leyéndolo como si contuviera una etiqueta para otro elemento. El nombre accesible del botón debería provenir directamente de su contenido de texto, no de un <label> anidado.

Para solucionar este problema, simplemente reemplaza el <label> con un <span> o texto plano dentro del botón. Si necesitas dar estilo a parte del texto del botón de manera diferente, los elementos <span> son perfectamente válidos dentro de botones.

Ejemplos

❌ Inválido: `<label>` dentro de un `<button>`

<button type="submit">
  <label>Submit Form</label>
</button>

❌ Inválido: `<label>` con un atributo `for` dentro de un `<button>`

<button type="button">
  <label for="file-input">Choose File</label>
</button>
<input type="file" id="file-input">

✅ Corregido: Usar texto plano dentro del `<button>`

<button type="submit">
  Submit Form
</button>

✅ Corregido: Usar un `<span>` para propósitos de estilo

<button type="submit">
  <span class="button-text">Submit Form</span>
</button>

✅ Corregido: Separar el `<label>` y el `<button>`

Si necesitas una etiqueta para describir el propósito de un botón en un formulario, coloca el <label> fuera del botón y usa el atributo for para asociarlo con una entrada relacionada, o usa aria-label en el propio botón:

<label for="username">Username</label>
<input type="text" id="username">
<button type="submit" aria-label="Submit the username form">
  Submit
</button>