Ruolo Punto di riferimento

`complementary`

Un landmark per i contenuti che supportano il contenuto principale ma hanno senso anche da soli — barre laterali, riquadri di articoli correlati, callout supplementari. L'elemento <aside> assume questo ruolo quando si trova al livello principale.

Quando utilizzarlo

Si utilizzi <aside> per una barra laterale di primo livello, una sezione «Articoli correlati», una biografia dell’autore accanto a un articolo o un pannello «Novità». Quando <aside> è un figlio diretto di <body> (o si trova accanto a <main>), viene esposto come landmark complementary.

Un <aside> annidato all’interno di un <article> NON viene promosso a landmark — rimane un gruppo generico. Questa distinzione è intenzionale: un landmark complementary è a livello di pagina; le barre laterali interne a un singolo articolo non lo sono.

role="complementary" su un <div> è appropriato solo quando non è possibile utilizzare <aside> (CMS legacy).

Il contenuto al suo interno deve supportare quello principale ma avere senso autonomamente — se rimuovendolo la pagina risultasse incompleta, probabilmente non si tratta di un elemento complementary.

Quando etichettarlo

Se si hanno più landmark complementary (una barra laterale sinistra E una destra), si assegni a ciascuno un aria-label o aria-labelledby distinto. Con un solo landmark complementary, l’etichetta è facoltativa — gli screen reader lo annunciano come «complementary».

Etichette convenzionali: «Articoli correlati», «Strumenti», «Iscrizione alla newsletter», «Visti di recente».

Errori comuni

<aside> utilizzato per callout all’interno di paragrafi di testo. Troppo granulare — affolla il menu dei landmark.
Contrassegnare tutti i link secondari del footer del sito come landmark complementary. La navigazione a livello di footer appartiene a <nav> dentro <footer>.
Più landmark complementary senza etichette.
Inserire role="complementary" su una <section> che costituisce il contenuto principale della pagina. Si utilizzi <main> invece.
<aside> dentro <article> con un esplicito role="complementary" per forzarne l’esposizione come landmark — di solito è un segnale che il contenuto appartiene al livello di pagina, non all’interno dell’articolo.

Esempio

<main>
  <article>
    <h1>Progettare per gli screen reader</h1>
    <p>…</p>
  </article>
</main>

<aside aria-labelledby="related">
  <h2 id="related">Articoli correlati</h2>
  <ul>
    <li><a href="/articles/aria-landmarks">I landmark ARIA spiegati</a></li>
    <li><a href="/articles/skip-links">Skip link realizzati correttamente</a></li>
  </ul>
</aside>