initial commit

1 files changed, 128 insertions, 0 deletions

diff --git a/files/fr/accessibilité/aria/techniques_aria/utiliser_le_role_group/index.html b/files/fr/accessibilité/aria/techniques_aria/utiliser_le_role_group/index.html
new file mode 100644
index 0000000000..3e335427c7
--- /dev/null
+++ b/files/fr/accessibilité/aria/techniques_aria/utiliser_le_role_group/index.html
@@ -0,0 +1,128 @@
+---
+title: Utiliser le rôle group
+slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_group
+tags:
+  - ARIA
+  - Accessibilité
+  - Rôle
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role
+---
+<h3 id="Description">Description</h3>
+
+<div class="summary">
+<p>Cette technique présente l’utilisation du rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#group">group</a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p>
+</div>
+
+<p>Le rôle <code>group</code> est utilisé pour identifier un ensemble d’objets de l’interface utilisateur qui, contrairement à une <a class="external" href="http://www.w3.org/TR/wai-aria/roles#region"><code>region</code></a>, ne sont pas destinés à être intégrés dans une table de contenus ou une page récapitulative (telles que des structures dynamiquement créées par des scripts ou par les technologies d’assistance) ; un groupe ne devrait pas être considéré comme une partie perceptible majeure d’une page. Lorsque le rôle <code>group</code> est ajouté à un élément, , le navigateur émettra un événement <code>group</code> accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur.</p>
+
+<p>Un groupe devrait utilisé pour former un ensemble logique d’éléments avec des fonctions connexes, tels que les enfants dans un composant d’arborescence formant un ensemble apparenté dans une hiérarchie, ou une collection d’éléments ayant le même conteneur dans un répertoire. Cependant, lorsqu’on utilise un groupe pour former une liste, les développeurs doivent limiter ses enfants aux éléments <a class="external" href="http://www.w3.org/TR/wai-aria/roles#listitem">listitem</a>. Les éléments de groupe devraient être imbriqués.</p>
+
+<p>La gestion correcte d’un groupe par les technologies d’assistance est déterminée par le contexte dans lequel il est fourni.</p>
+
+<p>Si un auteur pense qu’une section est suffisamment importante pour faire partie de la table des matières d’une page, il devrait assigner un rôle de <a class="external" href="http://www.w3.org/TR/wai-aria/roles#region"><code>region</code></a> ou un rôle standard de <a class="external" href="http://www.w3.org/TR/wai-aria/roles#landmark_roles">point de repère</a> à cette section.</p>
+
+<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3>
+
+<p>Lorsque le rôle <code>group</code> est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes :</p>
+
+<ul>
+ <li>Présenter l’élément ayant un rôle de groupe à l’API d’accessibilité du système d’exploitation ;</li>
+ <li>Déclencher un événement groupe accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge.</li>
+</ul>
+
+<p>Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :</p>
+
+<ul>
+ <li>Les lecteurs d’écran devraient annoncer le groupe lorsque le focus atteint l’un des contrôles appartenant au groupe, et si <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby"><span class="s1">aria-describedby</span></a> a été défini, la description peut être lue. Après cela seulement le contrôle focalisé devrait être annoncé.</li>
+ <li>Les loupes d’écran devraient agrandir le groupe.</li>
+</ul>
+
+<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div>
+
+<h3 id="Exemples">Exemples</h3>
+
+<h4 id="Exemple_1_Utiliser_le_rôle_group_avec_une_arborescence_HTML">Exemple 1 : Utiliser le rôle <code>group</code> avec une arborescence HTML</h4>
+
+<p>L’extrait de code ci-dessous montre comment le rôle <code>group</code> est ajouté directement dans le code source HTML.</p>
+
+<pre class="brush: html">&lt;div id="tree1" class="tree" role="tree" tabindex="-1"&gt;
+  &lt;div id="animals" class="groupHeader" role="presentation" aria-owns="animalGroup" aria-expanded="true"&gt;
+    &lt;img class="headerImg" role="presentation" tabindex="-1" src="images/treeExpanded.gif" /&gt;
+    &lt;span role="treeitem" tabindex="0"&gt;Animaux&lt;/span&gt;
+  &lt;/div&gt;
+
+  &lt;div id="animalGroup" class="group" role="group"&gt;
+    &lt;div id="birds" class="treeitem" role="presentation"&gt;
+      &lt;span role="treeitem" tabindex="-1"&gt;Oiseaux&lt;/span&gt;
+    &lt;/div&gt;
+
+    &lt;div id="cats" class="groupHeader" role="presentation" aria-owns="catGroup" aria-expanded="false"&gt;
+      &lt;img class="headerImg" role="presentation" tabindex="-1" src="images/treeContracted.gif" /&gt;
+      &lt;span role="treeitem" tabindex="0"&gt;Chats&lt;/span&gt;
+    &lt;/div&gt;
+
+ &lt;div id="catGroup" class="group" role="group"&gt;
+      &lt;div id="siamese" class="treeitem" role="presentation"&gt;
+        &lt;span role="treeitem" tabindex="-1"&gt;Siamois&lt;/span&gt;
+      &lt;/div&gt;
+      &lt;div id="tabby" class="treeitem" role="presentation"&gt;
+        &lt;span role="treeitem" tabindex="-1"&gt;Tigré&lt;/span&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="Exemple_2_Utiliser_le_rôle_group_avec_un_menu_déroulant_HTML">Exemple 2 : Utiliser le rôle <code>group</code> avec un menu déroulant HTML</h4>
+
+<p>L’extrait de code ci-dessous montre comment le rôle <code>group</code> est ajouté directement au code source HTML.</p>
+
+<pre class="brush: html">&lt;div role="menu"&gt;
+  &lt;ul role="group"&gt;
+    &lt;li role="menuitem"&gt;Courrier entrant&lt;/li&gt;
+    &lt;li role="menuitem"&gt;Archive&lt;/li&gt;
+    &lt;li role="menuitem"&gt;Corbeille&lt;/li&gt;
+  &lt;/ul&gt;
+  &lt;ul role="group"&gt;
+    &lt;li role="menuitem"&gt;Dossier personnalisé 1&lt;/li&gt;
+    &lt;li role="menuitem"&gt;Dossier personnalisé 2&lt;/li&gt;
+    &lt;li role="menuitem"&gt;Dossier personnalisé 3&lt;/li&gt;
+  &lt;/ul&gt;
+
+  &lt;ul role="group"&gt;
+    &lt;li role="menuitem"&gt;Nouveau dossier&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="Exemples_concrets">Exemples concrets :</h4>
+
+<ul>
+ <li><a class="external" href="http://test.cita.illinois.edu/aria/tree/tree2.php">http://test.cita.illinois.edu/aria/tree/tree2.php</a></li>
+</ul>
+
+<h3 id="Notes">Notes</h3>
+
+<ul>
+ <li>Les membres du groupe qui se trouve à l’extérieur du sous-arbre DOM du groupe doivent avoir leurs relations avec ce dernier explicitement assignées afin de participer au groupe.</li>
+</ul>
+
+<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#group">group (en)</a></li>
+</ul>
+
+<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3>
+
+<ul>
+ <li>Rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#region">region (en)</a></li>
+</ul>
+
+<h3 id="Compatibilité">Compatibilité</h3>
+
+<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p>
+
+<h3 id="Autres_ressources">Autres ressources</h3>
+
+<ul>
+ <li>Bonnes pratiques ARIA – Répertoires, groupes et zones : <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#kbd_layout_groupheading">Directories, Groups, and Regions (en)</a></li>
+</ul>