Principio 3/3.3 Assistencia en los input/3.3.2-B

3.3.2-B. Ubicación de etiquetas

3_Comprensible 3.3_Assistencia_en_los_input

• Nivel: A
• Versión: 2.0
• Principio: 3_Comprensible
• Pauta: 3.3_Assistencia_en_los_input
• Grupo: Formularios
• Subgrupo: Etiquetas

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

• Cognitiva – Barrera moderada
• Baja visión – Barrera moderada

Enunciado del criterio (Observatorio de Accesibilidad Web)

• Las etiquetas de los campos del formulario deben colocarse de forma que su relación con el campo sea evidente.

Comprensión del criterio

Descripción resumida

Las etiquetas se deben ubicar cerca del campo correspondiente y de forma consistente para facilitar su asociación.

Objetivo

Asegurar claridad visual y semántica entre etiqueta y campo, reduciendo errores y carga cognitiva.

Importancia de cumplir el criterio

Una etiqueta ubicada lejos o mal alineada confunde a usuarios con discapacidad cognitiva o baja visión y genera errores al completar formularios.

Referencias WCAG

• G162: Positioning labels to maximize predictability of relationships
• Understanding SC 3.3.2

Recursos de apoyo

• WebAIM — Accessible Forms
• GOV.UK Design System — Labels

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

1. Paso 1. Localizar los formularios existentes.
2. Paso 2. Verificar que la posición de las etiquetas respecto a su campo de formulario respectivo resulta obvia.

Resultado esperado

Las etiquetas están próximas a los campos y su relación es clara.

Ejemplo

Etiqueta encima del campo

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

Otras herramientas de evaluación

• Inspección visual: comprobar que las etiquetas están colocadas de forma que su relación con el campo correspondiente sea clara (p. ej., justo encima o a la izquierda del campo, o alineadas consistentemente en formularios).
• Prueba de proximidad y alineación: verificar que la separación entre etiqueta y campo no genera ambigüedad y que la alineación visual facilita la lectura y la asociación inmediata.
• Lectores de pantalla: (NVDA, JAWS, VoiceOver) confirmar que las etiquetas están correctamente asociadas y se anuncian cuando el usuario entra en el campo, incluso si la posición visual está personalizada.
• Inspección del DOM: revisar el uso de <label for> y la estructura del formulario para garantizar que la presentación CSS no rompe la relación visual entre etiqueta y campo.

Comentarios

A continuación se muestran comentarios sobre el criterio 3.3.2-B. Ubicación de etiquetas

Loading comments...