complementary
Un landmark pour le contenu qui soutient le contenu principal tout en étant signifiant de façon autonome — barres latérales, encadrés d'articles liés, renvois complémentaires. L'élément <aside> porte ce rôle lorsqu'il est au niveau supérieur.
Quand l’utiliser
Utilisez <aside> pour une barre latérale de niveau supérieur, un rail « Articles liés », une biographie d’auteur à côté d’un article, ou un panneau « Nouveautés ». Quand <aside> est un enfant direct de <body> (ou se trouve à côté de <main>), il est exposé comme landmark complementary.
Un <aside> imbriqué dans un <article> n’est PAS promu en landmark — il reste un groupe générique. Cette distinction est intentionnelle : un landmark complementary est de niveau page ; les barres latérales internes à un article ne le sont pas.
role="complementary" sur un <div> n’est approprié que si vous ne pouvez pas utiliser <aside> (CMS ancien).
Le contenu à l’intérieur doit soutenir le contenu principal tout en pouvant exister seul — si le retirer laissait la page incomplète, il n’est probablement pas complementary.
Quand labelliser
Si vous avez plusieurs landmarks complementary (un rail gauche ET un rail droit), donnez à chacun un aria-label ou aria-labelledby distinct. Avec un seul landmark complementary, un libellé est optionnel — les lecteurs d’écran l’annoncent comme « complémentaire ».
Libellés courants : « Articles liés », « Outils », « Inscription à la newsletter », « Récemment consulté ».
Erreurs fréquentes
<aside>utilisé pour des encadrés à l’intérieur de paragraphes de prose. Trop granulaire — encombre le menu des landmarks.- Marquer l’ensemble des liens secondaires du pied de page comme landmark complementary. La navigation au niveau du pied de page appartient à
<nav>dans<footer>. - Plusieurs landmarks complementary sans libellés.
- Placer
role="complementary"sur une<section>qui est le contenu principal de la page. Utilisez<main>à la place. - Un
<aside>dans un<article>avec unrole="complementary"explicite pour forcer l’exposition en landmark — signe généralement que le contenu appartient au niveau page, pas dans l’article.
Exemple
<main>
<article>
<h1>Designing for screen readers</h1>
<p>…</p>
</article>
</main>
<aside aria-labelledby="related">
<h2 id="related">Related articles</h2>
<ul>
<li><a href="/articles/aria-landmarks">ARIA landmarks explained</a></li>
<li><a href="/articles/skip-links">Skip links done right</a></li>
</ul>
</aside>