Validación HTML: El rol "navigation" es innecesario para el elemento "nav".

Acerca de este problema HTML

La especificación HTML define ciertos elementos como que tienen roles ARIA implícitos — roles que se comunican automáticamente a las tecnologías de asistencia sin atributos adicionales. El elemento nav es uno de estos: su rol implícito es navigation. Cuando añades explícitamente role="navigation" a un elemento nav, le estás diciendo al navegador algo que ya sabe, lo que desordena tu marcado sin añadir ningún valor.

Esta redundancia importa por varias razones:

Mantenibilidad del código: Los atributos innecesarios hacen que tu HTML sea más difícil de leer y mantener. Los desarrolladores futuros pueden preguntarse si el rol explícito está ahí por una razón específica, creando confusión.
Cumplimiento de estándares: El validador del W3C advierte sobre esto porque la especificación ARIA sigue un principio a menudo resumido como la primera regla de ARIA: no uses ARIA si un elemento HTML nativo ya proporciona la semántica que necesitas. Extendiendo este principio, no re-declares semántica que ya está presente.
Sin beneficio de accesibilidad: Las tecnologías de asistencia como los lectores de pantalla ya reconocen nav como un punto de referencia de navegación. Añadir el rol explícito no mejora la experiencia para los usuarios de estas tecnologías — es simplemente ruido.

El atributo role="navigation" es útil cuando se aplica a un elemento no semántico como div o span que funciona como navegación pero no puede cambiarse a un elemento nav (por ejemplo, debido a restricciones heredadas). Pero cuando ya estás usando nav, el atributo es innecesario.

Para corregir esto, elimina el atributo role="navigation" de tu elemento nav. El significado semántico se conserva completamente.

Ejemplos

Incorrecto: rol redundante en `nav`

Esto activa la advertencia del validador del W3C porque el rol navigation ya es implícito:

<nav role="navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Correcto: `nav` sin el rol explícito

Simplemente elimina el atributo role redundante:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Correcto: usar `role="navigation"` en un elemento no semántico

Si no puedes usar un elemento nav, aplicar el rol a un div es un enfoque válido. Esto no activa la advertencia:

<div role="navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</div>

Correcto: etiquetar múltiples elementos `nav`

Cuando una página tiene más de un nav, usa aria-label o aria-labelledby para diferenciarlos para los usuarios de tecnologías de asistencia — pero aún así no añadas el role redundante:

<nav aria-label="Main">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

<nav aria-label="Footer">
  <ul>
    <li><a href="/privacy">Privacy Policy</a></li>
    <li><a href="/terms">Terms of Service</a></li>
  </ul>
</nav>