G162Colocar las etiquetas de forma que las relaciones sean lo más predecibles posible

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

Etiquetas a la izquierda de los campos de texto

Etiquetas a la derecha de los botones de opción

Pruebas

Técnicas relacionadas

• H44: Usar elementos label para asociar etiquetas de texto con controles de formulario
• H71: Proporcionar una descripción para los grupos de controles de formulario con los elementos fieldset y legend
• H65: Usar el atributo title para identificar los controles de formulario cuando no se puede usar el elemento label
• G131: Proporcionar etiquetas descriptivas
• G167: Usar un botón adyacente para etiquetar el propósito de un campo

Recursos

• Label Positioning (posición de las etiquetas)
• Creating Accessible Forms (crear formularios accesibles)
• Accessible Forms (formularios accesibles)
• Web Application Form Design (diseño de formularios en aplicaciones web)
• Label Placement in Forms (colocación de las etiquetas en los formularios)