Roll Landmärke

`main`

Landmärket för huvudinnehåll — sidans primära innehåll, exklusive återkommande sidhuvuden, navigering och sidfötter. Elementet <main> bär denna roll automatiskt. Exakt ett main per sida.

När du ska använda

Använd elementet <main>. Det är det viktigaste enskilda landmärket på sidan — skärmläsaranvändare hoppar vanligtvis till main först för att hoppa förbi navigering och sidhuvuden.

role="main" på en <div> är lämpligt bara när du inte kan använda <main> (mestadels en CMS-begränsning). Båda formerna måste uppfylla samma regel: exakt ett main per sida. Flera main-element bryter “hoppa till huvudinnehåll”-funktionaliteten, och många skärmläsare exponerar bara det första.

Main-landmärket ska innehålla allt som är unikt för den aktuella sidan och ska inte innehålla sidans sidhuvud, primär navigering eller sidfot. Placera dessa i <header>-, <nav>- och <footer>-syskon, inte inuti <main>.

När du ska använda etikett

Ett enda main behöver ingen etikett — skärmläsare meddelar det som “main”. Lägg till aria-label bara om sidan har flera main-element (vilket det inte bör) eller om du av något skäl vill särskilja ett SPA:s huvudinnehållsområde från ett tidigare.

Länken “Hoppa till huvudinnehåll” bör peka på <main id="main"> (eller vilket id du ger det) med <a href="#main"> överst på sidan — detta är WCAG 2.4.1:s teknik för att kringgå block.

Vanliga fel

Två <main>-element på samma sida. Den vanligaste orsaken: ett SPA som infogar en ny vys <main> utan att ta bort den föregående.
Sida utan <main> alls. Skärmläsaranvändare kan inte hoppa förbi sidhuvudet.
<main> placerad inuti <header> eller <footer>. Landmarkshierarkin är fel.
Att placera webbplatsövergripande navigering inuti <main>. Det upprepas på alla sidor, så det hör hemma i <header>/<nav>, inte i sidans unika innehåll.
Länken “Hoppa till huvudinnehåll” pekar på ett id som inte finns.

Exempel

<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>