Rolle Landmærke

`main`

Landmærket for sidens primære indhold — alt unikt for den aktuelle side, eksklusive gentagne headere, navigationer og footere. Elementet <main> bærer automatisk denne rolle. Nøjagtigt ét main pr. side.

Hvornår brug det

Brug elementet <main>. Det er det vigtigste enkeltlandmærke på siden — skærmlæserbrugere hopper typisk direkte til main for at springe navigation og header over.

role="main" på en <div> er kun passende, når man ikke kan bruge <main> (primært en CMS-begrænsning). Begge former skal opfylde den samme regel: nøjagtigt ét main pr. side. Flere mains ødelægger “spring til hovedindhold”-funktionen, og mange skærmlæsere eksponerer kun det første.

Main-landmærket skal indeholde alt unikt for den aktuelle side og bør ikke indeholde site-headeren, den primære navigation eller footeren. Placer disse i <header>-, <nav>- og <footer>-søskendeelementer, ikke inde i <main>.

Hvornår der skal tilføjes en label

Et enkelt main behøver ikke en label — skærmlæsere annoncerer det som “main”. Tilføj kun aria-label, hvis siden har flere mains (hvilket den ikke bør), eller hvis man af en eller anden grund ønsker at skelne en SPA’ens primære indholdsområde fra et tidligere.

“Spring til hovedindhold”-linket skal pege på <main id="main"> (eller det id, man har givet det) med <a href="#main"> øverst på siden — dette er WCAG 2.4.1’s teknik til omgåelse af blokke.

Typiske fejl

To <main>-elementer på samme side. Den hyppigste årsag: en SPA, der indlejrer en ny visnings <main> uden at fjerne den forrige.
Side helt uden <main>. Skærmlæserbrugere kan ikke springe headeren over.
<main> placeret inde i <header> eller <footer>. Landmærkehierarkiet er forkert.
Siteomfattende navigation placeret inde i <main>. Den gentages på tværs af sider, så den hører hjemme i <header>/<nav>, ikke i sidens unikke indhold.
“Spring til hovedindhold”-link, der peger på et id, der ikke eksisterer.

Eksempel

<body>
  <a href="#main" class="visually-hidden focus-visible">Skip to main content</a>
  <header>…</header>
  <main id="main">
    <h1>Why one main landmark per page</h1>
    <p>…</p>
  </main>
  <footer>…</footer>
</body>