Roll Landmärke

`region`

Ett generiskt landmärke för innehåll som inte passar banner, main, navigation, complementary eller contentinfo — men ändå är tillräckligt viktigt att navigera till. Ett <section>-element blir ett region-landmärke enbart när det har ett tillgängligt namn.

När du ska använda det

För en meningsfull sidsektion som inte matchar ett annat landmärke och som skärmläsaranvändare ska kunna hoppa till: en “Utvalda produkter”-lista, ett flerstegsformulär med aktuellt steg, ett chatttranskripts-område i en större app.

<section> exponeras som ett region-landmärke ENBART när det har ett tillgängligt namn (aria-label eller aria-labelledby). Ett <section> utan namn är bara en generisk grupp — ingen landmärkesexponering. Det är avsiktligt: för många landmärken gör landmärkesmenyn oanvändbar.

role="region" på ett <div> fungerar på samma sätt — namn krävs.

När du ska använda region kontra group

Använd `role="region"` (eller `<section aria-label>`)	Använd `role="group"`
Stor sidsektion som motiverar landmärkesnavigering	Kluster av relaterade kontroller utan landmärkesstatus
En eller två per sida	Kan finnas många per sida
Har alltid ett tillgängligt namn	Namn valfritt

Vid tveksamhet: fråga “vill jag att en skärmläsaranvändare ska kunna hoppa direkt hit?” Om ja, region. Om nej, group.

Vanliga fel

<section> utan aria-label eller aria-labelledby. Inget landmärke; omslutningen gör ingenting för tillgängligheten.
Att märka upp varje <section> som en region. Översvämmar landmärkesmenyn och urholkar värdet av varje landmärke.
aria-label="Section" — meningslöst. Etiketten ska beskriva vad som gör sektionen distinkt.
Att använda role="region" för en sidopanel — det är complementary. Välj det mest specifika landmärket.
role="region" på ett omslutande <div> OCH på ett inre <section> — duplicerade landmärken för samma innehåll.

Exempel

<section aria-labelledby="recent">
  <h2 id="recent">Recently published</h2>
  <ul>
    <li><a href="/articles/aria-roles">ARIA roles overview</a></li>
    <li><a href="/articles/wcag-22">WCAG 2.2 changes</a></li>
  </ul>
</section>