Rôle Structure du document

`group`

Marque un regroupement générique d'éléments liés. Moins lourd sémantiquement qu'un landmark — les lecteurs d'écran n'annoncent pas les groupes dans le menu des landmarks. Utilisez <fieldset> + <legend> pour les contrôles de formulaire groupés ; recourez à role="group" pour les regroupements non-formulaires.

Quand l’utiliser

Pour les contrôles de formulaire groupés, utilisez <fieldset> avec <legend>. L’élément natif vous offre la sémantique de groupe, la bordure visuelle (à styliser selon vos besoins) et l’association avec la légende.

role="group" est le bon outil quand :

Vous regroupez un ensemble de contrôles liés mais non-formulaires (les trois combobox d’un sélecteur de date, une rangée de boutons bascule avec icônes).
Vous devez marquer une sous-région à l’intérieur d’un arbre, d’un treeview ou d’une grille où les enfants de chaque niveau forment un groupe logique.
Vous souhaitez un regroupement NON exposé comme landmark — pour cette distinction, voir role="region".

Un groupe DEVRAIT avoir un nom accessible (aria-label ou aria-labelledby) lorsque son objectif n’est pas évident dans le contexte. Sans nom, le groupe est invisible aux lecteurs d’écran et le rôle n’apporte aucune valeur.

Erreurs courantes

role="group" sans nom accessible. Les lecteurs d’écran ignorent le rôle ; le groupe est invisible.
Utiliser role="group" là où <fieldset> + <legend> fonctionneraient. L’élément natif est préférable.
Confondre role="group" et role="region". Region est un landmark et apparaît dans la navigation par landmarks ; group non.
Marquer chaque section de l’interface comme un groupe. À utiliser avec parcimonie — trop de regroupements diminuent la valeur de chacun.
role="group" sur l’enveloppe d’un role="tablist". Redondant ; la tablist est déjà un construct de regroupement.

Exemple

<!-- Préféré pour les contrôles de formulaire -->
<fieldset>
  <legend>Date de naissance</legend>
  <label>Jour <input type="text" inputmode="numeric"></label>
  <label>Mois <input type="text" inputmode="numeric"></label>
  <label>Année <input type="text" inputmode="numeric"></label>
</fieldset>

<!-- Regroupement non-formulaire -->
<div role="group" aria-labelledby="ratingLabel">
  <span id="ratingLabel">Évaluer cet article</span>
  <button type="button" aria-label="1 étoile">★</button>
  <button type="button" aria-label="2 étoiles">★★</button>
</div>