Rol Oriëntatiepunt

`region`

Een generiek landmark voor inhoud die niet past bij banner, main, navigation, complementary of contentinfo, maar toch belangrijk genoeg is om naartoe te navigeren. Een <section> wordt een region-landmark alleen wanneer het een toegankelijke naam heeft.

Wanneer te gebruiken

Voor een betekenisvolle paginasectie die niet overeenkomt met een ander landmark en waarnaar schermlezergebruikers direct moeten kunnen springen: een rail met aanbevolen producten, de huidige stap van een meerstapsformulier, een chatgesprekgebied binnen een grotere applicatie.

<section> wordt alleen als region-landmark weergegeven wanneer het een toegankelijke naam heeft (aria-label of aria-labelledby). Een <section> zonder naam is slechts een generieke groep — geen landmarkweergave. Dit is bewust ontworpen: te veel landmarks maken het landmarkmenu nutteloos.

role="region" op een <div> werkt op dezelfde manier — naam verplicht.

Wanneer region vs. group te gebruiken

Gebruik `role="region"` (of `<section aria-label>`)	Gebruik `role="group"`
Belangrijke paginasectie die landmarknavigatie rechtvaardigt	Cluster van gerelateerde besturingselementen zonder landmarkstatus
Één of twee per pagina	Kan er veel per pagina zijn
Heeft altijd een toegankelijke naam	Naam optioneel

Bij twijfel: vraag “wil ik dat een schermlezergebruiker hier direct naartoe kan springen?” Zo ja, region. Zo nee, group.

Veelvoorkomende fouten

<section> zonder aria-label of aria-labelledby. Geen landmark; de wrapper doet niets voor toegankelijkheid.
Elke <section> als region markeren. Overspoelt het landmarkmenu en vermindert de waarde van elk landmark.
aria-label="Section" — betekenisloos. Het label moet beschrijven wat deze sectie onderscheidend maakt.
role="region" gebruiken voor een zijbalk — dat is complementary. Kies het meest specifieke landmark.
role="region" op de omhullende <div> én op een binnenste <section> — dubbele landmarks voor dezelfde inhoud.

Voorbeeld

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