Roll Landmärke

`complementary`

Ett landmärke för innehåll som stödjer huvudinnehållet men är meningsfullt på egen hand — sidopaneler, relaterade-artiklar-boxar, kompletterande lyftramar. Elementet <aside> bär denna roll när det befinner sig på toppnivå.

När ska rollen användas

Använd <aside> för en toppnivåsidopanel, ett “Relaterade artiklar”-spår, en författarbiografi bredvid ett inlägg eller en “Nyheter”-panel. När <aside> är ett direkt underordnat element till <body> (eller placerat bredvid <main>) exponeras det som ett complementary-landmärke.

<aside> nästlat inuti ett <article> befordras INTE till ett landmärke — det förblir en generisk grupp. Den distinktionen är avsiktlig: ett complementary-landmärke är på sidnivå; sidopaneler interna för en artikel är det inte.

role="complementary" på en <div> är lämpligt bara när du inte kan använda <aside> (äldre CMS).

Innehållet inuti bör stödja huvudinnehållet men stå på egna ben — om det är nödvändigt för att sidan ska bli komplett är det troligtvis inte complementary.

När ska det märkas

Om du har flera complementary-landmärken (en vänster- och en högerrad), ge varje ett distinkt aria-label eller aria-labelledby. Med ett enda complementary-landmärke är en etikett valfri — skärmläsare meddelar det som “complementary”.

Konventionella etiketter: “Relaterade artiklar”, “Verktyg”, “Nyhetsbrevsprenumeration”, “Nyligen visade”.

Vanliga fel

<aside> används för lyftramar inuti stycken av prosa. För detaljerat — stör landmärkesmenyn.
Markera hela webbplatsfoterns sekundära länkar som ett complementary-landmärke. Navigering på footernivå hör hemma i <nav> inuti <footer>.
Flera complementary-landmärken utan etiketter.
Placera role="complementary" på ett <section> som är sidans huvudinnehåll. Använd <main> istället.
<aside> inuti <article> plus ett explicit role="complementary" för att tvinga landmärksexponering — vanligtvis ett tecken på att innehållet hör hemma på sidnivå, inte inuti artikeln.

Exempel

<main>
  <article>
    <h1>Designa för skärmläsare</h1>
    <p>…</p>
  </article>
</main>

<aside aria-labelledby="related">
  <h2 id="related">Relaterade artiklar</h2>
  <ul>
    <li><a href="/articles/aria-landmarks">ARIA-landmärken förklarade</a></li>
    <li><a href="/articles/skip-links">Hopplänkar gjorda rätt</a></li>
  </ul>
</aside>