Rol Punto de referencia

`complementary`

Punto de referencia para contenido que apoya el contenido principal pero tiene sentido por sí solo: barras laterales, cajas de artículos relacionados, recuadros complementarios. El elemento <aside> lleva este rol cuando se encuentra en el nivel superior.

Cuándo utilizarlo

Se utiliza <aside> para una barra lateral en el nivel superior, un carril de «Artículos relacionados», una biografía del autor junto a una entrada, o un panel de «Novedades». Cuando <aside> es hijo directo de <body> (o se sitúa junto a <main>), queda expuesto como punto de referencia complementary.

<aside> anidado dentro de un <article> NO asciende a punto de referencia — permanece como grupo genérico. Esta distinción es intencionada: un punto de referencia complementary es de nivel de página; las barras laterales internas a un artículo no lo son.

role="complementary" en un <div> solo es adecuado cuando no es posible utilizar <aside> (CMS heredado).

El contenido interior debe apoyar el principal pero tener sentido por sí solo — si su eliminación dejara la página incompleta, probablemente no es complementario.

Cuándo añadir etiqueta

Si se cuenta con varios puntos de referencia complementary (un carril izquierdo Y uno derecho), se debe asignar a cada uno un aria-label o aria-labelledby distinto. Con un único punto de referencia complementary, la etiqueta es opcional — los lectores de pantalla lo anuncian como «complementary».

Etiquetas convencionales: «Artículos relacionados», «Herramientas», «Suscripción al boletín», «Vistos recientemente».

Errores frecuentes

<aside> utilizado para llamadas de atención dentro de párrafos de prosa. Demasiado granular — satura el menú de puntos de referencia.
Marcar todos los enlaces secundarios del pie de sitio como punto de referencia complementary. La navegación a nivel de pie pertenece a <nav> dentro de <footer>.
Varios puntos de referencia complementary sin etiquetas.
Colocar role="complementary" en una <section> que es el contenido principal de la página. Se debe usar <main> en su lugar.
<aside> dentro de <article> más un role="complementary" explícito para forzar la exposición como punto de referencia — suele ser señal de que el contenido pertenece al nivel de página y no dentro del artículo.

Ejemplo

<main>
  <article>
    <h1>Diseñar para lectores de pantalla</h1>
    <p>…</p>
  </article>
</main>

<aside aria-labelledby="related">
  <h2 id="related">Artículos relacionados</h2>
  <ul>
    <li><a href="/articles/aria-landmarks">Puntos de referencia ARIA explicados</a></li>
    <li><a href="/articles/skip-links">Enlaces de salto bien hechos</a></li>
  </ul>
</aside>