Regla de accesibilidad: Los elementos deben tener su texto visible como parte de su nombre accesible

Acerca de esta regla de accesibilidad

Cuando un elemento interactivo muestra texto visible — como un botón que dice “Enviar” — los usuarios naturalmente esperan que ese texto sea el nombre del elemento. Sin embargo, los desarrolladores a veces usan aria-label o aria-labelledby para establecer un nombre accesible que difiere del texto visible. Esto crea una desconexión: lo que ven los usuarios con visión y lo que anuncian las tecnologías de asistencia se convierten en dos cosas diferentes.

Este es un problema serio de accesibilidad que afecta principalmente a usuarios de entrada de voz. Estos usuarios interactúan con páginas web diciendo los nombres de los controles que ven en pantalla. Si alguien ve un enlace etiquetado como “Página Siguiente” y dice “hacer clic en Página Siguiente,” pero el nombre accesible es en realidad “OK,” el comando de voz falla. El usuario no tiene forma de conocer el nombre programático correcto, lo que lleva a frustración y a la incapacidad de usar la interfaz.

Este problema también afecta a usuarios de lectores de pantalla y usuarios con discapacidades cognitivas. Cuando un lector de pantalla anuncia un nombre que no coincide con la etiqueta visible, crea confusión — el usuario puede no estar seguro de que esté enfocado en el elemento correcto. Para usuarios con discapacidades cognitivas que dependen de interfaces consistentes y predecibles, esta falta de correspondencia agrega complejidad innecesaria.

Esta regla verifica el cumplimiento con el Criterio de Éxito 2.5.3 de WCAG 2.1: Etiqueta en el Nombre (Nivel A). Este criterio requiere que cuando un componente de interfaz de usuario tiene una etiqueta de texto visible, el nombre accesible debe contener ese texto visible. La intención es asegurar que las palabras que los usuarios ven en pantalla puedan usarse para interactuar con el componente, independientemente del método de entrada.

La regla se aplica a elementos que cumplen las tres condiciones:

El elemento tiene un rol de widget que soporta nombre desde contenido — específicamente: button, checkbox, gridcell, link, menuitem, menuitemcheckbox, menuitemradio, option, radio, searchbox, switch, tab, o treeitem.
El elemento tiene contenido de texto visible.
El elemento tiene un atributo aria-label o aria-labelledby que anula el nombre accesible predeterminado.

Al evaluar la coincidencia, se ignoran los espacios en blanco al inicio y al final, y la comparación no distingue entre mayúsculas y minúsculas. El texto visible completo debe coincidir exactamente con el nombre accesible o estar completamente contenido dentro de él.

Cómo solucionarlo

Para resolver este problema:

Haz que el nombre accesible incluya el texto visible completo. Si el texto visible del elemento es “Página Siguiente,” el aria-label debe contener “Página Siguiente” — no solo parte de él, y no algo completamente diferente.
Comienza el nombre accesible con el texto visible. Aunque no es estrictamente requerido, es una buena práctica. Esto ayuda a los usuarios de entrada de voz que pueden solo decir el comienzo de una etiqueta.
Considera eliminar el aria-label por completo. Si el texto visible por sí solo es un nombre accesible suficiente, puede que no necesites una anulación en absoluto. La solución más simple es a menudo dejar que el elemento derive su nombre de su contenido de forma natural.

Ejemplos

Fallo: El nombre accesible no coincide con el texto visible

El texto visible dice “Siguiente” pero el nombre accesible es “OK”:

<div role="link" aria-label="OK">Siguiente</div>

Fallo: El nombre accesible solo contiene parte del texto visible

El texto visible es “La etiqueta completa” pero el nombre accesible es “la completa,” que no incluye el texto visible completo:

<button aria-label="la completa">La etiqueta completa</button>

Éxito: El nombre accesible coincide con el texto visible

El aria-label coincide con el texto visible (se ignoran los espacios al final y las diferencias de mayúsculas):

<div role="link" aria-label="Página Siguiente">página siguiente</div>

Éxito: El nombre accesible contiene el texto visible completo

El texto visible “Página Siguiente” está completamente contenido dentro del nombre accesible:

<button aria-label="Página Siguiente en la lista">Página Siguiente</button>

Éxito: No se necesita anulación de aria-label

Cuando el texto visible ya es un buen nombre accesible, simplemente omite el aria-label:

<button>Página Siguiente</button>

Éxito: aria-labelledby hace referencia a texto que incluye el contenido visible

<span id="btn-label">Buscar en todo el catálogo</span>
<button aria-labelledby="btn-label">Buscar</button>

Aquí, el texto visible “Buscar” está contenido dentro del nombre accesible “Buscar en todo el catálogo,” así que la regla es exitosa. El nombre accesible comienza con la etiqueta visible, lo cual es ideal para usuarios de entrada de voz.

Learn more: