Técnica HTML WCAG 2.2

H44Usar elementos label para asociar etiquetas de texto con controles de formulario

En resumen

Esta técnica pide asociar explícitamente cada campo de formulario con su etiqueta mediante un elemento label cuyo atributo for coincida con el id del control. Así los lectores de pantalla anuncian la etiqueta al llegar al campo y se amplía el área en la que se puede hacer clic, lo que ayuda a las personas con dificultades motrices. Para el criterio 3.3.2 la etiqueta debe ser visible; para 1.1.1, 1.3.1 y 4.1.2 basta con que exista.

Ejemplo práctico

Se aplica a cualquier formulario: suscripción a un boletín, contacto, registro o cita previa. Es uno de los fallos más repetidos en auditorías: el texto de la etiqueta se ve junto al campo, pero no está asociado a él por código.

Así no: Etiquetas visibles pero no asociadas

El primer label no tiene for, el segundo apunta a un id que no existe (cp frente a codpostal) y el texto de la casilla es un span. Los campos no tienen nombre accesible: el lector de pantalla anuncia solo «editar» o «casilla de verificación, no marcada», y al hacer clic en el texto no se activa el control.

<form action="#">
  <p>
    <label>Correo electrónico</label><br>
    <input type="email" name="correo" autocomplete="email">
  </p>
  <p>
    <label for="cp">Código postal</label><br>
    <input type="text" name="cp" id="codpostal" inputmode="numeric" autocomplete="postal-code">
  </p>
  <p>
    <input type="checkbox" name="privacidad">
    <span>He leído y acepto la política de privacidad</span>
  </p>
  <button type="submit">Suscribirme al boletín</button>
</form>

Captura de pantalla del ejemplo incorrecto: Etiquetas visibles pero no asociadas — Así se ve el ejemplo incorrecto.

La demostración contiene, a propósito, el error de accesibilidad que se explica.

Así sí: label con for igual al id del control

Cada control tiene un id único y su label lo referencia con for; en la casilla, la etiqueta va después del control. Ahora cada campo tiene nombre accesible y al pulsar el texto se enfoca o marca el control, lo que además amplía la zona de clic.

<form action="#">
  <p>
    <label for="correo">Correo electrónico</label><br>
    <input type="email" name="correo" id="correo" autocomplete="email">
  </p>
  <p>
    <label for="cp">Código postal</label><br>
    <input type="text" name="cp" id="cp" inputmode="numeric" autocomplete="postal-code">
  </p>
  <p>
    <input type="checkbox" name="privacidad" id="privacidad">
    <label for="privacidad">He leído y acepto la política de privacidad</label>
  </p>
  <button type="submit">Suscribirme al boletín</button>
</form>

Pruébelo aquí:

Cómo comprobarlo

Ratón y teclado

Hacer clic en el texto de cada etiqueta: el campo asociado debe recibir el foco y, en casillas y botones de opción, cambiar de estado.
Recorrer el formulario con el tabulador y comprobar que la etiqueta visible está junto al campo que recibe el foco.

Lector de pantalla (NVDA o VoiceOver)

Recorrer los campos con el tabulador.
Comprobar que cada campo se anuncia con el texto de su etiqueta visible.

Debería anunciar: «Correo electrónico, editar» y «He leído y acepto la política de privacidad, casilla de verificación, no marcada»

Herramientas del navegador

Abrir las herramientas de desarrollo (F12) e inspeccionar cada campo en la pestaña Accesibilidad.
Comprobar que «Name» tiene valor y que su origen es «label (for=)» o similar, no title ni placeholder.
Verificar que el valor de for coincide exactamente (mayúsculas incluidas) con un id único de la página.

Validación automática

La regla label de axe DevTools y el error «Missing form label» de WAVE detectan campos sin nombre accesible; Lighthouse incluye la misma comprobación de axe.
No detectan una etiqueta asociada al campo equivocado ni un texto de etiqueta que no describa bien el campo: eso se revisa a mano.

Errores frecuentes en auditorías

Atributo for que no coincide con el id tras copiar y pegar un bloque del formulario o al generar id dinámicos.
Usar solo placeholder como etiqueta, que desaparece al escribir.
id duplicados en la página (por ejemplo, el mismo formulario de boletín en la cabecera y en el pie), de modo que la etiqueta se asocia al primer campo.
Texto de casillas de aceptación en un span o p independiente, sin label.

Técnica completa: traducción al español del texto del W3C

Aplicabilidad

Controles HTML que usan etiquetas externas

Descripción

El objetivo de esta técnica es usar el elemento label para asociar explícitamente un control de formulario con una etiqueta. Un label se vincula a un control de formulario concreto mediante el atributo for. El valor del atributo for debe ser el mismo que el valor del atributo id del control de formulario.

El atributo id puede tener el mismo valor que el atributo name, pero deben indicarse ambos, y el id debe ser único en la página web.

Esta técnica es suficiente para los criterios de conformidad 1.1.1 (Contenido no textual), 1.3.1 (Información y relaciones) y 4.1.2 (Nombre, función y valor) tanto si el elemento label es visible como si no lo es. Es decir, puede ocultarse mediante CSS. Sin embargo, para el criterio de conformidad 3.3.2 (Etiquetas o instrucciones), el elemento label debe ser visible, ya que ofrece ayuda a todos los usuarios que necesitan entender la finalidad del campo.

Una ventaja adicional de esta técnica es que el área en la que se puede hacer clic para el control es mayor, puesto que hacer clic tanto en la etiqueta como en el control activa el control. Esto puede resultar útil a los usuarios con dificultades de control motriz.

Tenga en cuenta que el label se coloca después de los elementos input de type="checkbox" y type="radio".

Los elementos que usan etiquetas asociadas explícitamente son:

campos de entrada de texto:
- input type="date"
- input type="datetime-local"
- input type="email"
- input type="month"
- input type="number"
- input type="password"
- input type="search"
- input type="tel"
- input type="text"
- input type="time"
- input type="url"
- input type="week"
input type="checkbox"
input type="color"
input type="file"
input type="radio"
input type="range"
select
textarea

El elemento label no se usa con los siguientes elementos:

button (la etiqueta la proporciona el contenido)
input type="button" (la etiqueta la proporciona el contenido)
input type="hidden"
input type="image" (la etiqueta la proporciona el atributo alt)
input type="reset" (la etiqueta la proporciona el atributo value)
input type="submit" (la etiqueta la proporciona el atributo value)

Ejemplos

Un campo de entrada de texto

El campo de texto de este ejemplo tiene la etiqueta explícita "First name:" (Nombre:). El atributo for del elemento label coincide con el atributo id del elemento input.

<label for="firstname">First name:</label> 
<input id="firstname" name="firstname" type="text">

Una casilla de verificación

<input checked id="markuplang" name="computerskills" type="checkbox">
<label for="markuplang">HTML</label>

Un grupo de botones de opción

Un grupo pequeño de botones de opción relacionados, con una descripción clara y etiquetas para cada elemento individual.

<h1>Doughnut Selection</h1>
<form action="/buy-doughnuts" method="post">
  <fieldset>
    <legend>Pick the doughnut you would like</legend>
    <input id="dn-choc" name="flavor" type="radio" value="chocolate">
    <label for="dn-choc">Chocolate</label>
    <input id="dn-cream" name="flavor" type="radio" value="cream">
    <label for="dn-cream">Cream Filled</label>
    <input id="dn-raspberry" name="flavor" type="radio" value="raspberry">
    <label for="dn-raspberry">Raspberry Filled</label>
  </fieldset>
  <input type="submit" value="Purchase Your Doughnut">
</form>

Pruebas

Procedimiento

Para todos los elementos input de tipo text, file o password, para todos los elementos textarea y para todos los elementos select de la página web:

Comprobar que hay un elemento label que identifica la finalidad del control antes del elemento input, textarea o select
Comprobar que el atributo for del elemento label coincide con el id del elemento input, textarea o select.
Comprobar que el elemento label es visible.

Para todos los elementos input de tipo checkbox o radio de la página web:

Comprobar que hay un elemento label que identifica la finalidad del control después del elemento input.
Comprobar que el atributo for del elemento label coincide con el id del elemento input.
Comprobar que el elemento label es visible.

Resultados esperados

Las comprobaciones n.º 1 y n.º 2 son verdaderas.
Para el criterio de conformidad 3.3.2 (Etiquetas o instrucciones), la comprobación n.º 3 también es verdadera.

Recursos

Cómo lo comprobamos en ADDAW

En las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.

Solicitar una auditoría

Fuente y licencia

Traducción al español, no oficial, realizada por ADDAW a partir de la técnica H44 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.