Prepare Learning Area section for Markdown conversion (#2738)

* Remove summary, spans and fonts

* Remove notranslate class

* Remove ids other than headings

* Remove hidden blocks

* fix livesample call with exclamation mark

* fix livesample call with exclamation mark

* fix livesample call with exclamation mark

* fix livesample call with exclamation mark

* Fix notes

* Remove code in pre, sub/sup and some styles

* fix dls

* fix absolute / english links

* fix figures and others

* fix other issues from report

* Fix other one-off issues excl. imgs

* Fix images

* Fixes #2842 for Learning area

1 files changed, 51 insertions, 51 deletions

diff --git a/files/fr/learn/accessibility/wai-aria_basics/index.html b/files/fr/learn/accessibility/wai-aria_basics/index.html
index a9990d7f55..c7821400cf 100644
--- a/files/fr/learn/accessibility/wai-aria_basics/index.html
+++ b/files/fr/learn/accessibility/wai-aria_basics/index.html
@@ -19,62 +19,62 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics
 
 <div>{{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}}</div>
 
-<p class="summary"><span class="tlid-translation translation"><span title="">Après l'article précédent, il peut être difficile de créer des contrôles UI complexes impliquant du code HTML non sémantique et du contenu dynamique mis à jour par JavaScript.</span> <span title="">WAI-ARIA est une technologie qui peut aider à résoudre de tels problèmes en ajoutant une sémantique supplémentaire que les navigateurs et les technologies d'assistance peuvent reconnaître et utiliser pour informer les utilisateurs de ce qui se passe.</span> <span title="">Nous montrerons ici comment l'utiliser au niveau de base pour améliorer l'accessibilité.</span></span></p>
+<p>Après l'article précédent, il peut être difficile de créer des contrôles UI complexes impliquant du code HTML non sémantique et du contenu dynamique mis à jour par JavaScript. WAI-ARIA est une technologie qui peut aider à résoudre de tels problèmes en ajoutant une sémantique supplémentaire que les navigateurs et les technologies d'assistance peuvent reconnaître et utiliser pour informer les utilisateurs de ce qui se passe. Nous montrerons ici comment l'utiliser au niveau de base pour améliorer l'accessibilité.</p>
 
-<table class="learn-box standard-table">
+<table class="standard-table">
  <tbody>
   <tr>
    <th scope="row">  Prerequis:</th>
-   <td><span class="tlid-translation translation"><span title="">Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une compréhension des </span></span><a href="/fr/docs/Apprendre/a11y">articles précédents du cours</a>.</td>
+   <td>Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une compréhension des <a href="/fr/docs/Apprendre/a11y">articles précédents du cours</a>.</td>
   </tr>
   <tr>
-   <th scope="row"><span class="tlid-translation translation">Objectif</span> :</th>
-   <td><span class="tlid-translation translation"><span title="">Se familiariser avec WAI-ARIA et savoir comment l'utiliser pour fournir une sémantique supplémentaire utile afin d'améliorer l'accessibilité, le cas échéant</span></span>.</td>
+   <th scope="row">Objectif :</th>
+   <td>Se familiariser avec WAI-ARIA et savoir comment l'utiliser pour fournir une sémantique supplémentaire utile afin d'améliorer l'accessibilité, le cas échéant.</td>
   </tr>
  </tbody>
 </table>
 
-<h2 id="Qu'est_WAI-ARIA"><span class="tlid-translation translation"><span title="">Qu'est WAI-ARIA?</span></span></h2>
+<h2 id="Qu'est_WAI-ARIA">Qu'est WAI-ARIA?</h2>
 
-<p><span class="tlid-translation translation"><span title="">Commençons par regarder ce que WAI-ARIA est , et ce qu’il peut faire pour nous.</span></span></p>
+<p>Commençons par regarder ce que WAI-ARIA est , et ce qu’il peut faire pour nous.</p>
 
-<h3 id="Un_nouvel_ensemble_de_problèmes"><span class="tlid-translation translation"><span title="">Un nouvel ensemble de problèmes</span></span></h3>
+<h3 id="Un_nouvel_ensemble_de_problèmes">Un nouvel ensemble de problèmes</h3>
 
 <p>Car les applications web ont commencé à devenir plus complexes et dynamiques, un nouvel ensemble de fonctionnalités d'accessibilité et de problèmes ont commencé à apparaître.</p>
 
-<p><span class="tlid-translation translation"><span title="">Par exemple, HTML5 a introduit un certain nombre d’éléments sémantiques pour définir des fonctionnalités de page communes </span></span>  ({{htmlelement("nav")}}, {{htmlelement("footer")}}, etc.)  <span class="tlid-translation translation"><span title="">Avant de les utiliser, les développeurs utilisaient simplement</span></span> {{htmlelement("div")}} <span class="tlid-translation translation"><span title="">s avec des identifiants ou des classes, par exemple</span></span> <code>&lt;div class="nav"&gt;</code> <span class="tlid-translation translation"><span title="">, mais ils posaient problème, car il n’existait pas de moyen facile de trouver facilement une fonctionnalité de page spécifique telle que la navigation principale par programmation.</span></span> .</p>
+<p>Par exemple, HTML5 a introduit un certain nombre d’éléments sémantiques pour définir des fonctionnalités de page communes   ({{htmlelement("nav")}}, {{htmlelement("footer")}}, etc.)  Avant de les utiliser, les développeurs utilisaient simplement {{htmlelement("div")}} s avec des identifiants ou des classes, par exemple <code>&lt;div class="nav"&gt;</code> , mais ils posaient problème, car il n’existait pas de moyen facile de trouver facilement une fonctionnalité de page spécifique telle que la navigation principale par programmation. .</p>
 
-<p><span class="tlid-translation translation"><span title="">La solution initiale consistait à ajouter un ou plusieurs liens cachés en haut de la page pour créer un lien vers la navigation</span></span> (<span class="tlid-translation translation"><span title="">ou autre</span></span>), <span class="tlid-translation translation"><span title="">par exemple:</span></span></p>
+<p>La solution initiale consistait à ajouter un ou plusieurs liens cachés en haut de la page pour créer un lien vers la navigation (ou autre), par exemple:</p>
 
-<pre class="brush: html">&lt;a href="#hidden" class="hidden"&gt;<span class="tlid-translation translation"><span title="">Passer à la navigation</span></span>&lt;/a&gt;</pre>
+<pre class="brush: html">&lt;a href="#hidden" class="hidden"&gt;Passer à la navigation&lt;/a&gt;</pre>
 
-<p><span class="tlid-translation translation"><span title="">Mais ceci n’est pas encore très précis et ne peut être utilisé que lorsque le lecteur d’écran lit en haut de la page.</span></span></p>
+<p>Mais ceci n’est pas encore très précis et ne peut être utilisé que lorsque le lecteur d’écran lit en haut de la page.</p>
 
-<p><span class="tlid-translation translation"><span title="">Autre exemple, les applications ont commencé à comporter des commandes complexes telles que des sélecteurs de date pour choisir les dates, des curseurs pour choisir des valeurs, etc. HTML5 fournit des types spéciaux</span></span>  input <span class="tlid-translation translation"><span title=""> pour rendre de tels contrôles:</span></span></p>
+<p>Autre exemple, les applications ont commencé à comporter des commandes complexes telles que des sélecteurs de date pour choisir les dates, des curseurs pour choisir des valeurs, etc. HTML5 fournit des types spéciaux  input  pour rendre de tels contrôles:</p>
 
 <pre class="brush: html">&lt;input type="date"&gt;
 &lt;input type="range"&gt;</pre>
 
-<p><span class="tlid-translation translation"><span title="">Celles-ci ne sont pas bien prises en charge sur tous les navigateurs et il est également très difficile de les nommer, ce qui les rend peu utiles pour l'intégration aux conceptions de sites Web.</span> <span title="">En conséquence, les développeurs font souvent appel à des bibliothèques JavaScript qui génèrent des contrôles tels qu'une série d'éléments </span></span> {{htmlelement("div")}} <span class="tlid-translation translation"><span title="">s imbriqués ou d'éléments de table avec des noms de classe, qui sont ensuite stylés à l'aide de CSS et contrôlés à l'aide de JavaScript.</span></span></p>
+<p>Celles-ci ne sont pas bien prises en charge sur tous les navigateurs et il est également très difficile de les nommer, ce qui les rend peu utiles pour l'intégration aux conceptions de sites Web. En conséquence, les développeurs font souvent appel à des bibliothèques JavaScript qui génèrent des contrôles tels qu'une série d'éléments  {{htmlelement("div")}} s imbriqués ou d'éléments de table avec des noms de classe, qui sont ensuite stylés à l'aide de CSS et contrôlés à l'aide de JavaScript.</p>
 
-<p><span class="tlid-translation translation"><span title="">Le problème ici est que, visuellement, ils fonctionnent, mais que les lecteurs d’écran ne peuvent pas comprendre ce qu’ils sont, et on dit aux utilisateurs qu’ils peuvent voir une multitude d’éléments sans sémantique pour décrire ce qu’ils veulent dire.</span></span></p>
+<p>Le problème ici est que, visuellement, ils fonctionnent, mais que les lecteurs d’écran ne peuvent pas comprendre ce qu’ils sont, et on dit aux utilisateurs qu’ils peuvent voir une multitude d’éléments sans sémantique pour décrire ce qu’ils veulent dire.</p>
 
 <h3 id="Entrez_WAI-ARIA">Entrez WAI-ARIA</h3>
 
-<p><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA</a> <span class="tlid-translation translation"><span title="">est une spécification écrite par le W3C et définissant un ensemble d'attributs HTML supplémentaires pouvant être appliqués aux éléments pour fournir une sémantique supplémentaire et améliorer l'accessibilité en cas de manque.</span> <span title="">Trois caractéristiques principales sont définies dans la spécification:</span></span></p>
+<p><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA</a> est une spécification écrite par le W3C et définissant un ensemble d'attributs HTML supplémentaires pouvant être appliqués aux éléments pour fournir une sémantique supplémentaire et améliorer l'accessibilité en cas de manque. Trois caractéristiques principales sont définies dans la spécification:</p>
 
 <ul>
- <li><span class="tlid-translation translation"><span title=""><strong>Rôles</strong> - Ceux-ci définissent ce qu'un élément est ou fait.</span> <span title="">Bon nombre de ces rôles sont des rôles de référence, qui dupliquent en grande partie la valeur sémantique des éléments structurels HTML5, par exemple</span> <span title="">role = "navigation"</span></span> ({{htmlelement("nav")}}) ou <code>role="complementary"</code> ({{htmlelement("aside")}}) <span class="tlid-translation translation"><span title="">, mais il en existe d'autres qui décrivent différentes structures de pages, telles que</span></span> <code>role="banner"</code>, <code>role="search"</code>, <code>role="tabgroup"</code>, <code>role="tab"</code>, <span class="tlid-translation translation"><span title="">etc., que l'on trouve couramment dans les UIs</span></span>.</li>
- <li><strong><span class="tlid-translation translation"><span title="">Propriétés</span></span></strong>  — <span class="tlid-translation translation"><span title="">Ceux-ci définissent les propriétés des éléments, qui peuvent être utilisés pour leur donner une signification supplémentaire ou une sémantique.</span> <span title="">Par exemple</span></span><span class="tlid-translation translation"><span title="">,</span></span><span class="tlid-translation translation"><span title=""> </span></span> <code>aria-required="true"</code><span class="tlid-translation translation"><span title=""> spécifie qu'une entrée de formulaire doit être renseignée pour être valide, alors que </span></span> <code>aria-labelledby="label"</code> <span class="tlid-translation translation"><span title="">vous permet de mettre un ID sur un élément, puis de le référencer </span><span title="">en tant qu'étiquette pour tout autre élément de la page, y compris plusieurs éléments, ce qui n'est pas possible avec</span></span> <code>&lt;label for="input"&gt;</code>. <span class="tlid-translation translation"><span title="">À titre d'exemple, vous pouvez utiliser</span></span> <code>aria-labelledby</code>  <span class="tlid-translation translation"><span title="">pour spécifier qu'une description de clé contenue dans un</span></span> {{htmlelement("div")}}  <span class="tlid-translation translation"><span title="">est le </span></span> label  <span class="tlid-translation translation"><span title="">de plusieurs cellules de tableau, ou vous pouvez l’utiliser comme alternative au texte alternatif d’image</span></span> —  <span class="tlid-translation translation"><span title="">spécifiez les informations existantes sur la page en tant que texte alternatif d’image</span></span>,  <span class="tlid-translation translation"><span title="">plutôt que de devoir les répéter à l'intérieur de l'attribut</span></span> <code>alt</code>.  <span class="tlid-translation translation"><span title="">Vous pouvez voir un exemple de celà à </span></span><a href="/fr/docs/Apprendre/a11y/HTML?document_saved=true#Alternatives_textuelles">Alternatives textuelles</a>.</li>
- <li><strong><span class="tlid-translation translation"><span title="">États</span></span></strong>  —  <span class="tlid-translation translation"><span title="">Propriétés spéciales qui définissent les conditions actuelles des éléments, telles que</span></span> <code>aria-disabled="true"</code>, <span class="tlid-translation translation"><span title="">qui spécifient à un lecteur d'écran que l'entrée de formulaire est actuellement désactivée.</span> <span title="">Les états diffèrent des propriétés en ce que les propriétés ne changent pas tout au long du cycle de vie d'une application, alors que les états peuvent changer, généralement par programmation via JavaScript.</span></span></li>
+ <li><strong>Rôles</strong> - Ceux-ci définissent ce qu'un élément est ou fait. Bon nombre de ces rôles sont des rôles de référence, qui dupliquent en grande partie la valeur sémantique des éléments structurels HTML5, par exemple role = "navigation" ({{htmlelement("nav")}}) ou <code>role="complementary"</code> ({{htmlelement("aside")}}) , mais il en existe d'autres qui décrivent différentes structures de pages, telles que <code>role="banner"</code>, <code>role="search"</code>, <code>role="tabgroup"</code>, <code>role="tab"</code>, etc., que l'on trouve couramment dans les UIs.</li>
+ <li><strong>Propriétés</strong>  — Ceux-ci définissent les propriétés des éléments, qui peuvent être utilisés pour leur donner une signification supplémentaire ou une sémantique. Par exemple,  <code>aria-required="true"</code> spécifie qu'une entrée de formulaire doit être renseignée pour être valide, alors que  <code>aria-labelledby="label"</code> vous permet de mettre un ID sur un élément, puis de le référencer en tant qu'étiquette pour tout autre élément de la page, y compris plusieurs éléments, ce qui n'est pas possible avec <code>&lt;label for="input"&gt;</code>. À titre d'exemple, vous pouvez utiliser <code>aria-labelledby</code>  pour spécifier qu'une description de clé contenue dans un {{htmlelement("div")}}  est le  label  de plusieurs cellules de tableau, ou vous pouvez l’utiliser comme alternative au texte alternatif d’image —  spécifiez les informations existantes sur la page en tant que texte alternatif d’image,  plutôt que de devoir les répéter à l'intérieur de l'attribut <code>alt</code>.  Vous pouvez voir un exemple de celà à <a href="/fr/docs/Apprendre/a11y/HTML?document_saved=true#Alternatives_textuelles">Alternatives textuelles</a>.</li>
+ <li><strong>États</strong>  —  Propriétés spéciales qui définissent les conditions actuelles des éléments, telles que <code>aria-disabled="true"</code>, qui spécifient à un lecteur d'écran que l'entrée de formulaire est actuellement désactivée. Les états diffèrent des propriétés en ce que les propriétés ne changent pas tout au long du cycle de vie d'une application, alors que les états peuvent changer, généralement par programmation via JavaScript.</li>
 </ul>
 
-<p><span class="tlid-translation translation"><span title="">Un point important sur les attributs WAI-ARIA est qu'ils n'affectent en rien la page Web, à l'exception des informations exposées par les API d'accessibilité du navigateur (où les lecteurs d'écran obtiennent leurs informations).</span> <span title="">WAI-ARIA n'affecte pas la structure de la page Web, le DOM, etc., bien que les attributs puissent être utiles pour sélectionner des éléments par CSS.</span></span></p>
+<p>Un point important sur les attributs WAI-ARIA est qu'ils n'affectent en rien la page Web, à l'exception des informations exposées par les API d'accessibilité du navigateur (où les lecteurs d'écran obtiennent leurs informations). WAI-ARIA n'affecte pas la structure de la page Web, le DOM, etc., bien que les attributs puissent être utiles pour sélectionner des éléments par CSS.</p>
 
 <div class="note">
-<p><strong>Note</strong>: <span class="tlid-translation translation"><span title="">Vous pouvez trouver une liste utile de tous les rôles ARIA et de leurs utilisations, avec des liens vers des informations supplémentaires, dans les spécifications WAI-ARIA — voir la</span></span> <a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions">définition des rôles</a>.</p>
+<p><strong>Note :</strong> Vous pouvez trouver une liste utile de tous les rôles ARIA et de leurs utilisations, avec des liens vers des informations supplémentaires, dans les spécifications WAI-ARIA — voir la <a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions">définition des rôles</a>.</p>
 
-<p><span class="tlid-translation translation"><span title="">La spécification contient également une liste de toutes les propriétés et de tous les états, avec des liens vers des informations complémentaires - voir</span></span>  <a href="https://www.w3.org/TR/wai-aria-1.1/#state_prop_def">Définitions des états et des propriétés (tous les attributs aria- *)</a>.</p>
+<p>La spécification contient également une liste de toutes les propriétés et de tous les états, avec des liens vers des informations complémentaires - voir  <a href="https://www.w3.org/TR/wai-aria-1.1/#state_prop_def">Définitions des états et des propriétés (tous les attributs aria- *)</a>.</p>
 </div>
 
 <h3 id="Où_WAI-ARIA_est_supporté">Où WAI-ARIA est supporté?</h3>
@@ -92,13 +92,13 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics
 
 <ol>
  <li>Browser support is generally quite good — at the time of writing, <a href="http://caniuse.com/#feat=wai-aria">caniuse.com</a> stated that global browser support for WAI-ARIA was around 88%.</li>
- <li>Screenreader support for ARIA features isn't quite at this level, but the most popular screenreaders are getting there. You can get an idea of support levels by looking at Powermapper's <a href="http://www.powermapper.com/tests/screen-readers/aria/">WAI-ARIA Screen reader compatibility</a><span> article.</span></li>
+ <li>Screenreader support for ARIA features isn't quite at this level, but the most popular screenreaders are getting there. You can get an idea of support levels by looking at Powermapper's <a href="http://www.powermapper.com/tests/screen-readers/aria/">WAI-ARIA Screen reader compatibility</a> article.</li>
 </ol>
 
 <p>In this article, we won't attempt to cover every WAI-ARIA feature, and its exact support details. Instead, we will cover the most critical WAI-ARIA features for you to know about; if we don't mention any support details, you can assume that the feature is well-supported. We will clearly mention any exceptions to this.</p>
 
 <div class="note">
-<p><strong>Note</strong>: Some JavaScript libraries support WAI-ARIA, meaning that when they generate UI features like complex form controls, they add ARIA attributes to improve the accessibility of those features. If you are looking for a 3rd party JavaScript solution for rapid UI development, you should definitely consider the accessibility of its UI widgets as an important factor when making your choice. Good examples are jQuery UI (see <a href="https://jqueryui.com/about/#deep-accessibility-support">About jQuery UI: Deep accessibility support</a>), <a href="https://www.sencha.com/products/extjs/">ExtJS</a>, and <a href="https://dojotoolkit.org/reference-guide/1.10/dijit/a11y/statement.html">Dojo/Dijit</a>.</p>
+<p><strong>Note :</strong> Some JavaScript libraries support WAI-ARIA, meaning that when they generate UI features like complex form controls, they add ARIA attributes to improve the accessibility of those features. If you are looking for a 3rd party JavaScript solution for rapid UI development, you should definitely consider the accessibility of its UI widgets as an important factor when making your choice. Good examples are jQuery UI (see <a href="https://jqueryui.com/about/#deep-accessibility-support">About jQuery UI: Deep accessibility support</a>), <a href="https://www.sencha.com/products/extjs/">ExtJS</a>, and <a href="https://dojotoolkit.org/reference-guide/1.10/dijit/a11y/statement.html">Dojo/Dijit</a>.</p>
 </div>
 
 <h3 id="When_should_you_use_WAI-ARIA">When should you use WAI-ARIA?</h3>
@@ -107,24 +107,24 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics
 
 <ol>
  <li><strong>Signposts/Landmarks</strong>: ARIA's <code>role</code> attribute values can act as landmarks that either replicate the semantics of HTML5 elements (e.g. {{htmlelement("nav")}}), or go beyond HTML5 semantics to provide signposts to different functional areas, e.g <code>search</code>, <code>tabgroup</code>, <code>tab</code>, <code>listbox</code>, etc.</li>
- <li><strong>Dynamic content updates</strong>: Screenreaders tend to have difficulty with reporting constantly changing content; with ARIA we can use <code>aria-live</code> to inform screenreader users when an area of content is updated, e.g. via <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>, or <a href="/en-US/docs/Web/API/Document_Object_Model">DOM APIs</a>.</li>
+ <li><strong>Dynamic content updates</strong>: Screenreaders tend to have difficulty with reporting constantly changing content; with ARIA we can use <code>aria-live</code> to inform screenreader users when an area of content is updated, e.g. via <a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>, or <a href="/fr/docs/Web/API/Document_Object_Model">DOM APIs</a>.</li>
  <li><strong>Enhancing keyboard accessibility</strong>: There are built-in HTML elements that have native keyboard accessibility; when other elements are used along with JavaScript to simulate similar interactions, keyboard accessibility and screenreader reporting suffers as a result. Where this is unavoidable, WAI-ARIA provides a means to allow other elements to receive focus (using <code>tabindex</code>).</li>
  <li><strong>Accessibility of non-semantic controls</strong>: When a series of nested <code>&lt;div&gt;</code>s along with CSS/JavaScript is used to create a complex UI-feature, or a native control is greatly enhanced/changed via JavaScript, accessibility can suffer — screenreader users will find it difficult to work out what the feature does if there are no semantics or other clues. In these situations, ARIA can help to provide what's missing with a combination of roles like <code>button</code>, <code>listbox</code>, or <code>tabgroup</code>, and properties like <code>aria-required</code> or <code>aria-posinset</code> to provide further clues as to functionality.</li>
 </ol>
 
-<p>One thing to remember though — <strong>you should only use WAI-ARIA when you need to!</strong> Ideally, you should <em>always</em> use <a href="/en-US/docs/Learn/Accessibility/HTML">native HTML features</a> to provide the semantics required by screenreaders to tell their users what is going on. Sometimes this isn't possible, either because you have limited control over the code, or because you are creating something complex that doesn't have an easy HTML element to implement it. In such cases, WAI-ARIA can be a valuable accessibility enhancing tool.</p>
+<p>One thing to remember though — <strong>you should only use WAI-ARIA when you need to!</strong> Ideally, you should <em>always</em> use <a href="/fr/docs/Learn/Accessibility/HTML">native HTML features</a> to provide the semantics required by screenreaders to tell their users what is going on. Sometimes this isn't possible, either because you have limited control over the code, or because you are creating something complex that doesn't have an easy HTML element to implement it. In such cases, WAI-ARIA can be a valuable accessibility enhancing tool.</p>
 
 <p>But again, only use it when necessary!</p>
 
 <div class="note">
-<p><strong>Note</strong>: Also, try to make sure you test your site with a variety of <em>real</em> users — non-disabled people, people using screenreaders, people using keyboard navigation, etc. They will have better insights than you about how well it works.</p>
+<p><strong>Note :</strong> Also, try to make sure you test your site with a variety of <em>real</em> users — non-disabled people, people using screenreaders, people using keyboard navigation, etc. They will have better insights than you about how well it works.</p>
 </div>
 
 <h2 id="Practical_WAI-ARIA_implementations">Practical WAI-ARIA implementations</h2>
 
 <p>In the next section we'll look at the four areas in more detail, along with practical examples. Before you continue, you should get a screenreader testing setup put in place, so you can test some of the examples as you go through.</p>
 
-<p>See our section on <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">testing screenreaders</a> for more information.</p>
+<p>See our section on <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">testing screenreaders</a> for more information.</p>
 
 <h3 id="SignpostsLandmarks">Signposts/Landmarks</h3>
 
@@ -160,7 +160,7 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics
 
 <p>If you go to VoiceOver's landmarks menu (accessed using VoiceOver key + U and then using the cursor keys to cycle through the menu choices), you'll see that most of the elements are nicely listed so they can be accessed quickly.</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14420/landmarks-list.png" style="display: block; margin: 0 auto;"></p>
+<p><img alt="" src="landmarks-list.png"></p>
 
 <p>However, we could do better here. the search form is a really important landmark that people will want to find, but it is not listed in the landmarks menu or treated like a notable landmark, beyond the actual input being called out as a search input (<code>&lt;input type="search"&gt;</code>). In addition, some older browsers (most notably IE8) don't recognise the semantics of the HTML5 elements.</p>
 
@@ -202,7 +202,7 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics
 
 <p>Content loaded into the DOM can be easily accessed using a screenreader, from textual content to alternative text attached to images. Traditional static websites with largely text content are therefore easy to make accessible for people with visual impairments.</p>
 
-<p>The problem is that modern web apps are often not just static text — they tend to have a lot of dynamically updating content, i.e. content that updates without the entire page reloading via a mechanism like <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>, <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a>, or <a href="/en-US/docs/Web/API/Document_Object_Model">DOM APIs</a>. These are sometimes referred to as <strong>live regions</strong>.</p>
+<p>The problem is that modern web apps are often not just static text — they tend to have a lot of dynamically updating content, i.e. content that updates without the entire page reloading via a mechanism like <a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>, <a href="/fr/docs/Web/API/Fetch_API">Fetch</a>, or <a href="/fr/docs/Web/API/Document_Object_Model">DOM APIs</a>. These are sometimes referred to as <strong>live regions</strong>.</p>
 
 <p>Let's look at a quick example — see <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-no-live.html">aria-no-live.html</a> (also <a href="http://mdn.github.io/learning-area/accessibility/aria/aria-no-live.html">see it running live</a>). In this example we have a simple random quote box:</p>
 
@@ -213,7 +213,7 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics
   &lt;/blockquote&gt;
 &lt;/section&gt;</pre>
 
-<p>Our JavaScript loads a JSON file via <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> containing a series of random quotes and their authors. Once that is done, we start up a <code><a href="/en-US/docs/Web/API/WindowTimers/setInterval">setInterval()</a></code> loop that loads a new random quote into the quote box every 10 seconds:</p>
+<p>Our JavaScript loads a JSON file via <code><a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> containing a series of random quotes and their authors. Once that is done, we start up a <code><a href="/fr/docs/Web/API/WindowTimers/setInterval">setInterval()</a></code> loop that loads a new random quote into the quote box every 10 seconds:</p>
 
 <pre class="brush: js">var intervalID = window.setInterval(showQuote, 10000);</pre>
 
@@ -234,7 +234,7 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics
 <p>This will cause a screenreader to read out the content as it is updated.</p>
 
 <div class="note">
-<p><strong>Note</strong>: Most browsers will throw a security exception if you try to do an <code>XMLHttpRequest</code> call from a <code>file://</code> URL, e.g. if you just load the file by loading it directly into the browser (via double clicking, etc.). To get it to run, you will need to upload it to a web server, for example <a href="/en-US/docs/Learn/Common_questions/Using_Github_pages">using GitHub</a>, or a local web server like <a href="http://www.pythonforbeginners.com/modules-in-python/how-to-use-simplehttpserver/">Python's SimpleHTTPServer</a>.</p>
+<p><strong>Note :</strong> Most browsers will throw a security exception if you try to do an <code>XMLHttpRequest</code> call from a <code>file://</code> URL, e.g. if you just load the file by loading it directly into the browser (via double clicking, etc.). To get it to run, you will need to upload it to a web server, for example <a href="/fr/docs/Learn/Common_questions/Using_Github_pages">using GitHub</a>, or a local web server like <a href="http://www.pythonforbeginners.com/modules-in-python/how-to-use-simplehttpserver/">Python's SimpleHTTPServer</a>.</p>
 </div>
 
 <p>There is an additional consideration here — only the bit of text that updates is read out. It might be nice if we always read out the heading too, so the user can remember what is being read out. To do this, we can add the <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-atomic">aria-atomic</a></code> property to the section. Update your <code>&lt;section&gt;</code> tag again, like so:</p>
@@ -244,11 +244,11 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics
 <p>The <code>aria-atomic="true"</code> attribute tells screenreaders to read out the entire element contents as one atomic unit, not just the bits that were updated.</p>
 
 <div class="note">
-<p><strong>Note</strong>: You can see the finished example at <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-live.html">aria-live.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/aria/aria-live.html">see it running live</a>).</p>
+<p><strong>Note :</strong> You can see the finished example at <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-live.html">aria-live.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/aria/aria-live.html">see it running live</a>).</p>
 </div>
 
 <div class="note">
-<p><strong>Note</strong>: The <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-relevant">aria-relevant</a></code> property is also quite useful for controlling what gets read out when a live region is updated. You can for example only get content additions or removals read out.</p>
+<p><strong>Note :</strong> The <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-relevant">aria-relevant</a></code> property is also quite useful for controlling what gets read out when a live region is updated. You can for example only get content additions or removals read out.</p>
 </div>
 
 <h3 id="Enhancing_keyboard_accessibility">Enhancing keyboard accessibility</h3>
@@ -264,7 +264,7 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics
  <li><code>tabindex="-1"</code> — this allows not normally tabbable elements to receive focus programmatically, e.g. via JavaScript, or as the target of links. </li>
 </ul>
 
-<p>We discussed this in more detail and showed a typical implementation back in our HTML accessibility article — see <a href="/en-US/docs/Learn/Accessibility/HTML#Building_keyboard_accessibility_back_in">Building keyboard accessibility back in</a>.</p>
+<p>We discussed this in more detail and showed a typical implementation back in our HTML accessibility article — see <a href="/fr/docs/Learn/Accessibility/HTML#Building_keyboard_accessibility_back_in">Building keyboard accessibility back in</a>.</p>
 
 <h3 id="Accessibility_of_non-semantic_controls">Accessibility of non-semantic controls</h3>
 
@@ -272,15 +272,15 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics
 
 <h4 id="Form_validation_and_error_alerts">Form validation and error alerts</h4>
 
-<p>First of all, let's revisit the form example we first looked at in our CSS and JavaScript accessibility article (read <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Keeping_it_unobtrusive">Keeping it unobtrusive</a> for a full recap). At the end of this section we showed that we have included some ARIA attributes on the error message box that appears when there are validation errors when you try to submit the form:</p>
+<p>First of all, let's revisit the form example we first looked at in our CSS and JavaScript accessibility article (read <a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript#Keeping_it_unobtrusive">Keeping it unobtrusive</a> for a full recap). At the end of this section we showed that we have included some ARIA attributes on the error message box that appears when there are validation errors when you try to submit the form:</p>
 
-<pre class="brush: html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>errors<span class="punctuation token">"</span></span> <span class="attr-name token">role</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>alert<span class="punctuation token">"</span></span> <span class="attr-name token">aria-relevant</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>all<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
-  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>ul</span><span class="punctuation token">&gt;</span></span>
-  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>ul</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+<pre class="brush: html">&lt;div class="errors" role="alert" aria-relevant="all"&gt;
+  &lt;ul&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;</pre>
 
 <ul>
- <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#alert">role="alert"</a></code> automatically turns the element it is applied to into a live region, so changes to it are read out; it also semantically identifies it as an alert message (important time/context sensitive information), and represents a better, more accessible way of delivering an alert to a user (modal dialogs like <code><a href="/en-US/docs/Web/API/Window/alert">alert()</a></code> calls have a number of accessibility problems; see <a href="http://webaim.org/techniques/javascript/other#popups">Popup Windows</a> by WebAIM).</li>
+ <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#alert">role="alert"</a></code> automatically turns the element it is applied to into a live region, so changes to it are read out; it also semantically identifies it as an alert message (important time/context sensitive information), and represents a better, more accessible way of delivering an alert to a user (modal dialogs like <code><a href="/fr/docs/Web/API/Window/alert">alert()</a></code> calls have a number of accessibility problems; see <a href="http://webaim.org/techniques/javascript/other#popups">Popup Windows</a> by WebAIM).</li>
  <li>An <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-relevant">aria-relevant</a></code> value of <code>all</code> instructs the screenreader to read out the contents of the error list when any changes are made to it — i.e. when errors are added or removed. This is useful because the user will want to know what errors are left, not just what has been added or removed from the list.</li>
 </ul>
 
@@ -304,14 +304,14 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics
 </ol>
 
 <div class="note">
-<p><strong>Note</strong>: You can see the finished example live at <a href="http://mdn.github.io/learning-area/accessibility/aria/form-validation-updated.html">form-validation-updated.html</a>.</p>
+<p><strong>Note :</strong> You can see the finished example live at <a href="http://mdn.github.io/learning-area/accessibility/aria/form-validation-updated.html">form-validation-updated.html</a>.</p>
 </div>
 
-<p>WAI-ARIA also enables some advanced form labelling techniques, beyond the classic {{htmlelement("label")}} element. We already talked about using the <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-label">aria-label</a></code> property to provide a label where we don't want the label to be visible to sighted users (see the {{anch("Signposts/Landmarks")}} section, above). There are some other labelling techniques that use other properties such as <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby">aria-labelledby</a></code> if you want to designate a non-<code>&lt;label&gt;</code> element as a label or label multiple form inputs with the same label, and <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby">aria-describedby</a></code>, if you want to associate other information with a form input and have it read out as well. See <a href="http://webaim.org/techniques/forms/advanced">WebAIM's Advanced Form Labeling article</a><span class="subtitle"> for more details.</span></p>
+<p>WAI-ARIA also enables some advanced form labelling techniques, beyond the classic {{htmlelement("label")}} element. We already talked about using the <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-label">aria-label</a></code> property to provide a label where we don't want the label to be visible to sighted users (see the {{anch("Signposts/Landmarks")}} section, above). There are some other labelling techniques that use other properties such as <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby">aria-labelledby</a></code> if you want to designate a non-<code>&lt;label&gt;</code> element as a label or label multiple form inputs with the same label, and <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby">aria-describedby</a></code>, if you want to associate other information with a form input and have it read out as well. See <a href="http://webaim.org/techniques/forms/advanced">WebAIM's Advanced Form Labeling article</a> for more details.</p>
 
-<p><span class="subtitle">There are many other useful properties and states too, for indicating the status of form elements. For example, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-disabled">aria-disabled</a>="true"</code> can be used to indicate that a form field is disabled. Many browsers will just skip past disabled form fields, and they won't even be read out by screenreaders, but in some cases they will be perceived, so it is a good idea to include this attribute to let the screenreader know that a disabled input is in fact disabled.</span></p>
+<p>There are many other useful properties and states too, for indicating the status of form elements. For example, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-disabled">aria-disabled</a>="true"</code> can be used to indicate that a form field is disabled. Many browsers will just skip past disabled form fields, and they won't even be read out by screenreaders, but in some cases they will be perceived, so it is a good idea to include this attribute to let the screenreader know that a disabled input is in fact disabled.</p>
 
-<p><span class="subtitle">If the disabled state of an input is likely to change, then it is also a good idea to indicate when it happens, and what the result is. For example, in our <a href="http://mdn.github.io/learning-area/accessibility/aria/form-validation-checkbox-disabled.html">form-validation-checkbox-disabled.html</a> demo there is a checkbox that when checked, enables another form input to allow further information be entered. We've set up a hidden live region:</span></p>
+<p>If the disabled state of an input is likely to change, then it is also a good idea to indicate when it happens, and what the result is. For example, in our <a href="http://mdn.github.io/learning-area/accessibility/aria/form-validation-checkbox-disabled.html">form-validation-checkbox-disabled.html</a> demo there is a checkbox that when checked, enables another form input to allow further information be entered. We've set up a hidden live region:</p>
 
 <pre class="brush: html">&lt;p class="hidden-alert" aria-live="assertive"&gt;&lt;/p&gt;</pre>
 
@@ -335,7 +335,7 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics
 
 <h4 id="Describing_non-semantic_buttons_as_buttons">Describing non-semantic buttons as buttons</h4>
 
-<p>A few times in this course already, we've mentioned the native accessibilty of (and the accessibility issues behind using other elements to fake) buttons, links, or form elements (see <a href="/en-US/docs/Learn/Accessibility/HTML#UI_controls">UI controls</a> in the HTML accessibility article, and {{anch("Enhancing keyboard accessibility")}}, above). Basically, you can add keyboard accessibility back in without too much trouble in many cases, using <code>tabindex</code> and a bit of JavaScript.</p>
+<p>A few times in this course already, we've mentioned the native accessibilty of (and the accessibility issues behind using other elements to fake) buttons, links, or form elements (see <a href="/fr/docs/Learn/Accessibility/HTML#UI_controls">UI controls</a> in the HTML accessibility article, and {{anch("Enhancing keyboard accessibility")}}, above). Basically, you can add keyboard accessibility back in without too much trouble in many cases, using <code>tabindex</code> and a bit of JavaScript.</p>
 
 <p>But what about screenreaders? They still won't see the elements as buttons. If we test our <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">fake-div-buttons.html</a> example in a screenreader, our fake buttons will be reported using phrases like "Click me!, group", which is obviously confusing.</p>
 
@@ -346,14 +346,14 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics
 <p>Now when you try this using a screenreader, you'll have buttons be reported using phrases like "Click me!, button" — much better.</p>
 
 <div class="note">
-<p><strong>Note</strong>: Don't forget however that using the correct semantic element where possible is always better. If you want to create a button, and can use a {{htmlelement("button")}} element, you should use a {{htmlelement("button")}} element!</p>
+<p><strong>Note :</strong> Don't forget however that using the correct semantic element where possible is always better. If you want to create a button, and can use a {{htmlelement("button")}} element, you should use a {{htmlelement("button")}} element!</p>
 </div>
 
 <h4 id="Guiding_users_through_complex_widgets">Guiding users through complex widgets</h4>
 
 <p>There are a whole host of other <a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions">roles</a> that can identify non-semantic element structures as common UI features that go beyond what's available in standard HTML, for example <code><a href="https://www.w3.org/TR/wai-aria-1.1/#combobox">combobox</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#slider">slider</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tabpanel">tabpanel</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tree">tree</a></code>. You can see a number of userful examples in the <a href="https://dequeuniversity.com/library/">Deque university code library</a>, to give you an idea of how such controls can be made accessible.</p>
 
-<p>Let's go through an example of our own. We'll return to our simple absolutely-positioned tabbed interface (see <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Hiding_things">Hiding things</a> in our CSS and JavaScript accessibility article), which you can find at <a class="external external-icon" href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">Tabbed info box example</a> (see <a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">source code</a>).</p>
+<p>Let's go through an example of our own. We'll return to our simple absolutely-positioned tabbed interface (see <a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript#Hiding_things">Hiding things</a> in our CSS and JavaScript accessibility article), which you can find at <a class="external external-icon" href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">Tabbed info box example</a> (see <a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">source code</a>).</p>
 
 <p>This example as-is works fine in terms of keyboard accessibility — you can happily tab between the different tabs and select them to show the tab contents. It is also fairly accessible too — you can scroll through the content and use the headings to navigate , even if you can't see what is happening on screen. It is however not that obvious what the content is — a screenreader currently reports the content as a list of links, and some content with three headings. It doesn't give you any idea of what the relationship is between the content. Giving the user more clues as to the structure of the content is always good.</p>
 
@@ -377,7 +377,7 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics
 &lt;/div&gt;</pre>
 
 <div class="note">
-<p><strong>Note</strong>: The most striking change here is that we've removed the links that were originally present in the example, and just used the list items as the tabs — this was done because it makes things less confusing for screenreader users (the links don't really take you anywhere; they just change the view), and it allows the setsize/position in set features to work better — when these were put on the links, the browser kept reporting "1 of 1" all the time, not "1 of 3", "2 of 3", etc.</p>
+<p><strong>Note :</strong> The most striking change here is that we've removed the links that were originally present in the example, and just used the list items as the tabs — this was done because it makes things less confusing for screenreader users (the links don't really take you anywhere; they just change the view), and it allows the setsize/position in set features to work better — when these were put on the links, the browser kept reporting "1 of 1" all the time, not "1 of 3", "2 of 3", etc.</p>
 </div>
 
 <p>The new features are as follows:</p>
@@ -394,7 +394,7 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics
 <p>In our tests, this new structure did serve to improve things overall. The tabs are now recognised as tabs (e.g. "tab" is spoken by the screenreader), the selected tab is indicated by "selected" being read out with the tab name, and the screenreader also tells you which tab number you are currently on. In addition, because of the <code>aria-hidden</code> settings (only the non-hidden tab ever has <code>aria-hidden="false"</code> set), the non-hidden content is the only one you can navigate down to, meaning the selected content is easier to find.</p>
 
 <div class="note">
-<p><strong>Note</strong>: If there is anything you explicitly don't want screen readers to read out, you can give them the <code>aria-hidden="true"</code>  attribute.</p>
+<p><strong>Note :</strong> If there is anything you explicitly don't want screen readers to read out, you can give them the <code>aria-hidden="true"</code>  attribute.</p>
 </div>
 
 <h2 id="Summary">Summary</h2>
@@ -419,7 +419,7 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics
  <li><a href="/fr/docs/Apprendre/a11y/What_is_accessibility">Qu'est ce que l'accessibilité?</a></li>
  <li><a href="/fr/docs/Apprendre/a11y/HTML#Building_keyboard_accessibility_back_in">HTML : une bonne base pour l'accessibilité</a></li>
  <li><a href="/fr/docs/Apprendre/a11y/CSS_and_JavaScript">Meilleures pratiques d'accessibilité CSS et JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li>
+ <li><a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li>
  <li><a href="/fr/docs/Apprendre/a11y/Multimedia">Accessible multimedia</a></li>
  <li><a href="/fr/docs/Apprendre/a11y/Mobile">Accessibilité mobile</a></li>
  <li><a href="/fr/docs/Apprendre/a11y/Accessibility_troubleshooting">Évaluation: dépannage d'accessibilité</a></li>