Ruolo Struttura del documento

`group`

Individua un raggruppamento generico di elementi correlati. Semanticamente meno rilevante di un landmark — i screen reader non elencano i group nel menu dei landmark. Si usa <fieldset> + <legend> per raggruppare controlli di modulo; si ricorre a role="group" per raggruppamenti non relativi a moduli.

Quando usarlo

Per raggruppare controlli di modulo, si utilizza <fieldset> con <legend>. L’elemento nativo fornisce la semantica di raggruppamento, il bordo visivo (da stilizzare liberamente) e l’associazione alla legenda.

role="group" è lo strumento appropriato quando:

Si avvolge un insieme di controlli correlati ma non appartenenti a un modulo (i tre combo box di un date picker, una fila di pulsanti icona attivabili).
È necessario contrassegnare una sottoregione all’interno di un tree, treeview o grid, dove i figli di ciascun livello formano un gruppo logico.
Si desidera un raggruppamento che NON venga esposto come landmark — per questa distinzione si veda role="region".

Un group DOVREBBE avere un nome accessibile (aria-label o aria-labelledby) quando il suo scopo non è evidente dal contesto. Senza nome, il group è invisibile ai screen reader e il ruolo non aggiunge valore.

Errori comuni

role="group" senza nome accessibile. I screen reader ignorano il ruolo; il group risulta invisibile.
Usare role="group" dove <fieldset> + <legend> sarebbero appropriati. L’elemento nativo è da preferire.
Confondere role="group" con role="region". Region è un landmark e compare nella navigazione per landmark; group no.
Contrassegnare come group ogni sezione dell’interfaccia. Va usato con parsimonia — troppi raggruppamenti ne sminuiscono il valore.
role="group" sul contenitore di un role="tablist". Ridondante; il tablist è già un costrutto di raggruppamento.

Esempio

<!-- Preferito per controlli di modulo -->
<fieldset>
  <legend>Data di nascita</legend>
  <label>Giorno <input type="text" inputmode="numeric"></label>
  <label>Mese <input type="text" inputmode="numeric"></label>
  <label>Anno <input type="text" inputmode="numeric"></label>
</fieldset>

<!-- Raggruppamento non relativo a moduli -->
<div role="group" aria-labelledby="ratingLabel">
  <span id="ratingLabel">Valuta questo articolo</span>
  <button type="button" aria-label="1 stella">★</button>
  <button type="button" aria-label="2 stelle">★★</button>
</div>