Rooli Maamerkki

`region`

Yleinen kiintopiste sisällölle, joka ei sovi banner-, main-, navigation-, complementary- tai contentinfo-rooleihin, mutta on silti riittävän tärkeä navigoitavaksi. <section>-elementistä tulee region-kiintopiste vain silloin, kun sillä on saavutettava nimi.

Milloin käyttää

Merkitykselliselle sivuosiolle, joka ei vastaa mitään muuta kiintopistettä ja johon ruudunlukuohjelman käyttäjien pitäisi voida hypätä suoraan: “Suositellut tuotteet” -alue, monivaiheisen lomakkeen nykyinen vaihe tai chat-transkriptioalue suuremmassa sovelluksessa.

<section> näkyy region-kiintopisteenä VAIN, kun sillä on saavutettava nimi (aria-label tai aria-labelledby). <section> ilman nimeä on pelkkä yleinen ryhmä — ei kiintopistettä. Tämä on tarkoituksellista: liian monta kiintopistettä tekee kiintopistivalikosta hyödyttömän.

role="region" <div>-elementissä toimii samoin — nimi vaaditaan.

Milloin käyttää vs. group

Käytä `role="region"` (tai `<section aria-label>`)	Käytä `role="group"`
Merkittävä sivuosio, joka ansaitsee kiintopistenavigaation	Toisiinsa liittyvien säädinten joukko ilman kiintopistestä
Yksi tai kaksi per sivu	Voi olla useita per sivu
Vaatii aina saavutettavan nimen	Nimi valinnainen

Jos epävarma: kysy “haluaisiko ruudunlukuohjelman käyttäjä voida hypätä suoraan tähän?” Jos kyllä, region. Jos ei, group.

Yleisimmät virheet

<section> ilman aria-labelia tai aria-labelledbytä. Ei kiintopistettä; kääre ei tee mitään saavutettavuuden hyväksi.
Jokaisen <section>-elementin merkitseminen region-kiintopisteeksi. Tulvii kiintopistevalikokon ja heikentää kaikkien kiintopisteiden arvoa.
aria-label="Section" — merkityksetön. Nimen tulisi kuvata, mikä tekee tästä osiosta erityisen.
role="region":n käyttäminen sivupalkkiin — siihen sopii complementary. Valitse tarkin mahdollinen kiintopiste.
role="region" ulommalla <div>-elementillä JA sisemmällä <section>-elementillä — kaksoiskiintopisteet samalle sisällölle.

Esimerkki

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