El rol “link” es innecesario para el elemento “a” con atributo “href”.

El elemento <a> con un atributo href es uno de los elementos interactivos más fundamentales de HTML. Los navegadores y las tecnologías de asistencia lo reconocen inherentemente como un enlace: es enfocable mediante la tecla Tab, se puede activar con Enter, y es anunciado como “enlace” por los lectores de pantalla. Este comportamiento integrado es parte del rol ARIA implícito del elemento, que es link.

Cuando añades explícitamente role="link" a un elemento <a href="...">, estás diciéndole a las tecnologías de asistencia algo que ya saben. El validador W3C marca esto como innecesario porque viola el principio de no establecer redundantemente roles ARIA que coinciden con la semántica nativa de un elemento. Este principio está codificado en la primera regla del uso de ARIA: “Si puedes usar un elemento o atributo HTML nativo con la semántica y comportamiento que requieres ya integrado, en lugar de reutilizar un elemento y añadir un rol, estado o propiedad ARIA para hacerlo accesible, entonces hazlo.”

Aunque un role="link" redundante normalmente no romperá nada, crea ruido en tu marcado. También puede indicar a otros desarrolladores que el rol es necesario, llevando a confusión o patrones cargo-cult. El HTML limpio y semántico que se basa en roles nativos es más fácil de mantener y menos propenso a errores.

El atributo role="link" es legítimamente útil cuando un elemento no interactivo como un <span> o <div> necesita comportarse como un enlace. En ese caso, también debes implementar manualmente la interacción del teclado (enfoque mediante tabindex, activación mediante el manejo de la tecla Enter) y proporcionar un nombre accesible. Pero cuando ya tienes un elemento <a> apropiado con href, todo eso viene gratis: no se necesita ARIA.

Ejemplos

❌ Incorrecto: role="link" redundante en un anchor

<a href="/about" role="link">About Us</a>

El role="link" es redundante aquí porque el elemento <a> con href ya tiene un rol implícito de link.

✅ Correcto: anchor sin rol redundante

<a href="/about">About Us</a>

Simplemente elimina el atributo role="link". El navegador y las tecnologías de asistencia ya tratan esto como un enlace.

✅ Correcto: usando role="link" en un elemento no semántico (cuando es necesario)

<span role="link" tabindex="0" onclick="location.href='/about'" onkeydown="if(event.key==='Enter') location.href='/about'">
  About Us
</span>

Este es el caso de uso legítimo para role="link": cuando no puedes usar un elemento <a> nativo y necesitas hacer que un elemento no interactivo se comporte como un enlace. Nota el trabajo adicional requerido: tabindex="0" para que sea enfocable por teclado, un manejador de clic, y un manejador de keydown para la activación con la tecla Enter. Usar un elemento <a> apropiado evita todo este esfuerzo extra.

❌ Incorrecto: múltiples anchors con roles redundantes

<nav>
  <a href="/" role="link">Home</a>
  <a href="/products" role="link">Products</a>
  <a href="/contact" role="link">Contact</a>
</nav>

✅ Correcto: navegación limpia sin roles redundantes

<nav>
  <a href="/">Home</a>
  <a href="/products">Products</a>
  <a href="/contact">Contact</a>
</nav>

Más información:

MDN Reference

MDN: ARIA link role

→