Principio 2/2.5 Modalidades de los input/2.5.3-A
De WCAG Wiki
2.5.3-A. Etiqueta en nombre
- Nivel: A
- Versión: 2.1
- Principio: 2_Operable
- Pauta: 2.5_Modalidades_de_entrada
- Grupo: Interacción
- Subgrupo: Etiquetas_y_nombre_accesible
Discapacidades afectadas
Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.
-
Visual total –
Barrera grave
-
Cognitiva –
Barrera moderada
Enunciado del criterio (Observatorio de Accesibilidad Web)
- Para los componentes de interfaz de usuario, el texto visible que actúa como etiqueta debe coincidir con el nombre accesible o estar incluido dentro de él.
Comprensión del criterio
Descripción resumida
El texto visible en botones, enlaces, campos o iconos debe también aparecer en su nombre accesible, de manera que lectores de pantalla, asistentes de voz y otras ayudas técnicas reconozcan el mismo texto.
Objetivo
Garantizar que el texto que ven los usuarios y el texto que leen o usan las tecnologías de apoyo coincidan para permitir un reconocimiento claro y una activación fiable mediante voz y lectores de pantalla.
Importancia de cumplir el criterio
Si el nombre accesible y el texto visible son diferentes, las personas que utilizan control por voz, lectores de pantalla o que dependen de pistas textuales pueden no localizar o activar correctamente la función.
Referencias WCAG
- Understanding Success Criterion 2.5.3: Label in Name (W3C)
- WCAG Quick Reference – 2.5.3
- ARIA Authoring Practices
Recursos de apoyo
- Controles accesibles con texto visible
- Buenas prácticas ARIA:
aria-labelledbyyaria-label
Evaluación del criterio
Tipo de evaluación
Evaluación Semiautomática
Procedimiento de evaluación
- Identificar controles con texto visible.
- Inspeccionar el nombre accesible en herramientas de accesibilidad.
- Confirmar que el texto visible está incluido en el nombre accesible.
- Verificar etiquetas asociadas con
label,aria-labelledbyoaria-label. - Probar activación con control por voz y lector de pantalla.
Resultado esperado
Los controles se pueden identificar y activar mediante el mismo texto visible que se muestra en la interfaz.
Ejemplo
✅ Accesible: texto visible coincide con nombre accesible
<button>Buscar</button>
✅ Accesible: icono con nombre accesible equivalente al texto esperado
<button aria-label="Buscar"> <svg aria-hidden="true"></svg> </button>
Otras herramientas de evaluación
- Panel Accesibilidad en DevTools
- Pruebas con control por voz (VoiceControl, Dragon)
- NVDA / JAWS / VoiceOver
Ejemplos accesibles y no accesibles creados por alumnos
Comentarios
A continuación se muestran comentarios sobre el criterio 2.5.3-A. Etiqueta en nombre
Loading comments...
