Los comandos ARIA deben tener un nombre accesible

Cuando asignas un role como link, button, o menuitem a un elemento, le estás diciendo al navegador y a las tecnologías asistivas que este elemento es un comando interactivo. Los lectores de pantalla dependen del nombre accesible de estos elementos para comunicar su propósito al usuario. Si no existe un nombre accesible, un lector de pantalla podría anunciar algo como “botón” o “enlace” sin contexto adicional — dejando al usuario sin manera de entender qué hace el control.

Este problema afecta principalmente a usuarios que son ciegos o tienen baja visión y dependen de lectores de pantalla, pero también impacta a usuarios con discapacidades motoras que pueden usar software de control por voz para activar elementos por nombre. Si no hay nombre, los usuarios de control por voz no pueden dirigirse al elemento con un comando hablado.

Criterios de éxito WCAG relacionados

Esta regla se mapea al Criterio de Éxito WCAG 4.1.2: Nombre, Función, Valor (Nivel A). Este criterio requiere que todos los componentes de interfaz de usuario tengan un nombre que pueda determinarse programáticamente. Se aplica a WCAG 2.0, 2.1, y 2.2, y también se referencia en EN 301 549 (9.4.1.2), las pautas Trusted Tester, y RGAA.

Las pautas Trusted Tester especifican además que el propósito de cada enlace o botón debe ser determinable a partir de alguna combinación de su texto, nombre accesible, descripción accesible, o contexto determinado programáticamente.

Cómo solucionarlo

Asegúrate de que cada elemento con role="link", role="button", o role="menuitem" tenga un nombre accesible a través de uno de estos métodos:

1. Contenido de texto interno — Coloca texto legible dentro del elemento.
2. Atributo aria-label — Añade un aria-label no vacío con un nombre descriptivo.
3. Atributo aria-labelledby — Apunta al id de otro elemento que contenga texto visible y no vacío.
4. Atributo title — Usa un atributo title como respaldo (aunque se prefiere aria-label o texto visible).

Cuando sea posible, prefiere usar elementos HTML nativos (<a>, <button>) sobre roles ARIA personalizados, ya que vienen con comportamientos de accesibilidad integrados. Si debes usar roles ARIA, siempre asegúrate de que el nombre accesible sea claro y describa la acción o destino.

Ejemplos

Incorrecto: Sin nombre accesible

Estos elementos serán marcados porque los lectores de pantalla no pueden determinar su propósito.

<!-- Elemento vacío sin texto o etiqueta -->

<div role="link"></div>

<!-- aria-label vacío no proporciona nombre -->

<div role="button" aria-label=""></div>

<!-- aria-labelledby apunta a un elemento inexistente -->

<div role="menuitem" aria-labelledby="nonexistent"></div>

<!-- aria-labelledby apunta a un elemento vacío -->

<div role="link" aria-labelledby="empty-label"></div>
<div id="empty-label"></div>

Correcto: Nombre accesible proporcionado

Cada uno de estos elementos tiene un nombre perceptible que los lectores de pantalla pueden anunciar.

<!-- Contenido de texto interno -->

<div role="link" tabindex="0">Visita nuestro centro de ayuda</div>

<!-- Atributo aria-label -->

<div role="button" tabindex="0" aria-label="Cerrar diálogo"></div>

<!-- aria-labelledby apuntando a texto visible -->

<div role="menuitem" tabindex="0" aria-labelledby="menu-label">
  <span id="menu-label">Guardar documento</span>
</div>

<!-- Combinación de aria-label y texto interno -->

<div role="link" tabindex="0" aria-label="Aprende más sobre precios">
  Aprende más
</div>

<!-- Atributo title como respaldo -->

<div role="button" tabindex="0" title="Enviar formulario"></div>

Preferido: Usa elementos HTML nativos

Los elementos nativos manejan el nombrado y el comportamiento del teclado automáticamente, reduciendo la posibilidad de problemas de accesibilidad.

<a href="/help">Visita nuestro centro de ayuda</a>

<button type="button">Cerrar diálogo</button>

Nota: Al probar con RGAA, los problemas reportados por esta regla pueden necesitar ser mapeados a una prueba RGAA diferente, como 6.2.1 para enlaces.

Learn more:

Deque Reference

Deque University - How To Fix

→