Addaw, ir a inicio Donar

Técnica Técnicas generales WCAG 2.2

G162Colocar las etiquetas de los formularios donde se esperan

Nombre oficial en el W3C: Colocar las etiquetas de forma que las relaciones sean lo más predecibles posible

En pocas palabras

Cada campo de un formulario debe tener su etiqueta visible en el sitio habitual. En los campos de texto y las listas, encima o a la izquierda del campo. En las casillas de verificación y los botones de opción, justo a la derecha. Así se sabe sin dudar qué texto va con cada campo.

Por qué es importante

Si la etiqueta está lejos o en un sitio raro, cuesta saber a qué campo corresponde. Le pasa sobre todo a quien usa una lupa de pantalla (programa que amplía una parte de la pantalla) y solo ve un trozo cada vez.

También ayuda a personas con discapacidad cognitiva y a cualquiera que rellena un formulario largo, como una solicitud de cita previa. Leer primero la etiqueta y luego el dato facilita revisar lo escrito.

Cómo se hace

  1. Ponga la etiqueta de los campos de texto, listas desplegables y áreas de texto justo encima o a la izquierda del campo.
  2. Ponga la etiqueta de las casillas de verificación y de los botones de opción justo a la derecha.
  3. Alinee los campos y las etiquetas en columna. Así se encuentran rápido aunque los campos tengan distinto ancho.
  4. En idiomas que se leen de derecha a izquierda, como el árabe, invierta los lados.
  5. Además de colocarla bien, asocie la etiqueta al campo en el código con <label for>.

Cómo comprobarlo

  1. Recorra todos los campos del formulario y compruebe que cada uno tiene una etiqueta visible.
  2. En casillas de verificación y botones de opción, verifique que la etiqueta está justo después, a la derecha.
  3. En el resto de campos, verifique que la etiqueta está justo antes, encima o a la izquierda.
  4. Amplíe la página al 200 % o más y compruebe que etiqueta y campo siguen viéndose juntos.

Ejemplo

Etiqueta encima del campo de texto y a la derecha de la casilla.

<label for="email">Correo electrónico</label>
<input type="email" id="email" name="email">

<input type="checkbox" id="avisos" name="avisos">
<label for="avisos">Quiero recibir avisos por correo</label>
Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica G162 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.

Aplicabilidad

Todas las tecnologías que admiten formularios

Descripción

Cuando las etiquetas de los campos de formulario se colocan donde el usuario espera encontrarlas visualmente, resulta más fácil comprender los formularios complejos y localizar campos concretos. Las etiquetas de la mayoría de los campos se colocan inmediatamente antes del campo, es decir, en los idiomas que se escriben de izquierda a derecha, a la izquierda del campo o encima de él, y en los idiomas que se escriben de derecha a izquierda, a la derecha del campo o encima de él. Las etiquetas de los botones de opción y de las casillas de verificación se colocan después del campo.

Estas posiciones se definen así porque son la ubicación habitual (y, por tanto, la más predecible) de la etiqueta de los campos, los botones de opción y las casillas de verificación.

Las etiquetas se colocan antes de los campos de entrada porque la longitud de los campos a veces varía. Colocarlas antes permite que las etiquetas queden alineadas. También hace que las etiquetas sean más fáciles de localizar con un magnificador de pantalla, ya que están inmediatamente antes del campo y además pueden encontrarse en una columna vertical (cuando el inicio de los campos está alineado verticalmente). Por último, si el campo contiene datos, es más fácil comprender o revisar los datos si se lee primero la etiqueta y después el contenido, y no al revés.

Las casillas de verificación y los botones de opción tienen una anchura uniforme, mientras que sus etiquetas a menudo no la tienen. Por ello, colocar primero el botón de opción o la casilla de verificación permite que tanto los botones como las etiquetas queden alineados verticalmente.

Ejemplos

Etiquetas encima de los campos de texto

Dos campos de formulario con las etiquetas colocadas inmediatamente encima de ellos.

Etiquetas a la izquierda de los campos de texto

Dos campos de formulario con las etiquetas colocadas inmediatamente a la izquierda.

Etiquetas a la derecha de los botones de opción

Un grupo de controles de formulario contiene dos botones de opción con las etiquetas colocadas a la derecha de los botones de opción.

Pruebas

Procedimiento

Para cada campo de formulario de la página web:

  1. Comprobar que el campo de formulario tiene una etiqueta visible.
  2. Si el campo de formulario es una casilla de verificación o un botón de opción, comprobar que la etiqueta está inmediatamente después del campo.
  3. Si el campo de formulario no es una casilla de verificación ni un botón de opción, comprobar que la etiqueta está inmediatamente antes del campo.

Resultados esperados

  • Todas las comprobaciones son verdaderas.

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 G162 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.