ARIA : rôle group
Le rôle group identifie un ensemble d'objets d'interface utilisateur qui n'est pas destiné à être inclus dans un résumé de page ou une table des matières par les technologies d'assistance.
Description
Le rôle group, le plus étroitement lié à l'élément HTML <fieldset>, il est utilisé pour identifier un ensemble d'objets d'interface utilisateur qui, par rapport à region, n'est pas destiné à être inclus dans le résumé ou la table des matières de la page.
Le rôle group doit être utilisé pour former une collection logique d'éléments ayant une fonctionnalité connexe, comme les enfants d'un widget tree formant une collection de frères et sœurs dans une hiérarchie, ou une collection d'éléments ayant le même conteneur dans un directory.
Lorsqu'un group est utilisé dans le contexte d'une list, limitez les enfants du group aux éléments listitem. Dans ce cas, il est recommandé d'utiliser plusieurs listes ordonnées ou non ordonnées, <ol> ou <ul>, avec des enfants <li> imbriqués.
Lorsqu'il est utilisé dans le contexte d'une listbox, les seuls enfants autorisés sont les éléments <option>. Dans ce cas, il est recommandé d'utiliser <select>, <option> et <optgroup> à la place.
Les éléments group peuvent être imbriqués.
Le rôle group ne doit pas être utilisé pour des sections majeures et perceptibles d'une page. Si une section est suffisamment significative pour être incluse dans la table des matières de la page, utilisez le rôle region ou un rôle de point de repère standard.
Lorsqu'un rôle est ajouté à un élément, le navigateur enverra un événement de groupe accessible aux produits de technologie d'assistance, qui pourront alors en informer l'utilisateur·ice.
Exemples
L'exemple de code HTML ci-dessous utilise le rôle group avec une vue tree :
<div id="tree1" role="tree" tabindex="-1">
<div
id="animals"
class="groupHeader"
role="presentation"
aria-owns="animalGroup"
aria-expanded="true">
<img role="presentation" tabindex="-1" src="images/treeExpanded.gif" />
<span role="treeitem" tabindex="0">Animaux</span>
</div>
<div id="animalGroup" role="group">
<div id="birds" role="treeitem">
<span tabindex="-1">Oiseaux</span>
</div>
<div
id="cats"
class="groupHeader"
role="presentation"
aria-owns="catGroup"
aria-expanded="false">
<img role="presentation" tabindex="-1" src="images/treeContracted.gif" />
<span role="treeitem" tabindex="0">Chats</span>
</div>
<div id="catGroup" role="group">
<div id="siamese" role="treeitem">
<span tabindex="-1">Siamois</span>
</div>
<div id="tabby" role="treeitem">
<span tabindex="-1">Tabby</span>
</div>
</div>
</div>
</div>
L'exemple suivant utilise le rôle group avec un menu déroulant menu contenant des menuitem :
<div role="menu">
<ul role="group">
<li role="menuitem">Boîte de réception</li>
<li role="menuitem">Archive</li>
<li role="menuitem">Corbeille</li>
</ul>
<ul role="group">
<li role="menuitem">Dossier personnalisé 1</li>
<li role="menuitem">Dossier personnalisé 2</li>
<li role="menuitem">Dossier personnalisé 3</li>
</ul>
<ul role="group">
<li role="menuitem">Nouveau dossier</li>
</ul>
</div>
Ce menu pourrait être construit en utilisant les éléments <select> et <option>. Dans ce cas, le rôle group serait le plus similaire à l'élément <optgroup>.
Spécifications
| Specification |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # group |