unslug fr: move

7 files changed, 554 insertions, 0 deletions

diff --git a/files/fr/web/accessibility/aria/roles/banner_role/index.html b/files/fr/web/accessibility/aria/roles/banner_role/index.html
new file mode 100644
index 0000000000..3a717bbdaa
--- /dev/null
+++ b/files/fr/web/accessibility/aria/roles/banner_role/index.html
@@ -0,0 +1,39 @@
+---
+title: Utilisation du rôle banner
+slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_banner
+tags:
+  - ARIA
+  - Accessibilité
+  - NeedsContent
+  - Rôle
+translation_of: Web/Accessibility/ARIA/Roles/Banner_role
+---
+<h3 id="Description">Description</h3>
+
+<div class="summary">Cette technique présente l’utilisation du rôle <a class="external external-icon" href="https://www.w3.org/TR/wai-aria/roles#banner" hreflang="en" title="http://www.w3.org/TR/wai-aria/roles#alert"><code>banner</code> (en)</a>.</div>
+
+<p>La zone d’entête principale d'un site devrait être structurée avec  <code>&lt;header role="banner"&gt;</code>. Cette zone peut contenir le logo du site, sa description, le moteur de recherche.</p>
+
+<p>Une page web ne doit pas contenir plus d'un rôle <code>banner</code>, mais il est tout à fait possible d'utiliser plusieurs éléments <code>&lt;header&gt;</code> dans une page.</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> </p>
+
+<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="Une_zone_d'entête_typique_de_site">Une zone d'entête typique de site </h4>
+
+<pre class="brush: html">&lt;header role="banner"&gt;
+  &lt;p&gt;&lt;img src="logo.png" alt="Nom du site"&gt;&lt;/p&gt;
+  &lt;p&gt;Description du site&lt;/p&gt;
+  &lt;div role="search"&gt;
+    ...
+  &lt;/div&gt;
+&lt;/header&gt; </pre>
+
+<h2 id="Autres_ressources">Autres ressources</h2>
+
+<p>La <a href="http://www.accede-web.com/notices/html-css-javascript/1-structure/1-1-header-role-banner/">fiche accede-web</a>.</p>
diff --git a/files/fr/web/accessibility/aria/roles/button_role/index.html b/files/fr/web/accessibility/aria/roles/button_role/index.html
new file mode 100644
index 0000000000..55038b46da
--- /dev/null
+++ b/files/fr/web/accessibility/aria/roles/button_role/index.html
@@ -0,0 +1,123 @@
+---
+title: Utilisation du rôle button
+slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_button
+tags:
+  - ARIA
+  - Accessibilité
+  - Role(2)
+  - Rôle
+  - À relire
+translation_of: Web/Accessibility/ARIA/Roles/button_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#button" title="http://www.w3.org/TR/wai-aria/roles#button">button</a>.</p>
+</div>
+
+<p>Ce rôle devrait être utilisé pour des éléments cliquables qui déclenchent une réponse lorsqu’activés par l’utilisateur. Par lui-même, <code>role="button</code> peut faire apparaître n’importe quel élément (par exemple &lt;p&gt;, &lt;span&gt; ou &lt;div&gt;) sous la forme d'un contrôle bouton à un lecteur d’écran. De plus ce rôle peut être utilisé en combinaison avec l’attribut <code>aria-pressed</code> pour créer des boutons à bascule.</p>
+
+<div class="note"><strong>Note :</strong> lorsque c’est possible, il est recommandé d’utiliser les boutons HTML natifs (<code>&lt;button&gt;</code>, <code>&lt;input type="button" /&gt;</code> et <code>&lt;input type="image" /&gt;</code>) plutôt que le rôle <code>button</code>, les boutons HTML étant plus largement pris en charge par les anciennes technologies d’assistance. Les boutons HTML natifs obéissent également par défaut aux évènements clavier et aux règles de focus, sans besoin de personnalisation supplémentaire.</div>
+
+<h4 id="Clavier_et_focus">Clavier et focus</h4>
+
+<p>Les boutons sont des contrôles interactifs et doivent donc être focalisables. Si le rôle <code>button</code> est ajouté à un élément qui n’est par lui-même pas focalisable (tels que <code>&lt;span&gt;</code>,<code>&lt;div&gt;</code> ou<code>&lt;p&gt;</code>), l’attribut <code>tabindex</code> devra être utilisé pour rendre le bouton focalisable.</p>
+
+<p>Les boutons doivent pouvoir être actionnés tant par une souris qu’avec un clavier. Pour les boutons HTML natifs, l’évènement <code>onclick</code> du bouton sera déclenché par les clics de souris et lorsque la <kbd>barre d’espace</kbd> ou la touche <kbd>entrée</kbd> est actionnée alors que le bouton a le focus. Si <code>role="button"</code> est utilisé pour créer un bouton personnalisé, l’évènement <code>onclick</code> ne sera déclenché qu’après un clic par le pointeur de la souris. À cause de cela, le développeur devra explicitement ajouter un gestionnaire d’évènements clavier séparé à l’élément pour que le bouton puisse être actionné lorsque les touches <kbd>barre d’espace</kbd> ou <kbd>entrée</kbd> sont pressées.</p>
+
+<div class="warning"><strong>Attention :</strong> faites attention à l’utilisation de rôle <code>button</code> pour des liens. Les boutons devraient être actionnés à l’aide de la <kbd>barre d’espace</kbd> ou la touche <kbd>entrée</kbd>, alors qu’on s’attend à ce que les liens soient déclenchés avec la touche <kbd>Entrée</kbd>. En d’autres termes, lorsque des liens sont utilisés comme des boutons, le seul ajout de <code>role="button"</code> n’est pas suffisant. Il est également nécessaire d’ajouter un gestionnaire d’évènement clavier qui surveillera la <kbd>barre d'espace</kbd> afin d’être cohérent avec les boutons natifs.</div>
+
+<h4 id="Boutons_à_bascule">Boutons à bascule</h4>
+
+<p>Un des avantages de l’utilisation de <code>role="button"</code> est qu’il permet la création de boutons à bascule. Un bouton à bascule peut avoir deux états : pressé et non pressé. Qu’un bouton soit ou non un bouton à bascule peut être indiqué avec l’attribut <code>aria-pressed</code> en plus du rôle <code>button</code> :</p>
+
+<ul>
+ <li>Si <code>aria-pressed</code> n’est pas utilisé, le bouton n’est pas un bouton à bascule ;</li>
+ <li>Si <code>aria-pressed="false"</code> est utilisé, le bouton est un bouton à bascule au repos ;</li>
+ <li>Si <code>aria-pressed="true"</code> est utilisé, le bouton est un bouton à bascule actionné ;</li>
+ <li>Si <code>aria-pressed="mixed"</code> est utilisé, le bouton est considéré comme étant partiellement actionné.</li>
+</ul>
+
+<h4 id="Labelliser_les_boutons">Labelliser les boutons</h4>
+
+<p>Les boutons doivent toujours avoir un nom accessible. Pour la plupart des boutons, ce nom sera le même que le texte du bouton. Dans certains cas, par exemple pour des boutons icônes, le nom accessible peut être donné à l’aide des attributs <code>aria-label</code> ou <code>aria-labelledby</code>.</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>button</code> est utilisé, les agents utilisateurs doivent présenter l’élément comme un contrôle bouton à l’API accessibilité du système d’exploitation. Les lecteurs d’écran doivent annoncer l’élément comme un bouton et décrire son nom accessible. Les logiciels de reconnaissance vocale doivent autoriser le bouton à s’activer en dictant le mot « clic » suivi par le nom accessible du bouton.</p>
+
+<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_un_bouton_simple">Exemple 1 : un bouton simple</h4>
+
+<p>Dans l’extrait de code ci-dessous, on donne le rôle <code>button</code> à un élément <code>&lt;span&gt;</code>. Parce qu’un élément <code>&lt;span&gt;</code> est utilisé, l’attribut <code>tabindex</code> est requis pour rendre le bouton focalisable et le faire appartenir à l’ordre de tabulation. Remarquez que cet extrait de code implique que les styles CSS sont fournis pour donner l’apparence d’un bouton à l’élément <code>&lt;span&gt;</code> et que <code>hanldeBtnClick</code> et <code>handleBtnKeyUp</code> sont des gestionnaires d’événements qui exécutent l’action du bouton lorsqu’il est cliqué et lorsque la barre d’espace est pressée.</p>
+
+<pre class="brush: html">&lt;span role="button" tabindex="0" onclick="handleBtnClick()" onKeyUp="handleBtnKeyUp()"&gt;Enregistrer&lt;/span&gt;</pre>
+
+<h4 id="Exemple_2_un_bouton_à_bascule">Exemple 2 : un bouton à bascule</h4>
+
+<p>Dans cet extrait de code, un bouton HTML natif est converti en un bouton à bascule à l’aide de l’attribut <code>aria-pressed</code>. Remarquez que l’attribut <code>tabindex</code> n’a pas à être utilisé ici car l’élément <code>&lt;button&gt;</code> est déjà focalisable par défaut. Lorsque le bouton est activé, la valeur de <code>aria-pressed</code> bascule entre <code>true</code> et <code>false</code> :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE HTML&gt;
+&lt;html lang="fr"&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;title&gt;Exemple de rôle ARIA button&lt;/title&gt;
+    &lt;style type="text/css"&gt;
+      [role="button"] {
+       padding:3px;
+       border: 1px solid #CCC;
+      }
+      [role="button"][aria-pressed="true"] {
+       border: 2px solid #000;
+      }
+     &lt;/style&gt;
+    &lt;script type="text/JavaScript"&gt;
+      function handleBtnClick(event) {
+        event = event || window.event;
+        var pressed = event.target.getAttribute("aria-pressed") == "true";
+        //change la valeur de aria-pressed quand le bouton est basculé :
+        event.target.setAttribute("aria-pressed", pressed ? "false" : "true");
+        //… (perform the button's logic here)
+      }
+
+      function handleBtnKeyUp(event) {
+        event = event || window.event;
+        if (event.keyCode === 32) { // contrôle la touche espace
+          handleBtnClick(event);
+        }
+      }
+    &lt;/script&gt;
+  &lt;/head&gt;
+
+  &lt;body&gt;
+    &lt;button role="button" aria-pressed="false" onclick="handleBtnClick(event)" onKeyUp="handleBtnKeyUp(event)"&gt;Mode Édition&lt;/button&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h4 id="Exemples_concrets">Exemples concrets :</h4>
+
+<ul>
+ <li>Exemples de boutons <a class="external" href="http://test.cita.illinois.edu/aria/button/index.php" title="Exemples de boutons ARIA"><abbr title="Illinois Center for Information Technology and Web Accessibility">ICITA</abbr> (en)</a> ;</li>
+ <li><a class="external" href="http://www.paciellogroup.com/blog/misc/ARIA/togglebutton.html" title="Boutons à bascule ARIA">Exemples de boutons par Paciello Group (en)</a>.</li>
+</ul>
+
+<h3 id="Notes">Notes</h3>
+
+<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#button" title="http://www.w3.org/TR/wai-aria/roles#button">button</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-pressed" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-pressed">aria-pressed</a></li>
+</ul>
+
+<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3>
+
+<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>
diff --git a/files/fr/web/accessibility/aria/roles/checkbox_role/index.html b/files/fr/web/accessibility/aria/roles/checkbox_role/index.html
new file mode 100644
index 0000000000..5b42eb0583
--- /dev/null
+++ b/files/fr/web/accessibility/aria/roles/checkbox_role/index.html
@@ -0,0 +1,52 @@
+---
+title: Utilisation du rôle checkbox
+slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_checkbox
+tags:
+  - ARIA
+  - Accessibilité
+  - Rôle
+translation_of: Web/Accessibility/ARIA/Roles/checkbox_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#checkbox" title="http://www.w3.org/TR/wai-aria/roles#checkbox">checkbox</a>.</p>
+</div>
+<p>Le rôle <code>checkbox</code> est utilisé pour des contrôles interactifs à cocher. Si un élément utilise <code>role="checkbox",</code> il est obligatoire pour cet élément d’avoir également un attribut <code>aria-checked</code> qui présente l’état de la case à cocher aux technologies d’assistance. Alors que le contrôle de formulaire HTML natif <code>checkbox</code> ne peut avoir que deux états (« coché » ou « décoché »), un élément avec le rôle <code>role=checkbox</code> peut présenter trois états pour l'attribut <code>aria-checked</code> :</p>
+<ul>
+ <li><code>aria-checked="true"</code> : la case est cochée ;</li>
+ <li><code>aria-checked="false"</code> : la case est décochée ;</li>
+ <li><code>aria-checked="mixed"</code> : la case est partiellement cochée.</li>
+</ul>
+<p>Le développeur doit modifier dynamiquement la valeur de l’attribut <code>aria-checked</code> lorsque la case est cochée.</p>
+<p>Comme une case à cocher est un contrôle interactif, elle doit pouvoir recevoir le focus et être accessible au clavier. Si le rôle est appliqué à un élément qui ne peut recevoir le focus, l’attribut <code>tabindex</code> devra être utilisé pour corriger cela. Le raccourci clavier attendu pour activer une case à cocher est la barre d’espace.</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>checkbox</code> est ajouté à un élément, l’agent utilisateur devrait suivre les étapes suivantes :</p>
+<ul>
+ <li>Présenter l’élément comme ayant un rôle de case à cocher à l’API d’accessibilité du système d’exploitation ;</li>
+ <li>Lorsque la valeur de l’attribut <code>aria-checked</code> change, envoyer un événement accessible de changement d’état.</li>
+</ul>
+<p>Les technologies d’assistance doivent faire la chose suivante :</p>
+<ul>
+ <li>Les lecteurs d’écran devraient annoncer l’élément comme une case à cocher, et, éventuellement, fournir des instructions sur les façons de l’activer.</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_Ajout_du_rôle_ARIA_checkbox">Exemple 1 : Ajout du rôle ARIA <code>checkbox</code></h4>
+<pre class="brush: html">&lt;span role="checkbox" aria-checked="false" tabindex="0" id="chk1"&gt;&lt;/span&gt;
+&lt;label for="chk1"&gt;Enregistrer mes préférences&lt;/label&gt;
+</pre>
+<h4 id="Exemples_concrets">Exemples concrets :</h4>
+<ul>
+ <li><a class="external" href="http://test.cita.uiuc.edu/aria/checkbox/checkbox1.php" title="http://test.cita.uiuc.edu/aria/checkbox/checkbox1.php">http://test.cita.uiuc.edu/aria/checkbox/checkbox1.php</a></li>
+</ul>
+<h3 id="Notes">Notes</h3>
+<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#checkbox" title="ARIA Roles #checkbox">checkbox</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-checked" title="ARIA States and Properties #aria-checked">aria-checked</a></li>
+</ul>
+<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3>
+<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>
diff --git a/files/fr/web/accessibility/aria/roles/dialog_role/index.html b/files/fr/web/accessibility/aria/roles/dialog_role/index.html
new file mode 100644
index 0000000000..62da7745fb
--- /dev/null
+++ b/files/fr/web/accessibility/aria/roles/dialog_role/index.html
@@ -0,0 +1,148 @@
+---
+title: Utilisation du rôle dialog
+slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog
+tags:
+  - ARIA
+  - Accessibilité
+  - Développement Web
+  - Rôle
+translation_of: Web/Accessibility/ARIA/Roles/dialog_role
+---
+<h3 id="Description">Description</h3>
+
+<div class="summary">
+<p>Cette technique présente l’utilisation du rôle <code><a class="external" href="http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#dialog" title="http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#alertdialog">dialog (en)</a></code>.</p>
+</div>
+
+<p>Le rôle <code>dialog</code> est utilisé pour marquer une fenêtre ou une boîte de dialogue d’application web qui sépare le contenu ou l’UI du reste de l’application web ou de la page. Visuellement, les boîtes de dialogues sont généralement placées par dessus le contenu de la page, à l’aide d’un calque (ou « Overlay »). Les boîtes de dialogue peuvent être non-modales (ce qui signifie qu’il est toujours possible d’interagir avec le contenu situé hors de la boîte de dialogue) ou modales (ce qui signifie qu’on ne peut interagir qu’avec le contenu de la boîte de dialogue).</p>
+
+<p>Marquer un élément de dialogue avec le rôle <code>dialog</code> aide les technologies d’assistance à identifier le contenu des boîtes de dialogue comme étant regroupé et séparé du reste du contenu de la page. Cependant, le seul ajout de <code>role="dialog"</code> n’est pas suffisant pour rendre une boîte de dialogue accessible. De plus, il faut veiller à ce qui suit :</p>
+
+<ul>
+ <li>La boîte de dialogue doit être correctement labélisée ;</li>
+ <li>Le focus clavier doit être géré correctement.</li>
+</ul>
+
+<p>Les sections ci-dessous décrivent comment ces deux exigences peuvent être satisfaites.</p>
+
+<h4 id="Labélisation">Labélisation</h4>
+
+<p>Bien qu’il ne soit pas obligatoire que la boîte de dialogue elle-même reçoive le focus, elle doit quand même besoin d’être labélisée. Le label donné à la boîte de dialogue fournira des informations contextuelles pour les contrôles interactifs qu’elle contient. En d’autres termes, le label de la boîte de dialogue agit comme label de regroupement pour les contrôles qu’elle contient. On peut comparer cela à la façon dont un élément <code>&lt;legend&gt;</code> fournit un label de regroupement pour les contrôles contenus dans un élément <code>&lt;fieldset&gt;</code>.</p>
+
+<p>Si une boîte de dialogue a une barre de titre visible, le texte de cette barre peut être utilisé comme label pour la boîte elle-même. La meilleure façon de le faire est d’utiliser l’attribut <code>aria-labelledby</code> pour l’élément <code>role="dialog"</code>. De plus, si la boîte de dialogue contient une description supplémentaire, en plus du titre de la boîte, le texte de la description peut être associé avec la boîte de dialogue à l’aide de l’attribut <code>aria-describedby</code>. Cette approche est illustrée dans l’extrait de code ci-dessous :</p>
+
+<pre class="brush: html notranslate">&lt;div <strong>role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"</strong>&gt;
+    &lt;h2 <strong>id="dialog1Title"</strong>&gt;Vos informations personnelles ont correctement été actualisées.&lt;/h2&gt;
+
+    &lt;p <strong>id="dialog1Desc"</strong>&gt;Vous pouvez modifier vos informations personnelles à n’importe quel moment depuis la section « Compte utilisateur. »&lt;/p&gt;
+
+    &lt;button&gt;Fermer&lt;/button&gt;
+&lt;/div&gt;
+</pre>
+
+<div class="note">Gardez en tête que le titre d’une boîte de dialogue et sa description ne doivent pas être focalisables afin de toujours être perçus par les lecteurs d’écran opérant en mode non-virtuel. La combinaison du rôle ARIA <code>dialog</code> et des techniques de labélisation devrait permettre aux lecteurs d’écran d’annoncer les informations de la boîte de dialogue lorsque le focus arrive sur cette dernière.</div>
+
+<h4 id="Gestion_du_focus">Gestion du focus</h4>
+
+<p>Une boîte de dialogue a des exigences particulières concernant la façon dont le focus clavier doit être géré :</p>
+
+<ul>
+ <li>Les boîtes de dialogue doivent avoir au moins un contrôle focalisable. Pour de nombreuses boîtes de dialogues, ce contrôle sera un bouton « Fermer », « OK » ou « Annuler. » En plus de cela, les boîtes de dialogue peuvent contenir n’importe quelle quantité d’éléments focalisables, même des formulaires ou d'autres composants conteneurs comme des onglets.</li>
+ <li>Quand la boîte de dialogue s’affiche à l’écran, le focus clavier devrait être placé sur le contrôle focalisable par défaut de la boîte de dialogue. Ce contrôle dépend de la fonction des boîtes de dialogue. Pour les boîtes de dialogue ne fournissant qu’un texte simple, ce pourra être un bouton « OK ». Pour les boîtes de dialogue contenant un formulaire, ce pourra être le premier champ à renseigner du formulaire.</li>
+ <li>Pour la plupart des boîtes de dialogue, le comportement attendu est que l’ordre de tabulation de la boîte <em>tourne</em>, c’est-à-dire que le premier élément focalisable sera focalisé après que le dernier élément focalisable de la boîte de dialogue aura été atteint lorsque l’utilisateur tabule. En d’autres termes, l’ordre de tabulation doit être contenu par la boîte de dialogue.</li>
+ <li>Si la boîte de dialogue peut être déplacée ou redimensionnée, assurez-vous que ces actions peuvent être exécutées par les utilisateurs de clavier tout comme les utilisateurs de souris. De la même façon, si une boîte de dialogue fournit certaines fonctionnalités, comme des barres d’outils ou des menus contextuels, celles-ci doivent également être accessibles et pouvoir être actionnées par les utilisateurs de clavier.</li>
+ <li>Les boîtes de dialogue peuvent être modales ou non modales. Lorsqu’une boîte de dialogue <em>modale</em> s’affiche à l’écran, il n’est pas possible d’interagir avec le reste du contenu de la page. En d’autres termes, l’UI principale de l’application ou le contenu de la page est considéré comme temporairement désactivé tant que la boîte de dialogue modale est affichée. Pour les boîtes de dialogue <em>non modales</em> il est toujours possible d’interagir avec du contenu extérieur à la boîte lorsqu’elle est affichée. Pour les boîtes de dialogue non modales, il y devra toujours y avoir un raccourci clavier global permettant de déplacer le focus entre les boîtes de dialogue ouvertes et la page principale. Pour plus d’informations, lisez le guide <a href="/fr/docs/ARIA/Guides_ARIA/Gérer_les_dialogues_modaux_et_non_modaux" title="/en-US/docs/ARIA/Guides_ARIA/Managing_Modal_and_Non_Modal_Dialogs">Gérer les dialogues modaux et non modaux</a>.</li>
+</ul>
+
+<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>dialog</code> est utilisé, l’agent utilisateur doit faire la chose suivante :</p>
+
+<ul>
+ <li>Présenter l’élément comme une boîte de dialogue à l’API accessibilité du système d’exploitation.</li>
+</ul>
+
+<p>Lorsque la boîte de dialogue est correctement labélisée et que le focus est déplacé vers un contrôle à l’intérieur de la boîte, les lecteurs d’écran devraient annoncer le rôle accessible du dialogue, son nom et éventuellement sa description avant d’annoncer l’élément qui a reçu le focus.</p>
+
+<div class="note"><strong>Note :</strong> plusieurs points de vue existent 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_une_boîte_de_dialogue_contenant_un_formulaire">Exemple 1 : une boîte de dialogue contenant un formulaire</h4>
+
+<pre class="brush: html notranslate">&lt;div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"&gt;
+    &lt;h2 id="dialog1Title"&gt;Formulaire de souscription&lt;/h2&gt;
+
+    &lt;p id="dialog1Desc"&gt;Nous ne partageons pas ces informations avec des tierces parties.&lt;/p&gt;
+
+    &lt;form&gt;
+        &lt;p&gt;
+            &lt;label for="firstName"&gt;Prénom&lt;/label&gt;
+            &lt;input id="firstName" type="text" /&gt;
+        &lt;/p&gt;
+
+        &lt;p&gt;
+            &lt;label for="lastName"&gt;Nom&lt;/label&gt;
+            &lt;input id="lastName" type="text" /&gt;
+        &lt;/p&gt;
+
+        &lt;p&gt;
+            &lt;label for="interests"&gt;Intérêts&lt;/label&gt;
+            &lt;textarea id="interests"&gt;&lt;/textarea&gt;
+        &lt;/p&gt;
+
+        &lt;p&gt;
+            &lt;input type="checkbox" id="autoLogin" /&gt;
+            &lt;label for="autoLogin"&gt;Intérêts&lt;/label&gt;
+        &lt;/p&gt;
+
+        &lt;p&gt;
+            &lt;input type="submit" value="Enregistrer les informations"/&gt;
+            &lt;/p&gt;
+    &lt;/form&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="Exemple_2_une_boîte_de_dialogue_basée_sur_un_Fieldset_comme_contenu_alternatif">Exemple 2 : une boîte de dialogue basée sur un <code>Fieldset</code> comme contenu alternatif</h4>
+
+<p>Pour prendre en charge les navigateurs ou les produits de technologies d’assistance qui ne prennent pas ARIA en charge, il est également possible d’appliquer le balisage <code>dialog</code> à un élément <code>fieldset</code> comme contenu alternatif. Ainsi le titre de la boîte de dialogue sera toujours annoncé correctement :</p>
+
+<pre class="brush: html notranslate"><strong>&lt;fieldset role="dialog"</strong> aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"&gt;
+    <strong>&lt;legend&gt;</strong>
+        &lt;span id="dialog1Title"&gt;Vos informations personnelles ont correctement été actualisées.&lt;/span&gt;
+        &lt;span id="dialog1Desc"&gt;Vous pouvez modifier vos informations personnelles à n’importe quel moment depuis la section « Compte utilisateur ».&lt;/span&gt;
+    &lt;/legend&gt;
+
+    &lt;button&gt;Fermer&lt;/button&gt;
+&lt;/fieldset&gt;
+</pre>
+
+<h4 id="Exemples_concrets">Exemples concrets :</h4>
+
+<ul>
+ <li><a class="external" href="http://jqueryui.com/demos/dialog/" title="http://jqueryui.com/demos/dialog/">jQuery-UI Dialog</a></li>
+</ul>
+
+<h3 id="Notes">Notes</h3>
+
+<div class="note"><strong>Note :</strong> bien qu'il soit possible d’empêcher les utilisateurs de clavier de bouger le focus vers des éléments en dehors des boîtes de dialogues, les utilisateurs de lecteurs d’écran ont toujours la possibilité de parcourir ce contenu pratiquement en utilisant le curseur virtuel du lecteur d’écran. À cause de cela, les boîtes de dialogue sont considérées comme des cas spéciaux du rôle <code>application</code> : on s’attend à ce qu’elles soient parcourues avec le mode de navigation non-virtuel par les utilisateurs de lecteur d’écran.</div>
+
+<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#dialog" title="http://www.w3.org/TR/wai-aria/roles#dialog">dialog (en)</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby">aria-labelledby (en)</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby">aria-describedby (en)</a></li>
+</ul>
+
+<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3>
+
+<ul>
+ <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alertdialog" title="Utiliser le rôle alertdialog">Utiliser le rôle <code>alertdialog</code></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>
diff --git a/files/fr/web/accessibility/aria/roles/listbox_role/index.html b/files/fr/web/accessibility/aria/roles/listbox_role/index.html
new file mode 100644
index 0000000000..5deca20928
--- /dev/null
+++ b/files/fr/web/accessibility/aria/roles/listbox_role/index.html
@@ -0,0 +1,97 @@
+---
+title: Utiliser le rôle listbox
+slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_listbox
+tags:
+  - ARIA
+  - Accessibilité
+  - Rôle
+translation_of: Web/Accessibility/ARIA/Roles/listbox_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#listbox">listbox</a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p>
+</div>
+
+<p>Le rôle <code>listbox</code> est utilisé pour identifier un élément qui crée une liste à partir de laquelle un utilisateur peut sélectionner un ou plusieurs éléments statiques et peut contenir des images, contrairement à l’élément HTML {{ HTMLElement("select") }}. Lorsque ce rôle est ajouté à un élément, le navigateur émettra un événement accessible <code>listbox</code> aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur.</p>
+
+<p>Chaque entrée de la boîte liste devrait avoir un rôle d’<a class="external" href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/roles#option">option</a> et devrait être une descendante de la boîte liste dans l’arbre DOM. Si une ou plusieurs entrées ne sont pas des descendantes de la boîte liste dans le DOM, référez-vous aux <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#listbox_div">Bonnes pratiques ARIA</a> pour obtenir plus de détails sur les propriétés additionnelles qui doivent être définies.</p>
+
+<p>Lorsqu’on navigue entre les différents éléments d’une liste, le premier élément de la liste sera sélectionné par défaut en l’absence de sélection existante. Les flèches haut et bas permettent de naviguer dans la liste, et appuyer sur <kbd>Maj+Flèche haut/bas</kbd> déplacera et développera la sélection. Saisir un ou plusieurs lettres permet de naviguer dans la liste des éléments (une seule et même lettre positionnera la sélection sur chacun des éléments qui commence par elle, plusieurs lettres placeront la sélection sur le premier élément commençant par la chaîne). Si l’élément courant est associé à un menu contextuel, <kbd>Maj+F10</kbd> affichera ce menu. Si les éléments de la liste peuvent être cochés, <kbd>Espace</kbd> peut être utilisée pour basculer l’état de la <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#checkbox">checkboxes</a>. Pour les éléments de liste sélectionnables, <kbd>Espace</kbd> bascule l’état de sélection, <kbd>Maj+Espace</kbd> peut être utilisé pour sélection des éléments contigus, <kbd>Ctrl+Flèche</kbd> déplace le curseur sans sélectionner d’élément, et <kbd>Ctrl+Espace</kbd> peut être utilisé pour sélectionner des éléments non-contigus. Il est recommandé d’utiliser une case à cocher, un lien ou tout autre méthode pour permettre la sélection de tous les éléments, et <kbd>Ctrl+A</kbd> peut être utilisé comme raccourci pour cela.</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>listbox</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 comme ayant un rôle d’alerte à l’API d’accessibilité du système d’exploitation. Alternativement, s’il est un enfant de ou s’il appartient à une boîte combinée <a class="external" href="http://www.w3.org/TR/wai-aria/roles#combobox">combobox</a>, présenter l’élément comme un <a class="external" href="http://www.w3.org/TR/wai-aria/roles#menu">menu</a> ;</li>
+ <li>Déclencher un événement liste (ou dans les cas spéciaux, un événement menu) 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 label et le rôle de la boîte liste lorsqu’elle obtient le focus. Si un élément de la liste obtient le focus, il devrait être annoncé après, suivi par une indication de la position de l’élément dans la liste si le lecteur d’écran prend en charge cette fonction. Lorsque le focus se déplace dans la liste, le lecteur d’écran devrait annoncer les éléments de la liste appropriés.</li>
+ <li>Les loupes d’écran devraient agrandir la boîte liste.</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_une_liste_de_sélection_simple_qui_utilise_l’attribut_aria-activedescendant">Exemple 1 : une liste de sélection simple qui utilise l’attribut <code>aria-activedescendant</code></h4>
+
+<p>L’extrait de code ci-dessous montre comment le rôle <code>listbox</code> est ajouté directement dans le code source HTML :</p>
+
+<pre class="brush: html">&lt;div role="listbox" tabindex="0" id="listbox1" onclick="return listItemClick(event);"
+  onkeydown="return listItemKeyEvent(event);" onkeypress="return listItemKeyEvent(event);"
+  onfocus="this.className='focus';" onblur="this.className='blur';" aria-activedescendant="listbox1-1"&gt;
+  &lt;div role="option" id="listbox1-1" class="selected"&gt;Vert&lt;/div&gt;
+  &lt;div role="option" id="listbox1-2"&gt;Orange&lt;/div&gt;
+  &lt;div role="option" id="listbox1-3"&gt;Rouge&lt;/div&gt;
+  &lt;div role="option" id="listbox1-4"&gt;Bleu&lt;/div&gt;
+  &lt;div role="option" id="listbox1-5"&gt;Violet&lt;/div&gt;
+  &lt;div role="option" id="listbox1-6"&gt;Pervenche&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Voir l’<a class="external" href="http://codetalks.org/source/widgets/listbox/listbox.html">exemple</a> CodeTalks pour plus de détails.</p>
+
+<h4 id="Exemples_concrets">Exemples concrets :</h4>
+
+<ul>
+ <li><a href="https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox.html">https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox.html</a></li>
+</ul>
+
+<h3 id="Notes">Notes</h3>
+
+<ul>
+ <li>Pour être accessible au clavier, les développeurs doivent <a class="external" href="http://www.w3.org/TR/wai-aria/roles#option">gérer le focus</a> de chaque descendant de ce rôle.</li>
+ <li>Il est recommandé aux développeurs d’utiliser différents styles pour la sélection lorsque la liste n’a pas le focus, par exemple, une sélection inactive est parfois affichée avec une couleur d’arrière-plan plus claire.</li>
+ <li>Si la boîte liste ne fait pas partie d’un autre composant, il faut définir sa propriété <a class="external" href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby"><code>aria-labelledby</code></a>.</li>
+ <li>Si une ou plusieurs entrées ne sont pas des descendants DOM de la boîte liste, il faudra définir des propriétés <code>aria-*</code> supplémentaires (voir <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#listbox_div">Bonnes pratiques ARIA</a>).</li>
+ <li>S’il existe une bonne raison pour <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-expanded">étendre</a> la boîte liste, le rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#combobox">combobox</a> peut être plus approprié.</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#listbox">listbox</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#combobox">combobox</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 – Listbox : <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#listbox_div">#listbox_div</a></li>
+ <li>Le modèle de rôles ARIA – Listbox : <a href="http://www.w3.org/TR/wai-aria/roles#listbox">#listbox</a></li>
+</ul>
diff --git a/files/fr/web/accessibility/aria/roles/switch_role/index.html b/files/fr/web/accessibility/aria/roles/switch_role/index.html
new file mode 100644
index 0000000000..2aec6523ed
--- /dev/null
+++ b/files/fr/web/accessibility/aria/roles/switch_role/index.html
@@ -0,0 +1,13 @@
+---
+title: Utilisation du groupe switch
+slug: Accessibilité/ARIA/Techniques_ARIA/Utilisation_du_groupe_switch
+tags:
+  - ARIA
+  - Accessibility
+  - NeedsContent
+  - Rôle
+translation_of: Web/Accessibility/ARIA/Roles/Switch_role
+---
+<p>Le rôle ARIA switch est très similaire au <a href="https://developer.mozilla.org/fr/docs/Accessibilit%C3%A9/ARIA/Techniques_ARIA/Utiliser_le_role_checkbox">role checkbox</a>, à la sémantique près — il a deux états représentant on/off, au lieu de checked/unchecked.</p>
+
+<p>Extrait des <a href="http://rawgit.com/w3c/aria/master/aria/aria.html#switch">spec ARIA 1.1 </a>: l'attribut <code>aria-checked</code> d'un <code>switch</code> indique si l'entrée est on (<code>true</code>) ou off (<code>false</code>). La valeur <code>mixed</code> n'est pas supportée, et les agents utilisateurs <em>DOIVENT</em> la traiter comme équivalente à <code>false</code> pour ce rôle.</p>
diff --git a/files/fr/web/accessibility/aria/roles/textbox_role/index.html b/files/fr/web/accessibility/aria/roles/textbox_role/index.html
new file mode 100644
index 0000000000..0fe3c2efbd
--- /dev/null
+++ b/files/fr/web/accessibility/aria/roles/textbox_role/index.html
@@ -0,0 +1,82 @@
+---
+title: Utiliser le rôle textbox
+slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_textbox
+tags:
+  - ARIA
+  - Accessibilité
+  - Rôle
+translation_of: Web/Accessibility/ARIA/Roles/textbox_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#textbox"><code>textbox</code></a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p>
+</div>
+
+<p>Le rôle <code>textbox</code> est utilisé pour identifier un élément permettant la saisie d’un texte librement formaté. Lorsque ce rôle est ajouté à un élément, le navigateur émettra un événement <code>textbox</code> accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur.</p>
+
+<p>L’utilisation par défaut est pour un champ de saisie monoligne où <kbd>Entrée</kbd> ou <kbd>Retour</kbd>, enverra le formulaire, par exemple, comme avec le HTML <code>&lt;input type="text"&gt;</code>. Lorsqu’on a un champ multilignes et que les retours à la ligne sont pris en charge, par exemple avec l’utilisation d’un élément HTML <code>&lt;textarea&gt;</code>, il est également nécessaire de définir l’attribut <code>aria-multiline="true"</code>.</p>
+
+<p>Lorsqu’un champ texte est en lecture seule, cela devrait être indiqué en utilisant l’attribut <code>aria-readonly="true"</code> sur l’élément concerné.</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>textbox</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 comme ayant un rôle <code>textbox</code> à l’API d’accessibilité du système d’exploitation ;</li>
+ <li>Déclencher un événement <code>textbox</code> accessible à l’aide de 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 son label et son rôle lorsque le focus est sur la boite de texte. Si elle contient également du contenu, il devrait être annoncé comme avec une boite de texte régulière ;</li>
+ <li>Les loupes d’écran devraient agrandir la boite de texte.</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_ajout_du_rôle_textbox_dans_le_code_HTML_d’un_champ_de_saisie_monoligne_&lt;input>">Exemple 1 : ajout du rôle <code>textbox</code> dans le code HTML d’un champ de saisie monoligne <code>&lt;input&gt;</code></h4>
+
+<p>L’extrait de code ci-dessous montre comment le rôle <code>textbox</code> est ajouté directement dans le code source HTML.</p>
+
+<pre class="brush: html">&lt;input type="text" role="textbox" value="Voici du texte" /&gt;</pre>
+
+<h4 id="Exemple_2_ajout_du_rôle_textbox_dans_le_code_HTML_d’un_champ_de_saisie_multilignes_&lt;textarea>">Exemple 2 : ajout du rôle <code>textbox</code> dans le code HTML d’un champ de saisie multilignes <code>&lt;textarea&gt;</code></h4>
+
+<p>L’extrait de code ci-dessous montre comment le rôle <code>textbox</code> est ajouté directement dans le code source HTML.</p>
+
+<pre class="brush: html">&lt;textarea role="textbox" aria-multiline="true"&gt;
+  Voici du texte
+  …
+  sur plusieurs lignes.
+&lt;/textarea&gt;
+</pre>
+
+<h4 id="Exemples_concrets">Exemples concrets :</h4>
+
+<h3 id="Notes">Notes</h3>
+
+<ul>
+ <li>Les développeurs doivent connaitre la distinction qui existe entre les champs de saisie monolignes et les champs de saisie multilignes lorsqu’ils créent un champ ;</li>
+ <li>Les champs en lecture seule devraient être indiqués avec l’attribut <code>aria-readonly</code>.</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#textbox">textbox</a>.</li>
+</ul>
+
+<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3>
+
+<p>N/A</p>
+
+<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>