Principio 2/2.4 Navegable/2.4.6-B
De WCAG Wiki
< Principio 2 | 2.4 Navegable
2.4.6-B. Etiquetas de controles
- Nivel: AA
- Versión: 2.0
- Principio: 2_Operable
- Pauta: 2.4_Navegacion_clara
- Grupo: Estructura_de_contenido
- Subgrupo: Etiquetas_y_formularios
Discapacidades afectadas
Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.
-
Cognitiva –
Barrera grave
-
Baja visión –
Barrera moderada
-
Visual total –
Barrera leve
Enunciado del criterio (Observatorio de Accesibilidad Web)
- Las etiquetas de los controles de formulario y elementos de interacción como los botones, deben identificar cuál es su propósito.
Comprensión del criterio
Descripción resumida
Cada control interactivo (botones, tabuladores, etc...) debe incluir una etiqueta visible o accesible que describa su función, permitiendo a los usuarios comprender rápidamente cómo interactuar.
Objetivo
Garantizar que los usuarios identifiquen correctamente la acción o el propósito de cada control, sin necesidad de exploración adicional o suposiciones.
Importancia de cumplir el criterio
Etiquetas claras mejoran la usabilidad, reducen errores, y permiten una interacción eficiente para personas con discapacidad cognitiva, usuarios de lectores de pantalla y quienes navegan por voz.
Referencias WCAG
Recursos de apoyo
Consejos
- Patrones
<label>,aria-labelyaria-labelledby - Guía de formularios accesibles (WebAIM)
- Patterns WAI-ARIA
Evaluación del criterio
Tipo de evaluación
Evaluación Semiautomática
Procedimiento de evaluación
- Paso 1. Localizar los elementos de interacción existentes.
- Paso 2. Verificar que su etiqueta correspondiente identifica de manera clara el propósito de dicho elemento de interacción.
Resultado esperado
Cada control cuenta con una etiqueta clara, visible o programáticamente accesible y correctamente asociada, que facilita su identificación y uso.
Ejemplo
Ejemplo accesible: control con etiqueta asociada.
<label for="buscar">Buscar</label> <input id="buscar" name="q" type="search">
Otras herramientas de evaluación
- Inspección del formulario: comprobar que todos los controles (campos, botones, selectores, conmutadores, menús, etc.) tienen etiquetas visibles que describen claramente su propósito.
- Revisión del código: verificar la asociación correcta entre etiqueta y control mediante
<label for="">,idcoincidente o atributos accesibles comoaria-labeloaria-labelledbycuando sea necesario. - Lectores de pantalla: (NVDA, JAWS, VoiceOver) navegar por los controles para confirmar que el propósito se anuncia correctamente y sin ambigüedad.
- Prueba funcional: revisar que las etiquetas permanecen visibles (no solo placeholders) y que no desaparecen al interactuar, permitiendo entender el propósito del campo en todo momento.
Ejemplos accesibles y no accesibles creados por alumnos
Comentarios
A continuación se muestran comentarios sobre el criterio 2.4.6-B. Etiquetas de controles
Loading comments...
