El atributo “aria-label” no debe especificarse en ningún elemento “a” a menos que el elemento tenga un valor de “role” distinto de “caption”, “code”, “deletion”, “emphasis”, “generic”, “insertion”, “paragraph”, “presentation”, “strong”, “subscript”, o “superscript”.

Un atributo aria-label en un elemento <a> solo es válido cuando el enlace tiene un role accesible que admite naming — lo que significa que el <a> debe tener un atributo href o un role explícito que acepte una etiqueta.

Cuando un elemento <a> carece de un atributo href, tiene el role implícito de generic. El role generic está en la lista de roles que no admiten naming, por lo que aplicar aria-label es inválido. Esto es porque un elemento genérico no tiene significado semántico, y los lectores de pantalla no sabrían cómo anunciar la etiqueta de manera significativa.

La causa más común de este error es usar <a> como marcador de posición o disparador de JavaScript sin un href. Un <a> con un href tiene el role implícito de link, que sí admite aria-label, por lo que el error no aparecerá.

Tienes varias formas de solucionarlo:

• Añadir un href para convertirlo en un enlace apropiado (solución más común).
• Añadir un role explícito que admita naming, como role="button", si el elemento actúa como un botón.
• Usar un <button> en su lugar si el elemento desencadena una acción en lugar de navegación.
• Eliminar aria-label si no es necesario, y usar contenido de texto visible en su lugar.

Ejemplos HTML

❌ Inválido: aria-label en un <a> sin href

<a aria-label="Close menu" onclick="closeMenu()">✕</a>

El <a> no tiene href, por lo que su role implícito es generic, que no admite naming.

✅ Opción de solución 1: Añadir un href

<a href="/close" aria-label="Close menu">✕</a>

✅ Opción de solución 2: Usar un <button> en su lugar

<button aria-label="Close menu" onclick="closeMenu()">✕</button>

✅ Opción de solución 3: Añadir un role explícito que admita naming

<a role="button" tabindex="0" aria-label="Close menu" onclick="closeMenu()">✕</a>

Usar un <button> (opción 2) es generalmente la mejor opción para elementos interactivos que realizan acciones en lugar de navegar a una URL.

Más información:

MDN Reference

MDN Web Docs: ARIA - aria-label

→

MDN Reference

MDN Web Docs: HTML anchor element

→

MDN Reference

MDN Web Docs: ARIA roles

→