group

Käyttötilanteet

Ryhmitellyille lomakeohjauselementeille käytetään <fieldset>-elementtiä <legend>-elementin kanssa. Natiivi antaa ryhmäsemantiikan, visuaalisen reunuksen (muotoiltavissa haluamallaan tavalla) ja legend-yhdistämisen.

role="group" on oikea työkalu, kun:

• Ympäröidään joukko liittyviä mutta ei-lomakenohjauselementtejä (päivämäärävalitsimen kolme yhdistelmälaatikkoa, rivissä olevat kuvakevaihtopainikkeet).
• Merkitään aliosa puun, puunäkymän tai ruudukon sisällä, jossa kunkin tason lapset muodostavat loogisen ryhmän.
• Halutaan ryhmittely, jota EI esitetä maamerkkinä — erona katso role="region".

Ryhmällä TULISI olla saavutettava nimi (aria-label tai aria-labelledby), kun sen tarkoitus ei käy ilmi asiayhteydestä. Ilman nimeä ryhmä on ruudunlukuohjelmille näkymätön eikä rooli lisää arvoa.

Yleisimmät virheet

• role="group" ilman saavutettavaa nimeä. Ruudunlukuohjelmat ohittavat roolin; ryhmä on näkymätön.
• role="group" käyttäminen siellä, missä <fieldset> + <legend> toimisi. Natiivi on suositeltavampaa.
• role="group" ja role="region" sekoittaminen. Region on maamerkki ja näkyy maamerkkinavigoinnissa; group ei.
• Jokaisen käyttöliittymäosan merkitseminen ryhmäksi. Käytetään säästeliäästi — liian monet ryhmittelyt laimentavat jokaisen arvon.
• role="group" role="tablist"-elementin ympärille. Tarpeeton; tablist on jo ryhmittelykonstrukti.

Esimerkki

<!-- Suositeltava lomakeohjauselementeille -->
<fieldset>
  <legend>Syntymäaika</legend>
  <label>Päivä <input type="text" inputmode="numeric"></label>
  <label>Kuukausi <input type="text" inputmode="numeric"></label>
  <label>Vuosi <input type="text" inputmode="numeric"></label>
</fieldset>

<!-- Ei-lomakeryhmittely -->
<div role="group" aria-labelledby="ratingLabel">
  <span id="ratingLabel">Arvioi tämä artikkeli</span>
  <button type="button" aria-label="1 tähti">★</button>
  <button type="button" aria-label="2 tähteä">★★</button>
</div>