Rolle Landmærke

`complementary`

Et vartegn for indhold, der understøtter hovedindholdet men er meningsfuldt i sig selv — sidepaneler, relaterede-artikler-bokse, supplerende fremhævninger. Elementet <aside> bærer denne rolle, når det er på topniveau.

Hvornår skal det bruges

Brug <aside> til et topniveau-sidepanel, en “Relaterede artikler”-skinne, en forfatterbio ved siden af et indlæg eller et “Nyheder”-panel. Når <aside> er et direkte barn af <body> (eller placeret ved siden af <main>), eksponeres det som et complementary-vartegn.

<aside> indlejret inde i en <article> fremmes IKKE til et vartegn — det forbliver en generisk gruppe. Den sondring er tilsigtet: et complementary-vartegn er på sideniveau; sidepaneler interne i én artikel er det ikke.

role="complementary" på et <div> er kun egnet, når du ikke kan bruge <aside> (ældre CMS).

Indholdet inde bør understøtte det primære men stå alene — hvis fjernelse af det ville efterlade siden ufuldstændig, er det sandsynligvis ikke complementary.

Hvornår skal det mærkes

Hvis du har flere complementary-vartegn (en venstre skinne OG en højre skinne), skal du give hvert et distinkt aria-label eller aria-labelledby. Med ét complementary-vartegn er en etiket valgfri — skærmlæsere annoncerer det som “complementary”.

Konventionelle etiketter: “Relaterede artikler”, “Værktøjer”, “Nyhedsbrev-tilmelding”, “Senest set”.

Hyppige fejl

<aside> brugt til fremhævninger inde i afsnit af prosa. For granuleret — rodet vartegnsmenuen.
Markering af hele sidefodenes sekundære links som et complementary-vartegn. Fodsidenavigation hører hjemme i <nav> inde i <footer>.
Flere complementary-vartegn uden etiketter.
Placering af role="complementary" på en <section>, der er sidens hovedindhold. Brug <main> i stedet.
<aside> inde i <article> plus en eksplicit role="complementary" for at tvinge vartegnseksponering — normalt et tegn på, at indholdet hører hjemme på sideniveau, ikke inde i artiklen.

Eksempel

<main>
  <article>
    <h1>Design til skærmlæsere</h1>
    <p>…</p>
  </article>
</main>

<aside aria-labelledby="related">
  <h2 id="related">Relaterede artikler</h2>
  <ul>
    <li><a href="/articles/aria-landmarks">ARIA-vartegn forklaret</a></li>
    <li><a href="/articles/skip-links">Spring-links gjort rigtigt</a></li>
  </ul>
</aside>