unslug fr: move

47 files changed, 4045 insertions, 0 deletions

diff --git a/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html
new file mode 100644
index 0000000000..7dcc01326a
--- /dev/null
+++ b/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html
@@ -0,0 +1,176 @@
+---
+title: Aperçu sur le développement des applications Web et des Widgets accessibles
+slug: >-
+  Accessibilité/Aperçu_d_applications_Web_et_de_composants_dynamiques_accessibles
+tags:
+  - ARIA
+  - Accessisibilité
+  - Applications Web
+  - Guide
+translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets
+---
+<p>Le Web est en perpétuelle évolution. En effet, les sites à contenu statique sont de plus en plus remplacés par des sites dynamiques à l’utilisation assez proche des applications de bureaux. Les sites Web dynamiques utilisent abondamment JavaScript et AJAX. Les designers créent des widgets et des éléments d'interface grâce aux langages du Web notamment HTML, CSS et Javascript. Ce tournant dans l’histoire du Web permet d'améliorer grandement l'expérience utilisateur et l'utilisation sur mobile (responsive). Mais certains utilisateurs peuvent être exclus par manque d'accessibilité. En effet, JavaScript avait la réputation d'être inaccessible aux technologies d'assistance tel que les interpréteurs d’écran. Or, il existe maintenant des techniques pour rendre le Web accessible à une large palette d’utilisateurs.</p>
+
+<h2 id="Problématique">Problématique</h2>
+
+<p>La plupart des librairies JavaScript proposent des composants côté client qui miment le comportement familier des interfaces de bureaux classiques. Carrousels, barres de menu et d’autres composants peuvent être créés avec JavaScript, CSS et HTML. Mais du moment que les spécifications HTML 4 ne proposaient pas de tags pour décrire sémantiquement ce type de composants, les développeurs se contentaient d'éléments génériques tel que le tag <code>&lt;div&gt;</code> ou le tag <code>&lt;span&gt;</code>. Or, si d’apparence ces composants ressemblaient parfaitement à ceux spécifiques aux applications de bureau, on ne disposait pas d'informations sémantiques suffisantes pour les rendres accessibles aux technologies d’assistance. L’accès au contenu dynamique d’une page Web peut devenir problématique plus particulièrement pour les utilisateurs qui, pour une raison ou pour une autre ne peuvent pas voir l’écran. Les niveaux de stock, les indicateurs de progression... modifient le DOM de telle sorte que les technologies d'assistance n’y ont pas accès. C'est dans ce contexte que <a href="/fr/ARIA" title="ARIA">ARIA</a> entre en jeu.</p>
+
+<p><em>Exemple 1: Code d</em>’<em>une tabulation sans informations ARIA. Il n'y a aucune information permettant de décrire la forme du widget et ses fonctions.</em></p>
+
+<pre class="brush: html">&lt;!-- This is a tabs widget. How would you know, looking only at the markup? --&gt;
+&lt;ol&gt;
+  &lt;li id="ch1Tab"&gt;
+    &lt;a href="#ch1Panel"&gt;Chapitre 1&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li id="ch2Tab"&gt;
+    &lt;a href="#ch2Panel"&gt;Chapitre 2&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li id="quizTab"&gt;
+    &lt;a href="#quizPanel"&gt;Quiz&lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;div&gt;
+  &lt;div id="ch1Panel"&gt;Le contenu du chapitre 1 va ici&lt;/div&gt;
+  &lt;div id="ch2Panel"&gt;Le contenu du chapitre 2 va ici&lt;/div&gt;
+  &lt;div id="quizPanel"&gt;Le contenu du Quiz va ici&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p><em>Example 2: Telles qu'elles sont représentées ci-dessous, les tabulations peuvent être reconnues en tant que tel par les utilisateurs. Or aucune information sémantique exploitable par une technologie d</em>’<em>assistance n</em>’<em>est présente.</em><br>
+ <img alt="Screenshot of the tabs widget" class="default internal" src="/@api/deki/files/4926/=Tabs_Widget.png"></p>
+
+<h2 id="ARIA">ARIA</h2>
+
+<p><a href="https://www.w3.org/WAI/standards-guidelines/aria/">WAI-ARIAI</a>, les spécifications concernant les applications <strong>internet "riches" et accessibles</strong> sont publiées par l’iniative du <a href="https://www.w3.org/WAI/">W3C sur l’accessibilité</a>, et fournissent la sémantique essentielle au bon fonctionnement des lecteurs d'écran. ARIA permet aux développeurs de décrire en quelque sorte leurs widgets plus finement en ajoutant des attributs spéciaux à leurs balises. Ces spécifications comblent le vide qui existait entre les spécifications du standard HTML et des widgets. ARIA spécifie des rôles et des états permettant de décrire en quelque sorte le fonctionnement des widgets d’interfaces utilisateurs les plus connus.</p>
+
+<div class="warning">
+<p>Beaucoup d’entre eux ont été ajouté plus tard dans HTML5, et <strong>les développeurs devraient toujours préférer utiliser la balise HTML correspondante plutôt qu’utiliser ARIA</strong>.</p>
+</div>
+
+<p>Les spécifications ARIA distinguent 3 types d’attributs : rôles, états et propriétés. Les rôles sont utilisés pour les widgets ne faisant pas partie des spécifications HTML 4 comme des sliders, menus, barres, boites de dialogue... Les propriétés sont utilisées pour représenter les caractéristiques de ces widgets, elles décrivent les caractéristiques de ces widgets comme s'il sont déplaçables avec la souris, requièrent un élément ou ont un popup associés à eux. Les états, comme leur nom l'indique, servent à representer l'état actuel de ces éléments en informant les technologies d'assistance s'il est occupé, désactivé, sélectionné ou masqué.</p>
+
+<p>Les attributs ARIA ont été conçus de façon à être interprétés directement par les navigateurs Web et interagir directement avec les APIs d'accessibilité natives des systèmes d'exploitation. Quand les spécifications ARIA sont implementées, les technologies d'assistance peuvent interagir avec les widgets JavaScript personnalisés de la même façon qu'ils interagissent avec leurs équivalents de bureau. Les technologies d'assistance peuvent ainsi fournir une expérience utilisateur homogène.</p>
+
+<p><em>Example 3 : L'exemple ci-dessous ajoute des attributs ARIA aux balises déjà présentes.</em></p>
+
+<pre class="brush: html">&lt;!-- Les tabulations sont bien définies  --&gt;
+&lt;!-- Des attributs ARIA ont été ajoutés pour lister les différentes tabulations. --&gt;
+&lt;ol role="tablist"&gt;
+  &lt;li id="ch1Tab" role="tab"&gt;
+    &lt;a href="#ch1Panel"&gt;Chapter 1&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li id="ch2Tab" role="tab"&gt;
+    &lt;a href="#ch2Panel"&gt;Chapter 2&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li id="quizTab" role="tab"&gt;
+    &lt;a href="#quizPanel"&gt;Quiz&lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;div&gt;
+  &lt;!-- Remarquez les attributs role and aria-labelledby servant à décrire les tabulations. --&gt;
+  &lt;div id="ch1Panel" role="tabpanel" aria-labelledby="ch1Tab"&gt;Chapter 1 content goes here&lt;/div&gt;
+  &lt;div id="ch2Panel" role="tabpanel" aria-labelledby="ch2Tab"&gt;Chapter 2 content goes here&lt;/div&gt;
+  &lt;div id="quizPanel" role="tabpanel" aria-labelledby="quizTab"&gt;Contenu du Quiz;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Les versions récentes des navigateurs majeurs du marché fournissent un support ARIA Firefox, Chrome, Safari, Internet Explorer... De nombreuses technologies d'assistance libres d’accès tel que NVDA et Orca fournissent aussi un support ARIA. Le support de ces spécifications est aussi de plus en plus présent dans les balises des librairies JavaScript : JQuery UI, YUI, Google Closure et Dojo Dijit.</p>
+
+<h3 id="Les_changement_représentationnels">Les changement représentationnels</h3>
+
+<p>Les changements représentationnels incluent l'utilisation du CSS pour changer l'apparence du contenu (mettre une bordure rouge autour de données invalides, changer la couleur de fond d’une case à cocher), le faire apparaitre ou disparaitre. </p>
+
+<h4 id="Les_Changements_détats">Les Changements d'états</h4>
+
+<p>Les attributs pour décrire l’état actuel d'un widget sont fournis, par exemple :</p>
+
+<ul>
+ <li><strong><code>aria-checked</code></strong> indique l’état d'une case à cocher ou d'un bouton radio,</li>
+ <li><strong><code>aria-disabled</code></strong> indique qu’un élément est visible, mais désactivé,</li>
+ <li><strong><code>aria-expanded</code></strong> indique qu’un élément est déroulé.</li>
+</ul>
+
+<p>La liste n’est pas exhaustive. Pour voir la liste complète, consulter <a href="https://www.w3.org/TR/wai-aria-1.1/#introstates">les spécifications des états et propriétés ARIA)</a>.</p>
+
+<p>Les développeurs devraient se servir des états ARIA pour indiquer l'état des widgets et utiliser les sélecteurs d'attributs CSS pour en modifier l'apparence en fonction des changements d'états plutôt qu'au moyen d'un script qui modifierait des classes sur le widget.</p>
+
+<h4 id="Les_changements_de_visibilité">Les changements de visibilité</h4>
+
+<p>Lorsque la visibilité du contenu est modifiée (c'est-à-dire qu'un élément est masqué ou affiché), les développeurs doivent modifier la valeur de la propriété <strong><code>aria-hidden</code></strong>. Les techniques décrites ci-dessus doivent être utilisées pour déclarer du CSS permettant de cacher visuellement un élément en utilisant <code>display:none</code>.</p>
+
+<p>Le site Web Open Ajax Alliance fournit<a class="external" href="http://www.oaa-accessibility.org/example/39/" title="http://www.oaa-accessibility.org/example/39/"> un exemple de tooltip qui utilise <strong><code>aria-hidden</code></strong> pour controler la visibilité du tooltip.</a> L'exemple montre un formulaire Web simple avec des info-bulles contenant des instructions associées aux champs d’entrée.</p>
+
+<p>Les parties pertinentes de l'exemple sont expliquées ci-dessous.Dans cet exemple, le code HTML de l’info-bulle a le format indiqué dans l'exemple 2a. La ligne 9 définit l’état <strong><code>aria-hidden</code></strong> à <code>true</code>.</p>
+
+<p><em>Exemple 2a. HTML pour un tooltip (adapté de <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></p>
+
+<pre class="brush: html">&lt;div class="text"&gt;
+    &lt;label id="tp1-label" for="first"&gt;First Name:&lt;/label&gt;
+    &lt;input type="text" id="first" name="first" size="20"
+           aria-labelledby="tp1-label"
+           aria-describedby="tp1"
+           aria-required="false" /&gt;
+    &lt;div id="tp1" class="tooltip"
+         role="tooltip"
+         aria-hidden="true"&gt;Your first name is optional&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Le CSS pour ce balisage est montré dans l'exemple 2b. Notez qu’il n’y a pas de nom de classe personnalisé utilisé, seul le statut de l'attribut <strong><code>aria-hidden</code></strong> à la ligne 1<em>.<br>
+ Exemple 2b. Un attribut basé sur le sélecteur indiquant l'état (tiré de <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></p>
+
+<pre class="brush: css">div.tooltip[aria-hidden="true"] {
+  display: none;
+  }
+</pre>
+
+<p>Le JavaScript à mettre à jour est la propriété <strong><code>aria-hidden</code></strong> du formulaire montré dans l'exemple 2c. Notez que le script met à jour seulement l'attribut <strong><code>aria-hidden</code></strong> à la (ligne 2) ; il n'y a pas besoin d'ajouter ou de supprimer un nom de classe personnalisé.</p>
+
+<p><em>Exemple 2c. JavaScript pour mettre à jour l'attribut aria-checked (basé sur <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></p>
+
+<pre class="brush: javascript">var showTip = function(el) {
+  el.setAttribute('aria-hidden', 'false');
+}</pre>
+
+<h3 id="Les_changements_de_rôles">Les changements de rôles</h3>
+
+<p>ARIA permet aux développeurs de déclarer un rôle sémantique pour un élément qui produirait des sémantiques fausses. Par exemple, quand une liste non ordonnée est utilisée pour créer un menu, {{ HTMLElement("ul") }} devrait avoir un <strong><code>role</code></strong> de <code>menubar</code> et chaque {{ HTMLElement("li") }} devrait avoir un <strong><code>role</code></strong> de <code>menuitem</code>. Le <strong><code>role</code></strong> d'un élément ne doit pas changer. À la place, il faut supprimer l'élément original et le remplacer par un nouveau <strong><code>role</code></strong>.</p>
+
+<p>Considérons une zone d’écriture, soit une zone qui permet à l’utilisateur d’éditer une partie de son texte, sans changer de contexte. Cette zone a un mode "vue", dans lequel le texte n’est pas éditable, et un mode "édition", dans lequel le texte peut être modifié. Un développeur peut être tenté d’implémenter le mode "vue" avec un texte en lecture seule via l’élément {{ HTMLElement("input") }} et en configurant le  <strong><code>role</code></strong>  ARIA à  <code>button</code>, puis passe au mode "édition" en rendant l’élément écrivable et en supprimant le <strong><code>role</code></strong> attribué dans le mode "édition" (puisque les éléments de type {{ HTMLElement("input") }} ont leur propre rôle sémantique).</p>
+
+<p>Ne faites pas ça. À la place, il vaut mieux implémenter le mode "vue" avec un autre élément, comme {{ HTMLElement("div") }} ou {{ HTMLElement("span") }} avec un <strong><code>role</code></strong> de <code>button</code>, et le mode "édition" avec un élément texte {{ HTMLElement("input") }}.</p>
+
+<h3 id="Mise_à_jour_asynchrone_de_contenu">Mise à jour asynchrone de contenu</h3>
+
+<div class="note">En construction. Voir aussi <a href="https://developer.mozilla.org/fr/docs/Accessibilit%C3%A9/ARIA/Zones_live_ARIA" title="Live Regions">Live Regions</a></div>
+
+<h2 id="La_navigation_au_clavier">La navigation au clavier</h2>
+
+<p>Souvent, les développeurs négligent la prise en charge du clavier lorsqu’ils créent des widgets personnalisés. Pour être accessible à une large gamme d’utilisateurs, toutes les fonctionnalités d’une application Web ou d’un widget doivent également pouvoir être contrôlées avec le clavier, sans nécessiter de souris. En pratique, cela implique généralement de suivre les conventions prises en charge par des widgets similaires sur le bureau, en tirant pleinement partie des touches <kbd>Tab</kbd>, <kbd>Entrée</kbd>, <kbd>Espace</kbd> et des flèches.</p>
+
+<p>Traditionnellement, la navigation au clavier sur le Web était limitée à la touche Tabulation. Un utilisateur appuie sur <kbd>Tab</kbd> pour faire la mise au point de chaque lien, bouton ou formulaire sur la page dans un ordre linéaire, en utilisant <kbd><kbd>Maj</kbd>+<kbd>Tab</kbd></kbd> pour revenir en arrière. C’est une forme unidimensionnelle de navigation en avant ou en arrière, un élément à la fois. Sur les pages assez denses, un utilisateur clavier doit souvent appuyer plusieurs fois sur la touche <kbd>Tab</kbd> avant d’accéder à la section requise. La mise en œuvre de conventions de clavier de type bureautique sur le Web peut considérablement accélérer la navigation pour de nombreux utilisateurs.</p>
+
+<p>Voici un résumé de la façon dont la navigation au clavier devrait fonctionner dans une application Web compatible ARIA :</p>
+
+<ul>
+ <li>La touche <kbd>Tab</kbd> devrait fournir le focus au widget dans son ensemble. Par exemple, la tabulation d’une barre de menu devrait mettre l’accent sur le premier élément du menu.</li>
+ <li>Les touches fléchées devraient permettre la sélection ou la navigation dans le widget. Par exemple, en utilisant les touches <kbd>←</kbd> et <kbd>→</kbd>, vous devez déplacer le focus sur les éléments de menu précédent et suivant.</li>
+ <li>Lorsque le widget n’est pas à l’intérieur d’un formulaire, les touches <kbd>Entrée</kbd> et <kbd>Espace</kbd> permettent de sélectionner ou d’activer le contrôle.</li>
+ <li>Dans un formulaire, la touche <kbd>Espace</kbd> doit sélectionner ou activer le contrôle, tandis que la touche <kbd>Entrée</kbd> doit soumettre l’action par défaut du formulaire.</li>
+ <li>En cas de doute, imitez le comportement standard du bureau du contrôle que vous créez.</li>
+</ul>
+
+<p>Ainsi, pour l’exemple de widget Tabs ci-dessus, l’utilisateur devrait être capable de naviguer dans le conteneur du widget (le &lt;ol&gt; dans notre balisage) en utilisant les touches <kbd>Tab</kbd> et <kbd><kbd>Maj</kbd>+<kbd>Tab</kbd></kbd>. Une fois que le focus du clavier est à l’intérieur du conteneur, les touches fléchées devraient permettre à l’utilisateur de naviguer entre chaque onglet (les éléments &lt;li&gt;). De là, les conventions varient d’une plateforme à l’autre. Sous Windows, l’onglet suivant doit être automatiquement activé lorsque l’utilisateur appuie sur les touches fléchées. Sous Mac OS X, l’utilisateur peut appuyer sur <kbd>Entrée</kbd> ou sur <kbd>Espace</kbd> pour activer l’onglet suivant. Un tutoriel en profondeur pour créer <a href="https://developer.mozilla.org/fr/docs/Contr%C3%B4les_DHTML_personnalis%C3%A9s_navigables_au_clavier" title="en/Accessibility/Keyboard-navigable JavaScript widgets">Widget navigables grâce à des contrôles Javascript </a>comme décrit ici afin de montrer comment avoir ce comportement en JS.</p>
+
+<p>Pour plus de détails à propos de ces conventions de navigation au clavier, un aperçu ici <a class="external" href="http://dev.aol.com/dhtml_style_guide" title="http://dev.aol.com/dhtml_style_guide">DHTML style guide</a> est disponible. Il délivre un aperçu de la façon dont la navigation au clavier devrait fonctionner pour chaque type de widget pris en charge par ARIA. Le W3C offre également un document utile <a class="external" href="http://www.w3.org/WAI/PF/aria-practices/Overview.html" title="http://www.w3.org/WAI/PF/aria-practices/Overview.html">ARIA Best Practices</a> qui inclut la navigation au clavier et les raccourcis pour une variété de widgets.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Accessibilit%C3%A9/ARIA" title="ARIA">ARIA</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Accessibilit%C3%A9/ARIA/FAQ_Applications_Web_et_ARIA" title="Web applications and ARIA FAQ">Des applications WEB et la FAQ ARIA</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/wai-aria/" title="http://www.w3.org/TR/wai-aria/">WAI-ARIA Spécification</a></li>
+ <li><a class="external" href="http://www.w3.org/WAI/PF/aria-practices/Overview.html" title="http://www.w3.org/WAI/PF/aria-practices/Overview.html">WAI-ARIA Best Practices</a></li>
+ <li><a class="external" href="http://dev.aol.com/dhtml_style_guide" title="http://dev.aol.com/dhtml_style_guide">DHTML Style Guide</a></li>
+</ul>
diff --git a/files/fr/web/accessibility/aria/aria_guides/index.html b/files/fr/web/accessibility/aria/aria_guides/index.html
new file mode 100644
index 0000000000..452418ed1b
--- /dev/null
+++ b/files/fr/web/accessibility/aria/aria_guides/index.html
@@ -0,0 +1,27 @@
+---
+title: Guides ARIA
+slug: Accessibilité/ARIA/Guides_ARIA
+tags:
+  - ARIA
+  - Accessibilité
+translation_of: Web/Accessibility/ARIA/ARIA_Guides
+---
+<p><strong>ARIA</strong> (Accessible Rich Internet Applications ou Applications Internet riches accessibles) défini une manière de rendre le web plus accessible pour les personnes en situation de handicap. Les quelques principes suivant permettent de s'assurer d'une meilleure accessibilité :</p>
+
+<ul>
+ <li>Traiter les erreurs dans les formulaires</li>
+ <li>Labelliser les composants d’interface</li>
+ <li>Labelliser les composants composés (Composite Widgets) et des zones (Regions)</li>
+ <li>Gérer le focus dans les composants composés (<code>aria-activedescendant</code> vs roving tabindex)</li>
+ <li>Utiliser les rôles de points de repère (Landmark Roles)</li>
+ <li>Traiter les actualisations dynamiques &amp; des zones « Live »</li>
+ <li>Mode Virtuel contre mode non virtuel dans les produits de technologies d’assistance</li>
+ <li>Utiliser le Glisser &amp; déposer</li>
+ <li>Notifier les utilisateurs sur les lecteurs d’écran non-ARIA</li>
+ <li>Arranger la structure avec le rôle <code>presentation</code></li>
+ <li>Masquer les trames des tableaux</li>
+ <li>Gérer les dialogues modaux et non modaux</li>
+ <li>Utiliser ARIA avec HTML5</li>
+ <li>Comment tester ARIA ?</li>
+ <li>ARIA sur les périphériques mobiles</li>
+</ul>
diff --git a/files/fr/web/accessibility/aria/aria_live_regions/index.html b/files/fr/web/accessibility/aria/aria_live_regions/index.html
new file mode 100644
index 0000000000..8b163bc582
--- /dev/null
+++ b/files/fr/web/accessibility/aria/aria_live_regions/index.html
@@ -0,0 +1,122 @@
+---
+title: Zones live ARIA
+slug: Accessibilité/ARIA/Zones_live_ARIA
+tags:
+  - ARIA
+  - Accessibilité
+  - Avancé
+translation_of: Web/Accessibility/ARIA/ARIA_Live_Regions
+---
+<h2 id="Introduction_2"><span class="mw-headline" id="Introduction">Introduction </span></h2>
+
+<p>Dans le passé, un changement dans une page web débouchait souvent sur une relecture intégrale, ce qui agaçait souvent l’utilisateur, ou au contraire très peu ou pas de lecture du tout, rendant inaccessible une partie, voire l’ensemble des informations. Jusqu’à récemment, les lecteurs d’écran n’étaient en mesure d’améliorer cela du fait de l’absence d’éléments standardisés pour prévenir le lecteur d’écran d’un changement. Les zones « live » ARIA comblent cette lacune et fournissent des solutions aux lecteurs d’écran afin de savoir si et comment interrompre l'utilisateur lors d’un changement.</p>
+
+<h2 id="Zones_«_live_»_basiques"><span class="mw-headline" id="Live_Region_State">Zones « live » basiques</span></h2>
+
+<p>Le contenu dynamique qui s’actualise sans rechargement de la page est généralement une zone ou un composant d’interface. Les changements de contenu simples, sans interaction possible, devraient être marqués comme des zones « live ». Ci-dessous, voici une liste de chaque propriété relative à une zone « live » ARIA et sa description.</p>
+
+<dl>
+ <dt>aria-live :</dt>
+ <dd>L’attribut <code>aria-live=VALEUR_POLITESSE</code> est utilisé pour définir la priorité avec laquelle le lecteur d’écran devrait traiter une mise à jour dans une zone « live » – les valeurs possibles sont : <code>off</code>/<code>polite</code>/<code>assertive</code>. La valeur par défaut est <code>off</code>. Cet attribut est de loin le plus important.</dd>
+ <dt>aria-controls :</dt>
+ <dd>L’attribut <code>aria-controls=[LISTE_IDs]</code> est utilisé pour associer un contrôle avec les zones qu’il contrôle. Les zones sont identifiées comme un <code>ID</code> dans un élément {{ HTMLElement("div") }}, et plusieurs zones peuvent être associées à un unique contrôle, en séparant les identifiants des zones par un espace, par exemple : <code>aria-controls="maZoneID1 maZoneID2"</code>.</dd>
+ <dd class="warning">Nous ne savons pas si <code>aria-controls</code> pour les zones « live » est utilisé dans des technologies d’assistance modernes, et si oui lesquelles. Des recherches sont nécessaires.</dd>
+</dl>
+
+<p>Normalement, seul <code>aria-live="polite"</code> est utilisé. Toute zone recevant une mise à jour qu’il est important de faire suivre à l’utilisateur, mais pas au point de le déranger dans sa navigation, devrait recevoir cet attribut. Le lecteur d’écran lira les changements dès que l’utilisateur sera inoccupé.</p>
+
+<p>Pour les zones de moindre importance, ou qui seraient perturbantes à cause d’actualisations répétées et rapprochées ou toute autre raison, il est possible de les rendre silencieux avec <code>aria-live="off"</code>.</p>
+
+<h3 id="Cas_d’étude_simple_une_''combobox''_actualise_des_informations_utiles_à_l’écran">Cas d’étude simple : une ''combobox'' actualise des informations utiles à l’écran</h3>
+
+<p>Un site web spécialisé dans l’ornithologie fournit une liste déroulante avec des noms d’oiseaux. Lorsqu’un oiseau est sélectionné dans la liste, une zone de la page web est actualisée avec les détails concernant la famille d’oiseaux choisie.</p>
+
+<p><code>&lt;select size="1" id="bird-selector" aria-controls="bird-info"&gt;&lt;option&gt; .... &lt;/select&gt;</code></p>
+
+<pre class="brush: html" id="bird-selector">&lt;div role="region" id="bird-info" aria-live="polite"&gt;</pre>
+
+<p>Lorsque l’utilisateur sélectionne un nouvel oiseau, l’information est lue. Du fait de la valeur <code>polite</code>, le lecteur d’écran attendra une pause de la part de l’utilisateur. Ainsi, descendre dans la liste ne déclenchera pas la lecture pour chaque oiseau visité par l’utilisateur, mais uniquement pour celui qui sera finalement choisi.</p>
+
+<h2 id="Préférences_de_rôles_pour_les_zones_«_live_»_spécialisées">Préférences de rôles pour les zones « live » spécialisées</h2>
+
+<p>Dans les cas prédéfinis répandus ci-dessous, il est préférable d’utiliser un des rôles de zone « live » spécifique fourni :</p>
+
+<table style="width: 100%;">
+ <thead>
+  <tr>
+   <th scope="col">Rôle</th>
+   <th scope="col">Description</th>
+   <th scope="col">Compatibilité</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>log</td>
+   <td>Chat, erreur, jeux ou autres types de journalisation</td>
+   <td>Pour maximiser la compatibilité, ajouter un <code>aria-live="polite"</code> redondant lorsque vous utiliserez ce rôle.</td>
+  </tr>
+  <tr>
+   <td>status</td>
+   <td>Une barre d’état ou une zone de l’écran qui fournit un état actualisé de quelque chose. Les utilisateurs de lecteur d’écran ont à leur disposition une commande spéciale pour lire l’état courant.</td>
+   <td>Pour maximiser la compatibilité, ajouter un <code>aria-live="polite"</code> redondant lorsque vous utiliserez ce rôle.</td>
+  </tr>
+  <tr>
+   <td>alert</td>
+   <td>Message d’erreur ou avertissement souligné à l’écran. Les alertes sont particulièrement importantes pour la validation côté client notifiée à l’utilisateur. (TBD: lien vers un tutoriel sur les formulaires ARIA avec des informations plus complètes)</td>
+   <td>Pour maximiser la compatibilité, ajouter un <code>aria-live="assertive"</code> redondant lorsque vous utiliserez ce rôle. Attention, cette redondance occasionne un problème de double restitution orale dans VoiceOver sur iOS.</td>
+  </tr>
+  <tr>
+   <td>progressbar</td>
+   <td>Élément hybride entre un composant d’interface et une zone « Live ». Utilisez ce rôle avec les attributs <code>aria-valuemin</code>, <code>aria-valuenow</code> et <code>aria-valuemax</code>. (TBD : Ajouter plus d’informations pour cet élément).</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>marquee</td>
+   <td>Pour faire défiler un texte, comme pour un téléscripteur ou un afficheur alphanumérique.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>timer</td>
+   <td>Pour tout type de minuterie ou d’horloge, tel qu’un compte-à-rebours ou un chronomètre.</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Zones_«_live_»_avancées">Zones « live » avancées</h2>
+
+<p>(TBD : Qu'est-ce qui est pris en charge par qui ?)</p>
+
+<p>Le support général des zones "Live" a été ajouté à JAWS à partir de la version 10.0. Windows Eyes supporte les zones "Live" depuis la version 8.0 "pour une utilisation en dehors du mode de navigation (Browse Mode) pour Microsoft Internet Explorer et Mozilla Firefox". NVDA a ajouté un support basique pour les zones "Live" pour Mozilla Firefox en 2008 et qui a été amélioré en 2010 et 2014. En 2015 un support basique fut également ajouté à Internet Explorer (MSHTML).</p>
+
+<p>The Paciello Group propose des <a href="https://www.paciellogroup.com/blog/2014/03/screen-reader-support-aria-live-regions/">informations sur l'état du support des zones "Live"</a>(2014). Paul Jadam s'est intéressé plus particulièrement au <a href="http://pauljadam.com/demos/aria-atomic-relevant.html">support des attributs aria-atomic and aria-relevant</a>.</p>
+
+<dl>
+ <dt>aria-atomic :</dt>
+ <dd>L’attribut <code>aria-atomic=BOOLÉEN</code> est utilisé pour définir si le lecteur d’écran doit ou non présenter la zone « Live » comme un ensemble, même si une partie seulement de la zone est modifiée – Les valeurs possibles sont <code>false</code>/<code>true</code>. La valeur par défaut est <code>false</code>.</dd>
+ <dt>aria-relevant :</dt>
+ <dd>L’attribut <code>aria-relevant=[LISTE_DES_CHANGEMENTS]</code> est utilisé pour définir quel type de changements est adéquat à une zone « Live » – les valeurs possibles sont <code>additions</code> (addition)/<code>removals</code> (suppression)/<code>text</code> (texte)/<code>all</code> (tous). La valeur par défaut est « <code>additions text</code>. »</dd>
+ <dt>aria-labelledby :</dt>
+ <dd>L’attribut <code>aria-labelledby=[LISTE_ID]</code> est utilisé pour associer un ou des libellés à une zone. Le fonctionnement est similaire à celui d'<code>aria-controls</code> mais les références d'id pointent vers les libellés associés aux blocs identifiés, et les références multiples sont également séparées par un espace.</dd>
+ <dt>aria-describedby :</dt>
+ <dd>L’attribut <code>aria-describedby=[LISTE_ID]</code> est utilisé pour associer une ou des descriptions à une zone. Le fonctionnement est similaire à celui d'<code>aria-controls </code>mais les références d'id pointent vers les textes descriptifs associés aux blocs identifiés, et les références multiples sont également séparées par un espace.</dd>
+</dl>
+
+<h3 id="Cas_d’étude_avancé_liste_de_contacts"><span class="mw-headline" id="Use_Case:_Roster">Cas d’étude avancé : liste</span> de contacts</h3>
+
+<p>Un site de chat voudrait afficher la liste des utilisateurs actuellement connectés. L'affichage de la liste des utilisateurs doit alors refléter l’état de connexion ou de déconnexion des utilisateurs de manière dynamique (sans actualisation de la page).</p>
+
+<pre class="language-html">&lt;ul id="roster" aria-live="polite" aria-relevant="additions removals"&gt;
+	&lt;!-- utilisez JavaScript ici pour ajouter/supprimer des utilisateurs--&gt;
+&lt;/ul&gt;
+</pre>
+
+<h4 id="Détails_des_propriétés_«_live_»_d’ARIA">Détails des propriétés « live » d’ARIA :</h4>
+
+<ul>
+ <li>L’attribut <code>aria-live="polite"</code> indique au lecteur d’écran qu’il doit attendre que l’utilisateur soit inactif avant de lui présenter une mise à jour. C’est la valeur la plus communément utilisée, car interrompre l’utilisateur avec la valeur <code>assertive</code> briserait son flux de lecture.</li>
+ <li>L’attribut <code>aria-atomic</code> n’est pas défini (<code>false</code> par défaut), ainsi seuls les utilisateurs ajoutés ou supprimés devraient être lus et non l’intégralité de la liste, à chaque mise à jour.</li>
+ <li>L’attribut <code>aria-relevant="additions removals"</code> assure à la fois que les utilisateurs ajoutés et supprimés de la liste seront lus.</li>
+</ul>
+
+<p>TBD : Cas d’étude(s) réel(s) de l’attribut aria-atomic="true".</p>
diff --git a/files/fr/web/accessibility/aria/aria_techniques/aria_technique_template/index.html b/files/fr/web/accessibility/aria/aria_techniques/aria_technique_template/index.html
new file mode 100644
index 0000000000..322f6defcb
--- /dev/null
+++ b/files/fr/web/accessibility/aria/aria_techniques/aria_technique_template/index.html
@@ -0,0 +1,30 @@
+---
+title: Modèle Technique ARIA
+slug: Accessibilité/ARIA/Techniques_ARIA/Modele_Technique_ARIA
+tags:
+  - ARIA
+  - Accessibilité
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques/ARIA_Technique_Template
+---
+<div>
+ <div>
+  <h3 id="Description">Description</h3>
+  <p> </p>
+  <h3 id="Effets_possibles_sur_les_agents_utilisateur_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateur et les technologies d’assistance </h3>
+  <p> </p>
+  <div class="note">
+   <strong>Note :</strong> les opinions diffèrent sur la façon dont les technologies d’assistance devraient traiter ces techniques. Les informations fournies ci-dessus sont une de ces opinions et ne sont en aucune manière normatives.</div>
+  <h3 id="Exemples">Exemples</h3>
+  <h4 id="Exemple_1">Exemple 1 : </h4>
+  <p> </p>
+  <pre class="brush: html">Code </pre>
+  <h4 id="Exemples_fonctionnels">Exemples fonctionnels :</h4>
+  <h3 id="Notes">Notes </h3>
+  <h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3>
+  <h3 id="Techniques_ARIA_associées">Techniques ARIA associées </h3>
+  <h3 id="Compatibilité">Compatibilité</h3>
+  <p class="commentaire">TBD : Ajouter les informations de prise en charge des combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance</p>
+  <h3 id="Autres_ressources">Autres ressources</h3>
+ </div>
+</div>
+<p> </p>
diff --git a/files/fr/web/accessibility/aria/aria_techniques/index.html b/files/fr/web/accessibility/aria/aria_techniques/index.html
new file mode 100644
index 0000000000..b6398235ba
--- /dev/null
+++ b/files/fr/web/accessibility/aria/aria_techniques/index.html
@@ -0,0 +1,118 @@
+---
+title: Techniques ARIA
+slug: Accessibilité/ARIA/Techniques_ARIA
+tags:
+  - ARIA
+  - Accessibilité
+  - Attributs
+  - Rôles
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques
+---
+<h3 id="Rôles">Rôles</h3>
+<h4 id="Rôles_de_composant_d’interface">Rôles de composant d’interface</h4>
+<ul>
+ <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alert" title="Utiliser le rôle alert">Alert</a></li>
+ <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alertdialog" title="Utiliser le rôle alertdialog">Alertdialog</a></li>
+ <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_button" title="Utiliser le rôle button">Button</a></li>
+ <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_checkbox" title="Utiliser le rôle checkbox">Checkbox</a></li>
+ <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_dialog" title="Utiliser le rôle dialog">Dialog</a></li>
+ <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_link" title="Utiliser le rôle link">Link</a></li>
+ <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_log" title="Utiliser le rôle log">Log</a></li>
+ <li>Marquee</li>
+ <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_progressbar" title="Utiliser le rôle progressbar">Progressbar</a></li>
+ <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_radio" title="Utiliser le rôle radio">Radio</a></li>
+ <li>Scrollbar</li>
+ <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_slider" title="Utiliser le rôle slider">Slider</a></li>
+ <li>Spinbutton</li>
+ <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_status" title="Utiliser le rôle link">status</a></li>
+ <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_textbox" title="Utiliser le rôle textbox">textbox</a></li>
+ <li>Timer</li>
+ <li>Tooltip</li>
+</ul>
+<h4 id="Rôles_composés">Rôles composés</h4>
+<p>Les techniques ci-dessous décrivent chaque rôle composé ainsi que leurs rôles enfants obligatoires ou facultatifs.</p>
+<ul>
+ <li>Grid (tableau, contenant les rôles <code>row</code> (ligne), <code>gridcell</code> (cellule), <code>rowheader</code> (en-tête de ligne) et <code>columnheader</code> (en-tête de colonne))</li>
+ <li>Menubar / Menu (contenant les rôles <code>menuitem</code>, <code>menuitemcheckbox</code> et <code>menuitemradio</code>)</li>
+ <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_listbox" title="Utiliser le rôle listbox">Listbox</a> (boîte de liste, contenant le rôle <code>option</code>)</li>
+ <li>Tablist (boîte à onglets, contenant les rôles <code>tab</code> et <code>tabpanel</code>)</li>
+ <li>Tree (arbre, contenant les rôles <code>group</code> et <code>treeitem</code>)</li>
+ <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_radio" title="Utiliser le rôle radio">Radiogroup (voir le rôle <code>Radio</code>)</a></li>
+ <li>Treegrid</li>
+</ul>
+<h4 id="Rôles_de_structure_de_document">Rôles de structure de document</h4>
+<ul>
+ <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_article" title="Utiliser le rôle article">Article</a></li>
+ <li>Definition</li>
+ <li>Directory</li>
+ <li>Document</li>
+ <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_group" title="Utiliser le rôle group">Group</a></li>
+ <li>Heading</li>
+ <li>Img</li>
+ <li>List, listitem</li>
+ <li>Math</li>
+ <li>Note</li>
+ <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_presentation" title="Utiliser le rôle presentation">Presentation</a></li>
+ <li>Region</li>
+ <li>Separator</li>
+ <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_toolbar" title="Utiliser le rôle toolbar">Toolbar</a></li>
+</ul>
+<h4 id="Rôles_de_points_de_repère">Rôles de points de repère</h4>
+<ul>
+ <li>Application</li>
+ <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_banner" title="Utiliser le rôle banner">Banner</a></li>
+ <li>Complementary</li>
+ <li>Contentinfo</li>
+ <li>Form</li>
+ <li>Main</li>
+ <li>Navigation</li>
+ <li>Search</li>
+</ul>
+<h3 id="États_et_propriétés">États et propriétés</h3>
+<h4 id="Attributs_de_composants_d’interface">Attributs de composants d’interface</h4>
+<ul>
+ <li>aria-autocomplete</li>
+ <li>aria-checked</li>
+ <li>aria-disabled</li>
+ <li>aria-expanded</li>
+ <li>aria-haspopup</li>
+ <li>aria-hidden</li>
+ <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-invalid" title="Utiliser l’attribut aria-invalid">aria-invalid</a></li>
+ <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-label" title="Utiliser l’attribut aria-labelledby">aria-label</a></li>
+ <li>aria-level</li>
+ <li>aria-multiline</li>
+ <li>aria-multiselectable</li>
+ <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-orientation" title="Utiliser l’attribut aria-orientation">aria-orientation</a></li>
+ <li>aria-pressed</li>
+ <li>aria-readonly</li>
+ <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-required" title="Utiliser l’attribut aria-required">aria-required</a></li>
+ <li>aria-selected</li>
+ <li>aria-sort</li>
+ <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax" title="Utiliser l’attribut aria-required">aria-valuemax</a></li>
+ <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin" title="Utiliser l’attribut aria-valuemin">aria-valuemin</a></li>
+ <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Utiliser l’attribut aria-valuenow">aria-valuenow</a></li>
+ <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext" title="Utiliser l’attribut aria-valuetext">aria-valuetext</a></li>
+</ul>
+<h4 id="Attributs_de_zones_«_live_»">Attributs de zones « live »</h4>
+<ul>
+ <li>aria-live</li>
+ <li>aria-relevant</li>
+ <li>aria-atomic</li>
+ <li>aria-busy</li>
+</ul>
+<h4 id="Attributs_de_glisser-déposer">Attributs de glisser-déposer</h4>
+<ul>
+ <li>aria-dropeffect</li>
+ <li>aria-dragged</li>
+</ul>
+<h4 id="Attributs_de_relation">Attributs de relation</h4>
+<ul>
+ <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-activedescendant" title="Utiliser l’attribut aria-activedescendant">aria-activedescendant</a></li>
+ <li>aria-controls</li>
+ <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby" title="Utiliser l’attribut aria-labelledby">aria-describedby</a></li>
+ <li>aria-flowto</li>
+ <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby" title="Utiliser l’attribut aria-labelledby">aria-labelledby</a></li>
+ <li>aria-owns</li>
+ <li>aria-posinset</li>
+ <li>aria-setsize</li>
+</ul>
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html
new file mode 100644
index 0000000000..990d7dff4a
--- /dev/null
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html
@@ -0,0 +1,134 @@
+---
+title: Utilisation du rôle alert
+slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert
+tags:
+  - ARIA
+  - Accessibilité
+  - Rôle
+  - À relire
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_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#alert" hreflang="en" title="http://www.w3.org/TR/wai-aria/roles#alert"><code>alert</code> (en)</a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p>
+</div>
+
+<p>Le rôle <code>alert</code> est utilisé pour communiquer un message important et généralement avec une notion d'urgence à l’utilisateur. Lorsque ce rôle est ajouté à un élément, le navigateur émettra un événement d'alerte accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur. Le rôle <code>alert</code> est le plus utile lorsqu’il s’agit d’attirer l’attention de l’utilisateur, par exemple si :</p>
+
+<ul>
+ <li>Une valeur non valide a été saisie dans un champ de formulaire ;</li>
+ <li>La session d’un utilisateur est sur le point d’expirer ;</li>
+ <li>La connexion au serveur a été interrompue, les modifications locales ne seront pas sauvegardées.</li>
+</ul>
+
+<p>De fait de sa nature intrusive, le rôle <code>alert</code> doit être utilisé avec parcimonie et uniquement dans les situations où l’attention de l’utilisateur est immédiatement requise. Les changements dynamiques de moindre urgence devraient utiliser une méthode moins agressive, telle que <code>aria-live="polite"</code> ou autres rôles de zone live.</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>alert</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 d’alerte à l’API d’accessibilité du système d’exploitation ;</li>
+ <li>Déclencher un événement d'alerte 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 peuvent interrompre la sortie en cours (qu’elle soit vocale ou en braille) et immédiatement annoncer ou afficher le message d’alerte ;</li>
+ <li>Les loupes ou agrandisseurs d’écran peuvent indiquer qu’une alerte est survenue et quel en est le texte.</li>
+</ul>
+
+<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_Ajout_du_rôle_dans_le_code_HTML">Exemple 1 : Ajout du rôle dans le code HTML</h4>
+
+<p>L’extrait de code ci-dessous montre comment le rôle <code>alert</code> est directement ajouté dans le code source HTML. Au moment où l’élément finit de se charger, le lecteur d’écran doit être notifié de l’alerte. Si l’élément était dans le code source original lorsque la page s’est chargée, le lecteur d’écran annonce immédiatement l’erreur après la lecture du titre de la page.</p>
+
+<pre class="brush: html">&lt;h2 role="alert"&gt;Votre formulaire ne peut être soumis à cause de 3 erreurs de validation.&lt;/h2&gt;
+</pre>
+
+<h4 id="Exemple_2_Ajout_dynamique_d'un_élément_avec_le_rôle_alert">Exemple 2 : Ajout dynamique d'un élément avec le rôle <code>alert</code></h4>
+
+<p>Cet extrait de code crée dynamiquement un élément avec un rôle <code>alert</code> et l’ajoute à la structure du document.</p>
+
+<pre class="brush: js">var myAlert = document.createElement("p");
+myAlert.setAttribute("role", "alert");
+
+var myAlertText = document.createTextNode("Vous devez accepter nos conditions d’utilisation pour créer un compte.");
+myAlert.appendChild(myAlertText);
+document.body.appendChild(myAlertText);
+</pre>
+
+<p><strong>Note :</strong> le même résultat peut être obtenu avec moins de code en utilisant une bibliothèque de scripts telle que <em>jQuery</em> :</p>
+
+<pre class="brush: js">$("&lt;p role='alert'&gt;Vous devez accepter nos conditions d’utilisation pour créer un compte.&lt;/p&gt;").appendTo(document.body);
+</pre>
+
+<h4 id="Exemple_3_Ajout_d'un_rôle_alert_à_un_élément_existant">Exemple 3 : Ajout d'un rôle <code>alert</code> à un élément existant</h4>
+
+<p>Parfois, il peut être utile d’ajouter un rôle <code>alert</code> à un élément déjà visible dans la page plutôt que de créer un nouvel élément. Ceci permet au développeur de répéter une information devenue plus pertinente ou urgente pour l’utilisateur. Par exemple, un contrôle de formulaire peut avoir des instructions sur les valeurs attendues. Si une valeur différente est saisie, <code>role="alert"</code> peut être ajouté au texte de l’instruction pour que le lecteur d’écran l’annonce comme une alerte. L'extrait de pseudo-code ci-dessous illustre cette approche :</p>
+
+<pre class="brush: html">&lt;p id="formInstruction"&gt;Vous devez cocher au moins trois options&lt;/p&gt;
+</pre>
+
+<pre class="brush: js">// Lorsque l’utilisateur essaye de soumettre le formulaire avec moins de 3 cases cochées :
+document.getElementById("formInstruction").setAttribute("role", "alert");</pre>
+
+<h4 id="Exemple_4_Rendre_visible_un_élément_avec_le_rôle_alert">Exemple 4 : Rendre visible un élément avec le rôle <code>alert</code></h4>
+
+<p>Si un élément possède déjà <code>role="alert"</code> et qu’il est initialement caché par des règles CSS, le rendre visible déclenchera l’alerte comme si elle venait juste d’être ajoutée à la page. Cela signifie qu’une alerte existante peut être « réutilisée » plusieurs fois.</p>
+
+<p><strong>Note :</strong> dans la plupart des cas cette approche n’est pas recommandée, parce qu'il n'est pas idéal de masquer une erreur ou un texte d’alerte qui n’est pas applicable à ce moment précis. Les utilisateurs de technologies d’assistance plus anciennes pourraient toujours percevoir le texte d’alerte même si l’alerte ne s’applique pas à ce moment, faisant croire de façon erronée aux utilisateurs à l’existence d’un problème.</p>
+
+<pre class="brush: css">.hidden {
+  display:none;
+  }
+</pre>
+
+<pre class="brush: html">&lt;p id="expirationWarning" role="alert" class="hidden"&gt;Votre session expirera dans 2 minutes&lt;/p&gt;
+</pre>
+
+<pre class="brush: js">// suppression de la classe 'hidden' rend l’élément visible, ce qui entraînera l’annonce de l’alerte par le lecteur d’écran :
+document.getElementById("expirationWarning").className = ""; </pre>
+
+<h4 id="Exemples_concrets">Exemples concrets :</h4>
+
+<ul>
+ <li><a class="external" href="http://www.oaa-accessibility.org/example/1/" hreflang="en">Exemple de rôle d’alerte utilisant une boîte d’alerte ARIA (en)</a> ;</li>
+ <li><a class="external" href="http://www.oaa-accessibility.org/examplep/alertdialog1/" hreflang="en" title="http://www.oaa-accessibility.org/examplep/alertdialog1/">Exemple d’alerte utilisant une boîte de dialogue d’alerte ARIA modal (en)</a>.</li>
+</ul>
+
+<h3 id="Notes">Notes </h3>
+
+<ul>
+ <li>L’utilisation du rôle <code>alert</code> sur un élément implique que cet élément a l’attribut <code>aria-live="assertive"</code> ;</li>
+ <li>Le rôle <code>alert</code> ne devrait être utilisé que pour du contenu texte statique. L’élément sur lequel on utilise le rôle <code>alert</code> ne devrait pas pouvoir recevoir le focus, car les lecteurs d’écran annonceront automatiquement l’alerte où que se trouve le focus clavier ;</li>
+ <li>Si une alerte fournit également des contrôles interactifs – tels que des contrôles de formulaire qui permettraient à l’utilisateur de rectifier une erreur, ou un bouton <code>OK</code> pour annuler l’alerte – le rôle <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alertdialog" title="Utiliser le rôle alertdialog"><code>alertdialog</code></a> est préférable.</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#alert" hreflang="en" title="http://www.w3.org/TR/wai-aria/roles#alert">alert (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>
+ <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_la_propriété_aria-invalid" title="Utiliser la propriété aria-invalid">Utiliser la propriété <code>aria-invalid</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>
+
+<ul>
+ <li>Guide des bonnes pratiques ARIA - Rôle <code>Alert</code> : <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#alert" hreflang="en" title="http://www.w3.org/TR/wai-aria-practices/#alert">http://www.w3.org/TR/wai-aria-practices/#alert (en)</a></li>
+</ul>
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html
new file mode 100644
index 0000000000..0894b30460
--- /dev/null
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html
@@ -0,0 +1,85 @@
+---
+title: Utilisation du rôle alertdialog
+slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alertdialog
+tags:
+  - ARIA
+  - Accessibilité
+  - Développement Web
+  - Rôle
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_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#alertdialog" title="WAI-ARIA Roles #alertdialog">alertdialog</a></code> role.</p>
+</div>
+
+<p>Le rôle <code>alertdialog</code> est utilisé pour notifier à l’utilisateur des informations urgentes qui requièrent son attention immédiate. Comme le nom l’indique, <code>alertdialog</code> est un type de boîte de dialogue. Cela signifie que la plupart des instructions fournies à propos de l’<a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog_role" title="Utiliser le rôle dialog">utilisation du rôle <code>dialog</code></a> s’appliquent également au rôle <code>alertdialog</code> :</p>
+
+<ul>
+ <li>La boîte de dialogue d’alerte doit toujours avoir un nom accessible (attribué à l’aide de <code>aria-labelledby</code> ou de <code>aria-label</code>) et, dans la plupart des cas, le texte d’alerte sera marqué comme étant la description accessible de la boîte de dialogue d’alerte (définie avec de l’attribut <code>aria-describedby</code>).</li>
+ <li>Contrairement aux alertes classiques, une boîte de dialogue d’alerte doit avoir au moins un contrôle pouvant recevoir le focus et ce dernier doit s’y placer lors de l’affichage de la boîte de dialogue. Généralement les boîtes de dialogues d’alertes ont au moins un bouton de confirmation, de fermeture ou d’annulation qui peut être utilisé pour recevoir le focus. De plus, les boîtes de dialogues d’alerte peuvent avoir d’autres contrôles interactifs tels que des champs de saisie, des onglets ou des cases à cocher. Le contrôle sur lequel placer le focus dépendra de l’objet de la boîte de dialogue.</li>
+ <li>L’ordre de tabulation dans la boite de dialogue de l’alerte doit boucler.</li>
+</ul>
+
+<p>La différence avec les boîtes de dialogues classiques réside dans le fait que le rôle <code>alertdialog</code> devrait uniquement être utilisé lorsque des alertes, des erreurs ou des avertissements ont lieu. En d’autres termes, lorsque les informations et les contrôles d’une boîte de dialogue nécessitent l’attention immédiate de l’utilisateur il est préférable d’utiliser le rôle <code>alertdialog</code> plutôt que <code>dialog.</code> Il revient au développeur de faire la distinction entre les deux.</p>
+
+<p>Du fait de sa nature urgente, les boîtes de dialogues d’alertes doivent toujours être modales.</p>
+
+<div class="note"><strong>Note :</strong> ce rôle ne devrait être utilisé que pour des messages d’alertes associés à des contrôles interactifs. Si une boîte de dialogue d’alerte ne comporte que du contenu statique et qu’elle ne possède absolument aucun contrôle interactif, <code>alertdialog</code> n’est probablement pas le rôle le plus judicieux à utiliser. Le rôle <code>alert</code> est plus adapté pour ce cas (comme décrit dans l’article sur la technique d’<a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alert" title="Utiliser le rôle alert">utilisation du rôle <code>alert</code></a>).</div>
+
+<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>alertdialog</code> est utilisé, l’agent utilisateur devrait suivre les étapes suivantes :</p>
+
+<ul>
+ <li>Présenter l’élément comme une boîte de dialogue à l’API d’accessibilité du système d’exploitation.</li>
+ <li>Déclencher un évènement d’alerte accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge.</li>
+</ul>
+
+<p>Lorsque la boîte de dialogue de l’alerte apparaît, les lecteurs d’écran devraient annoncer l’alerte.</p>
+
+<p>Lorsque la boîte de dialogue est correctement labélisée et que le focus se place sur un contrôle qu’elle contient, les lecteurs d’écran devraient annoncer le rôle accessible de la boîte de 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> 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_boîte_de_dialogue_d’alerte">Exemple 1 : Une boîte de dialogue d’alerte</h4>
+
+<p>L’extrait de code ci-dessous présente la façon de baliser une boîte de dialogue d’alerte qui ne contient qu’un message et un bouton <code>OK</code>.</p>
+
+<pre class="brush: html">&lt;div role="alertdialog" aria-labelledby="dialog1Titre" aria-describedby="dialog1Desc"&gt;
+  &lt;div role="document" tabindex="0"&gt;
+    &lt;h2 id="dialog1Titre"&gt;Votre session est sur le point d’expirer&lt;/h2&gt;
+    &lt;p id="dialog1Desc"&gt;Pour prolonger votre session, cliquez sur le bouton OK&lt;/p&gt;
+    &lt;button&gt;OK&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="Exemples_concrets">Exemples concrets :</h4>
+
+<p>À définir</p>
+
+<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#dialog" title="http://www.w3.org/TR/wai-aria/roles#dialog">alertdialog</a> ;</li>
+ <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby" title="States and Properties #aria-labelledby">aria-labelledby</a> ;</li>
+ <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby" title="States and Properties #aria-describedby">aria-describedby</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_dialog" title="Utiliser le rôle dialog">Utiliser le rôle <code>dialog</code></a> ;</li>
+ <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert" title="Utiliser le rôle alert">Utiliser le rôle <code>alert</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/aria_techniques/using_the_aria-describedby_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html
new file mode 100644
index 0000000000..44e25b657f
--- /dev/null
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html
@@ -0,0 +1,89 @@
+---
+title: Utiliser l’attribut aria-describedby
+slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby
+tags:
+  - ARIA
+  - Accessibilité
+  - Attribut
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute
+---
+<h3 id="Description">Description</h3>
+
+<div class="summary">
+<p>Cette technique présente l’utilisation de l’attribut <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby" rel="external" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby"><code>aria-describedby</code></a>.</p>
+</div>
+
+<p>L’attribut <code>aria-describedby</code> est utilisé pour indiquer l’identifiant des éléments qui décrivent l’objet. Il est utilisé pour établir une relation entre des composants ou des groupes et un texte les décrivant. Il est similaire à <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby" title="Utiliser l’attribut aria-labelledby">aria-labelledby</a> : un label décrit la nature d’un objet, tandis qu’une description fournit plus d’informations pouvant être utiles à l’utilisateur.</p>
+
+<p>L’attribut <code>aria-describedby</code> n’est pas uniquement utilisé pour des éléments de formulaire ; il peut également être utilisé pour associer un texte statique avec des composants, des groupes d’éléments, des panneaux, des zones possédant un titre, des définitions, etc. La section {{ anch("Exemples") }} ci-dessous fournit plus d’informations sur l’utilisation de cet attribut dans ces cas précis.</p>
+
+<p>Cet attribut peut être utilisé avec n’importe quel élément caractéristique de formulaire HTML ; il n’est pas limité aux éléments auxquels un rôle ARIA a été assigné.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Une liste d’ID d’éléments séparés par des espaces</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>
+
+<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_Descriptions_des_points_de_repère_d’une_application">Exemple 1 : Descriptions des points de repère d’une application</h4>
+
+<p>Dans l’exemple ci-dessous, un paragraphe d’introduction décrit une application de calendrier. <code>aria-describedby</code> est utilisé pour associer le paragraphe avec le conteneur de l’application.</p>
+
+<pre class="brush: html">&lt;div role="applicaton" aria-labelledby="calendar" aria-describedby="info"&gt;
+    &lt;h1 id="calendar"&gt;Calendrier&lt;h1&gt;
+    &lt;p id="info"&gt;
+        Ce calendrier affiche les prévisions de match du Racing Métro.
+    &lt;/p&gt;
+    &lt;div role="grid"&gt;
+        …
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="Exemple_2_Un_bouton_de_fermeture">Exemple 2 : Un bouton de fermeture</h4>
+
+<p>Dans l’exemple ci-dessous, un lien qui fonctionne comme le bouton <code>Fermer</code> d’une boîte de dialogue, est décrit ailleurs dans le document. L’attribut <code>aria-describedby</code> est utilisé pour associer la description au lien.</p>
+
+<pre class="brush: html">&lt;button aria-label="Fermer" aria-describedby="descriptionClose"
+    onclick="myDialog.close()"&gt;X&lt;/button&gt;
+…
+
+&lt;div id="descriptionClose"&gt;La fermeture de cette fenêtre entraînera la perte des informations saisies et vous renverra vers la page principale&lt;/div&gt;
+</pre>
+
+<h4 id="Exemples_concrets">Exemples concrets :</h4>
+
+<ul>
+ <li><a class="external" href="http://www.oaa-accessibility.org/examplep/checkbox1/" title="checkbox1/">Exemple de case à cocher</a> utilisant <code>aria-describedby</code> ;</li>
+ <li><a class="external" href="http://www.oaa-accessibility.org/examplep/tooltip1/" title="tooltip1/">Exemple d’infobulle</a> utilisant <code>aria-describedby</code>.</li>
+</ul>
+
+<h3 id="Notes">Notes</h3>
+
+<ul>
+ <li>L’attribut <code>aria-describedby</code> n’est pas destiné à référencer les descriptions d’une ressource externe – comme c’est un ID, il doit référencer un élément du même document DOM.</li>
+</ul>
+
+<h3 id="Utilisé_par_les_rôles_ARIA">Utilisé par les rôles ARIA</h3>
+
+<p>Tous les éléments de balisage de base.</p>
+
+<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3>
+
+<ul>
+ <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby" title="en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Utiliser l’attribut <code>aria-labelledby</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>
+
+<ul>
+ <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">Spécification WAI-ARIA de aria-describedby</a></li>
+</ul>
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html
new file mode 100644
index 0000000000..63ff4fc91c
--- /dev/null
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html
@@ -0,0 +1,125 @@
+---
+title: Utiliser l'attribut aria-invalid
+slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-invalid
+tags:
+  - ARIA
+  - Accessibilité
+  - Attribut
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute
+---
+<h3 id="Description">Description</h3>
+
+<div class="summary">
+<p>Cette technique présente l’utilisation de l’attribut <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-invalid" title="States and Properties #aria-invalid"><code>aria-invalid</code></a>.</p>
+</div>
+
+<p>L’attribut <code>aria-invalid</code> est utilisé pour indiquer que la valeur saisie dans un champ de saisie n’est pas conforme au format attendu par l’application. Cela comprend les formats tels que les adresses électroniques ou les numéros de téléphone. <code>aria-invalid</code> peut également être utilisé pour indiquer qu’un champ obligatoire n’a pas été rempli. L’attribut devrait être programmatiquement défini comme étant le résultat du processus de validation.</p>
+
+<p>Cet attribut peut être utilisé avec n’importe quel élément de formulaire HTML typique ; il n’est pas limité aux éléments auxquels a été assigné un <code>rôle</code> ARIA.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<h4 id="Vocabulaire">Vocabulaire</h4>
+
+<dl>
+ <dt><code>false</code> (défaut)</dt>
+ <dd>Aucune erreur détectée</dd>
+ <dt><code>grammar</code></dt>
+ <dd>Une faute de grammaire a été détectée.</dd>
+ <dt><code>spelling</code></dt>
+ <dd>Une faute d’orthographe a été détectée.</dd>
+ <dt><code>true</code></dt>
+ <dd>La valeur n’a pas passé la validation.</dd>
+</dl>
+
+<p>Toute valeur absente de ce vocabulaire devrait être traitée comme <code>true</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>Les agents utilisateurs devraient informer l’utilisateur lorsqu’un champ n’est pas valide. Les développeurs d’applications devraient fournir des suggestions pour la correction du problème, lorsque c’est possible. Les auteurs devraient empêcher la soumission de formulaires contenant des erreurs.</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 fournit ci-dessus est l’une de ces opinions et n’est pas normative.</div>
+
+<h3 id="Exemples">Exemples</h3>
+
+<h4 id="Exemple_1_validation_d’un_formulaire_de_base">Exemple 1 : validation d’un formulaire de base</h4>
+
+<p>L’extrait de code suivant décrit une version simplifiée de deux champs de formulaire avec une fonction de validation de la saisie attachée à la perte de focus. Notez que la valeur par défaut de <code>aria-required</code> étant <code>false</code>, il n’est pas strictement nécessaire d’ajouter à entrer.</p>
+
+<pre class="brush: html">&lt;input name="nom" id="nom" aria-required="true" aria-invalid="false"
+        onblur="checkValidity('nom', ' ', 'Le nom saisi n’est pas valide (vous devez saisir un nom et un prénom)');"/&gt;
+&lt;br /&gt;
+&lt;input name="courriel" id="courriel" aria-required="true" aria-invalid="false"
+        onblur="checkValidity('courriel', '@', 'L’adresse électronique saisie n’est pas valide');"/&gt;
+</pre>
+
+<p>Remarquez qu’il n’est pas nécessaire de valider les champs de saisie immédiatement à la perte de focus ; l’application peut attendre jusqu’à la soumission du formulaire (bien que ce ne soit pas particulièrement recommandé).</p>
+
+<p>L’extrait de code ci-dessous décrit une fonction de validation très simple qui ne vérifie que la présence d’un caractère particulier (en réalité, la validation sera un peu plus sophistiquée) :</p>
+
+<pre class="brush: js">function checkValidity(aID, aSearchTerm, aMsg){
+    var elem = document.getElementById(aID);
+    var invalid = (elem.value.indexOf(aSearchTerm) &lt; 0);
+    if (invalid) {
+      elem.setAttribute("aria-invalid", "true");
+      updateAlert(aMsg);
+    } else {
+      elem.setAttribute("aria-invalid", "false");
+      updateAlert();
+    }
+}
+</pre>
+
+<p>L’extrait de code ci-dessous décrit des fonctions d’alertes, qui ajoutent (ou suppriment) le message d’erreur :</p>
+
+<pre class="brush: js">function updateAlert(msg) {
+    var oldAlert = document.getElementById("alert");
+    if (oldAlert) {
+        document.body.removeChild(oldAlert);
+    }
+
+    if (msg) {
+        var newAlert = document.createElement("div");
+        newAlert.setAttribute("role", "alert");
+        newAlert.setAttribute("id", "alert");
+        var content = document.createTextNode(msg);
+        newAlert.appendChild(content);
+        document.body.appendChild(newAlert);
+    }
+}
+</pre>
+
+<p>Remarquez que le <code>rôle</code> ARIA de l’alerte est définit comme étant <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert" title="Using the alert role"><code>"alert"</code></a>.</p>
+
+<h4 id="Exemples_concrets">Exemples concrets :</h4>
+
+<p><a class="external" href="http://www.oaa-accessibility.org/examplep/alert1/" title="http://www.oaa-accessibility.org/examplep/alert1/">Exemple de <code>role</code> d’alerte</a> (utilisant l’attribut <code>aria-invalid</code>).</p>
+
+<h3 id="Notes">Notes</h3>
+
+<ul>
+ <li>Lorsque <code>aria-invalid</code> est utilisé en conjonction avec l’attribut <code>aria-required</code>, <code>aria-invalid</code> <strong>ne devrait pas</strong> être défini à <code>true</code> avant la soumission du formulaire – uniquement en réponse à la validation.</li>
+ <li>Les développements futurs pourraient ajouter des termes au vocabulaire utilisé pour cet attribut. Toute valeur absente du vocabulaire actuel devrait être traitée comme <code>true</code>.</li>
+</ul>
+
+<h3 id="Utilisé_dans_les_rôles_ARIA">Utilisé dans les rôles ARIA</h3>
+
+<p>Tous les éléments de balisage de base.</p>
+
+<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3>
+
+<ul>
+ <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-required" title="Using the aria-required property">Utiliser l’attribut <code>aria-required</code></a></li>
+ <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert" title="Utiliser le rôle alert">Utiliser le rôle <code>alert</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>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-invalid" title="States and Properties #aria-invalid">Spécification WAI-ARIA de la propriété <code>aria-invalid</code></a></li>
+ <li><a class="external" href="http://www.w3.org/TR/wai-aria-practices/#ariaform" title="http://www.w3.org/TR/wai-aria-practices/#ariaform">WAI Authoring Practices for forms</a> (Règles WAI de création de formulaires)</li>
+</ul>
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html
new file mode 100644
index 0000000000..81fdf2ae5b
--- /dev/null
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html
@@ -0,0 +1,74 @@
+---
+title: Utiliser l'attribut aria-label
+slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-label
+tags:
+  - ARIA
+  - Accessibilité
+  - Attribut
+  - aria-label
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
+---
+<p>L’attribut <code>aria-label</code> est utilisé pour définir une légende non-visible associée à un élément HTML dont le sens est transmis uniquement par le visuel. Par exemple, une croix pour fermer une fenêtre modale.</p>
+
+<h2 id="Contexte">Contexte</h2>
+
+<p>Pour la plupart des usagers, le contexte et l'apparence d'un élément suffisent à déterminer son rôle. Par exemple, une croix pour fermer une fenêtre modale ou une icône de hamburger pour ouvrir un menu.</p>
+
+<p>En revanche, certains usagers tels que les aveugles et malvoyants ne peuvent pas faire de même. Cet attribut permet aux développeurs d'indiquer une alternative textuelle à ces contrôles visuels, qui sera lue par les technologies d'assistance. En revanche, le contenu de l'attribut <code>aria-label</code> ne sera pas visible pour les autres usagers.</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>
+
+<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>
+
+<p>Les lecteurs d'écran lisent le contenu textuel de cet attribut.</p>
+
+<h2 id="Usage">Usage</h2>
+
+<p>L’attribut <code>aria-label</code> ne doit être utilisé que lorsque le texte d’un label <em>n’est pas</em> visible à l’écran. Si le texte du label de l’élément existe et est visible, utilisez plutôt l’attribut <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby" title="Utiliser l’attribut aria-labelledby">aria-labelledby</a>.</p>
+
+<p>Cet attribut peut être utilisé avec n’importe quel élément HTML. Néanmoins, il n'est pas nécessaire de l'utiliser si l'élément possède déjà un mécanisme pour légender son contenu. Par exemple l'élément <code>&lt;label&gt;</code> pour les éléments de formulaire, ou l'attribut <code>alt</code> pour les images.</p>
+
+<h3 id="Valeur">Valeur</h3>
+
+<div class="textbody">
+<p>Une légende sous forme de chaîne de caractère.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Un_bouton_sans_contenu_textuel_explicite">Un bouton sans contenu textuel explicite</h3>
+
+<p>Dans l’exemple ci-dessous, un bouton est stylé pour ressembler à un bouton « <em>Fermer</em> » classique, avec un <code>X</code> en son centre. Comme il n’existe aucune information indiquant que la fonction du bouton est de fermer la boîte de dialogue, l’attribut <code>aria-label</code> est utilisé pour fournir un label aux technologies d’assistance.</p>
+
+<pre class="brush: html"> &lt;button aria-label="Fermer" onclick="myDialog.close()"&gt;X&lt;/button&gt;
+</pre>
+
+<h3 id="Un_champ_de_saisie_utilisant_contentEditable">Un champ de saisie utilisant contentEditable</h3>
+
+<p>Pour proposer une expérience d'édition plus personnalisée, on pourrait utiliser une <code>div</code> avec l'attribut <code>contenteditable</code> à la place d'un élément de formulaire natif comme <code>&lt;textarea&gt;</code>. Cette situation ne permettrait pas d'associer un <code>&lt;label&gt;</code> à ce champ de saisie. Ainsi on pourrait utiliser <code>aria-label</code> à la place.</p>
+
+<h2 id="Pour_aller_plus_loin">Pour aller plus loin</h2>
+
+<h3 id="Notes">Notes</h3>
+
+<p>L’affectation d’<em>API accessibilité</em> la plus courante pour un label est la propriété de <em>nom accessible</em>.</p>
+
+<h3 id="Utilisé_par_les_rôles_ARIA">Utilisé par les rôles ARIA</h3>
+
+<p>Tous les éléments de balisage de base.</p>
+
+<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3>
+
+<ul>
+ <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby" title="Utiliser l’attribut aria-labelledby">Utiliser l’attribut <code>aria-labelledby</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>
+
+<ul>
+ <li><a class="external" href="https://www.w3.org/TR/wai-aria/#aria-label" title="States and Properties #aria-label">Spécification WAI-ARIA pour aria-label</a>.</li>
+</ul>
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html
new file mode 100644
index 0000000000..34eac612ab
--- /dev/null
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html
@@ -0,0 +1,160 @@
+---
+title: Utiliser l'attribut aria-labelledby
+slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby
+tags:
+  - ARIA
+  - Accessibilité
+  - Attribut
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute
+---
+<h3 id="Description">Description</h3>
+
+<div class="summary">
+<p>Cette technique présente l’utilisation de l’attribut <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby" rel="external" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby"><code>aria-labelledby</code></a>.</p>
+</div>
+
+<p>L’attribut <code>aria-labelledby</code> est utilisé pour indiquer les ID des éléments qui labellisent l’objet. Il est utilisé pour établir une relation entre les composants, ou les groupes, et leurs labels. Les utilisateurs de technologies d’assistance telles que les lecteurs d’écran, naviguent généralement dans un document en tabulant entre les zones de l’écran. Si un label n’est pas associé à un élément de saisie, un composant ou un groupe, il ne sera pas lu par le lecteur d’écran.</p>
+
+<p><code>aria-labelledby</code> est très similaire à l’attribut <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby" title="Using_the_aria-describedby_attribute">aria-describedby</a> : un label décrit la nature d’un objet, alors qu’une description fournit plus d’informations pouvant être utiles à l’utilisateur.</p>
+
+<p>L’attribut <code>aria-labelledby</code> n’est pas uniquement utilisé avec les éléments de formulaire ; il peut également être utilisé pour associer un texte statique avec des composants, des groupes d’éléments, des panneaux, des zones possédant un titre, des définitions, etc. La section {{ anch("Exemples") }} ci-dessous fournit plus d’informations sur l’utilisation de cet attribut dans ces cas précis.</p>
+
+<p>L’attribut <code>aria-labelledby</code> peut être utilisé en conjonction avec l’élément {{ HTMLElement("label") }} (à l’aide de l’attribut <code>for</code>) pour améliorer la compatibilité avec les agents utilisateurs qui ne prennent pas encore en charge ARIA.</p>
+
+<p>Cet attribut peut être utilisé avec n’importe quel élément caractéristique de formulaire HTML ; il n’est pas limité aux éléments auxquels un rôle ARIA a été assigné.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Une liste d’ID d’éléments séparés par des espaces</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 les deux attributs <code>aria-labelledby</code> et <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_aria-label_attribute" title="Using the aria-labelledby attribute"><code>aria-label</code></a> sont utilisés, les agents utilisateurs donnent la priorité à <code>aria-labelledby</code> lors du calcul de la propriété de nom accessible.</p>
+
+<h3 id="Exemples">Exemples</h3>
+
+<h4 id="Exemple_1_Labels_multiples">Exemple 1 : Labels multiples</h4>
+
+<p>Dans l’exemple ci-dessous, chaque champ de saisie est labellisé à la fois avec son propre label individuel et avec le label pour le groupe :</p>
+
+<pre class="brush: html notranslate">&lt;div id="facturation"&gt;Facturation&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;div id="nom"&gt;Nom&lt;/div&gt;
+
+  &lt;input type="text" aria-labelledby="nom facturation"/&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;div id="adresse"&gt;Adresse&lt;/div&gt;
+
+  &lt;input type="text" aria-labelledby="adresse facturation"/&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="Exemple_2_Association_de_titres_et_de_zones">Exemple 2 : Association de titres et de zones</h4>
+
+<p>Dans l’exemple ci-dessous, les éléments d’en-têtes sont associés avec les contenus dont ils sont les intitulés. Notez que la zone référencée est celle qui <em>contient</em> l’en-tête.</p>
+
+<pre class="brush: html notranslate">&lt;div role="main" aria-labelledby="foo"&gt;
+  &lt;h1 id="foo"&gt;Le feu devenu incontrôlable gagne les abords d’Aubagne&lt;/h1&gt;
+  Un fort mistral a propagé le feu de forêt qui s’est déclaré ce lundi soir suite aux fortes températures de ces derniers jours…
+&lt;/div&gt;
+</pre>
+
+<h4 id="Exemple_3_Groupes_de_boutons_radio">Exemple 3 : Groupes de boutons radio</h4>
+
+<p>Dans l’exemple ci-dessous, le conteneur d’un <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_radiogroup" title="Utiliser le rôle radiogroup">radiogroup</a> est associé avec son label à l’aide de l’attribut <code>aria-labelledby</code> :</p>
+
+<pre class="brush: html notranslate">&lt;div id="radio_label"&gt;My radio label&lt;/div&gt;
+
+&lt;ul role="radiogroup" aria-labelledby="radio_label"&gt;
+  &lt;li role="radio"&gt;Élément №1&lt;/li&gt;
+  &lt;li role="radio"&gt;Élément №2&lt;/li&gt;
+  &lt;li role="radio"&gt;Élément №3&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h4 id="Exemple_4_Titre_de_boite_de_dialogue">Exemple 4 : Titre de boite de dialogue</h4>
+
+<p>Dans l’exemple ci-dessous, l’élément d’en-tête qui labellise la boite de dialogue y est relié par l’attribut <code>aria-labelledby</code> :</p>
+
+<pre class="brush: html notranslate">&lt;div role="dialog" aria-labelledby="titreDialogue"&gt;
+  &lt;h2 id="titreDialogue"&gt;Choisir un fichier&lt;/h2&gt;
+  … Contenus de la boîte de dialogue
+&lt;/div&gt;
+</pre>
+
+<h4 id="Exemple_5_Définition_intégrée">Exemple 5 : Définition intégrée</h4>
+
+<p>Dans l’exemple ci-dessous, la définition d’un terme qui est décrit dans le flux naturel de la narration, est associée au terme lui-même à l’aide de l’attribut <strong>aria-labelledby</strong>:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Le docteur expliqua que c’était un &lt;dfn id="placebo"&gt;placebo&lt;/dfn&gt;, &lt;span role="definition" aria-labelledby="placebo"&gt; ou
+une préparation inerte prescrite plus pour le soulagement mental du patient que ses effets possible sur une pathologie.&lt;/span&gt;
+&lt;/p&gt;
+</pre>
+
+<h4 id="Exemple_6_Listes_de_définitions">Exemple 6 : Listes de définitions</h4>
+
+<p>Dans l’exemple ci-dessous, les définitions sont associées avec les termes qu’elles définissent à l’aide de l’attribut <code>aria-labelledby</code> :</p>
+
+<pre class="brush: html notranslate">&lt;dl&gt;
+  &lt;dt id="anatheme"&gt;anathème&lt;/dt&gt;
+    &lt;dd role="definition" aria-labelledby="anatheme"&gt;une interdiction ou une condamnation prononcée par une autorité ecclésiastique
+                                         et accompagnée de l’excommunication&lt;/dd&gt;
+    &lt;dd role="definition" aria-labelledby="anatheme"&gt;une dénonciation vigoureuse&amp;nbsp;: condamnation&lt;/dd&gt;
+
+  &lt;dt id="homelie"&gt;homélie&lt;/dt&gt;
+    &lt;dd role="definition" aria-labelledby="homelie"&gt;généralement un sermon court&lt;/dd&gt;
+    &lt;dd role="definition" aria-labelledby="homelie"&gt;une lecture ou un discours sur un thème moral&lt;/dd&gt;
+
+&lt;/dl&gt;
+</pre>
+
+<h4 id="Exemple_7_Menus">Exemple 7 : Menus</h4>
+
+<p>Dans l’exemple ci-dessous, un <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-haspopup" title="Utiliser l’attribut aria-haspopup">menu contextuel</a> est associé avec son label à l’aide de l’attribut <code>aria-labelledby</code> :</p>
+
+<pre class="brush: html notranslate">&lt;div role="menubar"&gt;
+  &lt;div role="menuitem" aria-haspopup="true" id="fichierMenu"&gt;Fichier&lt;/div&gt;
+  &lt;div role="menu" aria-labelledby="fichierMenu"&gt;
+    &lt;div role="menuitem"&gt;Ouvrir&lt;/div&gt;
+    &lt;div role="menuitem"&gt;Enregistrer&lt;/div&gt;
+    &lt;div role="menuitem"&gt;Enregistrer sous…&lt;/div&gt;
+    …
+  &lt;/div&gt;
+…
+&lt;/div&gt;
+</pre>
+
+<h4 id="Exemples_concrets">Exemples concrets :</h4>
+
+<ul>
+ <li><a class="external" href="http://www.oaa-accessibility.org/examplep/button2/" title="http://www.oaa-accessibility.org/examplep/button2/">Exemple de bouton</a> utilisant <code>aria-labelledby</code> ;</li>
+ <li><a class="external" href="http://www.oaa-accessibility.org/examplep/combobox1/" title="http://www.oaa-accessibility.org/examplep/combobox1/">Exemple de boite combinée</a> utilisant <code>aria-labelledby</code>.</li>
+</ul>
+
+<h3 id="Notes">Notes</h3>
+
+<p>L’affectation d’<em>API accessibilité</em> la plus courante pour un label est la propriété de <em>nom accessible</em>.</p>
+
+<h3 id="Utilisé_par_les_rôles_ARIA">Utilisé par les rôles ARIA</h3>
+
+<p>Tous les éléments de balisage de base.</p>
+
+<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3>
+
+<ul>
+ <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-label" title="Utiliser l’attribut aria-label">Utiliser l’attribut <code>aria-label</code></a> ;</li>
+ <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby" title="Utiliser l’attribut aria-describedby">Utiliser l’attribut <code>aria-describedby</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>
+
+<ul>
+ <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">Spécification WAI-ARIA pour aria-labelledby</a>.</li>
+</ul>
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html
new file mode 100644
index 0000000000..289379c098
--- /dev/null
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html
@@ -0,0 +1,75 @@
+---
+title: Utiliser l'attribut aria-orientation
+slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-orientation
+tags:
+  - ARIA
+  - Accessibilité
+  - Attribut
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute
+---
+<h3 id="Description">Description</h3>
+
+<div class="summary">
+<p>Cette technique présente l’utilisation de l’attribut <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-orientation" title="States and Properties #aria-orientation">aria-orientation</a>.</p>
+</div>
+
+<p>L’attribut <code>aria-orientation</code> est utilisé pour indiquer si un élément est orienté verticalement ou horizontalement.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Vocabulaire</p>
+
+<dl>
+ <dt>vertical</dt>
+ <dd>L’élément est orienté verticalement.</dd>
+ <dt>horizontal (défaut)</dt>
+ <dd>L’élément est orienté horizontalement.</dd>
+</dl>
+
+<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>
+
+<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">Exemple 1 :</h4>
+
+<p>L’extrait de code ci-dessous présente un curseur simple orienté verticalement.</p>
+
+<pre class="brush: html">&lt;a href="#" id="handle_zoomSlider"
+  role="slider"
+  aria-orientation="vertical"
+  aria-valuemin="0"
+  aria-valuemax="17"
+  aria-valuenow="14" &gt;
+    &lt;span&gt;11&lt;/span&gt;
+&lt;/a&gt;
+</pre>
+
+<h4 id="Exemples_concrets">Exemples concrets :</h4>
+
+<ul>
+ <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/" title="http://www.oaa-accessibility.org/examplep/slider1/">Exemple de curseur</a>.</li>
+</ul>
+
+<h3 id="Notes">Notes</h3>
+
+<h3 id="Utilisé_avec_les_rôles_ARIA">Utilisé avec les rôles ARIA</h3>
+
+<ul>
+ <li>scrollbar ;</li>
+ <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider_role" title="Utiliser le rôle slider">slider</a> ;</li>
+ <li>separator.</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>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-orientation" title="States and Properties #aria-orientation">Spécification WAI-ARIA pour l’attribut <code>aria-orientation</code></a>.</li>
+</ul>
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.html
new file mode 100644
index 0000000000..2354a7be55
--- /dev/null
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.html
@@ -0,0 +1,30 @@
+---
+title: Utiliser l'attribut aria-relevant
+slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-relevant
+tags:
+  - ARIA
+  - Accessibilité
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute
+---
+<p><span class="seoSummary">L’attribut <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant" rel="external" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant">aria-relevant</a> est une valeur optionnelle utilisée pour décrire quels types de modifications ont été apportés à une région <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions" title="/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions"><code>aria-live</code></a>, ainsi que ceux qui sont pertinents et doivent être annoncés. Toute modification jugée comme non pertinente se comporte de la même manière que si l’attribut <code>aria-live</code> n’était pas activé.</span></p>
+
+<p>L’attribut aria-relevant est habituellement utilisé lorsque le contenu d’une page web peut être mis à jour alors que la page est affichée.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Une liste délimitée par des espaces avec une ou plusieurs des valeurs suivantes :</p>
+
+<ul>
+ <li>« additions » L’insertion de noeuds au sein de la région live doit être considérée comme pertinente</li>
+ <li>« removals » La suppression de noeuds doit être considérée comme pertinente</li>
+ <li>« text » Des changements apportés au contenu texte de noeuds existants doivent être considérés comme pertinents</li>
+ <li>« all » Equivalent à « additions removals text »</li>
+</ul>
+
+<p><code>aria-relevant="additions text"</code> est la valeur par défaut d’une région live.</p>
+
+<h3 id="Autres_ressources">Autres ressources</h3>
+
+<ul>
+ <li><a class="external" href="https://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant" title="https://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant">Spécification WAI-ARIA pour aria-relevant</a></li>
+</ul>
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html
new file mode 100644
index 0000000000..79bbf0d0ed
--- /dev/null
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html
@@ -0,0 +1,82 @@
+---
+title: Utiliser l'attribut aria-required
+slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-required
+tags:
+  - ARIA
+  - Accessibilité
+  - Attribut
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute
+---
+<h3 id="Description">Description</h3>
+
+<div class="summary">
+<p>Cette technique présente l’utilisation de l’attribut <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-required" title="States and Properties #aria-required"><code>aria-required</code></a>.</p>
+</div>
+
+<p>L’attribut <code>aria-required</code> est utilisé pour indiquer que l’utilisateur doit obligatoirement remplir un champ de formulaire avant de le soumettre. Cet attribut peut être utilisé avec n’importe quel élément de formulaire HTML ; il n’est pas limité aux éléments auxquels a été assigné un <code>rôle</code> ARIA.</p>
+
+<p>{{ HTMLVersionInline("5") }} a introduit l’attribut <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Attributes" title="Liste des attributs HTML"><code>required</code></a>, mais <code>aria-required</code> est toujours utile pour les agents utilisateurs qui ne prennent pas encore en charge HTML5.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p><code>true</code> ou <code>false</code> (Valeur par défaut : <code>false</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>Les lecteurs d’écran devraient annoncer le champ comme étant obligatoire.</p>
+
+<p>Remarquez que cet attribut ne changera pas automatiquement la présentation du champ.</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_formulaire_simple">Exemple 1 : un formulaire simple</h4>
+
+<pre class="brush: html">&lt;form action="post"&gt;
+  &lt;label for="prenom"&gt;Prénom&amp;nbsp;:&lt;/label&gt;
+  &lt;input id="prenom" type="text" aria-required="true"&gt;
+  &lt;br/&gt;
+  &lt;label for="nom"&gt;Nom&amp;nbsp;:&lt;/label&gt;
+  &lt;input id="nom" type="text" aria-required="true"&gt;
+  &lt;br/&gt;
+  &lt;label for="adresse"&gt;Adresse&amp;nbsp;:&lt;/label&gt;
+  &lt;input id="adresse" type="text"&gt;
+&lt;/form&gt;
+</pre>
+
+<h4 id="Exemples_concrets">Exemples concrets :</h4>
+
+<p><a class="external" href="http://www.oaa-accessibility.org/examplep/tooltip1/" title="http://www.oaa-accessibility.org/examplep/tooltip1/">Exemple d’infobulle</a> (comprenant l’utilisation de l’attribut <code>aria-required</code>).</p>
+
+<h3 id="Notes">Notes</h3>
+
+<h3 id="Utilisé_dans_les_rôles_ARIA">Utilisé dans les rôles ARIA</h3>
+
+<ul>
+ <li>Combobox ;</li>
+ <li>Gridcell ;</li>
+ <li>Listbox ;</li>
+ <li>Radiogroup ;</li>
+ <li>Spinbutton ;</li>
+ <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_textbox" title="Utiliser le rôle textbox">Textbox</a> ;</li>
+ <li>Tree.</li>
+</ul>
+
+<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3>
+
+<ul>
+ <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-invalid" title="Utiliser l’attribut aria-invalid">Utiliser l’attribut <code>aria-invalid</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>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-required" title="States and Properties #aria-required">Spécification WAI-ARIA pour <code>aria-required</code></a> ;</li>
+ <li><a class="external" href="http://www.w3.org/TR/wai-aria-practices/#ariaform" title="Pratiques WAI-ARIA #ariaform">WAI-ARIA Authoring Practices for forms</a> (Règles WAI-ARIA de création de formulaires) ;</li>
+ <li><a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation" title="Validation de condition">Validation de condition</a> en {{ HTMLVersionInline("5") }}.</li>
+</ul>
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html
new file mode 100644
index 0000000000..dfcacb5ea1
--- /dev/null
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html
@@ -0,0 +1,74 @@
+---
+title: Utiliser l'attribut aria-valuemax
+slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax
+tags:
+  - ARIA
+  - Accessibilité
+  - Attribut
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute
+---
+<h3 id="Description">Description</h3>
+
+<div class="summary">
+<p>Cette technique présente l’utilisation de l’attribut <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuemax" rel="external" title="States and Properties #aria-valuemax">aria-valuemax</a>.</p>
+</div>
+
+<p>L’attribut <code>aria-valuemax</code> est utilisé pour définir la valeur maximale autorisée pour un composant à intervalle tels qu’une barre de progression <code>progressbar</code>, un bouton rotatif <code>spinbutton</code> ou un curseur <code>slider</code>. Si <a class="property-reference" href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Using the aria-valuemin attribute"><code>aria-valuenow</code></a> a des valeurs minimale et maximale connues, le développeur devrait fournir les propriétés de <code>aria-valuemax</code> et <a class="property-reference" href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin" title="Using_the_aria-valuemin_attribute"><code>aria-valuemin</code></a>. La valeur de <code>aria-valuemax</code> <strong class="rfc2119">DOIT</strong> être supérieure ou égale à celle de <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin" title="Using_the_aria-valuemin_attribute"><code>aria-valuemin</code></a>.</p>
+
+<p><code>aria-valuemax</code> est un attribut <strong>obligatoire</strong> des rôles <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider" title="Utiliser le rôle slider">slider</a>, <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar" title="Utiliser le rôle scrollbar">scrollbar</a> et <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton" title="Utiliser le rôle spinbutton">spinbutton</a>.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Représentation d’un nombre par une chaîne</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>Si la valeur <code>aria-valuemax</code> n’est pas déterminée, ou si <code>aria-valuemin</code> n’est pas inférieure ou égale à la valeur de <code>aria-valuemax</code>, cela créera une condition d’erreur qui sera gérée par la technologie d’assistance.</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">Exemple 1:</h4>
+
+<p>L’extrait de code ci-dessous montre un curseur basique avec une valeur maximale de 10.</p>
+
+<pre class="brush: html">&lt;div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10"&gt;
+</pre>
+
+<h4 id="Exemples_concrets">Exemples concrets :</h4>
+
+<ul>
+ <li><a class="external" href="http://www.oaa-accessibility.org/examplep/progressbar1/" title="http://www.oaa-accessibility.org/examplep/progressbar1/">Exemple de barre de progression</a> ;</li>
+ <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/" title="http://www.oaa-accessibility.org/examplep/slider1/">Exemple de curseur</a> ;</li>
+ <li><a class="external" href="http://www.oaa-accessibility.org/examplep/spinbutton1/" title="http://www.oaa-accessibility.org/examplep/spinbutton1/">Exemple de bouton rotatif</a>.</li>
+</ul>
+
+<h3 id="Notes">Notes</h3>
+
+<h3 id="Utilisés_avec_les_rôles_ARIA">Utilisés avec les rôles ARIA</h3>
+
+<ul>
+ <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar" title="Utiliser le rôle progressbar">progressbar</a> ;</li>
+ <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar" title="Utiliser le rôle scrollbar">scrollbar</a> ;</li>
+ <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider" title="Utiliser le rôle slider">slider</a> ;</li>
+ <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton" title="Utiliser le rôle spinbutton">spinbutton</a>.</li>
+</ul>
+
+<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3>
+
+<ul>
+ <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin" title="Utiliser l’attribut aria-valuemin">aria-valuemin</a> ;</li>
+ <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Utiliser l’attribut aria-label">aria-valuenow</a> ;</li>
+ <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext" title="Utiliser l’attribut aria-required">aria-valuetext</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><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuemax" title="States and Properties #aria-valuemax">Spécification WAI-ARIA pour l’attribut <code>aria-valuemax</code></a>.</li>
+</ul>
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html
new file mode 100644
index 0000000000..55e3dc2d4c
--- /dev/null
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html
@@ -0,0 +1,70 @@
+---
+title: Utiliser l'attribut aria-valuemin
+slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin
+tags:
+  - ARIA
+  - Accessibilité
+  - Attribut
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute
+---
+<h3 id="Description">Description</h3>
+
+<p>L’attribut <code>aria-valuemin</code> est utilisé pour définir la valeur minimale autorisée pour un composant à intervalle tel qu’une barre de progression <code>progressbar</code>, un bouton rotatif <code>spinbutton</code> ou un curseur <code>slider</code>. Si <a class="property-reference" href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Using_the_aria-valuenow_attribute"><code>aria-valuenow</code></a> a des valeurs limites connues (minimum et maximum), le développeur devrait spécifier les propriétés de <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax" title="Using_the_aria-valuemax_attribute"><code>aria-valuemax</code></a> et <code>aria-valuemin</code>. La valeur de <code>aria-valuemin</code> <strong class="rfc2119">DOIT</strong> être inférieure ou égale à celle de <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax" title="Using_the_aria-valuemax_attribute"><code>aria-valuemax</code></a>.</p>
+
+<p><code>aria-valuemin</code> est un attribut <strong>obligatoire</strong> des rôles <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider" title="Utiliser le rôle slider">slider</a>, <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar" title="Utiliser le rôle scrollbar">scrollbar</a> et <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton" title="Utiliser le rôle spinbutton">spinbutton</a>.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Représentation d’un nombre sous forme d'une chaîne</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>Si <code>aria-valuemin</code> n’est pas inférieure ou égale à la valeur de <code>aria-valuemax</code>, cela créera une condition d’erreur qui sera gérée par la technologie d’assistance.</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">Exemple 1 :</h4>
+
+<p>L’extrait de code ci-dessous montre un curseur basique avec une valeur minimale de 1.</p>
+
+<pre class="brush: html">&lt;div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10"&gt;
+</pre>
+
+<h4 id="Exemples_concrets">Exemples concrets :</h4>
+
+<ul>
+ <li><a class="external" href="http://www.oaa-accessibility.org/examplep/progressbar1/" title="http://www.oaa-accessibility.org/examplep/progressbar1/">Exemple de barre de progression</a> ;</li>
+ <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/" title="http://www.oaa-accessibility.org/examplep/slider1/">Exemple de curseur</a> ;</li>
+ <li><a class="external" href="http://www.oaa-accessibility.org/examplep/spinbutton1/" title="http://www.oaa-accessibility.org/examplep/spinbutton1/">Exemple de bouton rotatif</a>.</li>
+</ul>
+
+<h3 id="Notes">Notes</h3>
+
+<h3 id="Utilisé_avec_les_rôles_ARIA">Utilisé avec les rôles ARIA</h3>
+
+<ul>
+ <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar" title="Utiliser le rôle progressbar">progressbar</a> ;</li>
+ <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar" title="Utiliser le rôle scrollbar">scrollbar</a> ;</li>
+ <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider" title="Utiliser le rôle slider">slider</a> ;</li>
+ <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton" title="Utiliser le rôle spinbutton">spinbutton</a>.</li>
+</ul>
+
+<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3>
+
+<ul>
+ <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax" title="Utiliser l’attribut aria-valuemax">aria-valuemax</a> ;</li>
+ <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Utiliser l’attribut aria-label">aria-valuenow</a> ;</li>
+ <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext" title="Utiliser l’attribut aria-required">aria-valuetext</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><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuemin" title="States and Properties #aria-valuemin">Spécification WAI-ARIA pour l’attribut <code>aria-valuemin</code></a>.</li>
+</ul>
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.html
new file mode 100644
index 0000000000..15f5e46588
--- /dev/null
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.html
@@ -0,0 +1,78 @@
+---
+title: Utiliser l'attribut aria-valuenow
+slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow
+tags:
+  - ARIA
+  - Accessibilité
+  - Attribut
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute
+---
+<h3 id="Description">Description</h3>
+
+<div class="summary">
+<p>Cette technique présente l’utilisation de l'attribut <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuenow" rel="external" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuenow">aria-valuenow</a>.</p>
+</div>
+
+<p>L’attribut <code>aria-valuenow</code> est utilisé pour définir la valeur courante de l’intervalle d’un composant tel qu’un <code>slider</code>, <code>spinbutton</code> ou une <code> progressbar</code>. Si la valeur courante n'est pas connue, le développeur ne devrait pas définir l’attribut <code>aria-valuenow</code>. Si <code>aria-valuenow</code> a des valeurs minimale et maximale connues, le développeur devrait définir les attributs <a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin" title="Utiliser l’attribut aria-valuemin"><code>aria-valuemin</code></a> et <a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax" title="Utiliser l’attribut aria-valuemax"><code>aria-valuemax</code></a>.</p>
+
+<p>Lorsque la valeur retournée ne peut être précisément représentée par une nombre, les développeurs <strong class="rfc2119">DEVRAIENT</strong> utiliser l’attribut <a class="property-reference" href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext" title="Utiliser l‘attribut aria-valuetext"><code>aria-valuetext</code></a> en conjonction avec <code>aria-valuenow</code> pour fournir une représentation humainement lisible de la valeur courante. Par exemple, un curseur peut avoir des valeurs retournées comme <code>petite</code>, <code>moyenne</code> et <code>grande</code>. Dans ce cas, les valeurs de <code>aria-valuenow</code> peuvent varier de 1 à 3, ce qui indique la position de chaque valeur dans l'espace de valeurs, mais la valeur de <a class="property-reference" href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext" title="Utiliser l’attribut aria-valuetext"><code>aria-valuetext</code></a> sera l’une des chaînes : <code>petite</code>, <code>moyenne</code> ou <code>grande</code>.</p>
+
+<p>L’attribut <code>aria-valuenow</code> est <strong>obligatoire</strong> pour les rôles <a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider" title="Utiliser le rôle slider">slider</a>, <a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar" title="Utiliser le rôle scrollbar">scrollbar</a> et <a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton" title="Utiliser le rôle spinbutton">spinbutton</a>.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Représentation d’un nombre par une chaîne</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>Pour les éléments possédant les rôles <a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar" title="Utiliser le rôle progressbar"><code>progressbar</code></a> et <a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar" title="Utiliser le rôle scrollbar"><code>scrollbar</code></a>, les technologies d’assistance <strong>DEVRAIENT</strong> renvoyer la valeur courante sous forme de pourcentage, calculée comme étant la position dans l'intervalle compris entre <a class="property-reference" href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin" title="Using_the_aria-valuemin_attribute"><code>aria-valuemin</code></a> et <a class="property-reference" href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax" title="Using_the_aria-valuemax_attribute"><code>aria-valuemax</code></a> si les deux sont définies,  sinon la valeur actuelle avec un pourcentage.</p>
+
+<p>Pour les éléments possédant les rôles <a class="role-reference" href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider" title="Using_the_slider_role"><code>slider</code></a> et <a class="role-reference" href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton" title="Utiliser le rôle spinbutton"><code>spinbutton</code></a>, les technologies d’assistance <strong class="rfc2119">DEVRAIENT</strong> retourner la valeur courante à l’utilisateur.</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">Exemple 1 :</h4>
+
+<p>L’extrait de code ci-dessous affiche un curseur simple avec une valeur courante de 4.</p>
+
+<pre class="brush: html">&lt;div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10"&gt;
+</pre>
+
+<h4 id="Exemples_concrets">Exemples concrets :</h4>
+
+<ul>
+ <li><a class="external" href="http://www.oaa-accessibility.org/examplep/progressbar1/" title="http://www.oaa-accessibility.org/examplep/progressbar1/">Exemple de barre de progression</a></li>
+ <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/" title="http://www.oaa-accessibility.org/examplep/slider1/">Exemple de curseur</a></li>
+ <li><a class="external" href="http://www.oaa-accessibility.org/examplep/spinbutton1/" title="http://www.oaa-accessibility.org/examplep/spinbutton1/">Exemple de bouton rotatif</a></li>
+</ul>
+
+<h3 id="Notes">Notes</h3>
+
+<h3 id="Utilisé_avec_les_rôles_ARIA">Utilisé avec les rôles ARIA</h3>
+
+<ul>
+ <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar" title="Utiliser le rôle progressbar">progressbar</a> ;</li>
+ <li>scrollbar</li>
+ <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider" title="Utiliser le rôle slider">slider</a> ;</li>
+ <li>spinbutton.</li>
+</ul>
+
+<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3>
+
+<ul>
+ <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax" title="Using_the_aria-valuemax_attribute">aria-valuemax</a> ;</li>
+ <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin" title="Using_the_aria-valuemin_attribute">aria-valuemin</a> ;</li>
+ <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext" title="Using the aria-required attribute">aria-valuetext</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><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuenow" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuenow">Spécification WAI-ARIA pour l’attribut <code>aria-valuenow</code></a>.</li>
+</ul>
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.html
new file mode 100644
index 0000000000..a328cb3066
--- /dev/null
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.html
@@ -0,0 +1,66 @@
+---
+title: Utiliser l'attribut aria-valuetext
+slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext
+tags:
+  - ARIA
+  - Accessibilité
+  - Attribut
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute
+---
+<h3 id="Description">Description</h3>
+
+<p>L’attribut <code>aria-valuetext</code> est utilisé pour définir un texte alternatif, lisible par l'homme, de la valeur <a class="property-reference" href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Utiliser l’attribut aria-valuenow"><code>aria-valuenow</code></a> d’un composant à intervalle tel qu’une barre de progression, un bouton rotatif <code>spinbutton</code> ou un curseur <code>slider</code>.</p>
+
+<p>Les développeurs <strong class="rfc2119">DEVRAIENT</strong> uniquement définir l’attribut <code>aria-valuetext</code> lorsque la valeur retournée ne peut pas être précisément représentée sous forme de nombre.</p>
+
+<p>Par exemple, dans le cas d'un curseur qui peut retourner les valeurs <code>petite</code>, <code>moyenne</code>et <code>grand</code>, les valeurs de <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Using_the_aria-valuenow_attribute"><code>aria-valuenow</code></a> pourraient aller de 1 à 3, indiquant ainsi la position de chaque valeur dans l’intervalle, mais la valeur de <code>aria-valuetext</code> sera l'une des chaînes suivantes : <code>petite</code>, <code>moyenne</code> ou <code>grande</code>.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Représentation d’un nombre sous forme d'une chaîne</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>Si l’attribut <code>aria-valuetext</code> est absent, les technologies d’assistance compteront uniquement sur l’attribut <a class="property-reference" href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Using_the_aria-valuenow_attribute"><code>aria-valuenow</code></a> pour la valeur courante. Si <code>aria-valuetext</code> est spécifié, les technologies d’assistance <strong class="rfc2119">DEVRAIENT</strong> retourner cette valeur plutôt que celle de <code>aria-valuenow</code>.</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">Exemple 1 :</h4>
+
+<p>L’extrait de code ci-dessous montre un curseur simple de sélection d’un jour de la semaine. La valeur du curseur est numérique, et l’attribut <code>aria-valuetext</code> est utilisé pour fournir le nom de jour. L’application actualisera programmatiquement <code>aria-valuetext</code> selon la valeur de <code>aria-valuenow</code>.</p>
+
+<pre class="brush: html">&lt;div role="slider" aria-valuenow="1"
+    aria-valuemin="1" aria-valuemax="7"
+    aria-valuetext="Dimanche"&gt;
+</pre>
+
+<h4 id="Exemples_concrets">Exemples concrets :</h4>
+
+<h3 id="Notes">Notes</h3>
+
+<h3 id="Utilisé_avec_les_rôles_ARIA">Utilisé avec les rôles ARIA</h3>
+
+<ul>
+ <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar" title="Using_the_progressbar_role">progressbar</a> ;</li>
+ <li>scrollbar ;</li>
+ <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider" title="Using the slider role">slider</a></li>
+ <li>spinbutton.</li>
+</ul>
+
+<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3>
+
+<ul>
+ <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Using_the_aria-valuenow_attribute">aria-valuenow</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><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuetext" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuetext">Spécification WAI-ARIA pour l’attribut <code>aria-valuetext</code></a>.</li>
+</ul>
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.html
new file mode 100644
index 0000000000..083051aa61
--- /dev/null
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.html
@@ -0,0 +1,66 @@
+---
+title: Utiliser le rôle article
+slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_article
+tags:
+  - ARIA
+  - Accessibilité
+  - Rôle
+  - À relire
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_article_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#article" rel="external" title="Roles article"><code>article</code> (en)</a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p>
+</div>
+
+<p>Le rôle <code>article</code> est utilisé pour identifier une section de page qui forme une partie indépendante d'un document, d'une page ou d'un site. Les exemples d'article peuvent être des billets de blogs ou des articles d'un magazine ou d'un journal ou encore les commentaires soumis par les utilisateurs. Ils sont <em>indépendants</em> dans le sens où leur contenu pourrait être autonome, par exemple pour un flux de syndication.</p>
+
+<p>Les articles peuvent être imbriqués. Par exemple, une entrée de blog sur un site acceptant les commentaires des visiteurs pourrait représenter ces commentaires comme des articles incluent dans l'article de l'entrée de blog.</p>
+
+<p>Le rôle ARIA <code>article</code> est similaire à l'élément {{ HTMLVersionInline("5") }} {{ HTMLElement("article") }}. Cependant l'élément {{ HTMLElement("article") }} devrait toujours recevoir le rôle ARIA <code>article</code> car toutes les technologies d'assistance ne prennent pas encore en charge HTML5.</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 l'utilisateur navigue dans un élément ayant le rôle <code>article</code>, les technologies d'assistance qui interceptent généralement les événements clavier standards <strong class="rfc2119">doivent</strong> basculer en mode de navigation du document, plutôt que de passer les événements clavier à l'application web.</p>
+
+<p>Les technologies d'assistance <strong class="rfc2119">doivent</strong> fournit une fonctionnalité permettant à l'utilisateur de naviguer dans la hiérarchie de chacun des éléments <code>article</code> imbriqués.</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="Utilisation_du_role_article_sans_élément_article">Utilisation du role article sans élément article :</h4>
+
+<pre class="brush: html">&lt;div role="article"&gt;
+
+  &lt;h1&gt;Une titre de billet de blog&lt;/h1&gt;
+  &lt;p&gt;contenu du billet...&lt;/p&gt;
+
+  &lt;div class="comments"&gt;
+    &lt;div role="article"&gt;
+      &lt;p&gt;Un premier commentaire&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;div role="article"&gt;
+      &lt;p&gt;Un deuxième commentaire&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+
+&lt;/div&gt;
+</pre>
+
+<h4 id="Exemples_concrets">Exemples concrets :</h4>
+
+<h3 id="Notes">Notes </h3>
+
+<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3>
+
+<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>
+
+<p><a class="external" href="http://www.w3.org/TR/wai-aria/roles#article" title="http://www.w3.org/TR/wai-aria/roles#article">Spécification WAI-ARIA du rôle <code>article</code> (en)</a></p>
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.html
new file mode 100644
index 0000000000..3e335427c7
--- /dev/null
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/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>
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.html
new file mode 100644
index 0000000000..2a65d9f471
--- /dev/null
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.html
@@ -0,0 +1,75 @@
+---
+title: Utiliser le rôle link
+slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_link
+tags:
+  - ARIA
+  - Accessibilité
+  - Rôle
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_link_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#link">link</a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p>
+</div>
+<p>Le rôle <code>link</code> est utilisé pour identifier un élément qui crée un hyperlien vers une ressource qui peut être dans l’application ou à l’extérieur. Lorsque ce rôle est ajouté à un élément, la tabulation peut être utilisée pour donner le focus au lien et la barre d’espace ou la touche Entrée peuvent exécuter le lien.</p>
+<p>L’attribut <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#focus_tabindex">tabindex</a> peut éventuellement être utilisé avec ce rôle pour spécifier directement la position de l’élément dans l’ordre de tabulation.</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>link</code> est ajouté à un élément, ou qu’un élément possédant ce rôle devient visible, l’agent utilisateur devrait suivre les étapes suivantes :</p>
+<ul>
+ <li>Présenter l’élément comme un lien à l’API accessibilité du système d’exploitation.</li>
+ <li>Déclencher un événement lien 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 le texte du lien ou son label lorsque l'élément avec le rôle <code>link</code>reçoit le focus, en plus du fait ce que c'est un lien. Les liens ARIA devraient être intégré dans la fonction « lister les liens » (<em>List Links</em>) des lecteurs d'écran de la même façon que les liens ordinaires, et les actions dans cette liste de dialogue, tels que « Activer le lien » ou « Déplacer le lien », devraient se comporter de la meme façon qu'avec des liens ordinaires. </li>
+ <li>Les loupes d’écran devraient agrandir le lien.</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_Ajoute_le_rôle_dans_le_code_HTML">Exemple 1 : <strong>Ajoute le rôle dans le code HTML</strong></h4>
+<p>L’extrait de code ci-dessous montre comment le rôle <code>link</code> est ajouté dans le code source HTML. </p>
+<pre class="brush: html">&lt;div role=”link”&gt;Un lien&lt;/div&gt;
+</pre>
+<h4 id="Exemple_2_Lien_accessible_créé_depuis_une_application_à_l'aide_d'un_&lt;span>"><strong>Exemple 2 : Lien accessible créé depuis une application à l'aide d'un &lt;span&gt;</strong></h4>
+<pre class="brush: html">&lt;script type="text/javascript"&gt;
+sap = {ui:{keycodes:{SPACE:32, ENTER:13 }}};
+//gère les clics et les événement clavier sur le lien
+function navigateLink(evt) {
+    if (evt.type=="click" ||
+        evt.keyCode == sap.ui.keycodes.SPACE ||
+        evt.keyCode == sap.ui.keycodes.ENTER) {
+        var ref = evt.target != null ? evt.target : evt.srcElement;
+        if (ref) window.open(ref.getAttribute("href"),"_blank");
+    }
+}
+&lt;/script&gt;
+
+&lt;body role="application"&gt;
+
+    &lt;h3&gt;Lien simple créé avec un &lt;span&gt;&lt;/h3&gt;
+    &lt;span href="http://www.w3c.org" onkeydown="navigateLink(event)" onclick="navigateLink(event)" tabindex="0" id="link1" role="link" class="link"&gt;
+      Activez ce lien en appuyant sur la barre d’espace ou la touche Entrée
+    &lt;/span&gt;
+&lt;/body&gt;</pre>
+<h4 id="Exemples_concrets">Exemples concrets :</h4>
+<ul>
+ <li><a class="external" href="http://codetalks.org/source/widgets/link/link.html">http://codetalks.org/source/widgets/link/link.html</a></li>
+ <li><a class="external" href="http://codetalks.org/source/widgets/link/link.sample.html">http://codetalks.org/source/widgets/link/link.sample.html</a></li>
+</ul>
+<h3 id="Notes">Notes</h3>
+<p>Si l'activation du lien déclenche une action mais ne déplace pas le focus du navigateur ou que cela ouvre une nouvelle page, vous devriez considérer l'utilisation du rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#button">button</a> au lieu du rôle <code>link</code>.</p>
+<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#link"><code>link</code></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#button">button</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ôle <code>Link</code> : <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#link">#link</a></li>
+</ul>
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.html
new file mode 100644
index 0000000000..17f4e5f336
--- /dev/null
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.html
@@ -0,0 +1,97 @@
+---
+title: Utiliser le rôle log
+slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_log
+tags:
+  - ARIA
+  - Accessibilité
+  - Rôle
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_log_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#log"><code>log</code></a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p>
+</div>
+
+<p>Le rôle <code>log</code> est utilisé pour identifier un élément qui crée <a class="external" href="http://www.w3.org/WAI/PF/aria/terms#def_liveregion">une zone live</a> où de nouvelles informations sont ajoutées dans un ordre significatif et où les anciennes informations peuvent être supprimées. Par exemple, un journal de salon de discussion, l’historique d’une messagerie ou un fichier d’erreurs. Contrairement aux autres types de zones live, ce rôle est ordonné de façon séquentielle et les nouvelles informations sont uniquement ajoutées à la fin de l’enregistrement. Lorsque ce rôle est ajouté à un élément, le navigateur émettra un événement <code>log</code> accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur.</p>
+
+<p>Par défaut, les mises à jour ne contiennent que les changements apportés à la zone live et elles sont annoncées à l'utilisateur lorsqu'il est inactif. Si l'utilisateur a besoin d'entendre l'ensemble de la zone live lorsqu'un changement se produit, il faut utiliser <code>aria-atomic="true"</code>. Pour faire les annonces le plus tôt possible et lorsque l'utilisateur peut être interrompu, <code>aria-live="assertive"</code> peut être défini pour lancer des mises à jour plus agressives.</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>log</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 journal à l’API d’accessibilité du système d’exploitation ;</li>
+ <li>Déclencher un événement journal 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 les changements intervenus dans le fichier de journalisation lorsque l'utilisateur est inactif, à moins que <code>aria-live="assertive"</code> soit défini, dans quel cas l'utilisateur peut être interrompu.</li>
+ <li>Les loupes d'écran devraient indiquer visuellement la disponibilité d'une mise à jour du fichier de journalisation.</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_dans_du_code_HTML">Exemple 1 : Ajout du rôle dans du code HTML</h4>
+
+<p>L’extrait de code ci-dessous montre comment le rôle <code>log</code> est ajouté directement dans le code source HTML.</p>
+
+<pre class="brush: html">&lt;div id=”liveregion” class=”region” role=”log”&gt;&lt;/div&gt;
+</pre>
+
+<h4 id="Exemple_2_Extrait_d’un_exemple_d’application">Exemple 2 : Extrait d’un exemple d’application</h4>
+
+<p>Cet extrait de code crée le journal dans une application de chat AJAX.</p>
+
+<pre class="brush: html">&lt;div id="chatArea" role="log"&gt;
+  &lt;ul id="chatRegion" aria-live="polite" aria-atomic="false"&gt;
+    &lt;li&gt;Veuillez choisir un pseudo pour commencer à utiliser AJAX Chat.&lt;/li&gt;
+  &lt;/ul&gt;
+
+  &lt;ul id="userListRegion" aria-live="off" aria-relevant="additions removals text"&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;</pre>
+
+<p>Voir l’<a class="external" href="http://codetalks.org/source/live/chat.html">exemple</a> sur CodeTalks pour plus d’informations.</p>
+
+<h4 id="Exemples_concrets">Exemples concrets :</h4>
+
+<ul>
+ <li><a class="external" href="http://test.cita.illinois.edu/aria/live/live1.php">http://test.cita.illinois.edu/aria/live/live1.php</a> ;</li>
+ <li><a class="external" href="http://websiteaccessibility.donaldevans.com/2011/07/12/aria-log/">http://websiteaccessibility.donaldevans.com/2011/07/12/aria-log/</a> ;</li>
+ <li><a class="external" href="http://codetalks.org/source/live/chat.html">http://codetalks.org/source/live/chat.html</a> [<a class="external" href="http://codetalks.org/source/live/chat_notes.html">notes</a>].</li>
+</ul>
+
+<h3 id="Notes">Notes</h3>
+
+<ul>
+ <li>L'utilisation du rôle <code>log</code> sur un élément implique que cet élément possède l'attribut <code>aria-live="polite"</code>.</li>
+ <li>Pour une zone avec un défilement de texte, comme un bandeau défilant, il est préférable d'utiliser le rôle <code>marquee</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#log">log</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#marquee" title="WAI-ARIA Role marquee">marquee</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 – Implémentation des zones live : <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#LiveRegions">#LiveRegions</a>.</li>
+</ul>
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.html
new file mode 100644
index 0000000000..3aae7c9b84
--- /dev/null
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.html
@@ -0,0 +1,66 @@
+---
+title: Utiliser le rôle presentation
+slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_presentation
+tags:
+  - ARIA
+  - Accessibilité
+  - Rôle
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role
+---
+<p><span class="seoSummary">Cette page présente l'usage du rôle <code><a href="https://www.w3.org/TR/wai-aria-practices-1.1/#presentation_role">presentation</a></code> et décrit l'effet qu'il a sur les navigateurs et les technologies d'assistance.</span></p>
+
+<h2 id="Description">Description</h2>
+
+<div class="summary">
+<p>Le rôle <code>presentation</code> est utilisé pour retirer toute représentation sémantique pour un élément donnée ainsi que pour ses descendants. Par exemple, un tableau utilisé pour la mise en page pourrait avoir un rôle <code>presentation</code> appliqué sur l'élément <code>table</code> pour retirer la sémantique de l'élément en lui-même ainsi que tout ses sous-éléments, comme l'en-tête de tableau ou même les données de tableau elles-mêmes.</p>
+</div>
+
+<h2 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h2>
+
+<p>Les agents utilisateurs ou les technologies d'assistance ne devrait normalement pas lire les éléments marqués comme étant de rôle <code>presentation</code>.</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>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_1_Les_icônes-fontes">Exemple 1: Les icônes-fontes</h3>
+
+<p>Une des recommandations d'accessibilité propose que les couleurs ou les représentations imagées (icônes par exemple) ne soient pas l'unique méthode pour transmettre une information. Ainsi nous pouvons partir du postula que votre icône est un complément décoratif à un texte explicite. Il faut donc lui appliquer un rôle <code>presentation</code>.</p>
+
+<pre class="brush: html">&lt;i class="icon-user" role="presentation"&gt;&lt;/i&gt;
+</pre>
+
+<h4 id="Exemples_concrets">Exemples concrets :</h4>
+
+<p>Par exemple, en reprenant le bouton de la navigation principale de ce site web, nous pourrions écrire.</p>
+
+<pre class="brush: html">&lt;button type="button" aria-haspopup="true"&gt;
+    Technologies
+    &lt;span class="main-menu-arrow" role="presentation"&gt;▼&lt;/span&gt;
+&lt;/button&gt;
+</pre>
+
+<h3 id="Exemple_2_Inline_SVG">Exemple 2 : Inline SVG</h3>
+
+<p>De plus en plus d'images sont proposées sous la forme de compositions SVG directement insérées dans le document HTML. À l'image de l'attribut <code>alt</code> vide sur un élément <code>img</code>, il est possible d'indiquer qu'un élément SVG est purement décoratif grave au rôle <code>presentation</code>.</p>
+
+<pre class="brush: html">&lt;svg role="presentation"&gt;
+…
+&lt;/svg&gt;</pre>
+
+<ul>
+</ul>
+
+<h2 id="Notes">Notes</h2>
+
+<h2 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h2>
+
+<h2 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h2>
+
+<h2 id="Compatibilité">Compatibilité</h2>
+
+<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>
+
+<h2 id="Autres_ressources">Autres ressources</h2>
+
+<p>Using Aria - 2.9 Use of Role=presentation or Role=none: <a href="https://www.w3.org/TR/using-aria/#presentation">https://www.w3.org/TR/using-aria/#presentation</a></p>
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.html
new file mode 100644
index 0000000000..60fbba02c6
--- /dev/null
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.html
@@ -0,0 +1,69 @@
+---
+title: Utiliser le rôle progressbar
+slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_progressbar
+tags:
+  - ARIA
+  - Accessibilité
+  - Rôle
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role
+---
+<h3 id="Description">Description</h3>
+
+<div class="summary">
+<p>Cette technique présente l’utilisation du rôle <a class="external" href="https://www.w3.org/TR/wai-aria/#progressbar" title="ARIA Roles #progressbar"><code>progressbar</code></a>.</p>
+</div>
+
+<p>Le rôle <code>progressbar</code> devrait être utilisé pour un élément qui affiche la progression d’un tâche prenant un certain temps ou s’effectuant en plusieurs étapes.</p>
+
+<p>Une barre de progression indique que la requête de l’utilisateur a été prise en compte et que l’application progresse vers la finalisation de l’action demandée. Si la valeur courante de la barre de progression peut être connue, le développeur pourra indiquer la progression à l’aide des attributs <a class="property-reference external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow"><code>aria-valuenow</code></a>, <a class="property-reference external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin"><code>aria-valuemin</code></a> et <a class="property-reference external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax"><code>aria-valuemax</code></a>. Si la valeur de progression est indéterminée, le développeur peut omettre l’attribut <a class="property-reference external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow"><code>aria-valuenow</code></a>.</p>
+
+<p>Lorsqu’une tâche progresse, la valeur <code>aria-valuenow</code> doit être dynamiquement actualisée pour indiquer la progression aux produits de technologies d’assistance.</p>
+
+<p>Si le rôle <code>progressbar</code> décrit la progression du chargement d’une zone particulière d’une page, l’auteur <strong class="rfc2119">DOIT</strong> utiliser l’attribut <a class="property-reference external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby"><code>aria-describedby</code></a> pour pointer vers l’état courant, et définir l’attribut <a class="state-reference external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-busy"><code>aria-busy</code></a> à <code>true</code> pour la zone jusqu’à la fin du chargement. Il n’est pas possible à l’utilisateur de modifier la valeur de <code>progressbar</code> car elle est toujours en lecture seule.</p>
+
+<div class="note"><strong>Note :</strong> généralement les technologies d’assistance retourneront la valeur de l’attribut <a class="property-reference external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow"><code>aria-valuenow</code></a> sous la forme d’un pourcentage d’une plage de valeurs comprise entre <a class="property-reference external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin"><code>aria-valuemin</code></a> et <a class="property-reference external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax"><code>aria-valuemax</code></a>, sauf si <a class="property-reference external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuetext"><code>aria-valuetext</code></a> est spécifié. Il est préférable de définir les valeurs pour les attributs <code>aria-valuemin</code>, <code>aria-valuemax</code> et <code>aria-valuenow</code> de façon appropriée pour ce calcul.</div>
+
+<div class="note"><strong>Note :</strong> les éléments possédant le rôle <code>progressbar</code> ont une valeur <code>aria-readonly</code> implicite définie à <code>true</code>.</div>
+
+<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>Les lecteurs devraient annoncer les mises à jour de la progression dès qu’elles se produisent. Si la barre de progression a un label, il devrait également être mentionné.</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_barre_de_progression_simple_avec_pourcentage_de_progression">Exemple 1 : barre de progression simple avec pourcentage de progression</h4>
+
+<pre class="brush: html">&lt;div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"&gt;20 %&lt;/div&gt;
+</pre>
+
+<h4 id="Exemple_2_Utilisation_de_aria-valuetext">Exemple 2 : Utilisation de <code>aria-valuetext</code></h4>
+
+<pre class="brush: html">&lt;div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuetext="Étape 2 : Copie des fichiers…" aria-valuemax="100"&gt;
+  Étape 2 : Copie des fichiers…
+&lt;/div&gt;
+
+</pre>
+
+<h4 id="Exemples_concrets">Exemples concrets :</h4>
+
+<h3 id="Notes">Notes</h3>
+
+<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3>
+
+<ul>
+ <li><a class="external" href="https://www.w3.org/TR/wai-aria/#progressbar" title="ARIA Roles #progressbar">progressbar</a></li>
+ <li><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow" title="States and Properties #aria-valuenow">aria-valuenow</a></li>
+ <li><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin" title="ARIA States and Properties #aria-valuemin">aria-valuemin</a></li>
+ <li><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax" title="ARIA States and Properties #aria-valuemax">aria-valuemax</a></li>
+ <li><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuetext" title="ARIA States and Properties #aria-valuetext">aria-valuetext</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/aria_techniques/using_the_radio_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_radio_role/index.html
new file mode 100644
index 0000000000..db1bb8281e
--- /dev/null
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_radio_role/index.html
@@ -0,0 +1,41 @@
+---
+title: Utilisation du groupe rôle
+slug: Accessibilité/ARIA/Techniques_ARIA/Utilisation_du_groupe_rôle
+tags:
+  - NeedsContent
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role
+---
+<p> </p>
+
+<h3 id="Description">Description</h3>
+
+<p> </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>
+
+<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 ici est l’une de ces opinions et n’est pas normative.</div>
+
+<h3 id="Exemples">Exemples</h3>
+
+<h4 id="Exemple_1">Exemple 1 : </h4>
+
+<p> </p>
+
+<pre class="brush: html">Code </pre>
+
+<h4 id="Exemples_concrets">Exemples concrets :</h4>
+
+<ul>
+</ul>
+
+<h3 id="Notes">Notes </h3>
+
+<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3>
+
+<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/aria_techniques/using_the_slider_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html
new file mode 100644
index 0000000000..81653c4e28
--- /dev/null
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html
@@ -0,0 +1,120 @@
+---
+title: Utiliser le rôle slider
+slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_slider
+tags:
+  - ARIA
+  - Accessibilité
+  - Rôle
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_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#slider" rel="external" title="http://www.w3.org/TR/wai-aria/roles#slider">slider</a>.</p>
+</div>
+
+<p>Le rôle <code>slider</code> est utilisé pour des balises qui permettent à l'utilisateur de sélectionner une valeur dans un intervalle donné. Le rôle <code>slider</code> est assigné à la « <em>molette</em> », le contrôle qui est ajusté pour modifier la valeur. Typiquement, un autre élément est stylé pour représenter visuellement l'intervalle de valeurs possibles, et le curseur est positionné visuellement pour représenter la valeur dans cet intervalle. Lorsque l'utilisateur interagit avec la molette, l'application doit programmatiquement ajuster l'attribut <code>aria-valuenow</code> du curseur de défilement (et si possible <code>aria-valuetext</code>) pour refléter la valeur courante. Voir la section {{ anch("Exemples") }} ci-dessous pour plus d'informations.</p>
+
+<h4 id="Clavier_et_focus">Clavier et focus</h4>
+
+<p>Le curseur doit pouvoir recevoir le focus et être manipulable au clavier. Lorsque l'utilisateur tabule pour amener le focus sur le curseur, il doit arriver sur la molette : le contrôle qu'un utilisateur de souris fera glisser. Les touches flèches doivent agir de la façon suivante (attention toutefois, dans les applications, aux directions de flèches pour les langues s'écrivant de droite à gauche) :</p>
+
+<table style="width: 70%;">
+ <thead>
+  <tr>
+   <th scope="col">Touche(s)</th>
+   <th scope="col">Action</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Flèches haut et droite</td>
+   <td>Augmente la valeur sélectionnée</td>
+  </tr>
+  <tr>
+   <td>Flèches bas et gauche</td>
+   <td>Baisse la valeur sélectionnée</td>
+  </tr>
+  <tr>
+   <td>Page haut et Page bas</td>
+   <td>Augmente ou baisse facultativement la valeur selon un pas prédéfini (par exemple de 10 en 10 dans un intervalle de 0 à 100)</td>
+  </tr>
+ </tbody>
+</table>
+
+<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>
+
+<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_Intervalle_numérique_simple">Exemple 1 : Intervalle numérique simple</h4>
+
+<p>Dans l'exemple ci-dessous, un simple curseur est utilisé pour sélectionner une valeur entre 1 et 100. Le volume courant est 60. L'application actualisera programmatiquement la valeur de <code>aria-valuenow</code> en réponse à l'action de l'utilisateur.</p>
+
+<pre class="brush: html">&lt;div id="slider-label"&gt;Volume&lt;/div&gt;
+
+&lt;div class="vol-slider"&gt;
+  &lt;a href="#" id="vol-handle" class="handle" role="slider" aria-labelledby="slider-label"
+    aria-valuemin="1"
+    aria-valuemax="100"
+    aria-valuenow="60"&gt;
+  &lt;/a&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="Exemple_2_Valeurs_texte">Exemple 2 : Valeurs texte</h4>
+
+<p>Parfois, un slider est utilisé pour choisir une valeur qui n'est pas, sémantiquement , un nombre. Dans ces cas là, l'attribut <code>aria-valuetext</code> est utilisé pour donner le texte approprié pour la valeur sélectionnée. Dans l'exemple ci-dessous, le slider est utilisé pour sélectionner un jour de la semaine .</p>
+
+<pre class="brush: html">&lt;div id="slider-label"&gt;Jour de la semaine :&lt;/div&gt;
+
+&lt;div class="day-slider"&gt;
+  &lt;a href="#" id="day-handle" class="day-slider-handle" role="slider" aria-labelledby="slider-label"
+    aria-valuemin="1"
+    aria-valuemax="7"
+    aria-valuenow="2"
+    aria-valuetext="Lundi"&gt;
+  &lt;/a&gt;
+&lt;/div&gt;
+</pre>
+
+<p>L'extrait de code ci-dessous décrit une fonction qui répond à l'action de l'utilisateur et actualise les attributs <code>aria-valuenow</code> et <code>aria-valuetext</code> :</p>
+
+<pre class="brush: js">var dayNames = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"];
+var updateSlider = function (newValue) {
+    var handle = document.getElementById("day-handle");
+    handle<span>.setAttribute(<span class="string">"aria-valuenow"</span><span>, </span><span class="string">newValue.toString()</span><span>);</span></span>
+    handle.setAttribute("aria-valuetext", dayNames[newValue]);
+};
+</pre>
+
+<h4 id="Exemples_concrets">Exemples concrets :</h4>
+
+<ul>
+ <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/" title="http://www.oaa-accessibility.org/examplep/slider1/">Exemple de curseur</a></li>
+</ul>
+
+<h3 id="Notes">Notes</h3>
+
+<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3>
+
+<ul>
+ <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute">aria-valuemin</a> ;</li>
+ <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute">aria-valuemax</a> ;</li>
+ <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Using the aria-label attribute">aria-valuenow</a> ;</li>
+ <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext" title="Using the aria-required attribute">aria-valuetext</a> ;</li>
+ <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-orientation" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute">aria-orientation</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>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#slider" title="http://www.w3.org/TR/wai-aria/roles#slider">Spécifications WAI-ARIA pour le rôle <code>slider</code></a></li>
+</ul>
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.html
new file mode 100644
index 0000000000..46fb52e131
--- /dev/null
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.html
@@ -0,0 +1,50 @@
+---
+title: Utiliser le rôle status
+slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_status
+tags:
+  - ARIA
+  - Accessibilité
+  - Rôle
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_status_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#status">status</a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p>
+</div>
+<p>Le rôle <code>status</code> est un type de <a class="external" href="http://www.w3.org/WAI/PF/aria/terms#def_liveregion">zone live</a> et un conteneur dont le contenu est un message d’informations destiné à l’utilisateur. Ce message n’est pas assez important pour justifier une <a class="external" href="http://www.w3.org/TR/wai-aria/roles#alert">alerte</a>. Il est souvent présenté comme une barre d’état. Lorsque le rôle est ajouté à un élément, le navigateur émettra un événement <code>status</code> accessible aux produits de technologies d’assistance qui pourront alors le notifier à l’utilisateur.</p>
+<p>Le contenu des informations d’état doit être fourni dans un objet d’état et il faut s’assurer que cet objet ne reçoive pas le focus. Si une autre partie de la page contrôle ce qui s’affiche dans l’objet d’état, la relation doit être explicitement définie à l’aide de l’attribut <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-controls" title="States and Properties #aria-controls">aria-controls</a>.</p>
+<p>Les technologies d’assistance devraient réserver des cellules dans la grille Braille pour rendre l’état.</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>status</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 <code>status</code> à l’API d’accessibilité du système d’exploitation ;</li>
+ <li>Déclencher un événement <code>status</code> 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 peuvent fournir une touche spécifique pour annoncer l’état actuel et ce dernier devrait présenter les contenus des états des zones live. Cela devrait être annoncé lorsque l'utilisateur est inactif, à moins que l'attribut <code>aria-live=”assertive”</code> soit défini dans quel cas l'utilisateur peut être interrompu ;</li>
+ <li>Les loupes d’écran devraient agrandir l’objet d’état.</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_status_dans_le_code_HTML">Exemple 1 : ajout du rôle <code>status</code> dans le code HTML</h4>
+<p>L’extrait de code ci-dessous montre comment le rôle <code>status</code> est ajouté directement dans le code source HTML.</p>
+<pre class="brush: html">&lt;p role="status"&gt;Vos modifications ont été automatiquement enregistrées.&lt;/p&gt;
+</pre>
+<h4 id="Exemples_concrets">Exemples concrets :</h4>
+<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#status">status</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#alert">alert</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 – Implémentation des zones live : <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#LiveRegions">#LiveRegions</a>.</li>
+</ul>
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_toolbar_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_toolbar_role/index.html
new file mode 100644
index 0000000000..890b809cba
--- /dev/null
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_toolbar_role/index.html
@@ -0,0 +1,30 @@
+---
+title: Utiliser le rôle toolbar
+slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_toolbar
+tags:
+  - ARIA
+  - Accessibilité
+  - NeedsContent
+  - Rôle
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role
+---
+<h3 id="Description">Description</h3>
+<div class="summary">
+  </div>
+<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="Exemple_1">Exemple 1 :</h4>
+<p> </p>
+<pre class="brush: html">Code </pre>
+<h4 id="Exemples_concrets">Exemples concrets :</h4>
+<ul>
+</ul>
+<h3 id="Notes">Notes</h3>
+<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3>
+<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/forms/alerts/index.html b/files/fr/web/accessibility/aria/forms/alerts/index.html
new file mode 100644
index 0000000000..24afd909f4
--- /dev/null
+++ b/files/fr/web/accessibility/aria/forms/alerts/index.html
@@ -0,0 +1,157 @@
+---
+title: Alertes
+slug: Accessibilité/ARIA/formulaires/Alertes
+tags:
+  - ARIA
+  - Accessibilité
+  - Développement Web
+  - Formulaire
+translation_of: Web/Accessibility/ARIA/forms/alerts
+---
+<h2 id="Le_problème">Le problème</h2>
+
+<p>Vous avez un formulaire – par exemple un formulaire de contact – pour lequel vous voulez ajouter des contrôles d’erreurs accessibles. Les problèmes les plus courants sont une adresse électronique non valide, ou un nom qui ne contient pas un nom de famille ou un prénom.</p>
+
+<h2 id="Le_formulaire">Le formulaire</h2>
+
+<p>Tout d’abord, veuillez lire la <a href="/fr/Accessibilité/ARIA/formulaires/Indications_élémentaires_pour_les_formulaires" rel="nofollow" title="Indications élémentaires pour les formulaires">technique <code>aria-required</code></a> pour commencer, si vous ne l’avez pas déjà lu, puisque la technique abordée en est le prolongement.</p>
+
+<p>Voici un formulaire simple :</p>
+
+<pre class="brush: html">&lt;form method="post" action="post.php"&gt;
+&lt;fieldset&gt;
+    &lt;legend&gt;Veuillez saisir les détails du contact&lt;/legend&gt;
+    &lt;label for="nom"&gt;Votre nom (obligatoire):&lt;/label&gt;
+    &lt;input name="nom" id="nom" aria-required="true"/&gt;
+    &lt;br /&gt;
+    &lt;label for="courriel"&gt;Adresse électronique (obligatoire):&lt;/label&gt;
+    &lt;input name="courriel" id="courriel" aria-required="true"/&gt;
+    &lt;br /&gt;
+    &lt;label for="siteweb"&gt;Site Web (facultatif):&lt;/label&gt;
+    &lt;input name="siteweb" id="siteweb"/&gt;
+&lt;/fieldset&gt;
+&lt;label for="message"&gt;Veuillez saisir votre message (obligatoire):&lt;/label&gt;
+&lt;br /&gt;
+&lt;textarea name="message" id="message" rows="5" cols="80"
+        aria-required="true"&gt;&lt;/textarea&gt;
+&lt;br /&gt;
+&lt;input type="submit" name="submit" value="Envoyer le message"/&gt;
+&lt;input type="reset" name="reset" value="Réinitialiser le formulaire"/&gt;
+&lt;/form&gt;
+</pre>
+
+<p>Simple et direct, mais nous ne sommes pas là pour gagner un prix de beauté. :-)</p>
+
+<h2 id="Vérification_de_la_validité_et_avertissement_de_l’utilisateur"><span class="mw-headline" id="Checking_for_validity_and_notifying_the_user">Vérification de la validité et avertissement de l’utilisateur</span></h2>
+
+<p>Vérifier la validité et avertir l’utilisateur se déroule en plusieurs étapes :</p>
+
+<ol>
+ <li>Vérifions que l’adresse électronique pour le nom saisi sont valides. Pour rester simple, nous vérifions si l’adresse contient un symbole « @ », et si le nom saisi contient au moins une espace « [ ] ».</li>
+ <li>Définissons l’attribut <code>aria-invalid</code> du champ et donnons lui la valeur <code>true</code>.</li>
+ <li>Notifions à l’utilisateur via une alerte que la valeur saisie n’est pas correcte. Plutôt que d’utiliser la boîte de dialogue envahissante créée par la fonction JavaScript <code>alert</code>, nous utiliserons pour ceci un simple composant WAI-ARIA. Cela avertira l’utilisateur, mais le laissera continuer à interagir avec le formulaire sans l’interrompre.</li>
+</ol>
+
+<p>Tout ceci se passe lorsque le champ de saisi perd le focus, c’est-à-dire dans le gestionnaire d’événements <code>onblur</code>.</p>
+
+<p>La code JavaScript obtenu ressemble à ce qui suit, inséré au-dessus de la balise fermante {{ HTMLElement("head") }} :</p>
+
+<pre class="brush: javascript">&lt;script type="application/javascript"&gt;
+function removeOldAlert()
+{
+    var oldAlert = document.getElementById("alert");
+    if (oldAlert)
+        document.body.removeChild(oldAlert);
+}
+&lt;br/&gt;
+function addAlert(aMsg)
+{
+    removeOldAlert();
+    var newAlert = document.createElement("div");
+    newAlert.setAttribute("role", "alert");
+    newAlert.setAttribute("id", "alert");
+    var msg = document.createTextNode(aMsg);
+    newAlert.appendChild(msg);
+    document.body.appendChild(newAlert);
+}
+&lt;br/&gt;
+function checkValidity(aID, aSearchTerm, aMsg)
+{
+    var elem = document.getElementById(aID);
+    var invalid = (elem.value.indexOf(aSearchTerm) &lt; 0);
+    if (invalid) {
+        elem.setAttribute("aria-invalid", "true");
+        addAlert(aMsg);
+    } else {
+        elem.setAttribute("aria-invalid", "false");
+        removeOldAlert();
+    }
+}
+&lt;/script&gt;
+</pre>
+
+<h2 id="La_fonction_checkValidity_2"><span class="mw-headline" id="La_fonction_checkValidity">La fonction <code>checkValidity</code></span></h2>
+
+<p>Le cœur est la fonction <code>checkValidity</code>. Elle accepte trois paramètres : l’ID du champ de saisi qui doit être validé, le terme à recherche pour assurer la validité, et le message d’erreur à insérer dans l’alerte.</p>
+
+<p>Pour déterminer la validité, la fonction vérifie si l’<code>indexOf</code> de la valeur d’entrée est plus grande que <code>-1</code>. Une valeur de <code>-1</code> ou moins est retournée si l’index du terme recherché n’a pas pu être trouvée dans la valeur.</p>
+
+<p>Si non valide, la fonction fait deux choses :</p>
+
+<ol>
+ <li>Elle définit l’attribut <code>aria-invalid</code> de l’élément à <code>true</code>, ce qui indiquera au lecteur d’écran que le contenu n’est pas correct.</li>
+ <li>Elle appellera la fonction <code>addAlert</code> pour ajouter une alerte avec le message d’erreur donné.</li>
+</ol>
+
+<p>Si le terme recherché est trouvé, l’attribut <code>aria-invalid</code> est réinitialisé à <code>true</code>. De plus, toute alerte qui subsisterait serait supprimée.</p>
+
+<h2 id="La_fonction_addAlert_2"><span class="mw-headline" id="La_fonction_addAlert">La fonction <code>addAlert</code></span></h2>
+
+<p>Cette fonction commence par enlever toutes les alertes restantes. Son fonctionnement est simple : elle cherche un élément avec un identifiant <code>alert</code>, et si elle en trouve un, l’enlève du modèle objet de document (DOM).</p>
+
+<p>Ensuite, la fonction crée un élément {{ HTMLElement("div") }} qui contient le texte de l’alerte. On lui attribue l’ID <code>alert</code>. Et son rôle est défini comme celui d’une « alert ». C’est inspiré par ARIA, même si le nom de l’attribut ne comporte par « aria ». Cela découle du fait que ce rôle est basé sur le module <a class="external text" href="http://www.w3.org/TR/xhtml-role/" title="XHTML Role Attribut Module">XHTML Role Attribut</a> qui a été tout simplement porté sur HTML pour plus de simplicité.</p>
+
+<p>Le texte est ajouté à l’élément {{ HTMLElement("div") }}, qui est lui-même ajouté au document.</p>
+
+<p>Au moment où cela se produira, Firefox déclenchera un événement « alert » pour la technologie d’assistance lorsque la {{ HTMLElement("div") }} apparaîtra. La plupart des lecteurs d’écran prendront celui-ci automatiquement et le liront. C’est similaire à la barre de notification de Firefox qui apparaît lorsque vous désirez mémoriser un mot de passe. Cette alerte que nous venons de créer n’a pas de bouton sur lequel cliquer, elle se contente de nous dire ce qui est erroné.</p>
+
+<h2 id="Ajouter_de_la_magie_à_l’événement_onblur"><span class="mw-headline" id="Ajouter_de_la_magie_a_l_evenement_onblur">Ajouter de la magie à l’événement <code>onblur</code></span></h2>
+
+<p>Tout ce qu’il reste à faire, c’est ajouter un gestionnaire d’événement. Nous avons besoin de modifier les deux {{ HTMLElement("input") }} de l’adresse électronique et du nom par ce qui suit :</p>
+
+<pre class="brush: html">&lt;input name="nom" id="nom" aria-required="true"
+    onblur="checkValidity('nom', ' ', 'Le nom saisi est invalide&amp;nbsp;!');"/&gt;
+&lt;br /&gt;
+&lt;input name="courriel" id="courriel" aria-required="true"
+    onblur="checkValidity('courriel', '@', 'L’adresse électronique saisie est invalide&amp;nbsp;!');"/&gt;
+</pre>
+
+<p><strong>Test de l’exemple</strong></p>
+
+<p>Si vous utilisez Firefox 3 (ou supérieur) et un lecteur d’écran actuellement pris en charge, essayez ce qui suit :</p>
+
+<ol>
+ <li>Saisissez uniquement votre prénom dans le champ « Nom ». Lorsque vous changerez de champ avec la touche tabulation, vous entendrez une alerte vous avertissant que vous avez saisi un nom invalide. Vous pourrez alors revenir en arrière et corriger l’erreur.</li>
+ <li>Saisissez une adresse électronique sans le symbole « @ ». Lorsque vous changerez de champ avec la touche tabulation, vous devriez entendre un avertissement vous indiquant que vous avez saisi une adresse électronique invalide.</li>
+</ol>
+
+<p>Dans les deux cas, lorsque le focus revient sur le champ concerné, votre lecteur d’écran devrait vous dire que le champ est invalide. JAWS 9 prend en charge cette fonction, mais pas JAWS 8, aussi il se peut que ça ne fonctionne pas pour toutes les versions des lecteurs d’écran pris en charge.</p>
+
+<h2 id="Quelques_questions_qu’on_peut_se_poser"><span class="mw-headline" id="Quelques_questions_qu_on_peut_se_poser">Quelques questions qu’on peut se poser</span></h2>
+
+<dl>
+ <dt>Q. Pourquoi mettre à la fois un <code>(required)</code> dans le texte du label et l’attribut <code>aria-required</code> sur certains éléments {{ HTMLElement("input") }} ?</dt>
+ <dd>R. Si nous avions un véritable formulaire dynamique et que le site était visité par un navigateur ne prenant pas en charge ARIA, nous voudrions tout de même donner une indication sur l’obligation de remplir le champ.</dd>
+ <dt>Q. Pourquoi ne remettez-vous pas automatiquement le focus sur le champ invalide ?</dt>
+ <dd>R. Cela n’est pas autorisé par, au moins, la spécification de l’API Windows, et probablement par d’autres. De plus, laisser le focus se déplacer sans réelle intervention de l’utilisateur n’est généralement pas considéré comme une chose à faire.</dd>
+</dl>
+
+<div class="warning">
+<p>TBD : let's rethink this – personally, I think setting focus might be good if done without causing a keyboard trap.</p>
+
+<p>()Il faudrait y réfléchir – personnellement, je pense que définir le focus peut être une bonne chose si c’est fait sans causer de perturbation à la navigation au clavier).</p>
+</div>
+
+<h2 id="Conclusion"><span class="mw-headline" id="In_conclusion">Conclusion</span></h2>
+
+<p>L’accessibilité des sites web est grandement améliorée lorsqu’on fournit des alertes accessibles pour la validation côté client. Il n’y a rien de plus frustrant pour un utilisateur que de remplir un formulaire d’une vingtaine de champs, voire plus, de le soumettre, de constater que seuls quelques champs ne sont pas correctement renseignés et de devoir tout recommencer depuis le début pour s’assurer que les valeurs sont correctement mémorisées, ou de fournir des informations redondantes.</p>
diff --git a/files/fr/web/accessibility/aria/forms/basic_form_hints/index.html b/files/fr/web/accessibility/aria/forms/basic_form_hints/index.html
new file mode 100644
index 0000000000..10191bc959
--- /dev/null
+++ b/files/fr/web/accessibility/aria/forms/basic_form_hints/index.html
@@ -0,0 +1,119 @@
+---
+title: Indications élémentaires pour les formulaires
+slug: Accessibilité/ARIA/formulaires/Indications_elementaires_pour_les_formulaires
+tags:
+  - ARIA
+  - Accessibilité
+  - Formulaire
+translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints
+---
+<h2 id="Labels_de_formulaire" name="Labels_de_formulaire">Labels de formulaire</h2>
+
+<p>Lors de l’implémentation de formulaires à l’aide d’éléments de formulaire HTML classiques, il est important de fournir des labels pour les contrôles et d’associer explicitement un label avec son contrôle. Lorsqu’un utilisateur de lecteur d’écran navigue sur une page, le lecteur d’écran décrit les contrôles de formulaire ; mais sans association directe entre un contrôle et son label, le lecteur d’écran n’a aucun moyen de savoir quel est le label correspondant.</p>
+
+<p>L’exemple ci-dessous montre un formulaire basique avec des labels. Remarquez que chaque élément {{ HTMLElement("input") }} possède un <code>id</code>, et chaque élément {{ HTMLElement("label") }} a un attribut <code>for</code> indiquant l’<code>id</code> de l’{{ HTMLElement("input") }} associé.</p>
+
+<p><em>Exemple 1. Formulaire basique avec labels</em></p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;ul&gt;
+    &lt;li&gt;
+      &lt;input id="vin-1" type="checkbox" value="riesling"/&gt;
+      &lt;label for="vin-1"&gt;Berg Rottland Riesling&lt;/label&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;input id="vin-2" type="checkbox" value="weissbergunder"/&gt;
+      &lt;label for="vin-2"&gt;Weissbergunder&lt;/label&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;input id="vin-3" type="checkbox" value="pinot-grigio"/&gt;
+      &lt;label for="vin-3"&gt;Pinot Grigio&lt;/label&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;input id="vin-4" type="checkbox" value="gewurztraminer"/&gt;
+      &lt;label for="vin-4"&gt;Gewürztraminer&lt;/label&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/form&gt;
+</pre>
+
+<h2 id="Labelliser_avec_ARIA" name="Labelliser_avec_ARIA">Labelliser avec ARIA</h2>
+
+<p>L’élément HTML {{ HTMLElement("label") }} est approprié pour les éléments liés aux formulaires, mais de nombreux contrôles de formulaires sont implémentés sous forme de composants JavaScript dynamiques et utilisent les éléments {{ HTMLElement("div") }} ou {{ HTMLElement("span") }}. <a href="http://www.w3.org/WAI/intro/aria.php" hreflang="en" title="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA</a>, la spécification <strong>Accessible Rich Internet Applications</strong> (Applications Internet Riches Accessibles) de la <a href="http://www.w3.org/WAI/" hreflang="en" title="http://www.w3.org/WAI/">Web Accessibility Initiative</a> (Initiative pour l’Accessibilité du web) du W3C, fournit l’attribut <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby" hreflang="en" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby"><code>aria-labelledby</code></a> dans ces cas de figure.</p>
+
+<p>L’exemple ci-dessous montre un groupe de boutons radio implémenté à l’aide d’une liste non-ordonnée. Remarquez, à la ligne 3, que l’attribut <code>aria-labelledby</code> de l’élément {{ HTMLElement("ul") }} est défini comme « rg1_label », et est identique à l’<code>id</code> de l’élément {{ HTMLElement("h3") }} de la ligne 1, qui sert de label au groupe de boutons radio.</p>
+
+<p><em>Exemple 2. Un groupe de boutons radio implémenté à l’aide d’une liste non-ordonnée (d'après <a href="http://www.oaa-accessibility.org/examplep/radio1/">http://www.oaa-accessibility.org/examplep/radio1/</a>)</em></p>
+
+<pre class="brush: html">&lt;h3 id="rg1_label"&gt;Options du déjeuner&lt;/h3&gt;
+
+&lt;ul class="radiogroup" id="rg1"  role="radiogroup" aria-labelledby="rg1_label"&gt;
+  &lt;li id="r1"  tabindex="-1" role="radio" aria-checked="false"&gt;
+    &lt;img role="presentation" src="radio-unchecked.gif" /&gt; Thaï
+  &lt;/li&gt;
+  &lt;li id="r2"  tabindex="-1" role="radio"  aria-checked="false"&gt;
+    &lt;img role="presentation" src="radio-unchecked.gif" /&gt; Subway
+  &lt;/li&gt;
+  &lt;li id="r3"   tabindex="0" role="radio" aria-checked="true"&gt;
+    &lt;img role="presentation" src="radio-checked.gif" /&gt; Libanais
+  &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h2 id="Decrire_avec_ARIA" name="Decrire_avec_ARIA">Décrire avec ARIA</h2>
+
+<p>Les contrôles de formulaire peuvent parfois avoir une description qui leur est associée, en plus du label. ARIA fournit l’attribut <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-describedby" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-describedby"><code>aria-describedby</code></a> pour associer directement une description à un contrôle donné.</p>
+
+<p>L’exemple ci-dessous montre un élément {{ HTMLElement("button") }} décrit par une phrase contenue dans un élément {{ HTMLElement("div") }} séparé. L’attribut <code>aria-describedby</code> du {{ HTMLElement("button") }} fait référence à l’<code>id</code> de l’élément {{ HTMLElement("div") }}.</p>
+
+<p><em>Exemple 3. Un bouton décrit par un élément séparé.</em></p>
+
+<pre class="brush: html">&lt;button aria-describedby="descriptionRevert"&gt;Annuler&lt;/button&gt;
+&lt;div id="descriptionRevert"&gt;L’annulation supprimera toutes les modifications
+                    intervenues depuis le dernier enregistrement.&lt;/div&gt;</pre>
+
+<p>(Notez que l’attribut <code>aria-describedby</code> est utilisé de différentes façons, en plus des contrôles de formulaires.)</p>
+
+<h2 id="Champs_obligatoires_et_invalides" name="Champs_obligatoires_et_invalides">Champs obligatoires et invalides</h2>
+
+<p>Les développeur Web utilisent souvant des éléments de présentation visuels pour indiquer les champs obligatoires ou invalides, mais les technologies d’assistance ne peuvent pas toujours déduire ces informations à partir de la présentation. ARIA fournit des attributs pour indiquer l’obligation de renseigner un contrôle de formulaire ou la validité de son contenu :</p>
+
+<ul>
+ <li>La propriété <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-required" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-required"><code>aria-required</code></a> peut être appliquée à un élément de formulaire pour indiquer à une technologie d’assistance qu’il est obligatoire pour compléter le formulaire.</li>
+ <li>L’état <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-invalid" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-invalid"><code>aria-invalid</code></a> peut être programmatiquement appliquée pour indiquer à une technologie d’assistance quel champ contient des données incorrectes, afin que l’utilisateur sache qu’il a saisi des données invalides.</li>
+</ul>
+
+<p>L’exemple ci-dessous montre un formulaire simple avec 3 champs. Aux lignes 4 et 12, les attributs <code>aria-required</code> sont définis à <code>true</code> (en plus de l’astérisque en début de champ) indiquant que le nom et l’adresse électronique sont obligatoires. La seconde partie de l’exemple est un snippet JavaScript qui valide le format de l’adresse électronique et qui définit l’attribut <code>aria-invalid</code> du champ « Courriel » (ligne 12 du code HTML) selon le résultat (en plus de la modification de la présentation de l’élément).</p>
+
+<p><em>Exemple 4a. Un formulaire avec des champs obligatoires.</em></p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="nom"&gt;* Nom :&lt;/label&gt;
+    &lt;input type="text" value="nom" id="nom" aria-required="true"/&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="telephone"&gt;Téléphone :&lt;/label&gt;
+    &lt;input type="text" value="telephone" id="telephone" aria-required="false"/&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="courriel"&gt;* Courriel :&lt;/label&gt;
+    &lt;input type="text" value="courriel" id="courriel" aria-required="true"/&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p><em>Exemple 4b. Portion d’un script qui valide une entrée de formulaire.</em></p>
+
+<pre class="brush: js">var validate = function () {
+  var emailElement = document.getElementById(emailFieldId);
+  var valid = emailValid(formData.email); // retourne true si valide, false dans le cas contraire
+
+  emailElement.setAttribute("aria-invalid", !valid);
+  setElementBorderColour(emailElement, valid); // colore la bordure en rouge sur le second argument est false
+};</pre>
+
+<h2 id="Fournir_des_messages_d_erreur_utiles" name="Fournir_des_messages_d_erreur_utiles">Fournir des messages d’erreur utiles</h2>
+
+<p>Découvrez comment utiliser <a href="/fr/docs/Accessibilité/ARIA/formulaires/Alertes" title="Accessibilité/ARIA/formulaires/Alertes">les alertes ARIA pour améliorer les formulaires</a>.</p>
+
+<p>Pour plus de conseils sur l’utilisation d’ARIA et l’accessibilité des formulaires, consultez le document <a href="http://www.w3.org/TR/wai-aria-practices/" hreflang="en" title="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices</a>.</p>
diff --git a/files/fr/web/accessibility/aria/forms/index.html b/files/fr/web/accessibility/aria/forms/index.html
new file mode 100644
index 0000000000..e61cd13904
--- /dev/null
+++ b/files/fr/web/accessibility/aria/forms/index.html
@@ -0,0 +1,19 @@
+---
+title: Formulaires
+slug: Accessibilité/ARIA/formulaires
+tags:
+  - ARIA
+  - Accessibilité
+  - Développement Web
+  - Formulaire
+translation_of: Web/Accessibility/ARIA/forms
+---
+<p>Les pages suivantes fournissent diverses techniques pour améliorer l’accessibilité des formulaires web :</p>
+
+<ul>
+ <li><a href="/fr/Accessibilité/ARIA/formulaires/Indications_élémentaires_pour_les_formulaires" title="Indications élémentaires pour les formulaires">Indications élémentaires pour les formulaires</a> : ajouter des suggestions et des descriptions pour les champs invalides ou obligatoires</li>
+ <li><a href="/fr/Accessibilité/ARIA/formulaires/Alertes" title="alertes">Alertes</a> : Utiliser les alertes pour fournir des messages d'erreur de validation côté client</li>
+ <li><a href="/fr/Accessibilité/ARIA/formulaires/Labels_multi-options" title="https://developer.mozilla.org/fr/aria/formulaires/multi-options">Labels multi-options</a>: fournir des labels de formulaire complexes avec un contrôle pour chaque label</li>
+</ul>
+
+<p>Voir également l’<a class="external" href="https://web.archive.org/web/20120801225355/http://yaccessibilityblog.com/library/aria-invalid-form-inputs.html" hreflang="en" title="http://yaccessibilityblog.com/library/aria-invalid-form-inputs.html">article Yahoo! à propos de la validation des formulaires et d’ARIA (en anglais)</a> (version archivée par archive.org), couvrant pour une bonne part le même sujet.</p>
diff --git a/files/fr/web/accessibility/aria/forms/multipart_labels/index.html b/files/fr/web/accessibility/aria/forms/multipart_labels/index.html
new file mode 100644
index 0000000000..18e7adbe71
--- /dev/null
+++ b/files/fr/web/accessibility/aria/forms/multipart_labels/index.html
@@ -0,0 +1,41 @@
+---
+title: Labels multi-options
+slug: Accessibilité/ARIA/formulaires/Labels_multi-options
+tags:
+  - ARAI
+  - Accessibilité
+  - Développement Web
+  - Formulaire
+translation_of: Web/Accessibility/ARIA/forms/Multipart_labels
+---
+<h2 id="Utiliser_ARIA_avec_des_labels_comportant_des_champs">Utiliser ARIA avec des labels comportant des champs</h2>
+
+<h3 id="Problem_2" name="Problem_2">Problème</h3>
+
+<p>Un formulaire pose une question à un utilisateur, mais la zone de réponse est une partie de la phrase qui constitue la question. Un exemple classique que nous connaissons tous dans notre navigateur, c’est la paramètre des préférences « <code>Effacer l’historique après [x] jours</code>. » « <code>Effacer l’historique après</code> » est à la gauche de la boîte texte, « <code>x</code> » est le nombre, par exemple 21, et le mot « <code>jours</code> » suit la boîte texte, formant ainsi un phrase qu'il est facile de comprendre.</p>
+
+<p>Si vous utilisez un lecteur d’écran, vous devez avoir remarqué que, lorsque vous allez à ce paramètre dans Firefox, il est actuellement écrit « <code>Effacer l’historique après 21 jours</code> ? », suivi par l’annonce que vous vous trouvez dans un boîte texte et qu’elle contient le nombre 21. C’est sympa, non ? Vous n’avez pas besoin de naviguer alentours pour trouver l’unité. « Jours » peut aisément être remplacé par « mois » ou « années », et dans de nombreuses boîtes de dialogues ordinaires, il n’y a aucun autre moyen de le savoir que de naviguer alentours avec les commandes d’examen de l’écran.</p>
+
+<p>La solution se trouve dans l'attribut ARIA <code>aria-labelledby</code>. Son paramètre est une chaîne qui est la liste des identifiants des éléments HTML que vous voulez concaténer en un seul nom accessible.</p>
+
+<p><code>aria-labelledby</code> et <code>aria-describedby</code> sont tous deux spécifiés dans l’élément de formulaire à labelliser, par exemple, un élément {{ HTMLElement("input") }}. Dans les deux cas, les liaisons d’un contrôle <code>&lt;label for&gt;</code>/<code>&lt;label&gt;</code> pouvant exister, sont neutralisées par <code>aria-labelledby</code>. Si, dans une page HTML vous fournissez <code>aria-labelledby</code>, vous devriez également fournir un <code>&lt;label for&gt;</code> afin d’également prendre en charge les anciens navigateurs qui ne prennent pas encore en charge ARIA. Avec Firefox 3, vos utilisateurs malvoyants auront automatiquement une meilleure accessibilité avec le nouvel attribut, mais les utilisateurs de navigateurs plus anciens ne seront pas pour autant laissé dans le noir.</p>
+
+<p>Exemple :</p>
+
+<p><input><span id="labelShutdown">Éteindre l’ordinateur après</span> <input> <span id="shutdownUnit"> minutes</span></p>
+
+<pre class="brush: html">    &lt;input aria-labelledby="labelShutdown shutdownTime shutdownUnit" type="checkbox" /&gt;
+    &lt;span id="labelShutdown"&gt;Éteindre l’ordinateur après&lt;/span&gt;
+    &lt;input aria-labelledby="labelShutdown shutdownTime shutdownUnit" id="shutdownTime" type="text" value="10" /&gt;
+    &lt;span id="shutdownUnit"&gt; minutes&lt;/span&gt;
+</pre>
+
+<h3 id="A_Note_for_JAWS_8_users_2" name="A_Note_for_JAWS_8_users_2">Pour les utilisateurs de JAWS 8</h3>
+
+<p>JAWS 8.0 possède sa propre logique pour trouver les labels, ce qui lui fait systématiquement supplanter le <code>nomAccessible</code> que peut avoir une boîte texte dans un document HTML. Avec JAWS 8, je n’ai trouvé aucun moyen de lui faire accepter le label de l’exemple ci-dessus. Mais NVDA et Window-Eyes le font très bien, et Orca sur Linux n’a aucun problème non plus.</p>
+
+<h3 id="Can_this_be_done_without_ARIA.3F_2" name="Can_this_be_done_without_ARIA.3F_2">Peut-on faire la même chose sans ARIA ?</h3>
+
+<p>Ben Millard fait remarquer dans un billet que  <a class="external text" href="http://projectcerbera.com/blog/2008/03#day24" rel="nofollow">les contrôles peuvent être imbriqués dans des labels, comme démontré dans l'exemple ci-dessus avec HTML 4</a>, simplement en imbriquant l'élément <code>input</code> dans le <code>label</code>. Merci pour cette info, Ben ! Elle est vraiment utile et montre que certaines techniques existantes depuis des années nous échappe, même aux gourous que nous sommes. Cette technique fonctionne dans Firefox ; cependant, elle ne fonctionne actuellement pas dans de nombreux autres navigateurs, y compris IE. Donc, pour les labels comprenant des contrôles de formulaires, l'utilisation de <code>aria-labelledby</code> est encore la meilleure approche.</p>
+
+<div class="note">TBD: Ajouter plus d’infos sur la compatibilité</div>
diff --git a/files/fr/web/accessibility/aria/how_to_file_aria-related_bugs/index.html b/files/fr/web/accessibility/aria/how_to_file_aria-related_bugs/index.html
new file mode 100644
index 0000000000..503d23637e
--- /dev/null
+++ b/files/fr/web/accessibility/aria/how_to_file_aria-related_bugs/index.html
@@ -0,0 +1,96 @@
+---
+title: Comment déposer un bug lié à ARIA
+slug: Accessibilité/ARIA/Comment_deposer_un_bug_lie_a_ARIA
+tags:
+  - ARIA
+  - Bugzilla
+translation_of: Web/Accessibility/ARIA/How_to_file_ARIA-related_bugs
+---
+<p>L'état de la technologie ARIA a toujours dépendu de la communauté. Si vous remarquez un problème d'implémentation, veuillez prendre un instant pour en informer les développeurs. Voici comment déposer les bugs :</p>
+
+<div class="note">Quand vous trouvez un bug, veuillez en aviser les tables de compatibilité liées dans la <a href="/en/ARIA/examples" title="https://developer.mozilla.org/en/ARIA/examples">page des exemples.</a></div>
+
+<p>A faire : ajouter la bon lien d'accessibilité à la table</p>
+
+<table style="width: 100%;">
+ <thead>
+  <tr>
+   <th>Genre</th>
+   <th>Programme</th>
+   <th>Où déposer</th>
+   <th>Notes</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="4">Lecteurs d'écran</td>
+   <td>
+    <p><a class="external" href="http://www.freedomscientific.com/products/fs/jaws-product-page.asp" title="http://www.freedomscientific.com/products/fs/jaws-product-page.asp">Freedom Scientific JAWS</a></p>
+   </td>
+   <td><a class="external" href="http://www.freedomscientific.com/Support" title="http://www.freedomscientific.com/forms/Contact_Us.asp?ID=TECHNICAL-SUPPORT">formulaire de support technique JAWS</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en/Inner_and_outer_windows" title="Inner and outer windows">GW Micro Window Eyes</a></td>
+   <td><a class="link-mailto" href="mailto:support@gwmicro.com" title="mailto:support@gwmicro.com">commentaires, questions et retours Window-Eyes </a>(email)</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.nvda-project.org/" title="http://www.nvda-project.org/">Non Visual Desktop Access (NVDA)</a></td>
+   <td><a class="external" href="http://www.nvda-project.org/wiki/ReportingIssues" title="http://www.nvda-project.org/wiki/ReportingIssues">Déposer un bug NVDA</a> (github)</td>
+   <td><a href="/en/Accessibility/JAWS_Issues_with_Firefox" title="JAWS Issues with Firefox">Discuter des problèmes NVDA</a></td>
+  </tr>
+  <tr>
+   <td><a href="/User:orca.clock" title="User:orca.clock">Orca</a></td>
+   <td><a href="/fr/DOM/File" title="File">Déposer un bug Orca</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="5">Navigateurs</td>
+   <td>Apple Safari</td>
+   <td><a class="external" href="http://www.webkit.org/quality/reporting.html" title="http://www.webkit.org/quality/reporting.html">Déposer un bug WebKit.org</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Google Chrome</td>
+   <td><a class="external" href="http://code.google.com/p/chromium/issues/list" title="http://code.google.com/p/chromium/issues/list">Déposer un bug Chromium</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>
+    <p>Microsoft Internet Explorer</p>
+   </td>
+   <td><a class="link-https" href="https://connect.microsoft.com/IE/Feedback" title="https://connect.microsoft.com/IE/Feedback">Déposer un bug IE</a></td>
+   <td><a class="external text" href="https://bugzilla.mozilla.org/showdependencytree.cgi?id=343213&amp;hide_resolved=1" rel="nofollow">Voir les bugs ARIA Firefox existants</a></td>
+  </tr>
+  <tr>
+   <td>Mozilla Firefox</td>
+   <td>
+    <p><a class="external" href="http://bugzilla.mozilla.org/" title="http://bugzilla.mozilla.org/">Déposer un bug Firefox</a></p>
+   </td>
+   <td>
+    <p>Utiliser le composant : Disability Access APIs</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td><a class="link-https" href="https://bugs.opera.com/wizard/" title="https://bugs.opera.com/wizard/">Déposer un bug Opera</a></td>
+   <td><span class="external">Marquer [ARIA] dans le sommaire</span></td>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="3">Librairies JS</td>
+   <td>Dojo Toolkit</td>
+   <td><a class="external" href="http://dojotoolkit.org/blog/how-file-dojo-bug-report" title="http://dojotoolkit.org/blog/how-file-dojo-bug-report">Déposer un bug Dojo</a></td>
+   <td><span class="external">Marquer [Accessibilité] dans le champ composant</span></td>
+  </tr>
+  <tr>
+   <td>Google Web Toolkit (GWT)</td>
+   <td><a href="/fr/DOM/File" title="File">Déposer un bug GWT</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Yahoo User Interface</td>
+   <td><a class="external" href="http://sourceforge.net/tracker/?func=add&amp;group_id=165715&amp;atid=836476" rel="external" title="http://sourceforge.net/tracker/?func=add&amp;group_id=165715&amp;atid=836476">Déposer un bug YUI</a></td>
+   <td><span class="external">Déposer contre le composant associé dans la combobox catégorie et inclure [ARIA] dans le sommaire</span></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/accessibility/aria/index.html b/files/fr/web/accessibility/aria/index.html
new file mode 100644
index 0000000000..86ca0aa284
--- /dev/null
+++ b/files/fr/web/accessibility/aria/index.html
@@ -0,0 +1,123 @@
+---
+title: ARIA
+slug: Accessibilité/ARIA
+tags:
+  - ARIA
+  - Accessibilité
+  - Applications
+  - Web
+translation_of: Web/Accessibility/ARIA
+---
+<p class="summary"><span class="seoSummary"><em>Accessible Rich Internet Applications</em> <strong>(ARIA) </strong>(qu'on pourrait traduire par « applications internet riches et accessibles ») sont un ensemble un attribut qui définit comment rendre le contenu et les applications web accessibles. </span></p>
+
+<p><span class="seoSummary">ARIA complète HTML afin que les éléments interactifs et les widgets puissent être utilisés par les outils d'assistance quand les fonctionnalités standard ne le permettent pas.</span> Ainsi, ARIA permet de rendre accessible les <em>widgets</em> JavaScript, les indications dans les formulaires, les messages d'erreur et les mises à jour dynamiques du contenu, etc.</p>
+
+<div class="warning">
+<p><strong>Attention !</strong> La plupart de ces <em>widgets</em> ont été intégrés au sein d'HTML5 et mieux vaudra donc utiliser les éléments « sémantiques » HTML lorsqu'ils sont disponibles. Ainsi, les éléments natifs disposent de fonctionnalités <a href="/fr/docs/Contrôles_DHTML_personnalisés_navigables_au_clavier">de navigation au clavier</a>, de rôles et d'états définis en standard. Toutefois, lorsque vous choisissez d'utiliser ARIA, il vous revient de recoder les fonctionnalités équivalentes dans vos scripts.</p>
+</div>
+
+<p>Voici un <em>widget</em> utilisé pour une barre de progression :</p>
+
+<pre class="brush: html">&lt;div id="percent-loaded" role="progressbar" aria-valuenow="75"
+     aria-valuemin="0" aria-valuemax="100" /&gt;</pre>
+
+<p>Cette barre de progression utilise un élément <code>&lt;div&gt;</code> qui n'a pas de sémantique forte. Malheureusement, HTML 4 ne possède pas d'élément natif avec la sémantique nécessaire et on doit donc inclure les rôles et propriétés ARIA. Ici, l'attribut <code>role="progressbar"</code> indique au navigateur qu'il s'agit d'une barre de progression mise à jour en JavaScript. Les attributs <code>aria-valuemin</code> et <code>aria-valuemax</code> indiquent les valeurs minimales et maximales pour cette barre tandis que <code>aria-valuenow</code> décrit l'état actuel de la barre et cette valeur doit être mise à jour par le code JavaScript.</p>
+
+<p>En plus des déclarations <em>statiques</em> dans le contenu HTML, les attributs ARIA peuvent être ajoutés aux éléments et être mis à jour grâce à JavaScript :</p>
+
+<pre class="brush: js"><code>// Trouver la barre de progression &lt;div&gt; dans le DOM.
+ var progressBar = document.getElementById("percent-loaded");</code>
+
+<code>// Définir les rôles et les états ARIA
+// afin que les technologies d'assistance puissent les
+// identifier/exploiter correctement</code>
+ progressBar.setAttribute("role", "progressbar");
+ progressBar.setAttribute("aria-valuemin", 0);
+ progressBar.setAttribute("aria-valuemax", 100);
+
+// Créer une fonction qui peut être appelée à tout moment
+// pour mettre à jour la valeur de la barre de progression
+ function updateProgress(percentComplete) {
+   progressBar.setAttribute("aria-valuenow", percentComplete);
+ }</pre>
+
+<div class="note">
+<p><strong>Note :</strong> ARIA  a été inventé après HTML4 et ne valide pas HTML4 ou les variantes XHTML. Toutefois, les gains d'accessibilité l'emportent sur cette invalidité.</p>
+
+<p>En HTML5, tous les attributs ARIA sont valides. Les nouveaux éléments de navigation (<code>&lt;main&gt;</code>, <code>&lt;header&gt;</code>, <code>&lt;nav&gt;</code> etc.) possèdent des rôles ARIA natifs et il n'est pas nécessaire de les dupliquer.</p>
+</div>
+
+<h2 id="Prise_en_charge">Prise en charge</h2>
+
+<p>À l'instar des autres technologies web, la prise en charge d'ARIA est plus ou moins hétérogène parmi les différents navigateurs. La prise en charge d'ARIA repose à la fois sur le navigateur, sur le système d'exploitation sous-jacent et sur la technologie d'assistance utilisée. Certaines versions antérieures de logiciels pourront ne pas prendre en charge (ou que partiellement) certains rôles ARIA.</p>
+
+<p>On notera également que certaines personnes qui utilisent des outils d'assistance hésitent à mettre à jour leurs logiciels de peur de perdre les fonctionnalités liées à l'ordinateur et au navigateur. Pour ces raisons, mieux vaudra <a href="/fr/docs/Apprendre/a11y/HTML">utiliser des éléments HTML « sémantiques »</a> dès que possible car cela maximisera la prise en charge des technologies d'assistance.</p>
+
+<p>Il est aussi important de tester l'ARIA écrit avec des technologies d'assistance réelles. Bien qu'il existe certains émulateurs et simulateurs, rien ne vaut un test réel afin d'obtenir suffisamment de garanties.</p>
+
+<section id="sect1">
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Tutoriels">Tutoriels</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Accessibilité/Aperçu_d_applications_Web_et_de_composants_dynamiques_accessibles">Introduction à ARIA</a></dt>
+ <dd>Une rapide introduction à ARIA pour rendre accessible le contenu dynamique. Voir aussi <a class="external" href="https://dev.opera.com/articles/introduction-to-wai-aria/">l'introduction à ARIA de Gez Lemon</a> en 2008</dd>
+ <dt><a class="external" href="https://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/">Vidéos de lecteurs d'écran utilisant ARIA</a></dt>
+ <dd>Des exemples concrets et d'autres simplifiés avec des vidéos comparatives entre l'état « avant ARIA » et « après ARIA ».</dd>
+ <dt><a class="external" href="https://w3c.github.io/using-aria/">Utiliser ARIA</a></dt>
+ <dd>Un guide pratique pour les développeurs qui fournit également des suggestions quant aux attributs ARIA à utiliser sur les éléments HTML sur la base d'implémentations concrètes.</dd>
+</dl>
+
+<h2 id="Améliorations_légères_avec_ARIA">Améliorations légères avec ARIA</h2>
+
+<dl>
+ <dt><a class="external" href="https://www.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/">Améliorer la navigation avec les balises (<em>landmarks</em>) ARIA</a></dt>
+ <dd>Une introduction à l'utilisation des balises ARIA afin d'améliorer la navigation au sein d'une page web pour les utilisateurs de lecteur d'écran. <a class="external" href="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/">Voir aussi les notes d'implémentation pour les balises ARIA</a> (mis à jour en juillet 2011).</dd>
+ <dt><a href="/fr/docs/Accessibilité/ARIA/formulaires">Améliorer l'accessibilité des formulaires</a></dt>
+ <dd>ARIA ne se limite pas au contenu dynamique ! Apprenez comment améliorer l'accessibilité des formulaires HTML grâce aux attributs ARIA.</dd>
+</dl>
+
+<h2 id="ARIA_pour_les_widgets_scriptés">ARIA pour les <em>widgets</em> scriptés</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Contrôles_DHTML_personnalisés_navigables_au_clavier">Concevoir des <em>widgets</em> JavaScript navigables au clavier</a></dt>
+ <dd>Les éléments tels que <code>&lt;input&gt;</code>, <code>&lt;button&gt;</code> disposent de fonctionnalités natives pour l'utilisation au clavier. Si on triche en utilisant des <code> &lt;div&gt;</code> et ARIA, on doit s'assurer que l'accessibilité au clavier soit préservée.</dd>
+ <dt><a href="/fr/docs/Accessibilité/ARIA/Zones_live_ARIA">Régions dynamiques</a> (<em>live regions</em>)</dt>
+ <dd>Les régions dynamiques fournissent des suggestion aux lecteurs d'écran sur la façon dont gérer la modification du contenu d'une page.</dd>
+ <dt><a class="external" href="https://www.freedomscientific.com/SurfsUp/AriaLiveRegions.htm">Utiliser les régions dynamiques ARIA afin d'indiquer une modification de contenu</a></dt>
+ <dd>Un rapide résumé des régions interactives par les concepteurs du lecteur d'écran JAWS. Les régions dynamiques sont également prises en charge par NVDA pour Firefox et par  VoiceOver avec Safari.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Tools" id="Processus_de_standardisation">Processus de standardisation</h2>
+
+<dl>
+ <dt><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/">La spécification WAI-ARIA</a></dt>
+ <dd>La spécification rédigée par le W3C.</dd>
+ <dt><a class="external" href="https://www.w3.org/TR/wai-aria-practices-1.1/">Bonnes pratiques afin d'écrire avec WAI-ARIA</a></dt>
+ <dd>
+ <p>Les documents officiels décrivant les meilleurs pratiques pour appliquer ARIA aux <em>widgets</em> et aux mécanismes interactifs.</p>
+ </dd>
+</dl>
+
+<h2 id="Videos">Videos</h2>
+
+<p><a href="https://www.youtube.com/watch?v=qdB8SRhqvFc">ARIA, les API pour l'accessibilité : coder comme si ça vous intéressait ! de Léonie Watson (en anglais)</a></p>
+
+<h2 id="Rapporter_des_bogues">Rapporter des bogues</h2>
+
+<p><a href="/fr/docs/Accessibilité/ARIA/Comment_deposer_un_bug_lie_a_ARIA">Rapporter des bogues d'accessibilté/ARIA sur les navigateurs, les lecteurs d'écran et les bibliothèques JavaScript.</a></p>
+</div>
+</div>
+</section>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibilité">Accessibilité</a></li>
+ <li><a href="/fr/docs/Web/Guide/AJAX">AJAX</a></li>
+ <li><a href="/fr/docs/Web/JavaScript">JavaScript</a></li>
+ <li><a href="/fr/docs/Mozilla/Accessibility">Accessibilité et Mozilla</a></li>
+</ul>
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>
diff --git a/files/fr/web/accessibility/aria/web_applications_and_aria_faq/index.html b/files/fr/web/accessibility/aria/web_applications_and_aria_faq/index.html
new file mode 100644
index 0000000000..01b32548d2
--- /dev/null
+++ b/files/fr/web/accessibility/aria/web_applications_and_aria_faq/index.html
@@ -0,0 +1,305 @@
+---
+title: FAQ Applications Web et ARIA
+slug: Accessibilité/ARIA/FAQ_Applications_Web_et_ARIA
+tags:
+  - ARIA
+  - Accessibilité
+  - Développement Web
+  - À relire
+translation_of: Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ
+---
+<h2 id="Qu’est-ce_qu’ARIA">Qu’est-ce qu’ARIA ?</h2>
+
+<p>WAI-ARIA est la spécification <a class="external" href="http://www.w3.org/WAI/intro/aria.php" hreflang="en" title="http://www.w3.org/WAI/intro/aria.php">Applications Internet Riches Accessibles</a> de la <a class="external" href="http://www.w3.org/WAI/" hreflang="en" title="http://www.w3.org/WAI/">Web Accessibility Initiative</a> (Initiative pour l’accessibilité du Web) du <a class="external" href="http://www.w3.org/" hreflang="en" title="http://www.w3.org/">W3C</a>. ARIA fournit des moyens de rendre plus accessible les applications Web et les composants dynamiques à une plus grande part des utilisateurs, y compris ceux utilisant des technologies d’assistance telles que les lecteurs d’écrans ou les agrandisseurs.</p>
+
+<p>ARIA fournit des éléments sémantiques additionnels afin de décrire les rôles, les états et la fonction de nombreux contrôles d’interfaces utilisateurs répandus, tels que les menus, les curseurs, les arbres et les dialogues. Il fournit également des informations structurelles supplémentaires, permettant aux auteurs d’identifier des points de repère, des zones et des grilles dans leurs pages Web. ARIA permet aux applications et aux composants JavaScript dynamiques d’interagir avec une grande variété de technologies d’assistance de bureau.</p>
+
+<p>Pour plus d’informations sur la création de composants dynamiques accessibles avec ARIA, lire l’article <a href="/fr/docs/Accessibilité/Aperçu_d_applications_Web_et_de_composants_dynamiques_accessibles" title="Aperçu d’applications Web et de composants dynamiques accessibles">Aperçu d’applications Web et de composants dynamiques accessibles</a>.</p>
+
+<h2 id="Où_ARIA_est-il_pris_en_charge">Où ARIA est-il pris en charge ?</h2>
+
+<p>ARIA est une spécification relativement récente, mais son implémentation se développe. Une large variété de navigateurs communément utilisés, de technologies d’assistance, de kits de développements JavaScript et d’applications prennent maintenant en charge ARIA. Toutefois, de nombreux utilisateurs peuvent encore utiliser d’anciennes versions de ces technologies. Vous devrez sans doute considérer l’implémentation d’ARIA à l’aide des techniques d’améliorations progressives – telle qu’ajouter ARIA en utilisant JavaScript, mais pas directement dans votre balisage – afin de prendre en charge de manière plus élégante les vieux navigateurs et les anciennes technologies d’assistance.</p>
+
+<h3 id="Navigateurs">Navigateurs</h3>
+
+<p>ARIA est pris en charge dans les navigateurs suivants :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Version minimale</th>
+   <th>Notes</th>
+  </tr>
+  <tr>
+   <td>Firefox</td>
+   <td>3.0+</td>
+   <td>Fonctionne avec NVDA, JAWS 10+ et Orca</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://dev.chromium.org/developers/design-documents/accessibility#TOC-WAI-ARIA-Support" hreflang="en" title="http://dev.chromium.org/developers/design-documents/accessibility#TOC-WAI-ARIA-Support">Chrome</a></td>
+   <td>Dernière</td>
+   <td>Prise en charge encore expérimentale des lecteurs d’écran jusqu’à Chrome 15</td>
+  </tr>
+  <tr>
+   <td>Safari</td>
+   <td>4+</td>
+   <td>La prise en charge par Safari 5 est grandement améliorée.<br>
+    La prise en charge des zones live requiert Safari 5 avec VoiceOver sur iOS5 ou OS X Lion</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.opera.com/docs/specs/presto28/wai-aria/roleattributes/" hreflang="en" title="http://www.opera.com/docs/specs/presto28/wai-aria/roleattributes/">Opera</a></td>
+   <td>9.5+</td>
+   <td>Requiert VoiceOver sous OS X. À définir : comment cela fonctionne-t-il actuellement ?</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://msdn.microsoft.com/en-us/library/cc891505%28v=vs.85%29.aspx" hreflang="en" title="http://msdn.microsoft.com/en-us/library/cc891505(v=vs.85).aspx">Internet Explorer</a></td>
+   <td>8+</td>
+   <td>Fonctionne avec JAWS 10+ et NVDA. Pas de prise en charge des zones live dans NVDA.<br>
+    La prise en charge dans IE9 est grandement améliorée.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Dans certains cas, les versions les plus jeunes peuvent prendre en charge certaines fonctionnalités d’ARIA. Des tableaux de compatibilité des navigateurs peuvent être consultés depuis différentes sources :</p>
+
+<ul>
+ <li><a class="external" href="http://caniuse.com/wai-aria" hreflang="en" title="http://caniuse.com/wai-aria">caniuse.com</a></li>
+ <li><a class="external" href="http://www.paciellogroup.com/blog/aria-tests/ARIA-SafariaOperaIEFF-update2.html" hreflang="en" title="http://www.paciellogroup.com/blog/aria-tests/ARIA-SafariaOperaIEFF-update2.html">Le groupe Paciello</a></li>
+</ul>
+
+<h3 id="Technologies_d’assistance">Technologies d’assistance</h3>
+
+<p>Les technologies d’assistance adoptent de plus en plus ARIA. Certaines d’entre elles sont :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Technologies d’assistance</th>
+   <th>Version minimale pour un ARIA de base</th>
+   <th>Version minimale pour la prise en charge des zones live et des alertes</th>
+  </tr>
+  <tr>
+   <td>NVDA</td>
+   <td>2010.2<br>
+    (NVDA propose toujours des mises à jour gratuites)</td>
+   <td>2011.1 pour Firefox, pas de prise en charge des zones live dans IE avant 2011.2.</td>
+  </tr>
+  <tr>
+   <td>Orca</td>
+   <td>? (À définir)</td>
+   <td>? (À définir)</td>
+  </tr>
+  <tr>
+   <td>VoiceOver</td>
+   <td>OSX 10.5,<br>
+    iOS 4</td>
+   <td>OS X 10.7<br>
+    iOS 5</td>
+  </tr>
+  <tr>
+   <td>JAWS</td>
+   <td>8</td>
+   <td>10</td>
+  </tr>
+  <tr>
+   <td>Window-Eyes</td>
+   <td>7</td>
+   <td>Pas de prise en charge des zones live</td>
+  </tr>
+  <tr>
+   <td>ZoomText</td>
+   <td>?</td>
+   <td>Pas de prise en charge des zones live</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Note : Les versions antérieures de ces outils ont souvent des implémentation d’ARIA partielles et défaillantes.</p>
+
+<p>For notes on JAWS support for ARIA as of JAWS 10, lire cet article du <em>groupe Paciello</em> : <a class="external" href="http://www.paciellogroup.com/blog/2010/10/jaws-support-for-aria/" hreflang="en" title="http://www.paciellogroup.com/blog/2010/10/jaws-support-for-aria/">JAWS Support for ARIA</a>.</p>
+
+<h3 id="Kits_de_développement_JavaScript">Kits de développement JavaScript</h3>
+
+<p>Les rôles, les états et les propriétés ARIA ont été ajoutées à de nombreux kits de développements d’interfaces utilisateur JavaScript, y compris :</p>
+
+<ul>
+ <li>Dojo/Dijit</li>
+ <li>jQuery UI</li>
+ <li>Fluid Infusion</li>
+ <li>Google Closure</li>
+ <li>Google Web Toolkit</li>
+ <li>BBC Glow</li>
+ <li>Yahoo! User Interface Library (YUI)</li>
+</ul>
+
+<p>Pour plus d’informations sur l’accessibilité des kits de développement JavaScript :</p>
+
+<ul>
+ <li><a class="external" href="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/" hreflang="en" title="WAI-ARIA Implementation in JavaScript UI Libraries">WAI-ARIA Implementation in JavaScript UI Libraries</a> (Implémentation de WAI-ARIA dans les bibliothèques JavaScript d’UI) de Steve Faulkner</li>
+</ul>
+
+<h2 id="Pouvez-vous_me_montrez_un_exemple_d’ARIA_en_action">Pouvez-vous me montrez un exemple d’ARIA en action ?</h2>
+
+<p><a name="aria-in-action">Voici le code HTML pour une barre de progression :</a></p>
+
+<pre class="brush:html;">&lt;div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" /&gt;
+</pre>
+
+<p>Cette barre de progression est construite à l’aide de l’élément <code>&lt;div&gt;</code>, qui n’est pas des plus descriptif. Malheureusement, en HTML4 il n’existe pas de balise plus sémantique pour les développeurs, aussi avons nous besoin d’inclure les rôles et les propriétés ARIA. Ils sont spécifiés en ajoutant des attributs à l’élément <code>&lt;div&gt;</code>. Dans cet exemple, l’attribut <code>role="progressbar"</code> informe le navigateur que cet élément est actuellement un composant de barre de progression codé en JavaScript. Les attributs <code>aria-valuemin</code> et <code>aria-valuemax</code> spécifient les valeurs limites de la barre de progression, et <code>aria-valuenow</code> décrit a valeur courante.</p>
+
+<p>Plutôt que de les intégrer directement dans le balisage, les attributs ARIA sont généralement ajoutés à l’élément et dynamiquement actualisés à l’aide de code JavaScript tel que celui-ci :</p>
+
+<pre class="brush: javascript" id="line96">// Trouver le &lt;div&gt; de la barre de progression dans le DOM.
+var progressBar = document.getElementById("percent-loaded");
+
+// Définition de ses rôles et états ARIA ,
+// pour que les technologies d’assistance sachent quel type de composant il s’agit.
+progressBar.setAttribute("role", "progressbar");
+progressBar.setAttribute("aria-valuemin", 0);
+progressBar.setAttribute("aria-valuemax", 100);
+
+// Création d’une fonction qui peut être appelée à n’importe quel moment
+// pour actualiser la valeur de la barre de progression.
+function updateProgress(percentComplete) {
+  progressBar.setAttribute("aria-valuenow", percentComplete);
+}</pre>
+
+<h2 id="L’ajout_d’ARIA_changera-t-il_le_style_ou_le_comportement_de_mes_pages">L’ajout d’ARIA changera-t-il le style ou le comportement de mes pages ?</h2>
+
+<p>Non, ARIA n’est rendu disponible que pour les APIs des technologies d’assistance, et n’affecte pas les fonctionnalités natives du navigateur en respectant le DOM ou les styles. Du point de vue des navigateurs, le HTML natif définit le sens et le comportement sémantique d’un élément, et les attributs ARIA agissent comme une surcouche permettant de prendre en charge les APIs des technologies d’assistance. Bien qu’ARIA ne modifiera aucun style par lui-même, comme pour tous les attributs HTML les CSS peuvent profiter des attributs ARIA comme sélecteurs d’élément. Ceci peut fournir un mécanisme pratique pour styles les composants intégrant ARIA.</p>
+
+<pre class="brush: css">.tab-panel[aria-hidden="true"] {
+  display: none;
+  }
+
+.tab-panel[aria-hidden="false"] {
+  display: block;
+  }
+</pre>
+
+<h2 id="Qu'en_est-il_de_la_validation">Qu'en est-il de la validation ?</h2>
+
+<p>Les nouveaux attributs introduits dans ARIA, tels que les <strong><code>role</code></strong> et ceux préfixés avec <strong><code>aria-</code></strong>, ne font pas officiellement partie des spécification HTML 4 ou XHTML 4. À ce titre, les pages comportant des éléments ARIA peuvent ne pas être valides lorsqu’on les soumet au <a class="external" href="http://validator.w3.org/" hreflang="en" title="http://validator.w3.org/">validateur du W3C</a>.</p>
+
+<p>La première solution possible à ce problème est d’éviter de placer les rôles et les états ARIA directement dans le code HTML. À la place, il faut utiliser JavaScript pour ajouter dynamiquement ARIA à votre page, tel que montré dans la réponse à la question <a href="#aria-in-action" title="#aria-in-action">Pouvez-vous me montrez un exemple d’ARIA en action ?</a> ci-dessus. Votre page sera toujours théoriquement invalide, mais elle passera correctement toutes les contrôles de validation statiques.</p>
+
+<p>Une autre alternative est l’utilisation d’un <em>doctype</em> HTML5, qui prend nativement en charge . Le validateur HTML5 du W3C trouvera même pour vous les utilisations non valides d’ARIA dans les pages HTML5.</p>
+
+<h2 id="Comment_HTML5_s’associe-t-il_avec_ARIA">Comment HTML5 s’associe-t-il avec ARIA ?</h2>
+
+<p>HTML5 introduit de nombreuses nouvelles balises sémantiques. Certaines d’entre elles recoupent les rôles ARIA, tel que le nouvelle élément <code>&lt;progress&gt;</code>. Dans le cas où le navigateur prend en charge une balise HTML5 qui existe également dans ARIA, il n’est généralement pas nécessaire d’ajouter les rôles et les états ARIA à l’élément. ARIA comprend de nombreux rôles, états et propriétés qui ne sont pas disponibles en HTML5, aussi continueront-ils d’être utiles aux développeurs HTML5. Pour plus d’informations, Steve Faulkner a écrit un très bon <a class="external" href="http://www.paciellogroup.com/blog/2010/04/html5-and-the-myth-of-wai-aria-redundance/" hreflang="en" title="HTML5 and the Myth of WAI-ARIA Redundance">aperçu des relations entre HTML5 et ARIA</a>.</p>
+
+<h4 id="Dégradation_élégante_de_HTML5_vers_ARIA">Dégradation élégante de HTML5 vers ARIA</h4>
+
+<p>Pour fournir du contenu aux navigateurs qui n’implémentent pas HTML5, vous pouvez considérer une dégradation élégante de l’utilisation d’ARIA là où c’est nécessaire. Ainsi, en utilisant l’exemple de la barre de progression, vous pouvez dégrader élégamment un <code>role="progressbar"</code> pour les cas où la balise <code>&lt;progressbar&gt;</code> n’est pas prise en charge.</p>
+
+<p>Voici un exemple de code utilisé pour une barre de progression en HTML5 :</p>
+
+<pre class="brush: html" id="line96">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;&lt;title&gt;Dégrader élégamment la barre de progression&lt;/title&gt;&lt;/head&gt;
+  &lt;body&gt;
+    &lt;progress id="progress-bar" value="0" max="100"&gt;0% complété(s)&lt;/progress&gt;
+    &lt;button id="update-button"&gt;Actualiser&lt;/button&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>… et voici le code JavaScript qui assurera le fonctionnement de la barre de progression même dans les navigateurs les plus anciens :</p>
+
+<pre class="brush: javascript" id="line97">var progressBar = document.getElementById("progress-bar");
+
+// Vérifions que le navigateur implémente la balise HTML5 &lt;progress&gt;.
+var supportsHTML5Progress = (typeof (HTMLProgressElement) !== "undefined");
+
+function setupProgress() {
+  if (!supportsHTML5Progress) {
+    // HTML5 &lt;progress&gt; n’est pas implémenté dans ce navigateur, aussi
+    // avons-nous besoin d’ajouter des rôles et des états ARIA à l’élément.
+    progressBar.setAttribute("role", "progressbar");
+    progressBar.setAttribute("aria-valuemin", 0);
+    progressBar.setAttribute("aria-valuemax", 100);
+  }
+}
+
+function updateProgress(percentComplete) {
+  if (!supportsHTML5Progress) {
+    // HTML5 &lt;progress&gt; n’est pas implémenté dans ce navigateur,
+    // aussi avons-nous besoin de mettre à jour l’attribut aria-valuenow
+    progressBar.setAttribute("aria-valuenow", percentComplete);
+  } else {
+    // HTML5 &lt;progress&gt; is supported, so update the value attribute instead.
+    progressBar.setAttribute("value", percentComplete);
+  }
+
+  progressBar.textContent = percentComplete + "% complété(s)";
+}
+
+function initDemo() {
+  setupProgress(); // Setup the progress bar.
+
+  // Lier un événement clic au bouton, ce qui actualisera la barre de progression à 75%.
+  document.getElementById("update-button").addEventListener("click", function (e) {
+    updateProgress(75);
+    e.preventDefault();
+  }, false);
+}
+initDemo();
+</pre>
+
+<h2 id="Comment_fonctionnent_les_technologies_d’assistance">Comment fonctionnent les technologies d’assistance ?</h2>
+
+<p>Les technologies d’assistance utilisent une API intégrée à chaque système d’exploitation spécifiquement conçue pour décrire les rôles, les états et la structure de l’interface utilisateur d’une application. Par exemple, un lecteur d’écran utilise cette API pour lire l’interface utilisateur avec un moteur de synthèse vocale (text-to-speech), une loupe l’utilise pour mettre en évidence les zones importantes ou actives de l’écran et un clavier virtuel peut s’en servir pour fournir la disposition de clavier la plus efficace dans un contexte donné ou au contrôle d’une interface utilisateur. Les technologies d’assistance accèdent souvent au DOM d’une page au travers de cette API afin de comprendre la sémantique et les attributs de la page.</p>
+
+<p>ARIA fournit un pont entre le monde du DOM et le bureau. Les navigateurs exposent les éléments ARIA aux API des technologies d’assistance comme s’ils étaient des composants natifs. En conséquence, l’utilisateur a potentiellement une expérience plus cohérente là où les composants dynamiques JavaScript sont comparables sur le Web à leurs équivalents bureau.</p>
+
+<h2 id="Comment_tester_mon_utilisation_d’ARIA_Existe-t-il_des_outils_libres_ou_gratuits">Comment tester mon utilisation d’ARIA ? Existe-t-il des outils libres ou gratuits ?</h2>
+
+<p>Il existe plusieurs outils d’inspection et de débogage pour vous aider à tester le comportement d’ARIA :</p>
+
+<ul>
+ <li><em>Object Inspector</em> sur Windows</li>
+ <li><em>Accessibility Inspector</em> sur Mac OS X</li>
+ <li><em>AccProbe</em> sur Linux</li>
+ <li><em>Inspecteur DOM</em> de Firebug</li>
+ <li>L’<a class="external" href="http://code.google.com/p/ainspector/" hreflang="en" title="http://code.google.com/p/ainspector/"><em>Inspecteur d’accessibilité</em> de Firebug</a></li>
+</ul>
+
+<p>Il existe plusieurs lecteurs d’écran gratuits voire libre qui peuvent être utilisés pour mener des tests sur ARIA. On trouve :</p>
+
+<ul>
+ <li><a class="external" href="http://live.gnome.org/Orca" hreflang="en" title="http://live.gnome.org/Orca">Orca</a> pour Linux</li>
+ <li><a class="external" href="http://www.nvda-project.org/" hreflang="en" title="http://www.nvda-project.org/">NVDA</a> pour Windows</li>
+ <li><a class="external" href="http://www.apple.com/accessibility/voiceover/" hreflang="en" title="http://www.apple.com/accessibility/voiceover/">VoiceOver</a> est intégré à Mac OS X</li>
+</ul>
+
+<p>Lorsque vous effectuez des tests avec un lecteur d’écran, gardez deux points importants en tête :</p>
+
+<ol>
+ <li>Les tests occasionnels avec un lecteur d’écran ne pourront jamais remplacer les retours d’expérience, les tests ou l’aide de véritables utilisateurs au quotidien.</li>
+ <li>L’accessibilité est plus vaste que la simple prise en charge des lecteurs d’écran. Essayez de mener des tests avec divers cas d’utilisation et techniques d’accessibilité.</li>
+</ol>
+
+<p>Autres techniques et outils de tests pratiques pour les applications et les composants intégrant ARIA :</p>
+
+<ul>
+ <li><a class="external" href="http://yaccessibilityblog.com/library/test-aria-focus-bookmarklets.html" hreflang="en" title="Test ARIA Focus Bookmarklets">Yahoo!'s ARIA bookmarklets</a></li>
+ <li><a class="external" href="http://wiki.fluidproject.org/display/fluid/Simple+Accessibility+Review+Protocol" hreflang="en" title="Simple Accessibility Review Protocol">simple accessibility evaluation techniques</a> du <em>Fluid Project</em> (techniques simples d’évaluation de l’accessibilité)</li>
+</ul>
+
+<h2 id="Où_se_tiennent_les_discussion_concernant_ARIA">Où se tiennent les discussion concernant ARIA ?</h2>
+
+<ul>
+ <li><a class="external" href="http://lists.w3.org/Archives/Public/wai-xtech/" hreflang="en" title="WAI XTech Public List">Liste de diffusion Wai-xtech</a> – Discussions sur les spécification d’ARIA.</li>
+ <li><a class="external" href="http://groups.google.com/group/free-aria" hreflang="en" title="http://groups.google.com/group/free-aria">groupe Google Free-ARIA</a> – pour les développeurs et les utilisateurs d’outils et de ressources libres.</li>
+</ul>
+
+<h2 id="Où_peut-on_en_apprendre_davantage_à_propos_d’ARIA">Où peut-on en apprendre davantage à propos d’ARIA ?</h2>
+
+<ul>
+ <li><a href="/fr/docs/Accessibilité/Aperçu_d_applications_Web_et_de_composants_dynamiques_accessibles" title="Aperçu d’applications Web et de composants dynamiques accessibles">Aperçu d’applications Web et de composants dynamiques accessibles</a></li>
+ <li><a href="/fr/docs/Accessibilité/Formulaires_accessibles" title="Formulaires_accessibles">Formulaires accessibles</a></li>
+ <li>La <a class="external" href="http://www.w3.org/WAI/aria/faq" hreflang="en" title="http://www.w3.org/WAI/aria/faq">FAQ WAI-ARIA</a> du W3C.</li>
+ <li><a class="external" href="http://webaim.org/techniques/aria/" hreflang="en" title="http://webaim.org/techniques/aria/">Accessibility of Rich Internet Applications</a> (Accessibilité des applications Internet riches) de WebAIM.</li>
+</ul>
diff --git a/files/fr/web/accessibility/community/index.html b/files/fr/web/accessibility/community/index.html
new file mode 100644
index 0000000000..505756ec1c
--- /dev/null
+++ b/files/fr/web/accessibility/community/index.html
@@ -0,0 +1,17 @@
+---
+title: Communauté
+slug: Accessibilité/Communauté
+tags:
+  - Accessibilité
+translation_of: Web/Accessibility/Community
+---
+<p class="summary"><span class="seoSummary">Ce document fournit des liens vers des listes de diffusions, des forums, et d'autres communautés portées sur l'accessibilité.</span></p>
+
+<p>Si vous connaissez d'autres, ressources utiles  n'hésitez pas à ajouter un lien ci-dessous.</p>
+
+<ul>
+ <li><a class="link-news" href="news://news.mozilla.org/netscape.public.mozilla.accessibility">Newsgroup Mozilla Accessibility</a></li>
+ <li><a class="external" href="http://www.w3.org/WAI/IG/">Liste de discussion du groupe WAI</a></li>
+ <li><a class="external" href="http://www.mozilla.org/projects/ui/accessibility/unix">Projet d'accessibilité d'Unix</a> (référence en anglais)</li>
+ <li><a class="external" href="http://www.mozilla.org/access/resources">SUN Mozilla Accessibility Task Force</a></li>
+</ul>
diff --git a/files/fr/web/accessibility/index.html b/files/fr/web/accessibility/index.html
new file mode 100644
index 0000000000..eb607344a4
--- /dev/null
+++ b/files/fr/web/accessibility/index.html
@@ -0,0 +1,78 @@
+---
+title: Accessibilité
+slug: Accessibilité
+tags:
+  - Accessibilité
+  - Avancé
+  - Développement Web
+  - Guide
+translation_of: Web/Accessibility
+---
+<p><span class="seoSummary">L’accessibilité dans le développement web signifie permettre l'utilisation des sites web par le plus grand nombre de personnes, même lorsque les capacités de ces personnes sont limitées d’une manière ou d'une autre. Voici quelques informations qui vous permettront de développer du contenu accessible.</span></p>
+
+<p>« <strong>L'accessibilité du web</strong> signifie que les personnes handicapées peuvent l'utiliser. Plus spécifiquement, elle signifie que ces gens peuvent percevoir, comprendre, naviguer, interagir avec le web, et y contribuer. L'accessibilité du web bénéficie également à d'autres, notamment les personnes âgées ayant des capacités diminuées dues au vieillissement. » ( <a href="http://fr.wikipedia.org/wiki/Accessibilit%C3%A9_du_web">L'accessibilité du Web définie dans Wikipédia</a>)</p>
+
+<p>« <strong>L'accessibilité numérique est la mise à la disposition de tous les individus</strong> – quels que soient leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales – des ressources numériques. » <a href="http://www.w3.org/standards/webdesign/accessibility" hreflang="en" title="http://www.w3.org/standards/webdesign/accessibility">W3C   Accessibility</a></p>
+
+<div class="cleared topicpage-table">
+<div class="section">
+<h2 class="Key_accessibility_tutorials" id="Key_accessibility_tutorials" name="Key_accessibility_tutorials">Tutoriels clefs</h2>
+
+<p>La documentation MDN <a href="/fr/docs/Accessibilit%C3%A9">Accessibilité</a> contient des tutoriaux modernes et à jour en ce qui concerne les points essentiels de l'accessibilité:</p>
+
+<dl>
+ <dt><a href="/fr/docs/Apprendre/a11y/What_is_accessibility">Qu'est-ce que l'accessibilité?</a></dt>
+ <dd>Cet article présente un module général sur ce que l'accessibilité est actuellement — Cela inclut ce que des groupes de personnes ont besoin de considérer et pourquoi, quels outils ils utilisent afin d'interagir avec les pages web et comment rendre accessible la partie de notre espace de travail web.</dd>
+ <dt><a href="/fr/docs/Apprendre/a11y/HTML">HTML: Une bonne base pour l'accessibilité</a></dt>
+ <dd>Un nombre important de ressources du web peuvent être accessibles juste en utilisant correctement les éléments HTML dans leur usage approprié. Cet article résume en détail comment le HTML peut être utilisé afin de garantir une accessibilité maximum.</dd>
+ <dt><a href="/fr/docs/Apprendre/a11y/CSS_and_JavaScript">Meilleure pratiques d'accessibilité CSS et JavaScript </a></dt>
+ <dd>CSS et JavaScript, quand ils sont utilisés convenablement, ont le potentiel de permettre des expériences Web accessibles… ou bien ils peuvent significativement nuire à celle-ci si mal utilisés. <span lang="fr">Cet article décrit certaines pratiques exemplaires en langages CSS et JavaScript qui devraient être prises en compte pour garantir que le contenu, même complexe, soit aussi accessible que possible.</span></dd>
+ <dt><a href="/fr/docs/Apprendre/a11y/WAI-ARIA_basics">Les bases de WAI-ARIA</a></dt>
+ <dd><span lang="fr">Dans la continuité de l'article précédent, créer des interactions d'interface utilisateur (UX) complexes impliquant un HTML non sémantique et un contenu dynamique mis à jour par JavaScript peut être parfois compliqué. WAI-ARIA est une technologie qui peut aider à résoudre de tels problèmes en ajoutant d'autres sémantiques que les navigateurs et les technologies d'assistance peuvent reconnaître et utiliser afin de permettre aux utilisateurs d’être informés correctement. Ici, nous allons montrer comment l'utiliser à un niveau de base pour améliorer l'accessibilité.</span></dd>
+ <dt><a href="/fr/docs/Apprendre/a11y/Multimedia">Multimédia accessible </a></dt>
+ <dd><span lang="fr">Une autre catégorie de contenu pouvant créer des problèmes d'accessibilité est le multimédia : le contenu vidéo, audio et les images auxquels on doit fournir des textes équivalents pertinents afin qu'ils soient exploitables par les technologies d'assistance et compris par leurs utilisateurs. Cet article explique comment faire.</span></dd>
+ <dt><a href="/fr/docs/Apprendre/a11y/Mobile">Accessibilité sur mobile</a></dt>
+ <dd><span lang="fr">Étant donné que l'accès au Web sur les appareils mobiles est très populaire, et que les plate</span>s‑<span lang="fr">formes populaires telles que iOS et Android disposent d'outils d'accessibilité à part entière, il est important de considérer l'accessibilité de votre contenu Web sur ces plate</span>s‑<span lang="fr">formes. Cet article examine les considérations d'accessibilité spécifiques aux mobiles.</span></dd>
+</dl>
+</div>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Accessibilité/Développement_Web" title="Développement Web">Développement web</a></dt>
+ <dd>Un ensemble d'articles soulignant les problèmes d'accessibilité dans le développement web.</dd>
+ <dt><a href="/fr/docs/Accessibilité/ARIA" title="/fr/docs/Accessibilité/ARIA">ARIA</a></dt>
+ <dd>Un ensemble d'articles pour apprendre à utiliser ARIA pour améliorer l'accessibilité de vos documents HTML.</dd>
+ <dt><a href="/fr/docs/Accessibilité/Développement_TA" title="Développement AT">Développement de Technologie d'assistance (TA)</a></dt>
+ <dd>Un ensemble d'articles destiné aux développeurs de technologies d'assistance.</dd>
+ <dt><a href="/fr/docs/Accessibilité/Checklist_accessibilite_mobile">Check-list pour l'accessibilité mobile</a></dt>
+ <dd>Ce document fournit une liste concise des requis accessibilité pour les développeurs d’applications mobiles.</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/fr/docs/tag/Accessibilité" title="/fr/docs/tag/Accessibilité">Tous les articles relatifs à l'accessibilité…</a></span></p>
+</div>
+
+<div class="section">
+<h2 class="Tools" id="Tools" name="Tools">Outils pour les développeurs web</h2>
+
+<ul>
+ <li><a class="external" href="http://www-archive.mozilla.org/quality/embed/plans/accessibility/nsIAccessibleTestPlan.html" title="http://www-archive.mozilla.org/quality/embed/plans/accessibility/nsIAccessibleTestPlan.html">Tests d'accessibilité automatisés</a></li>
+ <li><a class="external" href="http://www.standards-schmandards.com/index.php?show/fangs">Fangs, un émulateur de lecteur d'écran</a></li>
+</ul>
+
+<p><span class="alllinks"><a href="/fr/docs/tag/Accessibilité:Outils" title="fr/docs/tag/Accessibilité:Outils">Tous les outils…</a></span></p>
+
+<h2 class="Tools" id="Tools" name="Tools">Autres ressources</h2>
+
+<ul>
+ <li><a class="external" href="https://support.mozilla.org/kb/accessibility-features-firefox-make-firefox-and-we">Liste des lecteurs d'écran</a></li>
+ <li><a class="external" href="http://openweb.eu.org/">OpenWeb</a> — Très bon site offrant à la fois un regard expert sur le web et des exemples concrets d'utilisation des normes du W3C.</li>
+ <li><a class="external" href="http://opquast.com/">Opquast.com</a> — Bonnes pratiques qualité pour les services en ligne.</li>
+ <li><a class="external" href="http://www.accessiweb.org/index.php/accessiweb_2.2_liste_generale.html">AccessiWeb</a> — Référentiel AccessiWeb pour l'accessibilité.</li>
+ <li><a href="http://accede-web.com/fr/projet-accede-web/" title="http://accede-web.com/fr/projet-accede-web/">AcceDe Web</a> — Documents adaptés aux principaux intervenants d’un projet web.</li>
+</ul>
+</div>
+</div>
+</div>
diff --git a/files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.html b/files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.html
new file mode 100644
index 0000000000..2bd83f5568
--- /dev/null
+++ b/files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.html
@@ -0,0 +1,90 @@
+---
+title: Contrôles DHTML personnalisés navigables au clavier
+slug: Contrôles_DHTML_personnalisés_navigables_au_clavier
+tags:
+  - AJAX
+  - Accessibilité
+  - DHTML
+translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets
+---
+<p> </p>
+<h3 id="Le_probl.C3.A8me_:_les_pages_DHTML_actuelles_ne_sont_pas_accessibles_au_clavier" name="Le_probl.C3.A8me_:_les_pages_DHTML_actuelles_ne_sont_pas_accessibles_au_clavier">Le problème : les pages DHTML actuelles ne sont pas accessibles au clavier</h3>
+<p>Un nombre croissant d'applications Web utilise <a href="fr/JavaScript">JavaScript</a> pour imiter des contrôles (
+ <i>
+  widgets</i>
+ ) applicatifs comme des menus, des vues arborescentes, des champs de texte enrichis et des panneaux à onglets. Les développeurs Web innovent constamment et les applications futures contiendront des éléments complexes et interactifs comme des feuilles de calcul, des calendriers, des graphes organisationnels et plus encore. Jusqu'à présent, les développeurs désirant rendre leurs contrôles basés sur des <code>&lt;div&gt;</code> et autres <code>&lt;span&gt;</code> stylés ne disposaient pas des techniques nécessaires. Pourtant, l'accessibilité au clavier fait partie des nécessités dont tout développeur Web devrait tenir compte.</p>
+<p>Prenons un exemple concret : la plupart des menus <a href="fr/DHTML">DHTML</a> ne se comportent pas comme des menus normaux en ce qui concerne l'accès au clavier. Même s'il y a moyen d'accéder au menu avec le clavier, une erreur courante est de placer chaque élément du menu dans l'ordre de tabulation (souvent réalisé implicitement en faisant de chaque choix du menu un élément <code>&lt;a&gt;</code>). En réalité, le comportement correct d'un menu est que le menu entier doit figurer une seule fois dans l'ordre de tabulation, et les flèches doivent être utilisées pour se déplacer de choix en choix au sein du menu. Ceci vaut également pour les autres contrôles de « navigation groupée » comme les vues arborescentes, tableaux et panneaux à onglets.</p>
+<p>Il est à présent possible pour les auteurs HTML de faire les choses correctement. La manière de rendre ces contrôles compatibles avec les technologies d'assistance est détaillée dans : <a href="fr/ARIA/Applications_riches_Internet_accessibles">ARIA : Applications riches Internet accessibles</a>.</p>
+<h3 id="La_solution_:_modifier_le_comportement_standard_de_tabindex" name="La_solution_:_modifier_le_comportement_standard_de_tabindex">La solution : modifier le comportement standard de <code>tabindex</code></h3>
+<p>Firefox 1.5 suit l'exemple de Microsoft Internet Explorer en étendant l'attribut <code>tabindex</code> pour permettre à n'importe quel élément d'obtenir ou non le focus. En suivant le <a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/tabindex.asp">système d'IE pour <code>tabindex</code></a>, il devient possible de permettre aux contrôles <a href="fr/DHTML">DHTML</a>, déjà accessibles au clavier dans IE, de l'être également dans Firefox 1.5. Les règles doivent subir quelques petites entorses afin de permettre aux auteurs de rendre leurs contrôles personnalisés accessibles.</p>
+<p>Le tableau qui suit décrit le nouveau comportement de <code>tabindex</code> :</p>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Attribut <code>tabindex</code></th>
+   <th>Focus disponible à la souris ou par JavaScript via <code>element.focus()</code></th>
+   <th>Navigable avec tabulation</th>
+  </tr>
+  <tr>
+   <td>non présent</td>
+   <td>Suit le comportement par défaut de l'élément (oui pour les contrôles de formulaires, les liens, etc).</td>
+   <td>Suit le comportement par défaut de l'élément.</td>
+  </tr>
+  <tr>
+   <td>Négatif<br>
+    (par exemple <code>tabindex="-1"</code>)</td>
+   <td>Oui</td>
+   <td>Non, l'auteur doit donner le focus avec <code>element.focus()</code> suite à l'utilisation des flèches ou d'autres touches.</td>
+  </tr>
+  <tr>
+   <td>Zéro<br>
+    (par exemple <code>tabindex="0"</code>)</td>
+   <td>Oui</td>
+   <td>Dans l'ordre de tabulation relativement à la position de l'élément dans le document.</td>
+  </tr>
+  <tr>
+   <td>Positif<br>
+    (par exemple <code>tabindex="33"</code>)</td>
+   <td>Oui</td>
+   <td>La valeur <code>tabindex</code> change manuellement lorsque cet élément est positionné dans l'ordre de tabulation. Ces éléments seront positionnés dans l'ordre de tabulation avant les éléments ayant <code>tabindex="0"</code> ou qui sont naturellement
+    <i>
+     tabulables</i>
+    .</td>
+  </tr>
+ </tbody>
+</table>
+<h3 id="Utilisation_du_nouveau_syst.C3.A8me" name="Utilisation_du_nouveau_syst.C3.A8me">Utilisation du nouveau système</h3>
+<p>Pour rendre un contrôle simple navigable avec tabulation, la solution est d'utiliser <code>tabindex="0"</code> sur l'élément <code>&lt;div&gt;&gt;</code> ou <code>&lt;span&gt;</code> le représentant. Vous pouvez consulter un exemple d'une <a class="external" href="http://www.mozilla.org/access/dhtml/class/checkbox">case à cocher basée sur un <code>&lt;span&gt;</code></a> accessible au clavier tant dans Firefox 1.5 que dans IE (bien que la règle <code>:before</code> pour l'image de la case à cocher ne fonctionne pas dans IE).</p>
+<p>Pour les contrôles de groupe (comme les menus, les panneaux à onglets, grilles ou vues arborescentes) l'élément parent doit avoir <code>tabindex="0"</code>, et chaque choix descendant (onglet/cellule/ligne) doit avoir <code>tabindex="-1"</code>. Un évènement <code>keydown</code> surveillant les flèches directionnelles peut ensuite utiliser <code>element.focus()</code> pour donner le focus au contrôle descendant approprié et lui donner un style lui donnant un aspect particulier montrant qu'il a le focus. Vous pouvez consulter un exemple d'une <a class="external" href="http://www.mozilla.org/access/dhtml/class/tree">vue arborescente DHTML</a> accessible au clavier et aux lecteurs d'écran dans Firefox (
+ <i>
+  nightlies</i>
+ ). Le travail pour le faire fonctionner dans IE est encore en cours.</p>
+<p>N'oubliez pas que ceci ne fait pas encore partie d'un standard W3C ou autre organisme officiel. Pour l'instant, il est nécessaire de faire quelques entorses aux règles afin d'obtenir une pleine accessibilité au clavier.</p>
+<h3 id="Astuces_d.27.C3.A9criture" name="Astuces_d.27.C3.A9criture">Astuces d'écriture</h3>
+<h4 id="Utilisation_d.27onfocus_pour_suivre_le_focus" name="Utilisation_d.27onfocus_pour_suivre_le_focus">Utilisation d'<code>onfocus</code> pour suivre le focus</h4>
+<p>Les attributs de gestion d'évènements <code>onfocus</code> et <code>onblur</code> peuvent à présent être utilisés sur tous les éléments. Il n'y a pas d'interface <a href="fr/DOM">DOM</a> standard pour obtenir l'élément ayant actuellement le focus dans le document, par conséquent il est nécessaire d'utiliser une variable <a href="fr/JavaScript">JavaScript</a> pour le suivre.</p>
+<p>Ne supposez pas que tous les changements de focus viendront des évènements clavier ou souris, car les technologies d'assistance, comme les lecteurs d'écran, peuvent donner le focus à n'importe quel élément pouvant en disposer et cela doit être traité élégamment par le contrôle JavaScript.</p>
+<h4 id="Changement_dynamique_de_la_possibilit.C3.A9_d.27obtenir_le_focus_.C3.A0_l.27aide_de_la_propri.C3.A9t.C3.A9_tabIndex" name="Changement_dynamique_de_la_possibilit.C3.A9_d.27obtenir_le_focus_.C3.A0_l.27aide_de_la_propri.C3.A9t.C3.A9_tabIndex">Changement dynamique de la possibilité d'obtenir le focus à l'aide de la propriété <code>tabIndex</code></h4>
+<p>Ceci peut être utile à réaliser si un contrôle personnalisé devient actif ou inactif. Les contrôles inactifs ne doivent pas être dans l'ordre de tabulation. Cependant, il est typiquement possible de les atteindre avec les flèches s'ils font partie d'un contrôle de navigation groupé.</p>
+<h4 id="Utilisation_de_setTimeout_avec_element.focus.28.29_pour_donner_le_focus" name="Utilisation_de_setTimeout_avec_element.focus.28.29_pour_donner_le_focus">Utilisation de <code>setTimeout</code> avec <code>element.focus()</code> pour donner le focus</h4>
+<p>N'utilisez pas <code>createEvent()</code>, <code>initEvent()</code> et <code>dispatchEvent()</code> pour donner le focus à un élément, parce que les évènements DOM <code>focus</code> sont seulement considérés comme informels — générés par le système après que quelque chose ait reçu le focus, mais pas réellement pour donner le focus. Le retardateur est nécessaire, tant dans IE que dans Firefox 1.5, pour empêcher les scripts de faire des choses étranges et inattendues si l'utilisateur clique sur des boutons ou d'autres contrôles. Concrètement, le code pour donner le focus à un élément ressemblera à quelque chose comme ceci :</p>
+<pre class="eval">setTimeout("gFocusItem.focus();",0);  // gFocusItem doit être une variable globale
+</pre>
+<h4 id="Ne_pas_utiliser_:focus_ou_des_s.C3.A9lecteurs_d.27attribut_pour_styler_le_focus" name="Ne_pas_utiliser_:focus_ou_des_s.C3.A9lecteurs_d.27attribut_pour_styler_le_focus">Ne pas utiliser <code>:focus</code> ou des sélecteurs d'attribut pour styler le focus</h4>
+<p>Il ne sera pas possible d'utiliser <code>:focus</code> ou des sélecteurs d'attribut pour styler l'élément ayant le focus, si vous voulez que cela apparaisse également dans IE. Changez plutôt le style dans un gestionnaire d'évènement <code>onfocus</code>. Par exemple, pour le traitement du focus d'un élément de menu, ajoutez <code>this.style.backgroundColor = "gray";</code>.</p>
+<h4 id="Toujours_dessiner_le_focus_pour_les_.C3.A9l.C3.A9ments_avec_tabindex.3D.22-1.22_et_qui_re.C3.A7oivent_le_focus_par_programmation" name="Toujours_dessiner_le_focus_pour_les_.C3.A9l.C3.A9ments_avec_tabindex.3D.22-1.22_et_qui_re.C3.A7oivent_le_focus_par_programmation">Toujours dessiner le focus pour les éléments avec <code>tabindex="-1"</code> et qui reçoivent le focus par programmation</h4>
+<p>IE ne dessinera pas automatiquement l'encadrement du focus pour les éléments qui reçoivent le focus de manière programmée. Choisissez entre changer la couleur de fond via quelque chose comme <code>this.style.backgroundColor = "gray";</code> ou ajoutez une bordure pointillée via <code>this.style.border = "1px dotted invert"</code>. Dans le cas d'une bordure pointillée, il sera nécessaire de s'assurer que ces éléments aient une bordure invisible de &lt;tt&gt;1px&lt;/tt&gt; au départ, afin que l'élément ne change pas de taille lorsque le style de bordure est appliqué (les bordures prennent de la place et IE n'implémente pas les encadrements CSS).</p>
+<h4 id="Utilisation_de_onkeydown_pour_les_.C3.A9v.C3.A8nements_clavier.2C_plut.C3.B4t_que_onkeypress" name="Utilisation_de_onkeydown_pour_les_.C3.A9v.C3.A8nements_clavier.2C_plut.C3.B4t_que_onkeypress">Utilisation de <code>onkeydown</code> pour les évènements clavier, plutôt que <code>onkeypress</code></h4>
+<p>IE ne déclenchera pas les évènements <code>keypress</code> pour les touches non alphanumériques.</p>
+<h4 id="Emp.C3.AAcher_les_.C3.A9v.C3.A8nements_clavier_d.27effectuer_des_fonctions_du_navigateur" name="Emp.C3.AAcher_les_.C3.A9v.C3.A8nements_clavier_d.27effectuer_des_fonctions_du_navigateur">Empêcher les évènements clavier d'effectuer des fonctions du navigateur</h4>
+<p>Si une touche comme une flèche directionnelle est utilisée, empêchez le navigateur d'utiliser cette touche pour faire quelque chose d'autre (comme faire défiler la page) en utilisant un code similaire à ce qui suit :</p>
+<pre class="eval">&lt;span tabindex="-1" onkeydown="return handleKeyDown();"&gt;
+</pre>
+<p>Si <code>handleKeyDown()</code> renvoie <code>false</code>, l'évènement sera consommé, empêchant le navigateur d'effectuer quelque action que ce soit, basée sur la touche pressée.</p>
+<h4 id="Utilisation_d.27.C3.A9v.C3.A8nements_clavier_pour_permettre_l.27activation_de_l.27.C3.A9l.C3.A9ment" name="Utilisation_d.27.C3.A9v.C3.A8nements_clavier_pour_permettre_l.27activation_de_l.27.C3.A9l.C3.A9ment">Utilisation d'évènements clavier pour permettre l'activation de l'élément</h4>
+<p>Pour chaque gestionnaire d'évènement lié à la souris, un évènement clavier correspondant est nécessaire. Par exemple, si vous avez <code>onclick="faireQuelqueChose()"</code> vous aurez aussi besoin de <code>onkeydown="return event.keyCode != 13 || faireQuelqueChose();"</code> afin de permettre à la touche Entrée d'activer cet élément.</p>
+<h4 id="Utilisation_de_try.2Fcatch_pour_.C3.A9viter_les_erreurs_JavaScript" name="Utilisation_de_try.2Fcatch_pour_.C3.A9viter_les_erreurs_JavaScript">Utilisation de try/catch pour éviter les erreurs JavaScript</h4>
+<p>Ce système n'est actuellement pas supporté par Opera, Safari et les versions anciennes de Mozilla (1.7 et précédentes). Comme certains navigateurs ne supportent pas les nouvelles possibilités comme la propriété <code>tabIndex</code> sur tous les éléments, utilisez try/catch aux endroits appropriés. Les contrôles doivent rester utilisables avec la souris sur les navigateurs ne supportant pas le système DHTML de navigation au clavier. Son support est déjà planifié pour Opera et Safari (via les spécifications du <a class="external" href="http://whatwg.org/">WHATWG</a>).</p>
+<h4 id="Ne_pas_se_baser_sur_un_comportement_coh.C3.A9rent_de_la_r.C3.A9p.C3.A9tition_d.27une_touche.2C_pour_l.27instant" name="Ne_pas_se_baser_sur_un_comportement_coh.C3.A9rent_de_la_r.C3.A9p.C3.A9tition_d.27une_touche.2C_pour_l.27instant">Ne pas se baser sur un comportement cohérent de la répétition d'une touche, pour l'instant</h4>
+<p>Malheureusement, <code>onkeydown</code> peut ou non être répété suivant le système d'exploitation utilisé. Consultez le {{ Bug(91592) }} dans la base de données Bugzilla.</p>
+<p>{{ languages( { "en": "en/Key-navigable_custom_DHTML_widgets", "ja": "ja/Key-navigable_custom_DHTML_widgets" } ) }}</p>
diff --git a/files/fr/web/accessibility/mobile_accessibility_checklist/index.html b/files/fr/web/accessibility/mobile_accessibility_checklist/index.html
new file mode 100644
index 0000000000..6e90ebca17
--- /dev/null
+++ b/files/fr/web/accessibility/mobile_accessibility_checklist/index.html
@@ -0,0 +1,89 @@
+---
+title: Check-list pour l'accessibilité mobile
+slug: Accessibilité/Checklist_accessibilite_mobile
+tags:
+  - Accessibility
+  - B2G
+  - Firefox OS
+  - Mobile
+  - checklist
+translation_of: Web/Accessibility/Mobile_accessibility_checklist
+---
+<div class="summary">
+ <p><span class="seoSummary">Ce document fournit une liste concise des points à vérifier par les développeurs pour garantir l’accessibilité d’une application mobile. Ce document est amené à évoluer pour tenir compte de nouvelles bonnes pratiques.</span></p>
+</div>
+<h2 id="Couleur">Couleur</h2>
+<ul>
+ <li>Le contraste des couleurs <strong>DOIT</strong> respecter le niveau AA de <a href="http://www.w3.org/TR/WCAG/" hreflang="en">WCAG 2.0</a> :
+  <ul>
+   <li>Un contraste dont le ratio est de 4.5:1 pour les textes normaux (dont la fonte est inférieure à 18 points ou 14 points en gras) ;</li>
+   <li>Un contraste dont le ratio est de 3:1 pour les grands textes (18 points minimum ou 14 points en gras).</li>
+  </ul>
+ </li>
+ <li>L’information véhiculée par la couleur <strong>DOIT</strong> toujours être disponible via un autre moyen (ex : les liens peuvent être bleus mais aussi soulignés, etc.).</li>
+</ul>
+<div class="note">
+ <p><strong>Note</strong> :</p>
+ <ul>
+  <li>Sur <a href="www.yoyodesign.fr">Yoyo Design</a> vous trouverez l’outil <a href="http://www.yoyodesign.org/outils/ncolor/index.fr" title="Le sélecteur de couleurs nColor">nColor</a> de sélection des couleurs. Il vous permettra de simuler les différents types de visions daltoniennes ;</li>
+  <li>Jon Snook a écrit un outil intéressant permettant de vérifier le contraste des couleurs : <a href="http://snook.ca/technical/colour_contrast/colour.html" hreflang="en">Colour Contrast Checker (en)</a> ;</li>
+  <li>Alternativement, le <em>Tanaguru Contrast-Finder</em> fait un travail similaire, mais il propose en plus une palette de couleurs similaires mais offrant un meilleur contraste.</li>
+ </ul>
+</div>
+<h2 id="La_visibilité">La visibilité</h2>
+<ul>
+ <li>Les techniques de masquage du contenu comme une opacité nulle, l’ordre des z-index et la position hors-écran <strong>NE DOIVENT PAS</strong> être utilisées aux seules fins de visibilité ;</li>
+ <li>Tout ce qui n’apparaît pas dans la partie visible de l’écran <strong>DOIT </strong>réellement être invisible (en particulier pour les applications d’une page comportant plusieurs « cartes » ) :
+  <ul>
+   <li>Il <strong>FAUT </strong>utiliser l’attribut <code>hidden</code> ou les propriétés de style <code>visibility</code> ou <code>display</code> ;</li>
+   <li>À moins d’être absolument indispensable, l’attribut <code>aria-hidden</code> <strong>NE DOIT PAS </strong>être utilisé.</li>
+  </ul>
+ </li>
+</ul>
+<h2 id="Le_focus">Le focus</h2>
+<ul>
+ <li>Tous les éléments activables <strong>DOIVENT</strong> pouvoir porter le focus :
+  <ul>
+   <li>Les contrôles standards tels que les liens, les boutons et les champs de formulaire peuvent, par défaut, porter le focus ;</li>
+   <li>Les contrôles non standards <strong>DOIVENT</strong> être assignés à un <a href="http://www.w3.org/TR/wai-aria/roles" hreflang="en">rôle ARIA</a>, comme <code>button</code>, <code>link</code> ou <code>checkbox</code>.</li>
+  </ul>
+ </li>
+ <li>Le focus doit être géré de façon logique et cohérente.</li>
+</ul>
+<h2 id="Les_équivalents_textuels">Les équivalents textuels</h2>
+<ul>
+ <li>Les équivalents textuels <strong>DOIVENT</strong> être fournis pour chacun des éléments de l’application qui n’est pas strictement lié à la mise en forme :
+  <ul>
+   <li>Les attributs <code>alt</code> et <code>title</code> doivent être utilisés aux endroits appropriés (<em>lire l’article de </em>Steve Faulkner sur <a href="http://blog.paciellogroup.com/2013/01/using-the-html-title-attribute-updated/" hreflang="en">L’utilisation de l’attribut HTML <code>title</code> (en)</a>) ;</li>
+   <li>Si les attributs ci-dessus ne sont pas appliquables, on utilise les <a href="http://www.w3.org/WAI/PF/aria/states_and_properties#global_states_header" hreflang="en">propriétés ARIA</a> appropriées comme <code>aria-label</code>, <code>aria-labelledby</code> et <code>aria-describedby</code>.</li>
+  </ul>
+ </li>
+ <li>Les images avec du texte <strong>DOIVENT</strong> être évitées ;</li>
+ <li>Tous les contrôles de formulaire <strong>DOIVENT</strong> posséder des éléments {{ htmlelement("label") }} pour permettre aux lecteurs d’écran de les utiliser.</li>
+</ul>
+<h2 id="La_gestion_des_états">La gestion des états</h2>
+<ul>
+ <li>Les contrôles standards comme les boutons radio, les cases à cocher, sont gérés par le système d’exploitation. En revanche, pour les contrôles spécifiques, les changements d’états doivent être fournis via les <a href="http://www.w3.org/TR/wai-aria/states_and_properties#attrs_widgets_header" hreflang="en">états ARIA</a> tels que <code>aria-checked</code>, <code>aria-disabled</code>, <code>aria-selected</code>, <code>aria-expanded</code> et <code>aria-pressed</code>.</li>
+</ul>
+<h2 id="Principales_recommandations">Principales recommandations</h2>
+<ul>
+ <li>Un titre <strong>DOIT </strong>être fourni pour désigner l’application ;</li>
+ <li>Les titres <strong>DOIVENT</strong> respecter une structure hiérarchique :
+  <pre class="brush: html">&lt;h1&gt;Titre de premier niveau&lt;/h1&gt;
+  &lt;h2&gt;Titre de deuxième niveau&lt;/h2&gt;
+  &lt;h2&gt;Un autre titre de niveau 2&lt;/h2&gt;
+    &lt;h3&gt;Un titre inférieur&lt;/h3&gt;</pre>
+ </li>
+ <li><a href="http://www.w3.org/TR/wai-aria/roles#landmark_roles_header" hreflang="en">Les points de repères ARIA</a> <strong>DOIVENT</strong> être utilisés pour décrire une application ou la structure d’un document comme <code>banner</code>, <code>complementary</code>, <code>contentinfo</code>, <code>main</code>, <code>navigation</code>, <code>search</code> ;</li>
+ <li>Les gestionnaires d’événements tactiles <strong>NE DOIVENT PAS</strong> être déclenchés avant l’événement <code>touchend</code> ;</li>
+ <li>Les points d’interaction tactiles <strong>DOIVENT </strong>être suffisamment grands pour garantir une bonne interaction (voir <a href="http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile/design/touch-target-size" hreflang="en">les recommandations de la BBC sur l’accessibilité mobile (en)</a> sur ce sujet).</li>
+</ul>
+
+<div class="note">
+ <p><strong>Note</strong> : <a href="http://www.tanaguru.com/">Le service de test automatique d'accessibilité de Tanaguru</a> fournit un moyen pratique de corriger les erreurs d'accessibilité pouvant se glisser dans une page Web, ou d'une application Web locale (par exemple Firefox OS). Vous trouverez plus d'informations concernant l'implémentation technique de Tanaguru, et comment contribuer au projet, sur <a href="http://tanaguru.org/">tanaguru.org</a>.</p>
+</div>
+
+<div class="note">
+ <p><strong>Note</strong> : la <a href="http://yzen.github.io/2014/04/30/mobile-accessibility-checklist.html" hreflang="en">version originale, anglaise, de ce document</a> a été écrite par <a href="http://yzen.github.io/" hreflang="en">Yura Zenevich</a>.</p>
+</div>
+<p> </p>
diff --git a/files/fr/web/accessibility/understanding_wcag/perceivable/contraste_de_la_couleur/index.html b/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html
index 497a2675f7..497a2675f7 100644
--- a/files/fr/web/accessibility/understanding_wcag/perceivable/contraste_de_la_couleur/index.html
+++ b/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html