Validación HTML: El rol "complementary" es innecesario para el elemento "aside".

Acerca de este problema HTML

Muchos elementos semánticos de HTML5 vienen con roles ARIA incorporados (implícitos) definidos en la especificación WAI-ARIA. El elemento <aside> es uno de estos — mapea nativamente al rol complementary, que le dice a las tecnologías de asistencia que el contenido está relacionado con el contenido principal pero puede funcionar por sí solo. Cuando añades explícitamente role="complementary" a un <aside>, estás declarando algo que el navegador ya sabe, lo que activa esta advertencia del validador W3C.

Aunque esta redundancia no afectará a los usuarios finales, crea ruido innecesario en tu código y puede indicar una incomprensión de cómo funciona el HTML semántico. Mantener el código libre de atributos ARIA redundantes sigue la primera regla del uso de ARIA: “Si puedes usar un elemento o atributo HTML nativo con la semántica y el comportamiento que requieres ya incorporados, en lugar de reutilizar un elemento y añadir un rol, estado o propiedad ARIA para hacerlo accesible, entonces hazlo.” El HTML limpio y semántico es más fácil de mantener y menos propenso a errores si los roles ARIA se cambian accidentalmente o entran en conflicto con la semántica nativa en el futuro.

Este mismo principio se aplica a varios otros elementos HTML, como <nav> (rol implícito navigation), <main> (rol implícito main), <header> (rol implícito banner cuando no está anidado), y <footer> (rol implícito contentinfo cuando no está anidado).

Ejemplos

❌ Rol redundante en `<aside>`

El atributo role="complementary" es innecesario porque <aside> ya lo implica:

<aside role="complementary">
  <h2>Related Articles</h2>
  <ul>
    <li><a href="/article-1">Understanding ARIA roles</a></li>
    <li><a href="/article-2">Semantic HTML best practices</a></li>
  </ul>
</aside>

✅ Usando `<aside>` sin el rol redundante

Simplemente elimina el atributo role:

<aside>
  <h2>Related Articles</h2>
  <ul>
    <li><a href="/article-1">Understanding ARIA roles</a></li>
    <li><a href="/article-2">Semantic HTML best practices</a></li>
  </ul>
</aside>

✅ Cuándo un rol explícito sí es apropiado

Si necesitas darle al elemento <aside> un rol diferente a su rol por defecto, un atributo de rol explícito es válido y útil. Por ejemplo, podrías usar <aside> por razones estructurales pero asignarle un rol ARIA diferente:

<aside role="note">
  <p>This feature is only available in version 3.0 and later.</p>
</aside>

✅ Etiquetando múltiples elementos `<aside>`

Si tu página tiene múltiples elementos <aside>, no necesitas añadir role="complementary" para distinguirlos. En su lugar, usa aria-label o aria-labelledby para darle a cada uno un nombre accesible único:

<aside aria-label="Related articles">
  <h2>Related Articles</h2>
  <ul>
    <li><a href="/article-1">Understanding ARIA roles</a></li>
  </ul>
</aside>

<aside aria-labelledby="ad-heading">
  <h2 id="ad-heading">Sponsored Content</h2>
  <p>Check out our latest product.</p>
</aside>