convert content to md

1 files changed, 81 insertions, 96 deletions

diff --git a/files/fr/web/accessibility/aria/roles/dialog_role/index.md b/files/fr/web/accessibility/aria/roles/dialog_role/index.md
index 57386e4f2a..14ed9da8d9 100644
--- a/files/fr/web/accessibility/aria/roles/dialog_role/index.md
+++ b/files/fr/web/accessibility/aria/roles/dialog_role/index.md
@@ -9,141 +9,126 @@ tags:
 translation_of: Web/Accessibility/ARIA/Roles/dialog_role
 original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog
 ---
-<h3 id="Description">Description</h3>
+### Description
 
-<p>Cette technique présente l’utilisation du rôle <code><a href="http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#dialog">dialog (en)</a></code>.</p>
+Cette technique présente l’utilisation du rôle [`dialog (en)`](http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#dialog).
 
-<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>
+Le rôle `dialog` 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>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>
+Marquer un élément de dialogue avec le rôle `dialog` 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 `role="dialog"` n’est pas suffisant pour rendre une boîte de dialogue accessible. De plus, il faut veiller à ce qui suit :
 
-<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>
+- La boîte de dialogue doit être correctement labélisée ;
+- Le focus clavier doit être géré correctement.
 
-<p>Les sections ci-dessous décrivent comment ces deux exigences peuvent être satisfaites.</p>
+Les sections ci-dessous décrivent comment ces deux exigences peuvent être satisfaites.
 
-<h4 id="Labélisation">Labélisation</h4>
+#### Labélisation
 
-<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>
+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 `<legend>` fournit un label de regroupement pour les contrôles contenus dans un élément `<fieldset>`.
 
-<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>
+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 `aria-labelledby` pour l’élément `role="dialog"`. 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 `aria-describedby`. Cette approche est illustrée dans l’extrait de code ci-dessous :
 
-<pre class="brush: html">&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;
+```html
+<div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
+    <h2 id="dialog1Title">Vos informations personnelles ont correctement été actualisées.</h2>
 
-    &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;
+    <p id="dialog1Desc">Vous pouvez modifier vos informations personnelles à n’importe quel moment depuis la section « Compte utilisateur. »</p>
 
-    &lt;button&gt;Fermer&lt;/button&gt;
-&lt;/div&gt;
-</pre>
-
-<div class="note">
-    <p><strong>Note :</strong> 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.</p>
+    <button>Fermer</button>
 </div>
+```
 
-<h4 id="Gestion_du_focus">Gestion du focus</h4>
+> **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 `dialog` 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.
 
-<p>Une boîte de dialogue a des exigences particulières concernant la façon dont le focus clavier doit être géré :</p>
+#### Gestion du focus
 
-<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">Gérer les dialogues modaux et non modaux</a>.</li>
-</ul>
+Une boîte de dialogue a des exigences particulières concernant la façon dont le focus clavier doit être géré :
 
-<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>
+- 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.
+- 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.
+- Pour la plupart des boîtes de dialogue, le comportement attendu est que l’ordre de tabulation de la boîte _tourne_, 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.
+- 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.
+- Les boîtes de dialogue peuvent être modales ou non modales. Lorsqu’une boîte de dialogue _modale_ 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 _non modales_ 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 [Gérer les dialogues modaux et non modaux](/fr/docs/ARIA/Guides_ARIA/Gérer_les_dialogues_modaux_et_non_modaux).
 
-<p>Lorsque le rôle <code>dialog</code> est utilisé, l’agent utilisateur doit faire la chose suivante :</p>
+### Effets possibles sur les agents utilisateurs et les technologies d’assistance
 
-<ul>
- <li>Présenter l’élément comme une boîte de dialogue à l’API accessibilité du système d’exploitation.</li>
-</ul>
+Lorsque le rôle `dialog` est utilisé, l’agent utilisateur doit faire la chose suivante :
 
-<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>
+- Présenter l’élément comme une boîte de dialogue à l’API accessibilité du système d’exploitation.
 
-<div class="note">
-    <p><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.</p>
-</div>
+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.
 
-<h3 id="Exemples">Exemples</h3>
+> **Note :** 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.
 
-<h4 id="Exemple_1_une_boîte_de_dialogue_contenant_un_formulaire">Exemple 1 : une boîte de dialogue contenant un formulaire</h4>
+### Exemples
 
-<pre class="brush: html">&lt;div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"&gt;
-    &lt;h2 id="dialog1Title"&gt;Formulaire de souscription&lt;/h2&gt;
+#### Exemple 1 : une boîte de dialogue contenant un formulaire
 
-    &lt;p id="dialog1Desc"&gt;Nous ne partageons pas ces informations avec des tierces parties.&lt;/p&gt;
+```html
+<div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
+    <h2 id="dialog1Title">Formulaire de souscription</h2>
 
-    &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;
+    <p id="dialog1Desc">Nous ne partageons pas ces informations avec des tierces parties.</p>
 
-        &lt;p&gt;
-            &lt;label for="lastName"&gt;Nom&lt;/label&gt;
-            &lt;input id="lastName" type="text" /&gt;
-        &lt;/p&gt;
+    <form>
+        <p>
+            <label for="firstName">Prénom</label>
+            <input id="firstName" type="text" />
+        </p>
 
-        &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;
+        <p>
+            <label for="lastName">Nom</label>
+            <input id="lastName" type="text" />
+        </p>
 
-        &lt;p&gt;
-            &lt;input type="checkbox" id="autoLogin" /&gt;
-            &lt;label for="autoLogin"&gt;Intérêts&lt;/label&gt;
-        &lt;/p&gt;
+        <p>
+            <label for="interests">Intérêts</label>
+            <textarea id="interests"></textarea>
+        </p>
 
-        &lt;p&gt;
-            &lt;input type="submit" value="Enregistrer les informations"/&gt;
-            &lt;/p&gt;
-    &lt;/form&gt;
-&lt;/div&gt;
-</pre>
+        <p>
+            <input type="checkbox" id="autoLogin" />
+            <label for="autoLogin">Intérêts</label>
+        </p>
 
-<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>
+            <input type="submit" value="Enregistrer les informations"/>
+            </p>
+    </form>
+</div>
+```
 
-<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>
+#### Exemple 2 : une boîte de dialogue basée sur un `Fieldset` comme contenu alternatif
 
-<pre class="brush: html"><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;
+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 `dialog` à un élément `fieldset` comme contenu alternatif. Ainsi le titre de la boîte de dialogue sera toujours annoncé correctement :
 
-    &lt;button&gt;Fermer&lt;/button&gt;
-&lt;/fieldset&gt;
-</pre>
+```html
+<fieldset role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
+    <legend>
+        <span id="dialog1Title">Vos informations personnelles ont correctement été actualisées.</span>
+        <span id="dialog1Desc">Vous pouvez modifier vos informations personnelles à n’importe quel moment depuis la section « Compte utilisateur ».</span>
+    </legend>
 
-<h4 id="Exemples_concrets">Exemples concrets :</h4>
+    <button>Fermer</button>
+</fieldset>
+```
 
-<ul>
- <li><a href="http://jqueryui.com/demos/dialog/">jQuery-UI Dialog</a></li>
-</ul>
+#### Exemples concrets :
 
-<h3 id="Notes">Notes</h3>
+- [jQuery-UI Dialog](http://jqueryui.com/demos/dialog/)
 
-<div class="note">
-    <p><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.</p>
-</div>
+### Notes
+
+> **Note :** 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 `application` : on s’attend à ce qu’elles soient parcourues avec le mode de navigation non-virtuel par les utilisateurs de lecteur d’écran.
 
-<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3>
+### Attributs ARIA utilisés
 
-<ul>
- <li><a href="http://www.w3.org/TR/wai-aria/roles#dialog">dialog (en)</a></li>
- <li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby">aria-labelledby (en)</a></li>
- <li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby">aria-describedby (en)</a></li>
-</ul>
+- [dialog (en)](http://www.w3.org/TR/wai-aria/roles#dialog)
+- [aria-labelledby (en)](http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby)
+- [aria-describedby (en)](http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby)
 
-<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3>
+### Techniques ARIA connexes
 
-<ul>
- <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alertdialog">Utiliser le rôle <code>alertdialog</code></a></li>
-</ul>
+- [Utiliser le rôle `alertdialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alertdialog)
 
-<h3 id="Autres_ressources">Autres ressources</h3>
+### Autres ressources