Addaw, ir a inicio Donar

Técnica HTML WCAG 2.2

H44Asociar cada campo de formulario con su etiqueta label

Nombre oficial en el W3C: Usar elementos label para asociar etiquetas de texto con controles de formulario

En pocas palabras

Cada campo de un formulario necesita una etiqueta que diga qué hay que escribir o elegir. Esa etiqueta se marca con el elemento label. Su atributo for debe coincidir con el id del campo. Así el lector de pantalla la anuncia y, al pulsar el texto, se activa el campo.

Por qué es importante

  • Las personas ciegas usan lectores de pantalla (programas que leen en voz alta lo que hay en la pantalla). Sin la unión, al llegar a un campo oyen solo «editar» y no saben qué escribir.
  • Las personas con poca precisión en las manos pueden pulsar el texto de la etiqueta para activar el campo. Es una zona de clic mucho mayor, muy útil en casillas pequeñas.
  • La etiqueta visible ayuda a todos a rellenar el formulario sin errores.

Cómo se hace

  1. Dé a cada campo un id único en la página: id="correo".
  2. Escriba su etiqueta en un <label> con for igual a ese id: for="correo".
  3. Ponga la etiqueta antes del campo en cajas de texto y listas. En casillas y botones de opción, póngala después.
  4. Haga visible la etiqueta. El texto de ejemplo dentro del campo (placeholder) no la sustituye: desaparece al escribir.
  5. Revise los id al copiar bloques de formulario. Un id repetido o mal escrito rompe la unión.

Ejemplo práctico

Sirve para cualquier formulario: boletín, contacto, registro o cita previa. Es uno de los fallos más repetidos en las auditorías. El texto de la etiqueta se ve junto al campo, pero no está unido a él en el 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 en lugar de codpostal). El texto de la casilla está en un span. Los campos se quedan sin nombre: el lector de pantalla solo dice «editar» o «casilla de verificación, no marcada». Y al pulsar el texto no se activa el campo.

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.

Ver el código del ejemplo incorrecto
<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>

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

Cada campo tiene un id único y su label lo indica en for. En la casilla, la etiqueta va después del control. Ahora cada campo tiene nombre. Al pulsar el texto, el campo recibe el foco o la casilla se marca, así que la zona de clic es mayor.

Pruébelo aquí:

Ver el código del ejemplo correcto
<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>

Cómo comprobarlo

Ratón y teclado

  1. Haga clic en el texto de cada etiqueta. El campo debe recibir el foco. Las casillas y botones de opción deben cambiar de estado.
  2. Recorra el formulario con el tabulador. Compruebe que la etiqueta visible está junto al campo que recibe el foco.

Lector de pantalla (NVDA o VoiceOver)

  1. Recorra los campos con el tabulador.
  2. Compruebe 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

  1. Abra las herramientas del navegador (F12) e inspeccione cada campo en la pestaña Accesibilidad.
  2. Compruebe que «Name» tiene valor y que viene de «label (for=)» o similar, no de title ni de placeholder.
  3. Verifique que el valor de for coincide exactamente con un id único de la página, también en mayúsculas y minúsculas.

Validación automática

  1. La regla label de axe DevTools y el error «Missing form label» de WAVE detectan campos sin nombre. Lighthouse incluye la misma comprobación de axe.
  2. No detectan una etiqueta unida al campo equivocado ni un texto que describa mal el campo. Eso se revisa a mano.

Errores frecuentes en auditorías

  • Un for que no coincide con el id, tras copiar y pegar un bloque del formulario o al generar id automáticos.
  • Usar solo el placeholder como etiqueta. Desaparece al escribir.
  • id repetidos en la página, por ejemplo el mismo formulario de boletín en la cabecera y en el pie. La etiqueta queda unida solo al primer campo.
  • Texto de casillas de aceptación en un span o un p suelto, sin label.

Para saber más, en nuestro blog

Ver el texto completo del W3C (traducción al español)

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:

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

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

  1. Comprobar que hay un elemento label que identifica la finalidad del control después del elemento input.
  2. Comprobar que el atributo for del elemento label coincide con el id del elemento input.
  3. 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 cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.

Solicitar una auditoría

Basado en la técnica H44 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.