unslug fr: move

2 files changed, 278 insertions, 0 deletions

diff --git a/files/fr/tools/accessibility_inspector/index.html b/files/fr/tools/accessibility_inspector/index.html
new file mode 100644
index 0000000000..cc493a0836
--- /dev/null
+++ b/files/fr/tools/accessibility_inspector/index.html
@@ -0,0 +1,182 @@
+---
+title: Inspecteur de l'accessibilité
+slug: Outils/Inspecteur_accessibilite
+tags:
+  - Accessibilité
+  - DevTools
+  - Guide
+  - Inspecteur Accessibilié
+  - Outils
+translation_of: Tools/Accessibility_inspector
+---
+<div>{{ToolsSidebar}}</div>
+
+<p class="summary">L'inspecteur d'accessibilité permet d'accéder aux informations importantes exposées aux technologies d'assistance sur la page courante via l'arbre d'accessibilité. On peut ainsi de vérifier ce qui manque ou qui nécessite une attention particulière. Dans cet article, nous verrons les principales fonctionnalités de cet outil et comment les utiliser.</p>
+
+<h2 id="Un_(très)_bref_guide_sur_l'accessibilité">Un (très) bref guide sur l'accessibilité</h2>
+
+<p>L'accessibilité est un ensemble de pratiques visant à rendre les sites web utilisables par le plus de personnes possible. Cela consiste à éviter de rendre le site inutilisable par les personnes handicapées d'une quelconque façon et/ou utilisant un réseau à faible débit et/ou parlant une certaine langue, etc.</p>
+
+<p>On évoquera souvent ici les personnes avec des handicaps visuels et la façon de rendre le contenu accessible, notamment grâce aux <a href="https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/">API d'accessibilité</a> disponibles dans les navigateurs et qui permettent d'exposer des informations sur les rôles des différents éléments sur la page (est-ce que ce sont des textes, des boutons, des liens, des éléments de formulaires, autre chose ?).</p>
+
+<p>Les éléments HTML qui existent dans le DOM ont une sémantique qui fournit une indication quant aux rôles par défaut qu'ils sont censés avoir. Toutefois, on utilise parfois des éléments avec une sémantique faible, voire neutre ({{htmlelement("div")}} et {{htmlelement("span")}}) afin de construire des contrôles complexes et pour lesquels, la sémantique HTML ne suffit pas à décrire le but de tels contrôles. Dans ces cas de figure, on pourra utiliser les attributs de rôle <a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> afin de fournir des rôles spécifiques.</p>
+
+<p>Les rôles des éléments ainsi que les autres informations exposées par les API d'accessibilité sont organisés et présentés au sein d'une structure hiérarchique appelée « l'arbre d'accessibilité ». Cette structure ressemble un peu à l'arbre du DOM mais contient un nombre plus restreint d'éléments et des informations légèrement différentes à leur sujet.</p>
+
+<p>Les outils d'assistance tels que les lecteurs d'écran utilisent ces informations afin de déterminer ce qui se trouve sur une page web, d'indiquer aux utilisateurs ce qui est présent et leur permettre d'interagir avec la page. L'inspecteur d'accessibilité utilise également ces informations afin de pouvoir déboguer les problèmes d'accessibilité grâce aux outils de développement.</p>
+
+<h2 id="Accéder_à_l'inspecteur_d'accessibilité">Accéder à l'inspecteur d'accessibilité</h2>
+
+<p>L'inspecteur d'accessibilité est disponible par défaut à partir de Firefox 63 :</p>
+
+<p><img alt="L'onglet de l'inspecteur d'accessibilité, désactivé, dans les outils de développement de Firefox et avec un bouton intitulé « Activer les fonctionnalités d'accessibilité »" src="https://mdn.mozillademos.org/files/16366/Screen_Shot_2018-11-30_at_11.58.54.png" style="border-style: solid; border-width: 1px; height: 700px; width: 1986px;"></p>
+
+<p>Par défaut, les fonctionnalités des outils de développement dédiées à l'accessibilité sont désactivées (sauf si elles ont été activées depuis un autre onglet ou que le moteur d'accessibilité de Firefox est déjà démarré si vous utiliser un lecteur d'écran ou un outil de test). Ces fonctionnalités sont désactivées, car le moteur d'accessibilité fonctionne en arrière-plan et peut consommer des ressources et diminuer les performances qui sont des indicateurs qu'on pourrait suivre via d'autres onglets (<a href="/fr/docs/Outils/Memory">Mémoire</a> et <a href="/fr/docs/Outils/Performance">Performances</a> par exemple). De même, on peut ne pas vouloir diminuer les performances du navigateur. C'est pour ces raisons que ces fonctionnalités sont désactivées par défaut et qu'il faut les « éteindre » à moins que vous les utilisiez activement.</p>
+
+<p>Vous pouvez activer ces fonctionnalités en cliquant sur le bouton « Activer les fonctionnalités d'accessibilité ».</p>
+
+<p>Une fois le contenu de l'onglet chargé, vous pouvez utiliser le bouton « Désactiver les fonctionnalités d'accessibilité » situé en haut à gauche des outils afin de les désactiver à nouveau. Si vous utilisez un outil qui a besoin du moteur d'accessibilité pour fonctionner, ce bouton sera désactivé.</p>
+
+<div class="note">
+<p><strong>Note</strong> : Si vous utilisez les fonctionnalités d'accessibilité dans plusieurs onglets et que vous les désactiver dans un onglet, les fonctionnalités seront désactivées pour tous les onglets.</p>
+</div>
+
+<h2 id="Fonctionnalité_du_panneau_Accessibilité">Fonctionnalité du panneau Accessibilité</h2>
+
+<p>Le panneau d'accessibilité, lorsqu'il est activé, ressemble à ceci :</p>
+
+<p><img alt="Le panneau d'accessibilité des outils de développement Firefox, activé, qui montre deux panneaux d'informations ainsi qu'un bouton pour désactiver les fonctionnalités d'accessibilité." src="https://mdn.mozillademos.org/files/16022/accessibility-inspector-panel-on.png" style="border-style: solid; border-width: 1px; height: 654px; width: 1692px;"></p>
+
+<p>Sur le côté gauche, on a un arbre hiérarchique qui représente l'ensemble des éléments de l'arbre d'accessibilité de la page courante. Les éléments qui possèdent des éléments fils disposent d'une flèche sur laquelle on peut cliquer afin d'afficher les éléments fils et d'accéder aux niveaux inférieurs de la hiérarchie. Chaque objet de cet arbre possède deux propriétés qui sont affichées :</p>
+
+<ul>
+ <li>Rôle — le rôle de cet élément sur la page (ex. <code>pushbutton</code> ou <code>footer</code>). Cette valeur peut être celle d'un rôle fourni par le navigateur ou un rôle fourni via l'attribut WAI-ARIA <code>role</code>.</li>
+ <li>Nom — le nom donné à cet élément sur la page. Le nom dépend de l'élément. Ainsi, la plupart des éléments textuels auront comme nom la valeur de leur attribut <code>textContent</code> tandis que les contrôles de formulaires seront nommés selon l'élément {{htmlelement("label")}} associé.</li>
+</ul>
+
+<p>Sur le côté droit, on peut voir des informations supplémentaires à propos de l'élément sélectionné à gauche. Les propriétés visibles sont :</p>
+
+<ul>
+ <li><em>name</em> — le nom de l'élément, tel qu'indiqué ci-avant.</li>
+ <li><em>role</em> — le rôle de l'élément, tel qu'indiqué ci-avant.</li>
+ <li><em>actions</em> — une liste d'actions qui peuvent être effectuées sur l'élément. Ainsi, un bouton poussoir (<code>pushbutton</code>) disposerait de l'action "Press" (pour « appuyer ») tandis qu'un lien aurait l'action "Jump" (pour « aller à »).</li>
+ <li><em>value</em> — la valeur de l'élément. Cette propriété peut avoir un sens différent selon le type d'élément. Ainsi, un champ d'un formulaire (<em>role</em>: <em>entry</em>) aurait comme valeur celle qui est saisie dans le champ. Pour un hyperlien, la valeur associée serait l'URL indiquée dansvia l'attribut <code>href</code> de l'élément <code>&lt;a&gt;</code>.</li>
+ <li><em>DOMNode</em> — le type de nœud du DOM que représente l'élément de l'arbre d'accessibilité. Vous pouvez cliquer sur l'icône de ciblage situé à la droite de la valeur afin de sélectionner le nœud dans l'<a href="/fr/docs/Outils/Inspecteur">inspecteur</a>. Survoler cette icône surlignera le nœud sur la page.<br>
+  <img alt="La propriété DOMNode, située dans l'inspecteur d'accessibilité avec l'icône de ciblage qui permet de mettre en avant l'élément correspondant sur la page." src="https://mdn.mozillademos.org/files/16025/dom-node-target-icon.png" style="height: 55px; width: 294px;"></li>
+ <li><em>description</em> — une description plus détaillée fournie par l'élément ; c'est généralement la valeur de l'attribut <code>title</code>.</li>
+ <li><em>help</em> — cette propriété n'est pas implémentée par Gecko et renvoie toujours la chaîne de caractères vide. Cette propriété a été retirée de l'inspecteur dans Firefox 62 ({{bug(1467643)}}).</li>
+ <li><em>keyboardShortcut</em> — un raccourci clavier qui permet d'activer l'élément, comme indiqué avec l'attribut <code>accessKey</code>. Cette propriété fonctionne correctement à partir de Firefox 62 ({{bug("1467381")}}).</li>
+ <li><em>childCount</em> — le nombre d'éléments fils que contient l'élément courant dans la hiérarchie de l'arbre d'accessibilité.</li>
+ <li><em>indexInParent</em> — un index qui situe l'élément courant parmi ses voisins par rapport à son élément parent. Si l'élément courant est le premier élément de son élément parent, la valeur de cet index sera 0, si c'est le deuxième élément, cet index vaudra 1, etc.</li>
+ <li><em>states</em> — une liste des différents états, liés à l'accessibilité, qui peuvent être appliqués à l'élément courant. Ainsi, un lien pourra avoir les états <em>focusable</em> (recevoir le focus), <em>linked</em>, <em>text selectable</em><em>, opaque, enabled</em> et <em>sensitive</em>. Pour connaître la liste des différents états internes, voir l'article <a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/States">États dans Gecko</a>.</li>
+ <li><em>attributes</em> — une liste de l'ensemble des attributs relatifs à l'accessibilité qui sont appliqués à l'élément. Ces attributs peuvent contenir les attributs stylistiques tels que {{cssxref("margin-left")}} et {{cssxref("text-indent")}} mais aussi des d'autres informations : est-ce que l'élément peut être déplacé à la souris, quel est son niveau de titre, etc. Pour connaître la liste des attributs possibles, voir l'article <a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Attrs">Attributs d'objet dans Gecko</a>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note :</strong> Les informations mises à disposition sont les mêmes quelle que soit la plateforme. L'inspecteur expose l'arbre d'accessibilité de Gecko plutôt que les informations d'accessibilité de la plateforme sous-jacente.</p>
+</div>
+
+<h3 id="Contrôles_au_clavier">Contrôles au clavier</h3>
+
+<p>Le panneau Accessibilité est intégralement accessible au clavier :</p>
+
+<ul>
+ <li>Il est possible d'utiliser la touche tabulation pour passer du bouton de désactivation au panneau gauche au panneau droit.</li>
+ <li>Lorsqu'un des panneaux a le focus, on peut déplacer le focus entre les différents éléments qui compose ce panneau grâce aux flèches haut et bas du clavier. Les flèches droite et gauche permettent de développer ou de réduire les arborescences.</li>
+</ul>
+
+<p> </p>
+
+<h3 id="Afficher_l'arbre_accessibilité_en_JSON">Afficher l'arbre accessibilité en JSON</h3>
+
+<p>Il est possible d'afficher l'arbre accessibilité en JSON avec un clic droit sur une ligne dans le panneau Accessibilité et en cliquant sur "<strong>Afficher JSON" </strong>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16423/print_to_json.png" style="border: 1px solid black; display: block; height: 238px; margin: 0px auto; width: 800px;"></p>
+
+<p>Cela ouvrira un nouvel onglet avec la partie de l'arbre d'accessibilité chargé dans la visualisation JSON :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16424/accessibility_json.png" style="display: block; height: 586px; margin: 0px auto; width: 800px;"></p>
+
+<p>Une fois ouvert, il est possible de sauvegarder ou copier les données. La visualisation JSON peut également afficher le JSON "brut" dans in onglet séparé.</p>
+
+<h2 id="Fonctionnalités_notables_associées">Fonctionnalités notables associées</h2>
+
+<p>Lorsque les fonctionnalités d'accessibilité sont activées, des fonctionnalités supplémentaires deviennent disponibles.</p>
+
+<h3 id="Options_de_menu_contextuel">Options de menu contextuel</h3>
+
+<p>Une option supplémentaire devient disponible dans le menu contextuel de la page (menu accessible via clic-droit) et dans l'onglet HTML de l'inspecteur (clic-droit sur l'élément) :</p>
+
+<p><img alt="Le menu contextuel dans la zone d'affichage du navigateur avec l'option « Inspecter les propriétés d'accessibilité » surlignée" src="https://mdn.mozillademos.org/files/16028/web-page-context-menu.png" style="border-style: solid; border-width: 1px; height: 798px; width: 1200px;"></p>
+
+<p><img alt="Le menu contextuel de l'inspecteur du DOM avec l'option « Afficher les propriétés d'accessibilité » surlignée" src="https://mdn.mozillademos.org/files/16020/dom-inspector-context-menu.png" style="border-style: solid; border-width: 1px; height: 803px; width: 1200px;"></p>
+
+<p>Lorsque vous choisissez l'option « Inspecter les propriétés d'accessibilité » via le menu contextuel, cela ouvre automatiquement le panneau « Accessibilité » des outils de développement et affiche l'élément dans l'arbre d'accessibilité ainsi que ses propriétés.</p>
+
+<div class="note">
+<p><strong>Note</strong> : Certains éléments du DOM n'ont pas de propriétés d'accessibilité. Dans ces cas, l'option <em>Inspecter les propriétés d'accessibilité</em> du menu sera masquée.</p>
+</div>
+
+<h3 id="Mise_en_avant_des_éléments">Mise en avant des éléments</h3>
+
+<p>Dans le panneau « Accessibilité », lorsque la souris survole un élément d'accessibilité, on peut voir un surlignage semi-transparent qui recouvre l'élément sur la page. Le nom et le rôle de l'élément seront également affichés via une petite barre d'informations au-dessus de l'élément, au côté d'information de contraste de couleur si approprié. On peut ainsi facilement déterminer la correspondance entre les éléments de la page et les éléments de l'arbre d'accessibilité.</p>
+
+<p>Dans l'exemple suivant, on peut voir que l'image a été surlignée, que son rôle est <em><code>graphic</code></em> et que son nom est <code><em>"Road, Asphalt, Sky, Clouds, Fall"</em></code>. On peut également voir le ratio de contraste des couleurs, ici 3.46, qui apparaît dans la barre d'informations au-dessus de l'image.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16302/image_accessibility.png" style="border: 1px solid black; display: block; height: 347px; margin: 0px auto; width: 451px;"></p>
+
+<h4 id="Contraste_des_couleurs">Contraste des couleurs</h4>
+
+<p>Le ratio de contraste est une information particulièrement utile lors de la conception de la palette de couleurs d'un site web. En effet, si les couleurs ne sont pas suffisamment contrastées, les lecteurs souffrant d'un handicap visuel (daltonisme par exemple) ne pourront pas lire le texte de la page. Les règles d'accessibilité web, <a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Web Content Accessibility Guidelines (WCAG) 1.4</a>, indique pour une conformité AA, que le niveau de contraste 4.5.1 est le ratio minimal à respecter entre une couleur de premier plan et une couleur d'arrière-plan pour le texte standard et 4.5.1 pour les titres (critère 1.4.3). Pour une conformité AAA, les rations sont 7.1 pour le texte, et 4.5.1 pour les titres (critère 1.4.6).<br>
+ <br>
+ Par exemple :</p>
+
+<p><img alt="A screenshot of colour contrast highlighter where text contrast if below the AA WCAG threshold." src="https://mdn.mozillademos.org/files/16459/Screen_Shot_2019-01-29_at_10.11.13.png" style="display: block; height: 237px; margin: 0px auto; width: 357px;"></p>
+
+<p>Le contraste des couleurs du texte sur l'image est de 2.86. Cette valeur, trop faible, indique que le contraste peut ne pas être suffisant pour la lecture. On peut également voir dans cette illustration le symbole triangulaire qui alerte sur le non-respect des règles d'accessibilité.</p>
+
+<p>À partir de Firefox 65, afficher cette information pour un texte aillant une image de fond complexe (i.e un dégradé), donnera une plage de valeurs de contraste. Par exemple :</p>
+
+<p> </p>
+
+<p><img alt="A screenshot of colour contrast highlighter where for text over gradient background with contrast satisfying the AAA WCAG guidelines." src="https://mdn.mozillademos.org/files/16460/Screen_Shot_2019-01-29_at_10.21.07.png" style="display: block; height: 434px; margin: 0px auto; width: 1484px;"></p>
+
+<p> </p>
+
+<p>On voit avec cette image que le niveau de contraste va de 4.72 à 5.98. Ces nombres sont suivis de la note "AAA" et d'une coche verte qui indique que le texte possède un niveau de contraste supérieur ou égal à 4.5:1 ou plus et qu'il respecte les règles de contraste amélioré, correspondant au niveau AAA.</p>
+
+<p>Voir <a href="/fr/docs/Apprendre/a11y/CSS_and_JavaScript#Color_and_color_contrast">les bonnes pratiques d'accessibilité CSS et JavaScript</a> pour plus d'informations.</p>
+
+<h3 id="Sélecteur_d'accessibilité">Sélecteur d'accessibilité</h3>
+
+<p><a href="/fr/docs/Outils/Inspecteur/Comment/Sélectionner_un_élément">Le panneau Inspecteur pour l'inspection du code HTML</a> possède un sélecteur qui permet de choisir un élément sur la page et de le retrouver dans le DOM. De même, le panneau  <em>Accessibilité</em> possède un bouton de sélection sur lequel on peut appuyer pour ensuite survoler la page et choisir un des éléments affichés afin de retrouver l'élément dans le panneau dans l'arbre d'accessibilité.</p>
+
+<p>Les icônes pour les deux sélecteurs (accessibilité et inspecteur HTML) varient légèrement, comme on peut le voir dans ces deux captures d'écran :</p>
+
+<p><img alt="Le bouton pour l'inspecteur du DOM est encadré et on peut voir la bulle d'informations « Sélectionner un élément de la page »" src="https://mdn.mozillademos.org/files/16024/dom-inspector-picker.png" style="border-style: solid; border-width: 1px; height: 677px; width: 1716px;"></p>
+
+<p><img alt="Le bouton de l'inspecteur d'accessibilité est encadré en rouge et on peut voir la bulle d'informations « Sélectionner un objet accessible de la page »" src="https://mdn.mozillademos.org/files/16023/accessibility-inspector-picker.png" style="border-style: solid; border-width: 1px; height: 677px; width: 1717px;"></p>
+
+<p>Lorsqu'on clique sur un élément de la page grâce à ce sélecteur, on peut voir l'élément sélectionné dans l'arbre d'accessibilité du panneau et le sélecteur est alors désactivé. Pour garder le sélecteur actif tout en voyant les éléments ciblés mis en avant dans l'arbre d'accessibilité, vous pouvez maintenir la touche <kbd>Maj</kbd> lors du ciblage (l'arbre d'accessibilité pointera vers l'élément survolé tant que la touche <kbd>Maj</kbd> sera enfoncée).</p>
+
+<p>Lorsque le sélecteur est activé, vous pouvez le désactivé en appuyant à nouveau sur le bouton ou en appuyant sur la touche <kbd>Esc</kbd>.</p>
+
+<h2 id="Scénarios_d'utilisation">Scénarios d'utilisation</h2>
+
+<p>L'inspecteur d'accessibilité peut s'avérer particulièrement utile pour localiser les problèmes d'accessibilité. On peut l'utiliser pour dénicher les éléments qui n'ont pas d'équivalent textuel correct (les images sans attribut <code>alt</code> ou les champs de formulaire sans libellé), car ils auront la propriété <code>name</code> qui vaudra <code>null</code>. Par exemple :</p>
+
+<p><img alt="Un champ de formulaire surligné dans la page et pour lequel les informations sont affichées dans le panneau accessibilité où on voit que la propriété name est null car cet élément n'a pas de libellé associé" src="https://mdn.mozillademos.org/files/16027/use-case-no-label.png" style="border-style: solid; border-width: 1px; height: 1180px; width: 1182px;"></p>
+
+<p>Cet outil est également utile pour vérifier la sémantique des éléments. On peut utiliser le menu contextuel « Inspecter les propriétés d'accessibilité » afin de vérifier rapidement si un élément possède le bon rôle (autrement dit : est-ce qu'un bouton est vraiment indiqué comme un bouton ? est-ce qu'un lien apparaît réellement comme un lien ? etc..</p>
+
+<p><img alt="Un élément d'interface qui ressemble à un bouton mais pour lequel les informations affichées dans le panneau accessibilité montrent qu'il n'est pas un bouton mais un élément de section pour lequel la propriété name vaut null" src="https://mdn.mozillademos.org/files/16026/use-case-fake-button.png" style="border-style: solid; border-width: 1px; height: 1180px; width: 1182px;"></p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/a11y">Notions fondamentales d'accessibilité</a></li>
+ <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité">Informations pour le débogage</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG">Comprendre les règles WCAG</a></li>
+ <li><a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics">Notions de base WAI-ARIA</a></li>
+ <li><a href="https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/">Les API d'accessibilité : un outil clé pour l'accessibilité web</a> (en anglais), écrit par Léonie Watson</li>
+</ul>
diff --git a/files/fr/tools/accessibility_inspector/simulation/index.html b/files/fr/tools/accessibility_inspector/simulation/index.html
new file mode 100644
index 0000000000..5247d65941
--- /dev/null
+++ b/files/fr/tools/accessibility_inspector/simulation/index.html
@@ -0,0 +1,96 @@
+---
+title: Simulation
+slug: Outils/Inspecteur_accessibilite/Simulation
+tags:
+  - Accessibilité
+  - DevTools
+  - Guide
+  - Inspecteur Accessibilié
+  - Outils
+  - Simulation
+  - couleur
+translation_of: Tools/Accessibility_inspector/Simulation
+---
+<p><span class="seoSummary">Le simulateur dans <a href="https://wiki.developer.mozilla.org/fr/docs/Outils/Inspecteur_accessibilite">l'inspecteur de l'accessibilité</a> des outils de développement de Firefox vous permet de voir à quoi ressemblerait une page web pour les utilisateurs souffrant de diverses formes de <em>déficience de la perception des couleurs</em> (« dyschromatopsie » plus connue sous le nom de « daltonisme »), ainsi que de <em>perte de sensibilité au contraste</em>.</span></p>
+
+<p>La plupart des personnes atteintes de daltonisme peuvent voir les couleurs, mais ne voient pas toutes les distinctions que les personnes ayant une vision normale des couleurs peuvent voir. Les déficiences de la vision des couleurs affectent la perception de tout le spectre des couleurs, et pas seulement de certaines couleurs spécifiques comme le rouge ou le vert. Les déficiences de la vision des couleurs affectent environ 8 % des hommes et 0,5 % des femmes. Les formes les plus courantes de daltonisme (communément regroupées sous le nom de « daltonisme rouge-vert ») touchent plus d'hommes que de femmes, car elles sont dues à une mutation d'un gène du chromosome X, dont les hommes ne possèdent qu'une copie.</p>
+
+<p>La perte de sensibilité aux contrastes peut être causée par la cataracte, le glaucome, la rétinopathie diabétique et d'autres troubles de la rétine ; elle peut être liée à l'âge, d'origine congénitale ou due à une blessure.</p>
+
+<div class="blockIndicator note">
+<p>Pour activer cette fonctionnalité vous devez avoir activé le <em>webrender</em>. Selon votre configuration de Firefox il peut être activé par défaut. Dans l'<a href="https://support.mozilla.org/fr/kb/editeur-configuration-firefox">éditeur de configuration de Firefox</a>, assurez-vous que l'option <strong>gfx.webrender.all</strong> est définie sur <code>true</code>.<em> </em></p>
+</div>
+
+<p>Dans le menu <strong>Simuler</strong>, vous pouvez choisir une option à la fois dans la liste suivante :</p>
+
+<ul>
+ <li>Aucun — choisissez cette option pour revenir à un affichage normal ;</li>
+ <li>Protanomalie (rouge faible) ;</li>
+ <li>Deutéranomalie (vert faible) ;</li>
+ <li>Tritanomalie (bleu faible) ;</li>
+ <li>Protanopie (pas de rouge) ;</li>
+ <li>Deutéranopie (pas de vert) ;</li>
+ <li>Tritanopie (pas de bleu) ;</li>
+ <li>Perte de contraste ;</li>
+</ul>
+
+<div class="blockIndicator note">
+<p>Ces simulations de ne sont pas tout à fait exactes sur le plan médical. Cependant, elles peuvent vous donner une idée de ce à quoi ressemble votre site web pour les utilisateurs ayant des troubles de la vision, et donc vous aider à juger si vous devez faire des ajustements dans vos choix de couleurs et/ou de contrastes.</p>
+</div>
+
+<p>Le tableau suivant montre une image colorée d'une tête de chat, et à quoi elle ressemble dans les différentes simulations.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Simulation</th>
+   <th scope="col">Image affichée</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Aucun</td>
+   <td><img alt="Colorful image of a cat's face, without modification" src="https://mdn.mozillademos.org/files/16876/28369550088_617db0d6f2_m.jpg" style="height: 240px; width: 240px;"></td>
+  </tr>
+  <tr>
+   <td>Protanomalie (rouge faible)</td>
+   <td><img alt="Colorful image of a cat's face, with deuteranomaly simulation" src="https://mdn.mozillademos.org/files/16877/colorcat_protanomaly.png" style="height: 250px; width: 250px;"></td>
+  </tr>
+  <tr>
+   <td>Deutéranomalie (vert faible)</td>
+   <td><img alt="Colorful image of a cat's face, with deuteranomaly simulation" src="https://mdn.mozillademos.org/files/16878/colorcat_deuteranomaly.png" style="height: 250px; width: 250px;"></td>
+  </tr>
+  <tr>
+   <td>Tritanomalie (bleu faible)</td>
+   <td><img alt="Colorful image of a cat's face, with tritanomaly simulation" src="https://mdn.mozillademos.org/files/16879/colorcat_tritanomaly.png" style="height: 250px; width: 250px;"></td>
+  </tr>
+  <tr>
+   <td>Protanopie (pas de rouge)</td>
+   <td><img alt="Colorful image of a cat's face, with protanopia simulation" src="https://mdn.mozillademos.org/files/16880/colorcat_protanopia.png" style="height: 250px; width: 250px;"></td>
+  </tr>
+  <tr>
+   <td>Deutéranopie (pas de vert)</td>
+   <td><img alt="Colorful image of a cat's face, with deuteranopia simulation" src="https://mdn.mozillademos.org/files/16881/colorcat_deuteranopia.png" style="height: 250px; width: 250px;"></td>
+  </tr>
+  <tr>
+   <td>Tritanopie (pas de bleu)</td>
+   <td><img alt="Colorful image of a cat's face, with tritanopia simulation" src="https://mdn.mozillademos.org/files/16882/colorcat_tritanopia.png" style="height: 250px; width: 250px;"></td>
+  </tr>
+  <tr>
+   <td>Perte de contraste</td>
+   <td><img alt="Colorful image of a cat's face, with contrast loss simulation" src="https://mdn.mozillademos.org/files/16883/colorcat_contrastloss.png" style="height: 250px; width: 250px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://www.color-blindness.com/types-of-color-blindness/">Types de daltonisme</a> (en anglais)</li>
+ <li><a href="https://www.color-blindness.com/coblis-color-blindness-simulator/">Simulateur de daltonisme</a> (en anglais)</li>
+ <li><a href="http://www.vision-and-eye-health.com/contrast-sensitivity.html">Sensibilité aux contrastes</a> (en anglais)</li>
+ <li><a href="http://mkweb.bcgsc.ca/colorblind/">Palettes de couleurs pour le daltonisme</a> (en anglais)</li>
+ <li><a href="https://jfly.uni-koeln.de/color/">Conception universelle des couleurs</a> (en anglais)</li>
+ <li><a href="https://www.w3.org/TR/WCAG21/#use-of-color">Critère de succès des WCAG 1.4.1 : l'utilisation de la couleur</a> (en anglais)</li>
+ <li><a href="https://www.w3.org/TR/WCAG21/#use-of-color">Critère de succès des WCAG 1.4.11 </a><a href="https://www.w3.org/TR/WCAG21/#non-text-contrast">: contraste non textuel</a> (en anglais)</li>
+</ul>