¿Qué es un nombre accesible?
El nombre accesible es el texto que el lector de pantalla lee en voz alta cuando el usuario llega a un elemento interactivo. Para un botón, es el texto que explica la acción. Para un enlace, es el texto que describe el destino.
El criterio WCAG 4.1.2 exige que todos los componentes de interfaz de usuario tengan un nombre que la tecnología de asistencia pueda leer. Cuando añades role="link", role="button" o role="menuitem" a un elemento, le estás prometiendo a los lectores de pantalla que ese elemento es interactivo. Si no tiene nombre, el usuario llega a un elemento que sabe que puede accionar, pero no sabe para qué sirve.
¿Por qué es importante?
Imagina a un usuario de lector de pantalla navegando con teclado. El lector anuncia «enlace» pero no dice nada más. El usuario no sabe a dónde lleva ni si le interesa. Tiene que hacer clic a ciegas o saltarse el elemento y perderse contenido potencialmente relevante.
Esto ocurre exactamente con elementos como <a id="content" role="link"></a>: el elemento existe en el DOM, es focusable, y el lector de pantalla lo anuncia como «enlace» — pero no tiene ningún texto ni etiqueta que explique nada.
Cómo corregirlo
Hay tres formas de aportar un nombre accesible a un comando ARIA:
1. Texto visible en el interior del elemento — la más sencilla y la preferida:
<!-- ✅ El texto interior actúa como nombre accesible -->
<div role="button">Enviar formulario</div>
<div role="link">Leer más sobre accesibilidad</div>2. aria-label — cuando no puedes añadir texto visible, por ejemplo, un botón con solo un icono:
<!-- ✅ aria-label proporciona el nombre accesible -->
<div role="button" aria-label="Cerrar ventana">✕</div>
<a role="link" aria-label="Ir a la sección de contacto"></a>3. aria-labelledby — cuando el nombre ya existe en otro elemento de la página:
<!-- ✅ aria-labelledby apunta al elemento que contiene el nombre -->
<h2 id="titulo-seccion">Servicios de accesibilidad</h2>
<div role="link" aria-labelledby="titulo-seccion"></div>Errores habituales
El error más frecuente es el ancla vacía usada como ancla de página. Es un patrón muy común en WordPress y constructores de páginas para crear puntos de navegación interna:
<!-- ❌ Ancla vacía sin nombre accesible -->
<a id="content" role="link"></a>La solución más sencilla es eliminar el role="link" si el elemento no es un enlace real, sino solo un punto de anclaje:
<!-- ✅ Ancla de navegación sin rol interactivo -->
<a id="content"></a>
<!-- O mejor, con un elemento no interactivo -->
<div id="content"></div>Otro error habitual: aria-label vacío o aria-labelledby apuntando a un elemento que no existe o que no tiene texto:
<!-- ❌ aria-label vacío — no proporciona ningún nombre -->
<div role="button" aria-label=""></div>
<!-- ❌ aria-labelledby apunta a un elemento inexistente -->
<div role="menuitem" aria-labelledby="elemento-que-no-existe"></div>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.