2.5.3 Etiqueta en el nombre
Criterio de éxito oficial
Para los componentes de interfaz de usuario con etiquetas que incluyen texto o imágenes de texto, el nombre contiene el texto que se presenta visualmente.
Nota: la etiqueta visual al principio
Se recomienda que las etiquetas de texto que aparecen con el nombre accesible estén al principio del nombre. Esto facilita la coincidencia con los comandos de voz que los usuarios pronuncian de forma natural.
¿Qué es?
Cuando un usuario de software de reconocimiento de voz ve un botón con el texto «Enviar mensaje», dice «clic Enviar mensaje» para activarlo. El nombre accesible (el texto que usa la tecnología de asistencia) debe contener esa misma etiqueta visible, de lo contrario el comando no funcionará.
El nombre accesible puede contener más texto, pero la etiqueta visible debe estar incluida — idealmente al principio.
Escenarios de reconocimiento de voz
¿Qué pasa cuando el usuario dice el texto visible?
¿Por qué es importante?
Los usuarios de software de reconocimiento de voz (como Dragon NaturallySpeaking) interactúan con la pantalla usando comandos verbales basados en lo que ven. Si el texto visible del botón no coincide con el nombre programático, el usuario no puede activar el control con voz, aunque el botón parezca perfectamente usable visualmente.
Este es un problema frecuente cuando los desarrolladores usan aria-label con textos descriptivos diferentes a la etiqueta visible, o cuando usan identificadores internos como nombres accesibles.
¿Quién se ve afectado?
Usuarios de reconocimiento de voz: Dependen de que el nombre programático contenga la etiqueta visible para poder activar controles con comandos de voz.
Personas con discapacidades motoras: Quienes combinan tecnologías de asistencia que dependen de los nombres accesibles para navegar e interactuar con la interfaz.
Cómo implementar 2.5.3
Coincidencia exacta o el nombre contiene la etiqueta
La regla es simple: el atributo aria-label, aria-labelledby o el texto del elemento debe incluir exactamente el texto visible. Si quieres añadir más contexto, ponlo al final.
<!-- ✓ Nombre = etiqueta visible -->
<button>Enviar</button>
<!-- ✓ Nombre contiene etiqueta visible (etiqueta al inicio) -->
<button aria-label="Enviar mensaje al equipo de soporte">Enviar</button>
<!-- ✗ Nombre no contiene la etiqueta visible -->
<button aria-label="submit-btn">Enviar</button>
<!-- ✗ La etiqueta visible no está al inicio del nombre -->
<button aria-label="Acción principal: Enviar">Enviar</button>Jerarquía para calcular el nombre accesible
aria-labelledby
Referencia a otro elemento por ID. Tiene máxima prioridad.
aria-label
Cadena de texto directa. Anula el contenido de texto del elemento.
Contenido de texto
El texto visible dentro del elemento (o alt de imágenes). Lo más sencillo y recomendado.
La etiqueta visible debe ir al principio
Cuando el nombre contiene más texto que la etiqueta visible, coloca la etiqueta visual al inicio del nombre. Así, los comandos de voz que usan el texto visible activarán correctamente el control.
Ejemplos prácticos
Correcto Botón con texto visible como nombre
Un botón con el texto «Añadir al carrito» tiene ese mismo texto como nombre accesible. El usuario de voz dice «clic Añadir al carrito» y funciona correctamente.
Correcto aria-label que comienza con la etiqueta
Un botón de eliminar muestra «✕ Eliminar» visualmente. Su aria-label es «Eliminar producto del carrito». La etiqueta visible «Eliminar» está al inicio del nombre → cumple el criterio.
Fallo aria-label diferente al texto visible
Un botón muestra «Buscar» visualmente pero tiene aria-label="search-input-trigger". El usuario de voz dice «clic Buscar» pero el software no puede activar el botón porque el nombre no contiene «Buscar».
Fallo La etiqueta no está al inicio
Un botón con texto «Enviar» tiene aria-label="Formulario de contacto: Enviar". Aunque contiene «Enviar», el usuario debe decir «clic Formulario de contacto Enviar» — lo que resulta no intuitivo.
Técnicas recomendadas
| Código | Técnica | Tipo |
|---|---|---|
| G208 | Incluir el texto de la etiqueta visible en el nombre accesible | Suficiente |
| G211 | Que el nombre accesible contenga la etiqueta visible del texto | Suficiente |
Errores comunes
- Usar
aria-labelcon textos técnicos (IDs, slugs) que no coinciden con el texto visible. - Traducir la etiqueta visible a otro idioma en el
aria-label. - Incluir la etiqueta visible al final del
aria-labelen lugar de al inicio. - Usar caracteres especiales o puntuación en el nombre que no aparecen en la etiqueta visible.