Valor erróneo “complimentary” para el atributo “role” en el elemento “aside”.

La especificación WAI-ARIA define un conjunto estricto de valores de role válidos, y "complimentary" no está entre ellos. Este es un error tipográfico directo — "complimentary" (que significa “que expresa elogios o se da gratis”) versus "complementary" (que significa “que sirve para completar o mejorar algo”). Cuando un navegador o tecnología de asistencia encuentra un valor de role no reconocido, lo ignora. Esto significa que los usuarios de lectores de pantalla pierden el significado semántico que el elemento <aside> normalmente transmitiría, lo que hace más difícil para ellos entender la estructura de la página y navegar de manera efectiva.

El elemento <aside> ya lleva un role ARIA implícito de complementary según lo definido por la especificación HTML. Esto significa que las tecnologías de asistencia automáticamente tratan <aside> como contenido complementario sin ningún atributo role explícito. Agregar role="complementary" a un <aside> es redundante. La solución más simple y mejor es eliminar el atributo role mal escrito y dejar que la semántica nativa del elemento haga el trabajo.

Si tienes una razón específica para establecer explícitamente el role — por ejemplo, cuando lo sobrescribes con un role válido diferente — asegúrate de que el valor esté escrito correctamente y sea un role apropiado para el elemento.

Ejemplos

❌ Incorrecto: valor de role mal escrito

<aside role="complimentary">
  <h2>Related Articles</h2>
  <ul>
    <li><a href="/guide-one">Getting started guide</a></li>
    <li><a href="/guide-two">Advanced techniques</a></li>
  </ul>
</aside>

El valor "complimentary" no es un role ARIA válido. Las tecnologías de asistencia lo ignorarán, y el elemento pierde su significado semántico.

✅ Correcto: eliminar el role redundante

<aside>
  <h2>Related Articles</h2>
  <ul>
    <li><a href="/guide-one">Getting started guide</a></li>
    <li><a href="/guide-two">Advanced techniques</a></li>
  </ul>
</aside>

El elemento <aside> ya implica role="complementary", por lo que no se necesita ningún role explícito. Este es el enfoque recomendado.

✅ Correcto: establecer explícitamente el role correctamente escrito

<aside role="complementary">
  <h2>Related Articles</h2>
  <ul>
    <li><a href="/guide-one">Getting started guide</a></li>
    <li><a href="/guide-two">Advanced techniques</a></li>
  </ul>
</aside>

Esto es válido pero redundante. Puede ser apropiado en casos raros donde quieres ser explícito para mayor claridad o para solucionar casos extremos con ciertas tecnologías de asistencia.

Referencia rápida para errores tipográficos similares

Siempre verifica dos veces los valores de role contra las definiciones de role de WAI-ARIA para asegurar que sean válidos. Cuando un elemento HTML ya proporciona la semántica que necesitas, prefiere usar el elemento sin un role explícito — esto sigue la primera regla de ARIA: “Si puedes usar un elemento HTML nativo con la semántica y comportamiento que requieres, hazlo.”

Más información:

MDN Reference

MDN: complementary ARIA role

→

MDN Reference

MDN: <aside> The Aside element

→