group

Kiedy stosować

Dla zgrupowanych kontrolek formularza używaj <fieldset> z <legend>. Natywny element zapewnia semantykę grupy, wizualną ramkę (stylizuj wedle uznania) i powiązanie legendy.

role="group" jest właściwym narzędziem gdy:

• Owijasz zestaw powiązanych, ale niebędących formularzem kontrolek (trzy pola combobox selektora daty, rząd przycisków przełączania ikon).
• Musisz oznaczyć podobszar wewnątrz drzewa, widoku drzewa lub siatki, gdzie dzieci każdego poziomu tworzą logiczną grupę.
• Chcesz grupowanie, które NIE jest eksponowane jako punkt orientacyjny — dla tego rozróżnienia patrz role="region".

Grupa POWINNA mieć dostępną nazwę (aria-label lub aria-labelledby) gdy jej cel nie jest oczywisty z kontekstu. Bez nazwy grupa jest niewidoczna dla czytników ekranu i rola nie wnosi żadnej wartości.

Częste błędy

• role="group" bez dostępnej nazwy. Czytniki ekranu ignorują rolę; grupa jest niewidoczna.
• Użycie role="group" tam, gdzie działałby <fieldset> + <legend>. Natywne jest preferowane.
• Mylenie role="group" z role="region". Region jest punktem orientacyjnym i pojawia się w nawigacji punktami orientacyjnymi; group nie.
• Oznaczanie każdej sekcji UI jako grupy. Stosuj oszczędnie — zbyt wiele grupowań spłaszcza wartość każdego z nich.
• role="group" na opakowaniu wokół role="tablist". Redundantne; tablist jest już konstruktem grupującym.

Przykład

<!-- Zalecane dla kontrolek formularza -->
<fieldset>
  <legend>Date of birth</legend>
  <label>Day <input type="text" inputmode="numeric"></label>
  <label>Month <input type="text" inputmode="numeric"></label>
  <label>Year <input type="text" inputmode="numeric"></label>
</fieldset>

<!-- Grupowanie spoza formularza -->
<div role="group" aria-labelledby="ratingLabel">
  <span id="ratingLabel">Rate this article</span>
  <button type="button" aria-label="1 star">★</button>
  <button type="button" aria-label="2 stars">★★</button>
</div>