From b3da44199d9450ea609028a50e8dd9246a90fb41 Mon Sep 17 00:00:00 2001
From: linsolas <linsolas@gmail.com>
Date: Sun, 17 Feb 2019 23:32:56 +0100
Subject: [PATCH 1/9] (WIP) Translate Accessibility page

---
 content/docs/accessibility.md | 126 +++++++++++++++++-----------------
 1 file changed, 64 insertions(+), 62 deletions(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 663251a03..8b4ec73e3 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -1,32 +1,32 @@
 ---
 id: accessibility
-title: Accessibility
+title: Accessibilité
 permalink: docs/accessibility.html
 ---
 
-## Why Accessibility? {#why-accessibility}
+## Pourquoi l'accessibilité ? {#why-accessibility}
 
-Web accessibility (also referred to as [**a11y**](https://en.wiktionary.org/wiki/a11y)) is the design and creation of websites that can be used by everyone. Accessibility support is necessary to allow assistive technology to interpret web pages.
+L'accessibilité du web (aussi référencée sous la contraction [**a11y**](https://fr.wiktionary.org/wiki/a11y)) concerne le design et la création de sites web qui peuvent être utilisés par tout le monde. Le support de l'accessibilité est nécessaire pour permettre aux technologies d'assistance d'interpréter les pages web. 
 
-React fully supports building accessible websites, often by using standard HTML techniques.
+React prend totalement en charge la création de sites web accessibles, en s'appuyant souvent sur des techniques HTML standard.
 
-## Standards and Guidelines {#standards-and-guidelines}
+## Standards et lignes directrices {#standards-and-guidelines}
 
 ### WCAG {#wcag}
 
-The [Web Content Accessibility Guidelines](https://www.w3.org/WAI/intro/wcag) provides guidelines for creating accessible web sites.
+Les [instructions du *Web Content Accessibility*](https://www.w3.org/WAI/intro/wcag) proposent les lignes directrices pour créer des sites web accessibles.
 
-The following WCAG checklists provide an overview:
+La liste du WCAG ci-dessous fournissent un aperçu :
 
-- [WCAG checklist from Wuhcag](https://www.wuhcag.com/wcag-checklist/)
-- [WCAG checklist from WebAIM](http://webaim.org/standards/wcag/checklist)
-- [Checklist from The A11Y Project](http://a11yproject.com/checklist.html)
+- [La liste de contrôle WCAG de Wuhcag](https://www.wuhcag.com/wcag-checklist/).
+- [La liste de contrôle WCAG de WebAIM](http://webaim.org/standards/wcag/checklist).
+- [La liste de contrôle de *The A11Y Project*](http://a11yproject.com/checklist.html).
 
 ### WAI-ARIA {#wai-aria}
 
-The [Web Accessibility Initiative - Accessible Rich Internet Applications](https://www.w3.org/WAI/intro/aria) document contains techniques for building fully accessible JavaScript widgets.
+Le document sur [l'initiative d'accessibilité du Web - *Accessible Rich Internet Applications*](https://www.w3.org/WAI/intro/aria) contient les techniques nécessaires à la création de *widgets* JavaScript complètement accessibles.
 
-Note that all `aria-*` HTML attributes are fully supported in JSX. Whereas most DOM properties and attributes in React are camelCased, these attributes should be hyphen-cased (also known as kebab-case, lisp-case, etc) as they are in plain HTML:
+Remarquez que tous les attributs HTML `aria-*` sont entièrement supportés dans le JSX. Là où la plupart des propriétés DOM en React utilisent le format « camelCase », ces attributs doivent utiliser la casse par tirets (« *hyphen-case* », aussi appelée « *kebab-case* », « *lisp-case* », etc.), comme ils le sont en HTML simple :
 
 ```javascript{3,4}
 <input
@@ -39,16 +39,17 @@ Note that all `aria-*` HTML attributes are fully supported in JSX. Whereas most
 />
 ```
 
-## Semantic HTML {#semantic-html}
-Semantic HTML is the foundation of accessibility in a web application. Using the various HTML elements to reinforce the meaning of information
+## HTML sémantique {#semantic-html}
+
+Le HTML sémantique est la base de l'accessibilité dans une application web. L'utilisation des différents éléments HTML pour renforcer la signification de l'information de nos sites web offre généralement de l'accessibilité à peu de frais.
 in our websites will often give us accessibility for free.
 
-- [MDN HTML elements reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
+- [La référence des éléments HTML sur MDN](https://developer.mozilla.org/fr/docs/Web/HTML/Element)
 
-Sometimes we break HTML semantics when we add `<div>` elements to our JSX to make our React code work, especially when working with lists (`<ol>`, `<ul>` and `<dl>`) and the HTML `<table>`.
-In these cases we should rather use [React Fragments](/docs/fragments.html) to group together multiple elements.
+Il nous arrive de casser la sémantique HTML en ajoutant des balises `<div>` dans notre JSX afin de faire fonctionner notre code React, en particulier lorsque l'on travaille avec des listes (`<ol>`, `<ul>` et `<dl>`) ou la table HTML `<table>`.
+Dans ces cas-là, nous devrions plutôt utiliser les [fragments React](/docs/fragments.html) pour regrouper de multiples éléments.
 
-For example,
+Par exemple,
 
 ```javascript{1,5,8}
 import React, { Fragment } from 'react';
@@ -73,14 +74,14 @@ function Glossary(props) {
 }
 ```
 
-You can map a collection of items to an array of fragments as you would any other type of element as well:
+Vous pouvez représenter une liste d'éléments en un tableau de fragments, comme vous pourriez également le faire pour tout autre type d'élément :
 
 ```javascript{6,9}
 function Glossary(props) {
   return (
     <dl>
       {props.items.map(item => (
-        // Fragments should also have a `key` prop when mapping collections
+        // Les fragments doivent aussi disposer de la propriété `key` lors de l'itération sur les listes
         <Fragment key={item.id}>
           <dt>{item.term}</dt>
           <dd>{item.description}</dd>
@@ -91,7 +92,7 @@ function Glossary(props) {
 }
 ```
 
-When you don't need any props on the Fragment tag you can use the [short syntax](/docs/fragments.html#short-syntax), if your tooling supports it:
+Lorsque vous n'avez besoin d'aucune propriété sur les balises fragments, vous pouvez utiliser la [syntaxe courte](/docs/fragments.html#short-syntax), lorsque votre outillage le supporte :
 
 ```javascript{3,6}
 function ListItem({ item }) {
@@ -104,83 +105,83 @@ function ListItem({ item }) {
 }
 ```
 
-For more info, see [the Fragments documentation](/docs/fragments.html).
+Pour plus d'information, consultez [la documentation sur les fragments](/docs/fragments.html).
+
+## Formulaires accessibles {#accessible-forms}
 
-## Accessible Forms {#accessible-forms}
+### L'étiquetage {#labeling}
 
-### Labeling {#labeling}
-Every HTML form control, such as `<input>` and `<textarea>`, needs to be labeled accessibly. We need to provide descriptive labels that are also exposed to screen readers.
+Tous les contrôles de formulaire HTML, tels que `<input>` et `<textarea>`, doivent être étiquetés de manière accessible. Nous devons fournir des étiquettes descriptives, qui sont également exposées aux lecteurs d'écran.
 
-The following resources show us how to do this:
+Les ressources ci-dessous nous montrent comme procéder :
 
-- [The W3C shows us how to label elements](https://www.w3.org/WAI/tutorials/forms/labels/)
-- [WebAIM shows us how to label elements](http://webaim.org/techniques/forms/controls)
-- [The Paciello Group explains accessible names](https://www.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/)
+- [Le W3C nous montre comme étiqueter les éléments](https://www.w3.org/WAI/tutorials/forms/labels/)
+- [Le WebAIM nous montre comme étiqueter les éléments](http://webaim.org/techniques/forms/controls)
+- [Le groupe Paciello explique ce qu'est un nom accessible](https://www.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/)
 
-Although these standard HTML practices can be directly used in React, note that the `for` attribute is written as `htmlFor` in JSX:
+Bien que ces pratiques HTML standard soient directement utilisables dans React, il faut noter que l'attribut `for` est écrit `htmlFor` en JSX :
 
 ```javascript{1}
-<label htmlFor="namedInput">Name:</label>
+<label htmlFor="namedInput">Nom :</label>
 <input id="namedInput" type="text" name="name"/>
 ```
 
-### Notifying the user of errors {#notifying-the-user-of-errors}
+### Notifier des erreurs à l'utilisateur {#notifying-the-user-of-errors}
+
+Les situations d'erreur doivent être comprises par tous les utilisateurs. Les liens ci-dessous montrent comme exposer les textes d'erreur aux lecteurs d'écran :
 
-Error situations need to be understood by all users. The following link shows us how to expose error texts to screen readers as well:
+- [Le W3C présente les notifications utilisateurs](https://www.w3.org/WAI/tutorials/forms/notifications/)
+- [Le WebAIM se penche sur les validations de formulaire](http://webaim.org/techniques/formvalidation/)
 
-- [The W3C demonstrates user notifications](https://www.w3.org/WAI/tutorials/forms/notifications/)
-- [WebAIM looks at form validation](http://webaim.org/techniques/formvalidation/)
+## Contrôle du focus {#focus-control}
 
-## Focus Control {#focus-control}
+Assurez-vous que votre application web peut être complètement utilisable avec la seule utilisation du clavier :
 
-Ensure that your web application can be fully operated with the keyboard only:
+- [Le WebAIM parle de l'accessibilité depuis le clavier](http://webaim.org/techniques/keyboard/)
 
-- [WebAIM talks about keyboard accessibility](http://webaim.org/techniques/keyboard/)
+### Focus par le clavier et mise en contour de focus {#keyboard-focus-and-focus-outline}
 
-### Keyboard focus and focus outline {#keyboard-focus-and-focus-outline}
+Le focus par le clavier fait référence à l'élément courant dans le DOM qui est sélectionné pour accepter les saisies du clavier. Nous le voyons partout comme une mise en contour telle que cela est montré sur l'image ci-dessous :
 
-Keyboard focus refers to the current element in the DOM that is selected to accept input from the keyboard. We see it everywhere as a focus outline similar to that shown in the following image:
+<img src="../images/docs/keyboard-focus.png" alt="Le contour bleu du focus clavier autour d'un lien sélectionné" />
 
-<img src="../images/docs/keyboard-focus.png" alt="Blue keyboard focus outline around a selected link." />
+N'utilisez le CSS qui retire ce contour, par exemple en définissant `outline: 0`, uniquement si vous le remplacez par une autre implémentation de contour de focus.
 
-Only ever use CSS that removes this outline, for example by setting `outline: 0`, if you are replacing it with another focus outline implementation.
+### Mécanismes pour sauter au contenu désiré {#mechanisms-to-skip-to-desired-content}
 
-### Mechanisms to skip to desired content {#mechanisms-to-skip-to-desired-content}
+Fournissez un mécanisme permettant aux utilisateurs de sauter les sections de navigation précédentes de votre application, car cela facilite et accélère la navigation au clavier.
 
-Provide a mechanism to allow users to skip past navigation sections in your application as this assists and speeds up keyboard navigation.
+Les liens de passage (*Skiplinks*) ou lien de navigation de passage sont des liens de navigation cachés qui ne sont visibles que lorsque l'utilisateur interagit au clavier avec la page. Ils sont très faciles à mettre en œuvre avec les ancres de pages internes et un peu de style :
 
-Skiplinks or Skip Navigation Links are hidden navigation links that only become visible when keyboard users interact with the page. They are very easy to implement with
-internal page anchors and some styling:
+- [WebAIM - Liens de navigation de passage](http://webaim.org/techniques/skipnav/)
 
-- [WebAIM - Skip Navigation Links](http://webaim.org/techniques/skipnav/)
 
-Also use landmark elements and roles, such as `<main>` and `<aside>`, to demarcate page regions as assistive technology allow the user to quickly navigate to these sections.
+Utilisez également les éléments et rôles de repérage, tels que `<main>` et `<aside>`, afin de délimiter les régions de la page, car les technologies d'assistance permettent à l'utilisateur de naviguer rapidement vers ces sections.
 
-Read more about the use of these elements to enhance accessibility here:
+Pour en savoir plus sur l'utilisation de ces éléments améliorant l'accessibilité, rendez-vous sur :
 
-- [Accessible Landmarks](http://www.scottohara.me/blog/2018/03/03/landmarks.html)
+- [Repères d'accessibilité](http://www.scottohara.me/blog/2018/03/03/landmarks.html)
 
-### Programmatically managing focus {#programmatically-managing-focus}
+### Gérer le focus programmatiquement {#programmatically-managing-focus}
 
-Our React applications continuously modify the HTML DOM during runtime, sometimes leading to keyboard focus being lost or set to an unexpected element. In order to repair this,
-we need to programmatically nudge the keyboard focus in the right direction. For example, by resetting keyboard focus to a button that opened a modal window after that modal window is closed.
+Nos applications React modifient en continu le DOM HTML au cours de l'exécution, ce qui entraîne parfois la perte du focus du clavier ou le positionne surun élément inattendu. Afin de réparer cela, nous devons déplacer le focus claiver programmatiquement dans la bonne direction. Par exemple, en redonnant le focus clavier à un bouton ouvrant une fenêtre modale, lorsque cette dernière se ferme.
 
-MDN Web Docs takes a look at this and describes how we can build [keyboard-navigable JavaScript widgets](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets).
+La documentation web de MDN donne un aperçu à cela, et décrit comment nous pouvons construire [des widgets JavaScript permettant la navigation au clavier](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets).
 
-To set focus in React, we can use [Refs to DOM elements](/docs/refs-and-the-dom.html).
+Afin de définir le focus en React, nous pouvons utiliser les [références (*Ref*) aux éléments du DOM](/docs/refs-and-the-dom.html).
 
-Using this, we first create a ref to an element in the JSX of a component class:
+En utilisant cela, nous créons d'abord une référence à un élément du JSX de la classe composant :
 
 ```javascript{4-5,8-9,13}
 class CustomTextInput extends React.Component {
   constructor(props) {
     super(props);
-    // Create a ref to store the textInput DOM element
+    // Création d'une référence pour conserver l'élément textInput du DOM
     this.textInput = React.createRef();
   }
   render() {
-  // Use the `ref` callback to store a reference to the text input DOM
-  // element in an instance field (for example, this.textInput).
+    // Utilisez la fonction de rappel `ref` pour stocker la référence de l'élément DOM
+    // du champ texte dans une variable d'instance (par exemple, this.textInput).
     return (
       <input
         type="text"
@@ -191,12 +192,13 @@ class CustomTextInput extends React.Component {
 }
 ```
 
-Then we can focus it elsewhere in our component when needed:
+Nous pouvons dès lors lui donner le focus depuis n'importe où dans notre composant en cas de besoin :
 
  ```javascript
  focus() {
-   // Explicitly focus the text input using the raw DOM API
-   // Note: we're accessing "current" to get the DOM node
+   // Donner explicitement le focus au champ de saisie en
+   // utilisant l'API du DOM.
+   // Remarque : nous utilisons "current" pour accéder au nœud du DOM.
    this.textInput.current.focus();
  }
  ```

From 85cc42680fa4fde0faf22b11bb3bef7502d59c4b Mon Sep 17 00:00:00 2001
From: Romain Linsolas <linsolas@gmail.com>
Date: Mon, 18 Feb 2019 15:32:51 +0100
Subject: [PATCH 2/9] End of translation of Accessibility page

---
 content/docs/accessibility.md | 245 ++++++++++++++++------------------
 1 file changed, 114 insertions(+), 131 deletions(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 8b4ec73e3..6272216a2 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -44,7 +44,7 @@ Remarquez que tous les attributs HTML `aria-*` sont entièrement supportés dans
 Le HTML sémantique est la base de l'accessibilité dans une application web. L'utilisation des différents éléments HTML pour renforcer la signification de l'information de nos sites web offre généralement de l'accessibilité à peu de frais.
 in our websites will often give us accessibility for free.
 
-- [La référence des éléments HTML sur MDN](https://developer.mozilla.org/fr/docs/Web/HTML/Element)
+- [La référence des éléments HTML sur MDN](https://developer.mozilla.org/fr/docs/Web/HTML/Element).
 
 Il nous arrive de casser la sémantique HTML en ajoutant des balises `<div>` dans notre JSX afin de faire fonctionner notre code React, en particulier lorsque l'on travaille avec des listes (`<ol>`, `<ul>` et `<dl>`) ou la table HTML `<table>`.
 Dans ces cas-là, nous devrions plutôt utiliser les [fragments React](/docs/fragments.html) pour regrouper de multiples éléments.
@@ -115,14 +115,14 @@ Tous les contrôles de formulaire HTML, tels que `<input>` et `<textarea>`, doiv
 
 Les ressources ci-dessous nous montrent comme procéder :
 
-- [Le W3C nous montre comme étiqueter les éléments](https://www.w3.org/WAI/tutorials/forms/labels/)
-- [Le WebAIM nous montre comme étiqueter les éléments](http://webaim.org/techniques/forms/controls)
-- [Le groupe Paciello explique ce qu'est un nom accessible](https://www.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/)
+- [Le W3C nous montre comme étiqueter les éléments](https://www.w3.org/WAI/tutorials/forms/labels/).
+- [Le WebAIM nous montre comme étiqueter les éléments](http://webaim.org/techniques/forms/controls).
+- [Le groupe Paciello explique ce qu'est un nom accessible](https://www.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/).
 
 Bien que ces pratiques HTML standard soient directement utilisables dans React, il faut noter que l'attribut `for` est écrit `htmlFor` en JSX :
 
 ```javascript{1}
-<label htmlFor="namedInput">Nom :</label>
+<label htmlFor="namedInput">Nom :</label>
 <input id="namedInput" type="text" name="name"/>
 ```
 
@@ -130,14 +130,14 @@ Bien que ces pratiques HTML standard soient directement utilisables dans React,
 
 Les situations d'erreur doivent être comprises par tous les utilisateurs. Les liens ci-dessous montrent comme exposer les textes d'erreur aux lecteurs d'écran :
 
-- [Le W3C présente les notifications utilisateurs](https://www.w3.org/WAI/tutorials/forms/notifications/)
-- [Le WebAIM se penche sur les validations de formulaire](http://webaim.org/techniques/formvalidation/)
+- [Le W3C présente les notifications utilisateurs](https://www.w3.org/WAI/tutorials/forms/notifications/).
+- [Le WebAIM se penche sur les validations de formulaire](http://webaim.org/techniques/formvalidation/).
 
 ## Contrôle du focus {#focus-control}
 
 Assurez-vous que votre application web peut être complètement utilisable avec la seule utilisation du clavier :
 
-- [Le WebAIM parle de l'accessibilité depuis le clavier](http://webaim.org/techniques/keyboard/)
+- [Le WebAIM parle de l'accessibilité depuis le clavier](http://webaim.org/techniques/keyboard/).
 
 ### Focus par le clavier et mise en contour de focus {#keyboard-focus-and-focus-outline}
 
@@ -153,14 +153,13 @@ Fournissez un mécanisme permettant aux utilisateurs de sauter les sections de n
 
 Les liens de passage (*Skiplinks*) ou lien de navigation de passage sont des liens de navigation cachés qui ne sont visibles que lorsque l'utilisateur interagit au clavier avec la page. Ils sont très faciles à mettre en œuvre avec les ancres de pages internes et un peu de style :
 
-- [WebAIM - Liens de navigation de passage](http://webaim.org/techniques/skipnav/)
-
+- [WebAIM - Liens de navigation de passage](http://webaim.org/techniques/skipnav/).
 
 Utilisez également les éléments et rôles de repérage, tels que `<main>` et `<aside>`, afin de délimiter les régions de la page, car les technologies d'assistance permettent à l'utilisateur de naviguer rapidement vers ces sections.
 
 Pour en savoir plus sur l'utilisation de ces éléments améliorant l'accessibilité, rendez-vous sur :
 
-- [Repères d'accessibilité](http://www.scottohara.me/blog/2018/03/03/landmarks.html)
+- [Repères d'accessibilité](http://www.scottohara.me/blog/2018/03/03/landmarks.html).
 
 ### Gérer le focus programmatiquement {#programmatically-managing-focus}
 
@@ -196,15 +195,13 @@ Nous pouvons dès lors lui donner le focus depuis n'importe où dans notre compo
 
  ```javascript
  focus() {
-   // Donner explicitement le focus au champ de saisie en
-   // utilisant l'API du DOM.
+   // Donner explicitement le focus au champ de saisie en utilisant l'API du DOM.
    // Remarque : nous utilisons "current" pour accéder au nœud du DOM.
    this.textInput.current.focus();
  }
  ```
 
-Sometimes a parent component needs to set focus to an element in a child component. We can do this by [exposing DOM refs to parent components](/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components)
-through a special prop on the child component that forwards the parent's ref to the child's DOM node.
+Il arrive parfois qu'un composant parent ait besoin de définir le focus sur un composant enfant. Pour ce faire, nous [exposons les références DOM aux composants parents](/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components) via une propriété spéciale sur le composant enfant qui transmet la référence du parent au nœud DOM de l'enfant.
 
 ```javascript{4,12,16}
 function CustomTextInput(props) {
@@ -227,32 +224,27 @@ class Parent extends React.Component {
   }
 }
 
-// Now you can set focus when required.
+// Maintenant, vous pouvez définir le focus lorsque cela est nécessaire.
 this.inputElement.current.focus();
 ```
 
-When using a HOC to extend components, it is recommended to [forward the ref](/docs/forwarding-refs.html) to the wrapped component using the `forwardRef` function of React. If a third party HOC
-does not implement ref forwarding, the above pattern can still be used as a fallback.
+Lors de l'utilisation d'un *HOC* pour étendre des composants, il est recommandé de [transmettre la référence](/docs/forwarding-refs.html) to l'élément d'encapsulation en utilisant la fonction `forwardRef` de React. Si un *HOC* tiers n'implémente par le transfert de référence, le modèle ci-dessus peut être utilisé comme solution de secours.
 
-A great focus management example is the [react-aria-modal](https://github.com/davidtheclark/react-aria-modal). This is a relatively rare example of a fully accessible modal window. Not only does it set initial focus on
-the cancel button (preventing the keyboard user from accidentally activating the success action) and trap keyboard focus inside the modal, it also resets focus back to the element that
-initially triggered the modal.
+Un excellent exemple de la gestion du focus est le [react-aria-modal](https://github.com/davidtheclark/react-aria-modal). Il s'agit de l'un des rares exemples d'une fenêtre modale complètement accessible. Non seulement il définit le focus initial sur le bouton d'annulation (empêchant l'utilisateur du clavier d'activer accidentellement l'action de succès), restreint le focus clavier à l'intérieur de la fenêtre modale, mais réinitialise le focus sur l'élément qui a originellement déclenché la fenêtre modale.
 
->Note:
+> Remarque :
 >
->While this is a very important accessibility feature, it is also a technique that should be used judiciously. Use it to repair the keyboard focus flow when it is disturbed, not to try and anticipate how
->users want to use applications.
+> Bien qu'il s'agisse d'une caractéristique d'accessibilité très importante, c'est également une technique qui doit être utilisée à bon escient. Utilisez-la pour réparer le comportement du focus clavier lorsqu'il est perturbé, et non pour essayer d'anticiper la manière dont les utilisateurs souhaitent utiliser les applications.
 
-## Mouse and pointer events {#mouse-and-pointer-events}
+## Événements de souris et de pointeur {#mouse-and-pointer-events}
 
-Ensure that all functionality exposed through a mouse or pointer event can also be accessed using the keyboard alone. Depending only on the pointer device will lead to many cases where
-keyboard users cannot use your application.
+Assurez-vous que toutes les fonctionnalités exposées via un événement de souris ou de pointeur sont également accessibles avec le clavier seul. Ne dépendre que du pointeur peut aboutir à de nombreuses situations où les utilisateurs de clavier ne pourront pas utiliser votre application.
 
-To illustrate this, let's look at a prolific example of broken accessibility caused by click events. This is the outside click pattern, where a user can disable an opened popover by clicking outside the element.
+Pour illustrer cela, examinons un exemple prolifique où l'accessibilité est cassée par les événements de clics. Il s'agit du modèle de clic extérieur dans lequel un utilisateur peut désactiver un *popover* en cliquant à l'extérieur de l'élément.
 
-<img src="../images/docs/outerclick-with-mouse.gif" alt="A toggle button opening a popover list implemented with the click outside pattern and operated with a mouse showing that the close action works." />
+<img src="../images/docs/outerclick-with-mouse.gif" alt="Un bouton à bascule ouvrant une liste déroulante implémenté par le modèle du clic externe et déclenché par la souris montrant que l'action de fermeture fonctionne." />
 
-This is typically implemented by attaching a `click` event to the `window` object that closes the popover:
+Cela est généralement implémenté en attachant l'événement `click` à l'objet `window` qui ferme le *popover* :
 
 ```javascript{12-14,26-30}
 class OuterClickExample extends React.Component {
@@ -289,7 +281,7 @@ constructor(props) {
   render() {
     return (
       <div ref={this.toggleContainer}>
-        <button onClick={this.onClickHandler}>Select an option</button>
+        <button onClick={this.onClickHandler}>Choisissez une option</button>
         {this.state.isOpen ? (
           <ul>
             <li>Option 1</li>
@@ -303,12 +295,11 @@ constructor(props) {
 }
 ```
 
-This may work fine for users with pointer devices, such as a mouse, but operating this with the keyboard alone leads to broken functionality when tabbing to the next element
-as the `window` object never receives a `click` event. This can lead to obscured functionality which blocks users from using your application.
+Cela peut fonctionner pour les utilisateurs disposant de dispositifs de pointage, tels qu'une souris, mais le fait de n'utiliser que le clavier seul entraîne des dysfonctionnements lors de la tabulation sur l'élément suivant, car l'objet `window` ne reçoit jamais d'événement `click`. Cela peut entraîner une fonctionnalité masquée qui empêche les utilisateurs d'utiliser votre application.
 
-<img src="../images/docs/outerclick-with-keyboard.gif" alt="A toggle button opening a popover list implemented with the click outside pattern and operated with the keyboard showing the popover not being closed on blur and it obscuring other screen elements." />
+<img src="../images/docs/outerclick-with-keyboard.gif" alt="Un bouton à bascule ouvrant une liste déroulante implémenté par le modèle du clic externe et déclenché par le clavier montrant que le popover ne se ferme pas au blur et qu'il masque d'autre éléments de l'écran." />
 
-The same functionality can be achieved by using an appropriate event handlers instead, such as `onBlur` and `onFocus`:
+La même fonctionnalité peut être obtenue en utilisant les gestionnaires d'événements appropriés, tels que `onBlur` et `onFocus` :
 
 ```javascript{19-29,31-34,37-38,40-41}
 class BlurExample extends React.Component {
@@ -329,10 +320,10 @@ class BlurExample extends React.Component {
     }));
   }
 
-  // We close the popover on the next tick by using setTimeout.
-  // This is necessary because we need to first check if
-  // another child of the element has received focus as
-  // the blur event fires prior to the new focus event.
+  // Nous fermons le popover au prochain tick en utilisant setTimeout.
+  // Cela est nécessaire car nous devons d'abord vérifier si un
+  // autre enfant de l'élément a reçu le focus lorsque l'élément
+  // `blur` se déclenche avant le nouvel événement de focus.
   onBlurHandler() {
     this.timeOutId = setTimeout(() => {
       this.setState({
@@ -341,21 +332,21 @@ class BlurExample extends React.Component {
     });
   }
 
-  // If a child receives focus, do not close the popover.
+  // Si un enfant reçoit le focus, alors on ne ferme pas le popover.
   onFocusHandler() {
     clearTimeout(this.timeOutId);
   }
 
   render() {
-    // React assists us by bubbling the blur and
-    // focus events to the parent.
+    // React nous aide en diffusant les événements `blur` et
+    // `focus` au parent.
     return (
       <div onBlur={this.onBlurHandler}
            onFocus={this.onFocusHandler}>
         <button onClick={this.onClickHandler}
                 aria-haspopup="true"
                 aria-expanded={this.state.isOpen}>
-          Select an option
+          Choisissez une option
         </button>
         {this.state.isOpen ? (
           <ul>
@@ -370,86 +361,80 @@ class BlurExample extends React.Component {
 }
 ```
 
-This code exposes the functionality to both pointer device and keyboard users. Also note the added `aria-*` props to support screen-reader users. For simplicity's sake
-the keyboard events to enable `arrow key` interaction of the popover options have not been implemented.
+Ce code expose la fonctionnalité aussi bien aux utilisateurs de dispositifs de pointage qu'aux utilisateurs de clavier. Remarquez également les propriétés ajoutées `aria-*` afin de supporter les lecteurs d'écran. Par souci de simplicité, les événements clavier permettant l'interaction avec les options du popover via les touches de direction n'ont pas été implémentés.
 
-<img src="../images/docs/blur-popover-close.gif" alt="A popover list correctly closing for both mouse and keyboard users." />
+<img src="../images/docs/blur-popover-close.gif" alt="Une liste déroulante se fermant correctement pour les utilisateurs de souris et de clavier." />
 
-This is one example of many cases where depending on only pointer and mouse events will break functionality for keyboard users. Always testing with the keyboard will immediately
-highlight the problem areas which can then be fixed by using keyboard aware event handlers.
+C'est un exemple des nombreux cas où, le fait de ne dépendre que des événements de souris et de pointeur casse les fonctionnalités pour les utilisateurs de clavier. Toujours tester avec le clavier mettra immédiatement en évidence les problèmes qui peuvent ensuite être résolus grâce à l'aide des gestionnaires d'événement clavier.
 
-## More Complex Widgets {#more-complex-widgets}
+## Widgets plus complexes {#more-complex-widgets}
 
-A more complex user experience should not mean a less accessible one. Whereas accessibility is most easily achieved by coding as close to HTML as possible,
-even the most complex widget can be coded accessibly.
+Une expérience utilisateur plus complexe ne doit pas signifier une expérience moins accessible. Alors que l'accessibilité est plus facile à réaliser en codant le plus près possible du HTML, même les widgets les plus complexes peuvent être codés de manière accessible.
 
-Here we require knowledge of [ARIA Roles](https://www.w3.org/TR/wai-aria/#roles) as well as [ARIA States and Properties](https://www.w3.org/TR/wai-aria/#states_and_properties).
-These are toolboxes filled with HTML attributes that are fully supported in JSX and enable us to construct fully accessible, highly functional React components.
+Nous avons besoin ici de connaître les [rôles ARIA](https://www.w3.org/TR/wai-aria/#roles), ainsi que les [états et propriétés ARIA](https://www.w3.org/TR/wai-aria/#states_and_properties).
+Ce sont des boîtes à outils pleines d'attributs HTML pris en charge dans le JSX et qui nous permettent de construire des composants React entièrement accessibles et hautement fonctionnels.
 
-Each type of widget has a specific design pattern and is expected to function in a certain way by users and user agents alike:
+Chaque type de widget à son modèle de design spécifique et devrait fonctionner de la même manière avec les utilisateurs et avec les agents :
 
-- [WAI-ARIA Authoring Practices - Design Patterns and Widgets](https://www.w3.org/TR/wai-aria-practices/#aria_ex)
-- [Heydon Pickering - ARIA Examples](http://heydonworks.com/practical_aria_examples/)
-- [Inclusive Components](https://inclusive-components.design/)
+- [Pratique de création WAI-ARIA - Modèles de design et widgets](https://www.w3.org/TR/wai-aria-practices/#aria_ex) (*WIA* signifie *Web Accessibility Initiative* - NdT).
+- [Heydon Pickering - Exemples ARIA](http://heydonworks.com/practical_aria_examples/).
+- [Composants inclusifs](https://inclusive-components.design/).
 
-## Other Points for Consideration {#other-points-for-consideration}
+## Autres points de considération {#other-points-for-consideration}
 
-### Setting the language {#setting-the-language}
+### Définir la langue {#setting-the-language}
 
-Indicate the human language of page texts as screen reader software uses this to select the correct voice settings:
+Indiquez la langue des pages de texte de façon à ce que les logiciels de lecture d'écran puissent sélectionner les paramètres de voix appropriés :
 
-- [WebAIM - Document Language](http://webaim.org/techniques/screenreader/#language)
+- [WebAIM - Document sur les langues](http://webaim.org/techniques/screenreader/#language).
 
-### Setting the document title {#setting-the-document-title}
+### Définir le titre du document {#setting-the-document-title}
 
-Set the document `<title>` to correctly describe the current page content as this ensures that the user remains aware of the current page context:
+Définissez la balise `<title>` du document pour décrire correctement le contenu de la page courante, afin de garantir que l'utilisateur soit au courant du contexte de la page en cours :
 
-- [WCAG - Understanding the Document Title Requirement](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html)
+- [WCAG - Comprendre l'exigence du titre du document](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html).
 
-We can set this in React using the [React Document Title Component](https://github.com/gaearon/react-document-title).
+Nous pouvons le définir dans React en utilisant le [composant React Document Title](https://github.com/gaearon/react-document-title).
 
-### Color contrast {#color-contrast}
+### Contraste de couleur {#color-contrast}
 
-Ensure that all readable text on your website has sufficient color contrast to remain maximally readable by users with low vision:
+Assurez-vous que tous les textes lisibles sur votre site web ont un contraste de couleur suffisant pour rester lisibles de manière optimale par les utilisateurs malvoyants :
 
-- [WCAG - Understanding the Color Contrast Requirement](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
-- [Everything About Color Contrast And Why You Should Rethink It](https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/)
-- [A11yProject - What is Color Contrast](http://a11yproject.com/posts/what-is-color-contrast/)
+- [WCAG - Comprendre l'exigence du contraste de couleur](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html).
+- [Tout sur le contraste de couleur et pourquoi vous devez le repenser](https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/).
+- [A11yProject - Qu'est-ce qu'un contraste de couleur ?](http://a11yproject.com/posts/what-is-color-contrast/).
 
-It can be tedious to manually calculate the proper color combinations for all cases in your website so instead, you can [calculate an entire accessible color palette with Colorable](http://jxnblk.com/colorable/).
+Il peut être fastidieux de calculer manuellement les combinaisons de couleurs appropriées pour toutes les situations de votre site web, aussi vous est-il possible de [calculer toute une palette de couleurs accessible avec Colorable](http://jxnblk.com/colorable/).
 
-Both the aXe and WAVE tools mentioned below also include color contrast tests and will report on contrast errors.
+Les outils aXe et WAVE mentionnés ci-dessous incluent également des tests de contraste de couleur et signlent les erreurs de contraste.
 
-If you want to extend your contrast testing abilities you can use these tools:
+Si vous souhaitez étendre vos capacités de test de contraste, vous pouvez utiliser ces outils :
 
-- [WebAIM - Color Contrast Checker](http://webaim.org/resources/contrastchecker/)
-- [The Paciello Group - Color Contrast Analyzer](https://www.paciellogroup.com/resources/contrastanalyser/)
+- [WebAIM - Vérification de contraste de couleur](http://webaim.org/resources/contrastchecker/)
+- [The Paciello Group - Analyseur de contraste de couleur](https://www.paciellogroup.com/resources/contrastanalyser/)
 
-## Development and Testing Tools {#development-and-testing-tools}
+## Développement et outils de test {#development-and-testing-tools}
 
-There are a number of tools we can use to assist in the creation of accessible web applications.
+Il existe de nombreux outils pour nous pouvons utiliser pour nous assister durant la création d'applications web accessibles.
 
-### The keyboard {#the-keyboard}
+### Le clavier {#the-keyboard}
 
-By far the easiest and also one of the most important checks is to test if your entire website can be reached and used with the keyboard alone. Do this by:
+De loin la plus simple mais aussi l'une des plus importante vérification à faire est de tester si l'ensemble de votre site web peut être accessible et utilisables avec le clavier seul. Procédez ainsi :
 
-1. Plugging out your mouse.
-1. Using `Tab` and `Shift+Tab` to browse.
-1. Using `Enter` to activate elements.
-1. Where required, using your keyboard arrow keys to interact with some elements, such as menus and dropdowns.
+1. Débranchez votre souris.
+1. Utilisez `Tab` et `Shift+Tab` pour naviguer.
+1. Utilisez `Enter` pour activer des éléments.
+1. Le cas échéant, utilisez les touches de direction du clavier pour interagir avec certains éléments, tels que les menus et les menus déroulants.
 
-### Development assistance {#development-assistance}
+### Assistance au développement {#development-assistance}
 
-We can check some accessibility features directly in our JSX code. Often intellisense checks are already provided in JSX aware IDE's for the ARIA roles, states and properties. We also
-have access to the following tool:
+Nous pouvons tester certaines fonctionnalités d'accessibilités directement dans notre code JSX. Souvent des contrôles intellisense sont déjà présents dans les IDE pour prenant en charge les rôles, états et propriétés ARIA. Nous avons également accès à l'outil suivant :
 
 #### eslint-plugin-jsx-a11y {#eslint-plugin-jsx-a11y}
 
-The [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y) plugin for ESLint provides AST linting feedback regarding accessibility issues in your JSX. Many
-IDE's allow you to integrate these findings directly into code analysis and source code windows.
+L'extension [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y) pour ESLint fournit des informations sur l'AST concernant les problèmes d'accessibilité dans votre JSX. De nombreux IDE vous permettent d'intégrer ces résultats directement dans des fenêtres d'analyse de code ou de code source.
 
-[Create React App](https://github.com/facebookincubator/create-react-app) has this plugin with a subset of rules activated. If you want to enable even more accessibility rules,
-you can create an `.eslintrc` file in the root of your project with this content:
+[Create React App](https://github.com/facebookincubator/create-react-app) dispose de cette extension avec un sous-ensemble de règles activées. Si vous souhaitez activer encore plus de règles d'accessibilité, vous pouvez créer un fichier `.eslintrc` à la racine de votre projet avec ce contenu :
 
   ```json
   {
@@ -458,77 +443,75 @@ you can create an `.eslintrc` file in the root of your project with this content
   }
   ```
 
-### Testing accessibility in the browser {#testing-accessibility-in-the-browser}
+### Tester l'accessibilité dans le navigateur {#testing-accessibility-in-the-browser}
 
-A number of tools exist that can run accessibility audits on web pages in your browser. Please use them in combination with other accessibility checks mentioned here as they can only
-test the technical accessibility of your HTML.
+Il existe un certain nombres d'outils pouvant exécuter des audits d'accessibilité sur des pages web dans votre navigateur. Veuillez les utiliser conjointement avec d'autres contrôles d'accessibilité mentionnés ici car ils ne peuvent que tester l'accessibilité technique de votre HTML.
 
-#### aXe, aXe-core and react-axe {#axe-axe-core-and-react-axe}
+#### aXe, aXe-core et react-axe {#axe-axe-core-and-react-axe}
 
-Deque Systems offers [aXe-core](https://github.com/dequelabs/axe-core) for automated and end-to-end accessibility tests of your applications. This module includes integrations for Selenium.
+Deque Systems offre [aXe-core](https://github.com/dequelabs/axe-core) pour automatiser les tests d'accessibilité de bout en bout de vos applications. Ce module comprend des intégrations pour Selenium.
 
-[The Accessibility Engine](https://www.deque.com/products/axe/) or aXe, is an accessibility inspector browser extension built on `aXe-core`.
+[Le moteur d'accessibilité](https://www.deque.com/products/axe/) ou aXe, est une extension du navigateur d'inspection de l'accessibilité construite sur `aXe-core`.
 
-You can also use the [react-axe](https://github.com/dylanb/react-axe) module to report these accessibility findings directly to the console while developing and debugging.
+Vous pouvez aussi utiliser le module [react-axe](https://github.com/dylanb/react-axe) pour signaler directement ces résultats d'accessibilité dans la console during le développement et le déboguage.
 
 #### WebAIM WAVE {#webaim-wave}
 
-The [Web Accessibility Evaluation Tool](http://wave.webaim.org/extension/) is another accessibility browser extension.
+L'[outil Web Accessibility Evaluation](http://wave.webaim.org/extension/) est une autre extension du navigateur pour l'accessibilité.
 
-#### Accessibility inspectors and the Accessibility Tree {#accessibility-inspectors-and-the-accessibility-tree}
+#### Inspecteurs d'accessibilité et arbre d'accessibilité {#accessibility-inspectors-and-the-accessibility-tree}
 
-[The Accessibility Tree](https://www.paciellogroup.com/blog/2015/01/the-browser-accessibility-tree/) is a subset of the DOM tree that contains accessible objects for every DOM element that should be exposed
-to assistive technology, such as screen readers.
+[L'arbre d'accessibilité](https://www.paciellogroup.com/blog/2015/01/the-browser-accessibility-tree/) est un sous-ensemble de l'arbre DOM qui contient des objects accessibles pour chaque élément du DOM devant être exposé aux technologies d'assistance, telles que les lecteurs d'écrans.
 
-In some browsers we can easily view the accessibility information for each element in the accessibility tree:
+Sur certains navigateurs, nous pouvons facilement consulter les informations d'accessibilité pour chaque élément de l'arbre d'accessibilité :
 
-- [Using the Accessibility Inspector in Firefox](https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector)
-- [Activate the Accessibility Inspector in Chrome](https://gist.github.com/marcysutton/0a42f815878c159517a55e6652e3b23a)
-- [Using the Accessibility Inspector in OS X Safari](https://developer.apple.com/library/content/documentation/Accessibility/Conceptual/AccessibilityMacOSX/OSXAXTestingApps.html)
+- [En utilisant l'inspecteur d'accessibilité de Firefox](https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector).
+- [En activant l'inspecteur d'accessibilité de Chrome](https://gist.github.com/marcysutton/0a42f815878c159517a55e6652e3b23a).
+- [En utilisant l'inspecteur d'accessibilité d'OS X Safari](https://developer.apple.com/library/content/documentation/Accessibility/Conceptual/AccessibilityMacOSX/OSXAXTestingApps.html).
 
-### Screen readers {#screen-readers}
+### Lecteurs d'écran {#screen-readers}
 
-Testing with a screen reader should form part of your accessibility tests.
+Tester avec un lecteur d'écran devrait faire partie de vos tests d'accessibilité.
 
-Please note that browser / screen reader combinations matter. It is recommended that you test your application in the browser best suited to your screen reader of choice.
+Veuillez noter que les combinaisons navigateur / lecteur d'écran ont leur importance. Il est recommandé de tester votre application dans le navigateur le plus adapté au lecteur d'écran de votre choix.
 
-### Commonly Used Screen Readers {#commonly-used-screen-readers}
+### Lecteurs d'écran utilisés fréquemment {#commonly-used-screen-readers}
 
-#### NVDA in Firefox {#nvda-in-firefox}
+#### NVDA dans Firefox {#nvda-in-firefox}
 
-[NonVisual Desktop Access](https://www.nvaccess.org/) or NVDA is an open source Windows screen reader that is widely used.
+[*NonVisual Desktop Access*](https://www.nvaccess.org/) ou NVDA est un lecteur d'écran open source qui est largement utilisé.
 
-Refer to the following guides on how to best use NVDA:
+Reportez-vous aux guides suivants pour savoir comment utiliser au mieux NVDA :
 
-- [WebAIM - Using NVDA to Evaluate Web Accessibility](http://webaim.org/articles/nvda/)
-- [Deque - NVDA Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts)
+- [WebAIM - Utiliser NVDA pour évaluer l'accessibilité web](http://webaim.org/articles/nvda/).
+- [Deque - Raccourcis clavier NVDA](https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts).
 
-#### VoiceOver in Safari {#voiceover-in-safari}
+#### VoiceOver dans Safari {#voiceover-in-safari}
 
-VoiceOver is an integrated screen reader on Apple devices.
+VoiceOver est un lecteur d'écrans intégrer dans les dispositifs d'Apple.
 
-Refer to the following guides on how activate and use VoiceOver:
+Reportez-vous aux guides suivants pour savoir comment activer et utiliser VoiceOver :
 
-- [WebAIM - Using VoiceOver to Evaluate Web Accessibility](http://webaim.org/articles/voiceover/)
-- [Deque - VoiceOver for OS X Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts)
-- [Deque - VoiceOver for iOS Shortcuts](https://dequeuniversity.com/screenreaders/voiceover-ios-shortcuts)
+- [WebAIM - Utiliser VoiceOver pour évaluer l'accessibilité web](http://webaim.org/articles/voiceover/).
+- [Deque - Raccourcis clavier pour VoiceOver sur OS X](https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts).
+- [Deque - Raccourcis pour VoiceOver sur iOS](https://dequeuniversity.com/screenreaders/voiceover-ios-shortcuts).
 
-#### JAWS in Internet Explorer {#jaws-in-internet-explorer}
+#### JAWS dans Internet Explorer {#jaws-in-internet-explorer}
 
-[Job Access With Speech](http://www.freedomscientific.com/Products/Blindness/JAWS) or JAWS, is a prolifically used screen reader on Windows.
+[*Job Access With Speech*](http://www.freedomscientific.com/Products/Blindness/JAWS) ou JAWS, est un lecteur d'écran utilisé de manière prolifique sur Windows.
 
-Refer to the following guides on how to best use JAWS:
+Reportez-vous aux guides suivants pour utiliser au mieux JAWS :
 
-- [WebAIM - Using JAWS to Evaluate Web Accessibility](http://webaim.org/articles/jaws/)
-- [Deque - JAWS Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/jaws-keyboard-shortcuts)
+- [WebAIM - Utiliser JAWS pour évaluer l'accessibilité web](http://webaim.org/articles/jaws/).
+- [Deque - Raccourcis clavier pour JAWS](https://dequeuniversity.com/screenreaders/jaws-keyboard-shortcuts)
 
-### Other Screen Readers {#other-screen-readers}
+### Autres lecteurs d'écran {#other-screen-readers}
 
-#### ChromeVox in Google Chrome {#chromevox-in-google-chrome}
+#### ChromeVox dans Google Chrome {#chromevox-in-google-chrome}
 
-[ChromeVox](http://www.chromevox.com/) is an integrated screen reader on Chromebooks and is available [as an extension](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en) for Google Chrome.
+[ChromeVox](http://www.chromevox.com/) est un lecteur d'écran intégré aux Chromebooks et est disponible [en tant qu'extension](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?hl=fr) à Google Chrome.
 
-Refer to the following guides on how best to use ChromeVox:
+Reportez-vous aux guides suivants pour utiliser au mieux ChromeVox :
 
-- [Google Chromebook Help - Use the Built-in Screen Reader](https://support.google.com/chromebook/answer/7031755?hl=en)
-- [ChromeVox Classic Keyboard Shortcuts Reference](http://www.chromevox.com/keyboard_shortcuts.html)
+- [Aide de Google Chromebook - Utiliser le lecteur d'écran intégré](https://support.google.com/chromebook/answer/7031755?hl=en)
+- [Références des raccourcis clavier pour ChromeVox Classic](http://www.chromevox.com/keyboard_shortcuts.html)

From 82eab27731911abf1bfa280709309e2320a46285 Mon Sep 17 00:00:00 2001
From: linsolas <linsolas@gmail.com>
Date: Tue, 19 Feb 2019 13:31:02 +0100
Subject: [PATCH 3/9] Personal review on Accessibility translation

---
 content/docs/accessibility.md | 115 +++++++++++++++++-----------------
 1 file changed, 57 insertions(+), 58 deletions(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 6272216a2..5cdd4c775 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -14,9 +14,9 @@ React prend totalement en charge la création de sites web accessibles, en s'app
 
 ### WCAG {#wcag}
 
-Les [instructions du *Web Content Accessibility*](https://www.w3.org/WAI/intro/wcag) proposent les lignes directrices pour créer des sites web accessibles.
+Les [directives pour l'accessibilité au contenu web (*Web Content Accessibility Guidelines*)](https://www.w3.org/WAI/intro/wcag) proposent les lignes directrices pour créer des sites web accessibles.
 
-La liste du WCAG ci-dessous fournissent un aperçu :
+Les listes de contrôle du WCAG ci-dessous en fournissent un aperçu :
 
 - [La liste de contrôle WCAG de Wuhcag](https://www.wuhcag.com/wcag-checklist/).
 - [La liste de contrôle WCAG de WebAIM](http://webaim.org/standards/wcag/checklist).
@@ -24,9 +24,9 @@ La liste du WCAG ci-dessous fournissent un aperçu :
 
 ### WAI-ARIA {#wai-aria}
 
-Le document sur [l'initiative d'accessibilité du Web - *Accessible Rich Internet Applications*](https://www.w3.org/WAI/intro/aria) contient les techniques nécessaires à la création de *widgets* JavaScript complètement accessibles.
+Le document sur [l'initiative d'accessibilité du Web - *Accessible Rich Internet Applications*](https://www.w3.org/WAI/intro/aria) contient les techniques nécessaires à la création de widgets JavaScript complètement accessibles.
 
-Remarquez que tous les attributs HTML `aria-*` sont entièrement supportés dans le JSX. Là où la plupart des propriétés DOM en React utilisent le format « camelCase », ces attributs doivent utiliser la casse par tirets (« *hyphen-case* », aussi appelée « *kebab-case* », « *lisp-case* », etc.), comme ils le sont en HTML simple :
+Remarquez que tous les attributs HTML `aria-*` sont supportés dans le JSX. Là où la plupart des propriétés DOM en React utilisent le format « *camelCase* », ces attributs doivent utiliser la casse par tirets (« *hyphen-case* », aussi appelée « *kebab-case* », « *lisp-case* », etc.), comme ils le sont en HTML simple :
 
 ```javascript{3,4}
 <input
@@ -42,11 +42,10 @@ Remarquez que tous les attributs HTML `aria-*` sont entièrement supportés dans
 ## HTML sémantique {#semantic-html}
 
 Le HTML sémantique est la base de l'accessibilité dans une application web. L'utilisation des différents éléments HTML pour renforcer la signification de l'information de nos sites web offre généralement de l'accessibilité à peu de frais.
-in our websites will often give us accessibility for free.
 
 - [La référence des éléments HTML sur MDN](https://developer.mozilla.org/fr/docs/Web/HTML/Element).
 
-Il nous arrive de casser la sémantique HTML en ajoutant des balises `<div>` dans notre JSX afin de faire fonctionner notre code React, en particulier lorsque l'on travaille avec des listes (`<ol>`, `<ul>` et `<dl>`) ou la table HTML `<table>`.
+Il nous arrive de casser la sémantique HTML en ajoutant des balises `<div>` dans notre JSX afin de faire fonctionner notre code React, en particulier lorsque l'on travaille avec des listes (`<ol>`, `<ul>` et `<dl>`) ou le tableau HTML `<table>`.
 Dans ces cas-là, nous devrions plutôt utiliser les [fragments React](/docs/fragments.html) pour regrouper de multiples éléments.
 
 Par exemple,
@@ -74,14 +73,14 @@ function Glossary(props) {
 }
 ```
 
-Vous pouvez représenter une liste d'éléments en un tableau de fragments, comme vous pourriez également le faire pour tout autre type d'élément :
+Vous pouvez représenter une liste d'éléments en un tableau de fragments, comme vous le feriez avec tout autre type d'élément :
 
 ```javascript{6,9}
 function Glossary(props) {
   return (
     <dl>
       {props.items.map(item => (
-        // Les fragments doivent aussi disposer de la propriété `key` lors de l'itération sur les listes
+        // Les fragments doivent aussi disposer de la propriété `key` lors de l'itération sur les listes.
         <Fragment key={item.id}>
           <dt>{item.term}</dt>
           <dd>{item.description}</dd>
@@ -92,7 +91,7 @@ function Glossary(props) {
 }
 ```
 
-Lorsque vous n'avez besoin d'aucune propriété sur les balises fragments, vous pouvez utiliser la [syntaxe courte](/docs/fragments.html#short-syntax), lorsque votre outillage le supporte :
+Lorsque vous n'avez pas besoin de définir de propriété sur la balise fragment, vous pouvez utiliser la [syntaxe courte](/docs/fragments.html#short-syntax), lorsque votre outillage le supporte :
 
 ```javascript{3,6}
 function ListItem({ item }) {
@@ -130,26 +129,26 @@ Bien que ces pratiques HTML standard soient directement utilisables dans React,
 
 Les situations d'erreur doivent être comprises par tous les utilisateurs. Les liens ci-dessous montrent comme exposer les textes d'erreur aux lecteurs d'écran :
 
-- [Le W3C présente les notifications utilisateurs](https://www.w3.org/WAI/tutorials/forms/notifications/).
-- [Le WebAIM se penche sur les validations de formulaire](http://webaim.org/techniques/formvalidation/).
+- [Le W3C présente les notifications utilisateur](https://www.w3.org/WAI/tutorials/forms/notifications/).
+- [Le WebAIM se penche sur la validation de formulaire](http://webaim.org/techniques/formvalidation/).
 
 ## Contrôle du focus {#focus-control}
 
-Assurez-vous que votre application web peut être complètement utilisable avec la seule utilisation du clavier :
+Assurez-vous que votre application web peut être complètement utilisable avec le clavier seul :
 
 - [Le WebAIM parle de l'accessibilité depuis le clavier](http://webaim.org/techniques/keyboard/).
 
-### Focus par le clavier et mise en contour de focus {#keyboard-focus-and-focus-outline}
+### Focus par le clavier et contour de focus {#keyboard-focus-and-focus-outline}
 
-Le focus par le clavier fait référence à l'élément courant dans le DOM qui est sélectionné pour accepter les saisies du clavier. Nous le voyons partout comme une mise en contour telle que cela est montré sur l'image ci-dessous :
+Le focus par le clavier fait référence à l'élément courant dans le DOM qui est sélectionné pour accepter les saisies au clavier. Nous le voyons partout comme un contour tel que cela est montré sur l'image ci-dessous :
 
 <img src="../images/docs/keyboard-focus.png" alt="Le contour bleu du focus clavier autour d'un lien sélectionné" />
 
-N'utilisez le CSS qui retire ce contour, par exemple en définissant `outline: 0`, uniquement si vous le remplacez par une autre implémentation de contour de focus.
+N'utilisez que le CSS qui retire ce contour, par exemple en définissant `outline: 0`, si vous le remplacez par une autre implémentation de contour de focus.
 
 ### Mécanismes pour sauter au contenu désiré {#mechanisms-to-skip-to-desired-content}
 
-Fournissez un mécanisme permettant aux utilisateurs de sauter les sections de navigation précédentes de votre application, car cela facilite et accélère la navigation au clavier.
+Fournissez un mécanisme permettant aux utilisateurs de sauter les sections antérieures de navigation sur votre application, car cela facilite et accélère la navigation au clavier.
 
 Les liens de passage (*Skiplinks*) ou lien de navigation de passage sont des liens de navigation cachés qui ne sont visibles que lorsque l'utilisateur interagit au clavier avec la page. Ils sont très faciles à mettre en œuvre avec les ancres de pages internes et un peu de style :
 
@@ -163,24 +162,24 @@ Pour en savoir plus sur l'utilisation de ces éléments améliorant l'accessibil
 
 ### Gérer le focus programmatiquement {#programmatically-managing-focus}
 
-Nos applications React modifient en continu le DOM HTML au cours de l'exécution, ce qui entraîne parfois la perte du focus du clavier ou le positionne surun élément inattendu. Afin de réparer cela, nous devons déplacer le focus claiver programmatiquement dans la bonne direction. Par exemple, en redonnant le focus clavier à un bouton ouvrant une fenêtre modale, lorsque cette dernière se ferme.
+Nos applications React modifient en continu le DOM HTML au cours de l'exécution, ce qui entraîne parfois la perte du focus du clavier ou le positionne sur un élément inattendu. Pour corriger cela, nous devons déplacer le focus clavier programmatiquement dans la bonne direction. En redonnant par exemple le focus clavier à un bouton ouvrant une fenêtre modale, lorsque cette dernière se ferme.
 
-La documentation web de MDN donne un aperçu à cela, et décrit comment nous pouvons construire [des widgets JavaScript permettant la navigation au clavier](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets).
+La documentation web de MDN donne un aperçu de cela, et décrit comment nous pouvons construire [des widgets JavaScript permettant la navigation au clavier](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets).
 
 Afin de définir le focus en React, nous pouvons utiliser les [références (*Ref*) aux éléments du DOM](/docs/refs-and-the-dom.html).
 
-En utilisant cela, nous créons d'abord une référence à un élément du JSX de la classe composant :
+En utilisant cela, nous créons d'abord une référence à un élément du JSX de la classe du composant :
 
 ```javascript{4-5,8-9,13}
 class CustomTextInput extends React.Component {
   constructor(props) {
     super(props);
-    // Création d'une référence pour conserver l'élément textInput du DOM
+    // Créez une référence pour conserver l'élément textInput du DOM.
     this.textInput = React.createRef();
   }
   render() {
     // Utilisez la fonction de rappel `ref` pour stocker la référence de l'élément DOM
-    // du champ texte dans une variable d'instance (par exemple, this.textInput).
+    // du champ texte dans une variable d'instance (par exemple this.textInput).
     return (
       <input
         type="text"
@@ -191,11 +190,11 @@ class CustomTextInput extends React.Component {
 }
 ```
 
-Nous pouvons dès lors lui donner le focus depuis n'importe où dans notre composant en cas de besoin :
+Ensuite, nous pouvons lui donner le focus depuis n'importe où dans notre composant en cas de besoin :
 
  ```javascript
  focus() {
-   // Donner explicitement le focus au champ de saisie en utilisant l'API du DOM.
+   // Donnez explicitement le focus au champ de saisie en utilisant l'API du DOM.
    // Remarque : nous utilisons "current" pour accéder au nœud du DOM.
    this.textInput.current.focus();
  }
@@ -228,23 +227,23 @@ class Parent extends React.Component {
 this.inputElement.current.focus();
 ```
 
-Lors de l'utilisation d'un *HOC* pour étendre des composants, il est recommandé de [transmettre la référence](/docs/forwarding-refs.html) to l'élément d'encapsulation en utilisant la fonction `forwardRef` de React. Si un *HOC* tiers n'implémente par le transfert de référence, le modèle ci-dessus peut être utilisé comme solution de secours.
+Lors de l'utilisation d'un *HOC* pour étendre des composants, il est recommandé de [transmettre la référence](/docs/forwarding-refs.html) de l'élément d'encapsulation en utilisant la fonction `forwardRef` de React. Si un *HOC* tiers n'implémente par le transfert de référence, le modèle ci-dessus peut être utilisé comme solution de secours.
 
-Un excellent exemple de la gestion du focus est le [react-aria-modal](https://github.com/davidtheclark/react-aria-modal). Il s'agit de l'un des rares exemples d'une fenêtre modale complètement accessible. Non seulement il définit le focus initial sur le bouton d'annulation (empêchant l'utilisateur du clavier d'activer accidentellement l'action de succès), restreint le focus clavier à l'intérieur de la fenêtre modale, mais réinitialise le focus sur l'élément qui a originellement déclenché la fenêtre modale.
+Un excellent exemple de la gestion du focus est le composant [react-aria-modal](https://github.com/davidtheclark/react-aria-modal). Il s'agit de l'un des rares exemples d'une fenêtre modale complètement accessible. Non seulement il définit le focus initial sur le bouton d'annulation (empêchant l'utilisateur du clavier d'activer accidentellement l'action de succès), il restreint le focus clavier à l'intérieur de la fenêtre modale, et il réinitialise enfin le focus sur l'élément qui a originellement déclenché la fenêtre modale.
 
 > Remarque :
 >
-> Bien qu'il s'agisse d'une caractéristique d'accessibilité très importante, c'est également une technique qui doit être utilisée à bon escient. Utilisez-la pour réparer le comportement du focus clavier lorsqu'il est perturbé, et non pour essayer d'anticiper la manière dont les utilisateurs souhaitent utiliser les applications.
+> Bien qu'il s'agisse d'une caractéristique d'accessibilité très importante, c'est également une technique qui doit être utilisée à bon escient. Utilisez-la pour corriger le comportement du focus clavier lorsqu'il est perturbé, et non pour essayer d'anticiper la manière dont les utilisateurs souhaitent utiliser les applications.
 
 ## Événements de souris et de pointeur {#mouse-and-pointer-events}
 
 Assurez-vous que toutes les fonctionnalités exposées via un événement de souris ou de pointeur sont également accessibles avec le clavier seul. Ne dépendre que du pointeur peut aboutir à de nombreuses situations où les utilisateurs de clavier ne pourront pas utiliser votre application.
 
-Pour illustrer cela, examinons un exemple prolifique où l'accessibilité est cassée par les événements de clics. Il s'agit du modèle de clic extérieur dans lequel un utilisateur peut désactiver un *popover* en cliquant à l'extérieur de l'élément.
+Pour illustrer cela, examinons un exemple prolifique où l'accessibilité est cassée par les événements de clics. Il s'agit du modèle de clic extérieur dans lequel un utilisateur peut désactiver un menu déroulant en cliquant à l'extérieur de l'élément.
 
-<img src="../images/docs/outerclick-with-mouse.gif" alt="Un bouton à bascule ouvrant une liste déroulante implémenté par le modèle du clic externe et déclenché par la souris montrant que l'action de fermeture fonctionne." />
+<img src="../images/docs/outerclick-with-mouse.gif" alt="Un bouton ouvrant une liste déroulante implémenté par le modèle du clic externe et déclenché par la souris montrant que l'action de fermeture fonctionne." />
 
-Cela est généralement implémenté en attachant l'événement `click` à l'objet `window` qui ferme le *popover* :
+Cela est généralement développé en attachant l'événement `click` à l'objet `window` qui ferme le menu déroulant :
 
 ```javascript{12-14,26-30}
 class OuterClickExample extends React.Component {
@@ -295,9 +294,9 @@ constructor(props) {
 }
 ```
 
-Cela peut fonctionner pour les utilisateurs disposant de dispositifs de pointage, tels qu'une souris, mais le fait de n'utiliser que le clavier seul entraîne des dysfonctionnements lors de la tabulation sur l'élément suivant, car l'objet `window` ne reçoit jamais d'événement `click`. Cela peut entraîner une fonctionnalité masquée qui empêche les utilisateurs d'utiliser votre application.
+Cela peut fonctionner pour les utilisateurs ayant des dispositifs de pointage, tels qu'une souris, mais le fait de n'utiliser que le clavier entraîne des dysfonctionnements lors de la tabulation sur l'élément suivant, car l'objet `window` ne reçoit jamais d'événement `click`. Cela peut entraîner une fonctionnalité cachée qui empêche les utilisateurs d'utiliser votre application.
 
-<img src="../images/docs/outerclick-with-keyboard.gif" alt="Un bouton à bascule ouvrant une liste déroulante implémenté par le modèle du clic externe et déclenché par le clavier montrant que le popover ne se ferme pas au blur et qu'il masque d'autre éléments de l'écran." />
+<img src="../images/docs/outerclick-with-keyboard.gif" alt="Un bouton ouvrant une liste déroulante implémenté par le modèle du clic externe et déclenché par le clavier montrant que le menu déroulant ne se ferme pas à la perte de focus et qu'il masque d'autre éléments de l'écran." />
 
 La même fonctionnalité peut être obtenue en utilisant les gestionnaires d'événements appropriés, tels que `onBlur` et `onFocus` :
 
@@ -320,10 +319,10 @@ class BlurExample extends React.Component {
     }));
   }
 
-  // Nous fermons le popover au prochain tick en utilisant setTimeout.
-  // Cela est nécessaire car nous devons d'abord vérifier si un
-  // autre enfant de l'élément a reçu le focus lorsque l'élément
-  // `blur` se déclenche avant le nouvel événement de focus.
+  // Nous fermons le menu déroulant au prochain tick en utilisant setTimeout.
+  // C'est nécessaire car nous devons d'abord vérifier si un
+  // autre enfant de l'élément a reçu le focus lorsque l'événement
+  // `blur` se déclenche préalablement au nouvel événement de focus.
   onBlurHandler() {
     this.timeOutId = setTimeout(() => {
       this.setState({
@@ -332,7 +331,7 @@ class BlurExample extends React.Component {
     });
   }
 
-  // Si un enfant reçoit le focus, alors on ne ferme pas le popover.
+  // Si un enfant reçoit le focus, alors on ne ferme pas le menu déroulant.
   onFocusHandler() {
     clearTimeout(this.timeOutId);
   }
@@ -361,20 +360,20 @@ class BlurExample extends React.Component {
 }
 ```
 
-Ce code expose la fonctionnalité aussi bien aux utilisateurs de dispositifs de pointage qu'aux utilisateurs de clavier. Remarquez également les propriétés ajoutées `aria-*` afin de supporter les lecteurs d'écran. Par souci de simplicité, les événements clavier permettant l'interaction avec les options du popover via les touches de direction n'ont pas été implémentés.
+Ce code expose la fonctionnalité aussi bien aux utilisateurs de dispositifs de pointage qu'aux utilisateurs de clavier. Remarquez également les propriétés ajoutées `aria-*` afin de supporter les lecteurs d'écran. Par souci de simplicité, les événements clavier permettant l'interaction avec les options du menu déroulant via les touches de direction n'ont pas été développés.
 
 <img src="../images/docs/blur-popover-close.gif" alt="Une liste déroulante se fermant correctement pour les utilisateurs de souris et de clavier." />
 
-C'est un exemple des nombreux cas où, le fait de ne dépendre que des événements de souris et de pointeur casse les fonctionnalités pour les utilisateurs de clavier. Toujours tester avec le clavier mettra immédiatement en évidence les problèmes qui peuvent ensuite être résolus grâce à l'aide des gestionnaires d'événement clavier.
+C'est un exemple des nombreux cas où le fait de ne dépendre que des événements de souris et de pointeur casse les fonctionnalités pour les utilisateurs de clavier. Toujours tester avec le clavier mettra immédiatement en évidence les problèmes qui peuvent ensuite être résolus à l'aide des gestionnaires d'événement clavier.
 
 ## Widgets plus complexes {#more-complex-widgets}
 
-Une expérience utilisateur plus complexe ne doit pas signifier une expérience moins accessible. Alors que l'accessibilité est plus facile à réaliser en codant le plus près possible du HTML, même les widgets les plus complexes peuvent être codés de manière accessible.
+Une expérience utilisateur plus complexe ne doit pas signifier une expérience moins accessible. Alors que l'accessibilité est plus facile à réaliser en codant au plus près du HTML, même les widgets les plus complexes peuvent être codés de manière accessible.
 
 Nous avons besoin ici de connaître les [rôles ARIA](https://www.w3.org/TR/wai-aria/#roles), ainsi que les [états et propriétés ARIA](https://www.w3.org/TR/wai-aria/#states_and_properties).
 Ce sont des boîtes à outils pleines d'attributs HTML pris en charge dans le JSX et qui nous permettent de construire des composants React entièrement accessibles et hautement fonctionnels.
 
-Chaque type de widget à son modèle de design spécifique et devrait fonctionner de la même manière avec les utilisateurs et avec les agents :
+Chaque type de widget a son modèle de design spécifique et devrait fonctionner de la même manière avec les utilisateurs et les agents utilisateurs :
 
 - [Pratique de création WAI-ARIA - Modèles de design et widgets](https://www.w3.org/TR/wai-aria-practices/#aria_ex) (*WIA* signifie *Web Accessibility Initiative* - NdT).
 - [Heydon Pickering - Exemples ARIA](http://heydonworks.com/practical_aria_examples/).
@@ -402,33 +401,33 @@ Assurez-vous que tous les textes lisibles sur votre site web ont un contraste de
 
 - [WCAG - Comprendre l'exigence du contraste de couleur](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html).
 - [Tout sur le contraste de couleur et pourquoi vous devez le repenser](https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/).
-- [A11yProject - Qu'est-ce qu'un contraste de couleur ?](http://a11yproject.com/posts/what-is-color-contrast/).
+- [A11yProject - Qu'est-ce qu'un contraste de couleur ?](http://a11yproject.com/posts/what-is-color-contrast/)
 
-Il peut être fastidieux de calculer manuellement les combinaisons de couleurs appropriées pour toutes les situations de votre site web, aussi vous est-il possible de [calculer toute une palette de couleurs accessible avec Colorable](http://jxnblk.com/colorable/).
+Il peut être fastidieux de calculer manuellement les combinaisons de couleurs appropriées pour toutes les situations sur votre site web, aussi vous est-il possible de [calculer une palette entière de couleurs accessible avec Colorable](http://jxnblk.com/colorable/).
 
-Les outils aXe et WAVE mentionnés ci-dessous incluent également des tests de contraste de couleur et signlent les erreurs de contraste.
+Les outils aXe et WAVE mentionnés ci-dessous incluent également des tests de contraste de couleur et signalent les erreurs de contraste.
 
 Si vous souhaitez étendre vos capacités de test de contraste, vous pouvez utiliser ces outils :
 
-- [WebAIM - Vérification de contraste de couleur](http://webaim.org/resources/contrastchecker/)
-- [The Paciello Group - Analyseur de contraste de couleur](https://www.paciellogroup.com/resources/contrastanalyser/)
+- [WebAIM - Vérification de contraste de couleur](http://webaim.org/resources/contrastchecker/).
+- [The Paciello Group - Analyseur de contraste de couleur](https://www.paciellogroup.com/resources/contrastanalyser/).
 
 ## Développement et outils de test {#development-and-testing-tools}
 
-Il existe de nombreux outils pour nous pouvons utiliser pour nous assister durant la création d'applications web accessibles.
+Il existe de nombreux outils que nous pouvons utiliser pour nous assister durant la création d'applications web accessibles.
 
 ### Le clavier {#the-keyboard}
 
-De loin la plus simple mais aussi l'une des plus importante vérification à faire est de tester si l'ensemble de votre site web peut être accessible et utilisables avec le clavier seul. Procédez ainsi :
+De loin la vérification plus simple, mais aussi l'une des plus importantes, consiste à tester si l'ensemble de votre site web est accessible et utilisable avec le clavier seul. Procédez ainsi :
 
 1. Débranchez votre souris.
-1. Utilisez `Tab` et `Shift+Tab` pour naviguer.
-1. Utilisez `Enter` pour activer des éléments.
+1. Utilisez `Tab` et `Shift + Tab` pour naviguer.
+1. Utilisez `Entrée` pour activer des éléments.
 1. Le cas échéant, utilisez les touches de direction du clavier pour interagir avec certains éléments, tels que les menus et les menus déroulants.
 
 ### Assistance au développement {#development-assistance}
 
-Nous pouvons tester certaines fonctionnalités d'accessibilités directement dans notre code JSX. Souvent des contrôles intellisense sont déjà présents dans les IDE pour prenant en charge les rôles, états et propriétés ARIA. Nous avons également accès à l'outil suivant :
+Nous pouvons tester certaines fonctionnalités d'accessibilités directement dans notre code JSX. Souvent des contrôles intellisense sont déjà présents dans les IDE pour prendre en charge les rôles, états et propriétés ARIA. Nous avons également accès à l'outil suivant :
 
 #### eslint-plugin-jsx-a11y {#eslint-plugin-jsx-a11y}
 
@@ -449,11 +448,11 @@ Il existe un certain nombres d'outils pouvant exécuter des audits d'accessibili
 
 #### aXe, aXe-core et react-axe {#axe-axe-core-and-react-axe}
 
-Deque Systems offre [aXe-core](https://github.com/dequelabs/axe-core) pour automatiser les tests d'accessibilité de bout en bout de vos applications. Ce module comprend des intégrations pour Selenium.
+Deque Systems propose [aXe-core](https://github.com/dequelabs/axe-core) pour automatiser les tests d'accessibilité de bout en bout de vos applications. Ce module comprend des intégrations pour Selenium.
 
 [Le moteur d'accessibilité](https://www.deque.com/products/axe/) ou aXe, est une extension du navigateur d'inspection de l'accessibilité construite sur `aXe-core`.
 
-Vous pouvez aussi utiliser le module [react-axe](https://github.com/dylanb/react-axe) pour signaler directement ces résultats d'accessibilité dans la console during le développement et le déboguage.
+Vous pouvez aussi utiliser le module [react-axe](https://github.com/dylanb/react-axe) pour signaler directement ces résultats d'accessibilité dans la console durant le développement et le déboguage.
 
 #### WebAIM WAVE {#webaim-wave}
 
@@ -461,7 +460,7 @@ L'[outil Web Accessibility Evaluation](http://wave.webaim.org/extension/) est un
 
 #### Inspecteurs d'accessibilité et arbre d'accessibilité {#accessibility-inspectors-and-the-accessibility-tree}
 
-[L'arbre d'accessibilité](https://www.paciellogroup.com/blog/2015/01/the-browser-accessibility-tree/) est un sous-ensemble de l'arbre DOM qui contient des objects accessibles pour chaque élément du DOM devant être exposé aux technologies d'assistance, telles que les lecteurs d'écrans.
+[L'arbre d'accessibilité](https://www.paciellogroup.com/blog/2015/01/the-browser-accessibility-tree/) est un sous-ensemble de l'arbre DOM qui contient des objets d'accessibilité pour chaque élément du DOM devant être exposé aux technologies d'assistance, telles que les lecteurs d'écrans.
 
 Sur certains navigateurs, nous pouvons facilement consulter les informations d'accessibilité pour chaque élément de l'arbre d'accessibilité :
 
@@ -488,7 +487,7 @@ Reportez-vous aux guides suivants pour savoir comment utiliser au mieux NVDA :
 
 #### VoiceOver dans Safari {#voiceover-in-safari}
 
-VoiceOver est un lecteur d'écrans intégrer dans les dispositifs d'Apple.
+VoiceOver est un lecteur d'écran intégré dans les appareils d'Apple.
 
 Reportez-vous aux guides suivants pour savoir comment activer et utiliser VoiceOver :
 
@@ -503,15 +502,15 @@ Reportez-vous aux guides suivants pour savoir comment activer et utiliser VoiceO
 Reportez-vous aux guides suivants pour utiliser au mieux JAWS :
 
 - [WebAIM - Utiliser JAWS pour évaluer l'accessibilité web](http://webaim.org/articles/jaws/).
-- [Deque - Raccourcis clavier pour JAWS](https://dequeuniversity.com/screenreaders/jaws-keyboard-shortcuts)
+- [Deque - Raccourcis clavier pour JAWS](https://dequeuniversity.com/screenreaders/jaws-keyboard-shortcuts).
 
 ### Autres lecteurs d'écran {#other-screen-readers}
 
 #### ChromeVox dans Google Chrome {#chromevox-in-google-chrome}
 
-[ChromeVox](http://www.chromevox.com/) est un lecteur d'écran intégré aux Chromebooks et est disponible [en tant qu'extension](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?hl=fr) à Google Chrome.
+[ChromeVox](http://www.chromevox.com/) est un lecteur d'écran intégré aux Chromebooks et est disponible [en tant qu'extension](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?hl=fr) pour Google Chrome.
 
 Reportez-vous aux guides suivants pour utiliser au mieux ChromeVox :
 
-- [Aide de Google Chromebook - Utiliser le lecteur d'écran intégré](https://support.google.com/chromebook/answer/7031755?hl=en)
-- [Références des raccourcis clavier pour ChromeVox Classic](http://www.chromevox.com/keyboard_shortcuts.html)
+- [Aide de Google Chromebook - Utiliser le lecteur d'écran intégré](https://support.google.com/chromebook/answer/7031755?hl=fr).
+- [Références des raccourcis clavier pour ChromeVox Classic](http://www.chromevox.com/keyboard_shortcuts.html).

From 1e235bef1ee283ea8005953f41caf1555af25931 Mon Sep 17 00:00:00 2001
From: linsolas <linsolas@gmail.com>
Date: Sun, 24 Feb 2019 23:18:34 +0100
Subject: [PATCH 4/9] Corrections after @sheplu review

---
 content/docs/accessibility.md | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 5cdd4c775..762141667 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -14,7 +14,7 @@ React prend totalement en charge la création de sites web accessibles, en s'app
 
 ### WCAG {#wcag}
 
-Les [directives pour l'accessibilité au contenu web (*Web Content Accessibility Guidelines*)](https://www.w3.org/WAI/intro/wcag) proposent les lignes directrices pour créer des sites web accessibles.
+Les [directives pour l'accessibilité au contenu web (*Web Content Accessibility Guidelines*, ou *WCAG*)](https://www.w3.org/WAI/intro/wcag) proposent les lignes directrices pour créer des sites web accessibles.
 
 Les listes de contrôle du WCAG ci-dessous en fournissent un aperçu :
 
@@ -112,10 +112,10 @@ Pour plus d'information, consultez [la documentation sur les fragments](/docs/fr
 
 Tous les contrôles de formulaire HTML, tels que `<input>` et `<textarea>`, doivent être étiquetés de manière accessible. Nous devons fournir des étiquettes descriptives, qui sont également exposées aux lecteurs d'écran.
 
-Les ressources ci-dessous nous montrent comme procéder :
+Les ressources ci-dessous nous montrent comment procéder :
 
-- [Le W3C nous montre comme étiqueter les éléments](https://www.w3.org/WAI/tutorials/forms/labels/).
-- [Le WebAIM nous montre comme étiqueter les éléments](http://webaim.org/techniques/forms/controls).
+- [Le W3C nous montre comment étiqueter les éléments](https://www.w3.org/WAI/tutorials/forms/labels/).
+- [Le WebAIM nous montre comment étiqueter les éléments](http://webaim.org/techniques/forms/controls).
 - [Le groupe Paciello explique ce qu'est un nom accessible](https://www.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/).
 
 Bien que ces pratiques HTML standard soient directement utilisables dans React, il faut noter que l'attribut `for` est écrit `htmlFor` en JSX :
@@ -364,7 +364,7 @@ Ce code expose la fonctionnalité aussi bien aux utilisateurs de dispositifs de
 
 <img src="../images/docs/blur-popover-close.gif" alt="Une liste déroulante se fermant correctement pour les utilisateurs de souris et de clavier." />
 
-C'est un exemple des nombreux cas où le fait de ne dépendre que des événements de souris et de pointeur casse les fonctionnalités pour les utilisateurs de clavier. Toujours tester avec le clavier mettra immédiatement en évidence les problèmes qui peuvent ensuite être résolus à l'aide des gestionnaires d'événement clavier.
+C'est un exemple des nombreux cas où le fait de ne dépendre que des événements de souris et de pointeur casse les fonctionnalités pour les utilisateurs de clavier. Toujours tester avec le clavier mettra immédiatement en évidence les problèmes qui peuvent ensuite être résolus à l'aide des gestionnaires d'événements clavier.
 
 ## Widgets plus complexes {#more-complex-widgets}
 
@@ -395,22 +395,22 @@ Définissez la balise `<title>` du document pour décrire correctement le conten
 
 Nous pouvons le définir dans React en utilisant le [composant React Document Title](https://github.com/gaearon/react-document-title).
 
-### Contraste de couleur {#color-contrast}
+### Contraste des couleurs {#color-contrast}
 
-Assurez-vous que tous les textes lisibles sur votre site web ont un contraste de couleur suffisant pour rester lisibles de manière optimale par les utilisateurs malvoyants :
+Assurez-vous que tous les textes lisibles sur votre site web ont un contraste des couleurs suffisant pour rester lisibles de manière optimale par les utilisateurs malvoyants :
 
-- [WCAG - Comprendre l'exigence du contraste de couleur](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html).
-- [Tout sur le contraste de couleur et pourquoi vous devez le repenser](https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/).
-- [A11yProject - Qu'est-ce qu'un contraste de couleur ?](http://a11yproject.com/posts/what-is-color-contrast/)
+- [WCAG - Comprendre l'exigence du contraste des couleurs](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html).
+- [Tout sur le contraste des couleurs et pourquoi vous devez le repenser](https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/).
+- [A11yProject - Qu'est-ce qu'un contraste des couleurs ?](http://a11yproject.com/posts/what-is-color-contrast/)
 
 Il peut être fastidieux de calculer manuellement les combinaisons de couleurs appropriées pour toutes les situations sur votre site web, aussi vous est-il possible de [calculer une palette entière de couleurs accessible avec Colorable](http://jxnblk.com/colorable/).
 
-Les outils aXe et WAVE mentionnés ci-dessous incluent également des tests de contraste de couleur et signalent les erreurs de contraste.
+Les outils aXe et WAVE mentionnés ci-dessous incluent également des tests de contraste des couleurs et signalent les erreurs de contraste.
 
 Si vous souhaitez étendre vos capacités de test de contraste, vous pouvez utiliser ces outils :
 
-- [WebAIM - Vérification de contraste de couleur](http://webaim.org/resources/contrastchecker/).
-- [The Paciello Group - Analyseur de contraste de couleur](https://www.paciellogroup.com/resources/contrastanalyser/).
+- [WebAIM - Vérification de contraste des couleurs](http://webaim.org/resources/contrastchecker/).
+- [The Paciello Group - Analyseur de contraste des couleurs](https://www.paciellogroup.com/resources/contrastanalyser/).
 
 ## Développement et outils de test {#development-and-testing-tools}
 
@@ -418,7 +418,7 @@ Il existe de nombreux outils que nous pouvons utiliser pour nous assister durant
 
 ### Le clavier {#the-keyboard}
 
-De loin la vérification plus simple, mais aussi l'une des plus importantes, consiste à tester si l'ensemble de votre site web est accessible et utilisable avec le clavier seul. Procédez ainsi :
+De loin la vérification la plus simple, mais aussi l'une des plus importantes, consiste à tester si l'ensemble de votre site web est accessible et utilisable avec le clavier seul. Procédez ainsi :
 
 1. Débranchez votre souris.
 1. Utilisez `Tab` et `Shift + Tab` pour naviguer.

From cd5852fb2917074afefdb41f4826c049328580ea Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Fri, 8 Mar 2019 23:57:42 +0100
Subject: [PATCH 5/9] Apply suggestions from @tdd review

Co-Authored-By: linsolas <linsolas@gmail.com>
---
 content/docs/accessibility.md | 120 +++++++++++++++++-----------------
 1 file changed, 60 insertions(+), 60 deletions(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 762141667..4c4106384 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -6,7 +6,7 @@ permalink: docs/accessibility.html
 
 ## Pourquoi l'accessibilité ? {#why-accessibility}
 
-L'accessibilité du web (aussi référencée sous la contraction [**a11y**](https://fr.wiktionary.org/wiki/a11y)) concerne le design et la création de sites web qui peuvent être utilisés par tout le monde. Le support de l'accessibilité est nécessaire pour permettre aux technologies d'assistance d'interpréter les pages web. 
+L'accessibilité du web (aussi référencée sous la contraction [**a11y**](https://fr.wiktionary.org/wiki/a11y)) concerne le design et la création de sites web qui peuvent être utilisés par tout le monde. La prise en charge de l'accessibilité est nécessaire pour permettre aux technologies d'assistance d'interpréter les pages web. 
 
 React prend totalement en charge la création de sites web accessibles, en s'appuyant souvent sur des techniques HTML standard.
 
@@ -14,7 +14,7 @@ React prend totalement en charge la création de sites web accessibles, en s'app
 
 ### WCAG {#wcag}
 
-Les [directives pour l'accessibilité au contenu web (*Web Content Accessibility Guidelines*, ou *WCAG*)](https://www.w3.org/WAI/intro/wcag) proposent les lignes directrices pour créer des sites web accessibles.
+Les [directives pour l'accessibilité au contenu web](https://www.w3.org/WAI/intro/wcag) *(Web Content Accessibility Guidelines, ou WCAG, NdT)* proposent des lignes directrices pour créer des sites web accessibles.
 
 Les listes de contrôle du WCAG ci-dessous en fournissent un aperçu :
 
@@ -24,9 +24,9 @@ Les listes de contrôle du WCAG ci-dessous en fournissent un aperçu :
 
 ### WAI-ARIA {#wai-aria}
 
-Le document sur [l'initiative d'accessibilité du Web - *Accessible Rich Internet Applications*](https://www.w3.org/WAI/intro/aria) contient les techniques nécessaires à la création de widgets JavaScript complètement accessibles.
+Le document de [l'Initiative d'Accessibilité du Web - Applications Internet Riches Accessibles](https://www.w3.org/WAI/intro/aria) *(Web Accessibility Initiative - Accessible Rich Internet Applications, ou WAI-ARIA, NdT)* contient les techniques nécessaires à la création d’éléments d’interface JavaScript complètement accessibles.
 
-Remarquez que tous les attributs HTML `aria-*` sont supportés dans le JSX. Là où la plupart des propriétés DOM en React utilisent le format « *camelCase* », ces attributs doivent utiliser la casse par tirets (« *hyphen-case* », aussi appelée « *kebab-case* », « *lisp-case* », etc.), comme ils le sont en HTML simple :
+Remarquez que tous les attributs HTML `aria-*` sont autorisés dans JSX. Là où la plupart des propriétés DOM en React utilisent la casse *camelCase*, ces attributs doivent être en minuscules avec des tirets (casse connue sous les noms *hyphen-case*, *kebab-case*, *lisp-case*, etc.), comme ils le sont en HTML brut :
 
 ```javascript{3,4}
 <input
@@ -45,7 +45,7 @@ Le HTML sémantique est la base de l'accessibilité dans une application web. L'
 
 - [La référence des éléments HTML sur MDN](https://developer.mozilla.org/fr/docs/Web/HTML/Element).
 
-Il nous arrive de casser la sémantique HTML en ajoutant des balises `<div>` dans notre JSX afin de faire fonctionner notre code React, en particulier lorsque l'on travaille avec des listes (`<ol>`, `<ul>` et `<dl>`) ou le tableau HTML `<table>`.
+Il nous arrive de casser la sémantique HTML en ajoutant des balises `<div>` dans notre JSX afin de faire fonctionner notre code React, en particulier lorsqu'on travaille avec des listes (`<ol>`, `<ul>` et `<dl>`) ou des tableaux HTML `<table>`.
 Dans ces cas-là, nous devrions plutôt utiliser les [fragments React](/docs/fragments.html) pour regrouper de multiples éléments.
 
 Par exemple,
@@ -73,7 +73,7 @@ function Glossary(props) {
 }
 ```
 
-Vous pouvez représenter une liste d'éléments en un tableau de fragments, comme vous le feriez avec tout autre type d'élément :
+Vous pouvez représenter une liste d'éléments comme un tableau de fragments, comme vous le feriez avec tout autre type d'élément :
 
 ```javascript{6,9}
 function Glossary(props) {
@@ -91,7 +91,7 @@ function Glossary(props) {
 }
 ```
 
-Lorsque vous n'avez pas besoin de définir de propriété sur la balise fragment, vous pouvez utiliser la [syntaxe courte](/docs/fragments.html#short-syntax), lorsque votre outillage le supporte :
+Lorsque vous n'avez pas besoin de définir de propriété sur la balise fragment, vous pouvez utiliser la [syntaxe courte](/docs/fragments.html#short-syntax), si votre outillage le prend en charge :
 
 ```javascript{3,6}
 function ListItem({ item }) {
@@ -104,13 +104,13 @@ function ListItem({ item }) {
 }
 ```
 
-Pour plus d'information, consultez [la documentation sur les fragments](/docs/fragments.html).
+Pour plus d'informations, consultez [la documentation sur les fragments](/docs/fragments.html).
 
 ## Formulaires accessibles {#accessible-forms}
 
 ### L'étiquetage {#labeling}
 
-Tous les contrôles de formulaire HTML, tels que `<input>` et `<textarea>`, doivent être étiquetés de manière accessible. Nous devons fournir des étiquettes descriptives, qui sont également exposées aux lecteurs d'écran.
+Tous les champs de formulaire HTML, tels que `<input>` et `<textarea>`, doivent être étiquetés de manière accessible. Nous devons fournir des étiquettes descriptives, qui sont également exposées aux lecteurs d'écran.
 
 Les ressources ci-dessous nous montrent comment procéder :
 
@@ -127,7 +127,7 @@ Bien que ces pratiques HTML standard soient directement utilisables dans React,
 
 ### Notifier des erreurs à l'utilisateur {#notifying-the-user-of-errors}
 
-Les situations d'erreur doivent être comprises par tous les utilisateurs. Les liens ci-dessous montrent comme exposer les textes d'erreur aux lecteurs d'écran :
+Les situations d'erreur doivent être comprises par tous les utilisateurs. Les liens ci-dessous montrent comment exposer les textes d'erreur aux lecteurs d'écran :
 
 - [Le W3C présente les notifications utilisateur](https://www.w3.org/WAI/tutorials/forms/notifications/).
 - [Le WebAIM se penche sur la validation de formulaire](http://webaim.org/techniques/formvalidation/).
@@ -138,37 +138,37 @@ Assurez-vous que votre application web peut être complètement utilisable avec
 
 - [Le WebAIM parle de l'accessibilité depuis le clavier](http://webaim.org/techniques/keyboard/).
 
-### Focus par le clavier et contour de focus {#keyboard-focus-and-focus-outline}
+### Focus clavier et contour de focus {#keyboard-focus-and-focus-outline}
 
-Le focus par le clavier fait référence à l'élément courant dans le DOM qui est sélectionné pour accepter les saisies au clavier. Nous le voyons partout comme un contour tel que cela est montré sur l'image ci-dessous :
+Le focus clavier fait référence à l'élément courant dans le DOM qui est sélectionné pour accepter les saisies au clavier. Nous le voyons partout comme un contour similaire à ce qu’on voit sur l'image ci-dessous :
 
 <img src="../images/docs/keyboard-focus.png" alt="Le contour bleu du focus clavier autour d'un lien sélectionné" />
 
-N'utilisez que le CSS qui retire ce contour, par exemple en définissant `outline: 0`, si vous le remplacez par une autre implémentation de contour de focus.
+N'utilisez CSS pour retirer ce contour, par exemple en définissant `outline: 0`, que si vous le remplacez par une autre implémentation de contour de focus.
 
 ### Mécanismes pour sauter au contenu désiré {#mechanisms-to-skip-to-desired-content}
 
-Fournissez un mécanisme permettant aux utilisateurs de sauter les sections antérieures de navigation sur votre application, car cela facilite et accélère la navigation au clavier.
+Fournissez un mécanisme permettant aux utilisateurs de sauter les sections de navigation dans votre application, car ça facilite et accélère la navigation au clavier.
 
-Les liens de passage (*Skiplinks*) ou lien de navigation de passage sont des liens de navigation cachés qui ne sont visibles que lorsque l'utilisateur interagit au clavier avec la page. Ils sont très faciles à mettre en œuvre avec les ancres de pages internes et un peu de style :
+Les liens d’évitement *(skiplinks, NdT)* sont des liens de navigation cachés qui ne sont visibles que lorsque l'utilisateur interagit au clavier avec la page. Ils sont très faciles à mettre en œuvre avec les ancres de pages internes et un peu de style :
 
 - [WebAIM - Liens de navigation de passage](http://webaim.org/techniques/skipnav/).
 
 Utilisez également les éléments et rôles de repérage, tels que `<main>` et `<aside>`, afin de délimiter les régions de la page, car les technologies d'assistance permettent à l'utilisateur de naviguer rapidement vers ces sections.
 
-Pour en savoir plus sur l'utilisation de ces éléments améliorant l'accessibilité, rendez-vous sur :
+Pour en savoir plus sur l'utilisation de ces éléments pour améliorer l'accessibilité, rendez-vous sur :
 
 - [Repères d'accessibilité](http://www.scottohara.me/blog/2018/03/03/landmarks.html).
 
 ### Gérer le focus programmatiquement {#programmatically-managing-focus}
 
-Nos applications React modifient en continu le DOM HTML au cours de l'exécution, ce qui entraîne parfois la perte du focus du clavier ou le positionne sur un élément inattendu. Pour corriger cela, nous devons déplacer le focus clavier programmatiquement dans la bonne direction. En redonnant par exemple le focus clavier à un bouton ouvrant une fenêtre modale, lorsque cette dernière se ferme.
+Nos applications React modifient en continu le DOM HTML au cours de l'exécution, ce qui entraîne parfois la perte du focus clavier ou le positionne sur un élément inattendu. Pour corriger ça, nous devons déplacer le focus clavier programmatiquement dans la bonne direction. En redonnant par exemple le focus clavier à un bouton qui ouvre une fenêtre modale, lorsque cette dernière se referme.
 
-La documentation web de MDN donne un aperçu de cela, et décrit comment nous pouvons construire [des widgets JavaScript permettant la navigation au clavier](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets).
+La documentation web du MDN se penche sur ça et décrit comment nous pouvons construire [des éléments d’interface JavaScript permettant la navigation au clavier](https://developer.mozilla.org/fr/docs/Contrôles_DHTML_personnalisés_navigables_au_clavier).
 
-Afin de définir le focus en React, nous pouvons utiliser les [références (*Ref*) aux éléments du DOM](/docs/refs-and-the-dom.html).
+Afin de définir le focus en React, nous pouvons utiliser les [Refs aux éléments du DOM](/docs/refs-and-the-dom.html).
 
-En utilisant cela, nous créons d'abord une référence à un élément du JSX de la classe du composant :
+Nous créons d'abord une ref à un élément du JSX de la classe du composant :
 
 ```javascript{4-5,8-9,13}
 class CustomTextInput extends React.Component {
@@ -178,8 +178,8 @@ class CustomTextInput extends React.Component {
     this.textInput = React.createRef();
   }
   render() {
-    // Utilisez la fonction de rappel `ref` pour stocker la référence de l'élément DOM
-    // du champ texte dans une variable d'instance (par exemple this.textInput).
+    // Utilisez la prop `ref` pour définir la valeur courante
+    //  de la ref `textInput` à l'élément DOM
     return (
       <input
         type="text"
@@ -200,7 +200,7 @@ Ensuite, nous pouvons lui donner le focus depuis n'importe où dans notre compos
  }
  ```
 
-Il arrive parfois qu'un composant parent ait besoin de définir le focus sur un composant enfant. Pour ce faire, nous [exposons les références DOM aux composants parents](/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components) via une propriété spéciale sur le composant enfant qui transmet la référence du parent au nœud DOM de l'enfant.
+Il arrive parfois qu'un composant parent ait besoin de définir le focus sur un élément au sein d’un composant enfant. Pour ce faire, nous [exposons des refs DOM aux composants parents](/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components) via une propriété spéciale sur le composant enfant qui transfère la ref du parent au nœud DOM de l'enfant.
 
 ```javascript{4,12,16}
 function CustomTextInput(props) {
@@ -223,15 +223,15 @@ class Parent extends React.Component {
   }
 }
 
-// Maintenant, vous pouvez définir le focus lorsque cela est nécessaire.
+// Maintenant, vous pouvez définir le focus quand vous en avez besoin.
 this.inputElement.current.focus();
 ```
 
-Lors de l'utilisation d'un *HOC* pour étendre des composants, il est recommandé de [transmettre la référence](/docs/forwarding-refs.html) de l'élément d'encapsulation en utilisant la fonction `forwardRef` de React. Si un *HOC* tiers n'implémente par le transfert de référence, le modèle ci-dessus peut être utilisé comme solution de secours.
+Quand vous enrobez des composants à l’aide d’un composant d’ordre supérieur *(Higher-Order Component, ou HOC, NdT)*, il est recommandé de [transférer la référence](/docs/forwarding-refs.html) vers l’élément enrobé grâce à la fonction `forwardRef` de React. Si un HOC tiers n'implémente par le transfert de référence, le modèle ci-dessus peut être utilisé comme solution de secours.
 
-Un excellent exemple de la gestion du focus est le composant [react-aria-modal](https://github.com/davidtheclark/react-aria-modal). Il s'agit de l'un des rares exemples d'une fenêtre modale complètement accessible. Non seulement il définit le focus initial sur le bouton d'annulation (empêchant l'utilisateur du clavier d'activer accidentellement l'action de succès), il restreint le focus clavier à l'intérieur de la fenêtre modale, et il réinitialise enfin le focus sur l'élément qui a originellement déclenché la fenêtre modale.
+Le composant [react-aria-modal](https://github.com/davidtheclark/react-aria-modal) est un excellent exemple de la gestion du focus. Il s'agit de l'un des rares exemples de fenêtre modale complètement accessible. Non seulement il définit le focus initial sur le bouton d'annulation (empêchant l'utilisateur du clavier d'activer accidentellement l'action de succès), mais il restreint bien le focus clavier à l'intérieur de la fenêtre modale et il remet à terme le focus sur l'élément qui a originellement déclenché la fenêtre modale.
 
-> Remarque :
+> Remarque
 >
 > Bien qu'il s'agisse d'une caractéristique d'accessibilité très importante, c'est également une technique qui doit être utilisée à bon escient. Utilisez-la pour corriger le comportement du focus clavier lorsqu'il est perturbé, et non pour essayer d'anticiper la manière dont les utilisateurs souhaitent utiliser les applications.
 
@@ -243,7 +243,7 @@ Pour illustrer cela, examinons un exemple prolifique où l'accessibilité est ca
 
 <img src="../images/docs/outerclick-with-mouse.gif" alt="Un bouton ouvrant une liste déroulante implémenté par le modèle du clic externe et déclenché par la souris montrant que l'action de fermeture fonctionne." />
 
-Cela est généralement développé en attachant l'événement `click` à l'objet `window` qui ferme le menu déroulant :
+C’est généralement implémenté en écoutant l'événement `click` de l'objet `window` pour fermer le menu déroulant :
 
 ```javascript{12-14,26-30}
 class OuterClickExample extends React.Component {
@@ -294,9 +294,9 @@ constructor(props) {
 }
 ```
 
-Cela peut fonctionner pour les utilisateurs ayant des dispositifs de pointage, tels qu'une souris, mais le fait de n'utiliser que le clavier entraîne des dysfonctionnements lors de la tabulation sur l'élément suivant, car l'objet `window` ne reçoit jamais d'événement `click`. Cela peut entraîner une fonctionnalité cachée qui empêche les utilisateurs d'utiliser votre application.
+Ça fonctionne peut-être pour les utilisateurs ayant des dispositifs de pointage, tels qu'une souris, mais le fait de n'utiliser que le clavier entraîne des dysfonctionnements lors de la tabulation sur l'élément suivant, car l'objet `window` ne reçoit jamais d'événement `click`. Ça peut finir par masquer des fonctionnalités, ce qui empêche les utilisateurs d'utiliser votre application.
 
-<img src="../images/docs/outerclick-with-keyboard.gif" alt="Un bouton ouvrant une liste déroulante implémenté par le modèle du clic externe et déclenché par le clavier montrant que le menu déroulant ne se ferme pas à la perte de focus et qu'il masque d'autre éléments de l'écran." />
+<img src="../images/docs/outerclick-with-keyboard.gif" alt="Un bouton ouvrant une liste déroulante implémenté par le modèle du clic externe et déclenché par le clavier montrant que le menu déroulant ne se ferme pas à la perte de focus et qu'il masque d'autres éléments de l'écran." />
 
 La même fonctionnalité peut être obtenue en utilisant les gestionnaires d'événements appropriés, tels que `onBlur` et `onFocus` :
 
@@ -321,8 +321,8 @@ class BlurExample extends React.Component {
 
   // Nous fermons le menu déroulant au prochain tick en utilisant setTimeout.
   // C'est nécessaire car nous devons d'abord vérifier si un
-  // autre enfant de l'élément a reçu le focus lorsque l'événement
-  // `blur` se déclenche préalablement au nouvel événement de focus.
+  // autre enfant de l'élément a reçu le focus car l'événement
+  // `blur` se déclenche avant le nouvel événement de focus.
   onBlurHandler() {
     this.timeOutId = setTimeout(() => {
       this.setState({
@@ -337,8 +337,8 @@ class BlurExample extends React.Component {
   }
 
   render() {
-    // React nous aide en diffusant les événements `blur` et
-    // `focus` au parent.
+    // React nous aide en assurant la propagation des
+    //  événements `blur` et `focus` vers le parent.
     return (
       <div onBlur={this.onBlurHandler}
            onFocus={this.onFocusHandler}>
@@ -360,32 +360,32 @@ class BlurExample extends React.Component {
 }
 ```
 
-Ce code expose la fonctionnalité aussi bien aux utilisateurs de dispositifs de pointage qu'aux utilisateurs de clavier. Remarquez également les propriétés ajoutées `aria-*` afin de supporter les lecteurs d'écran. Par souci de simplicité, les événements clavier permettant l'interaction avec les options du menu déroulant via les touches de direction n'ont pas été développés.
+Ce code expose la fonctionnalité aussi bien aux utilisateurs de dispositifs de pointage qu'aux utilisateurs de clavier. Remarquez également les propriétés `aria-*` ajoutées afin de prendre en charge les lecteurs d'écran. Par souci de simplicité, les événements clavier permettant l'interaction avec les options du menu déroulant via les touches de curseur n'ont pas été implémentés.
 
 <img src="../images/docs/blur-popover-close.gif" alt="Une liste déroulante se fermant correctement pour les utilisateurs de souris et de clavier." />
 
 C'est un exemple des nombreux cas où le fait de ne dépendre que des événements de souris et de pointeur casse les fonctionnalités pour les utilisateurs de clavier. Toujours tester avec le clavier mettra immédiatement en évidence les problèmes qui peuvent ensuite être résolus à l'aide des gestionnaires d'événements clavier.
 
-## Widgets plus complexes {#more-complex-widgets}
+## Éléments d’interface plus complexes {#more-complex-widgets}
 
-Une expérience utilisateur plus complexe ne doit pas signifier une expérience moins accessible. Alors que l'accessibilité est plus facile à réaliser en codant au plus près du HTML, même les widgets les plus complexes peuvent être codés de manière accessible.
+Une expérience utilisateur plus complexe ne doit pas signifier une expérience moins accessible. Alors que l'accessibilité est plus facile à réaliser en codant au plus près du HTML, même les éléments d'interface les plus complexes peuvent être codés de manière accessible.
 
 Nous avons besoin ici de connaître les [rôles ARIA](https://www.w3.org/TR/wai-aria/#roles), ainsi que les [états et propriétés ARIA](https://www.w3.org/TR/wai-aria/#states_and_properties).
-Ce sont des boîtes à outils pleines d'attributs HTML pris en charge dans le JSX et qui nous permettent de construire des composants React entièrement accessibles et hautement fonctionnels.
+Ce sont des boîtes à outils pleines d'attributs HTML pris en charge par JSX et qui nous permettent de construire des composants React pleinement accessibles et hautement fonctionnels.
 
-Chaque type de widget a son modèle de design spécifique et devrait fonctionner de la même manière avec les utilisateurs et les agents utilisateurs :
+Chaque type d'élément d'interface a son modèle de conception spécifique et devrait fonctionner de la même manière avec les utilisateurs et les agents utilisateurs (notamment les navigateurs) :
 
-- [Pratique de création WAI-ARIA - Modèles de design et widgets](https://www.w3.org/TR/wai-aria-practices/#aria_ex) (*WIA* signifie *Web Accessibility Initiative* - NdT).
+- [Pratiques de création WAI-ARIA - Modèles de conception et éléments d’interface](https://www.w3.org/TR/wai-aria-practices/#aria_ex)
 - [Heydon Pickering - Exemples ARIA](http://heydonworks.com/practical_aria_examples/).
 - [Composants inclusifs](https://inclusive-components.design/).
 
-## Autres points de considération {#other-points-for-consideration}
+## Autres points à considérer {#other-points-for-consideration}
 
 ### Définir la langue {#setting-the-language}
 
 Indiquez la langue des pages de texte de façon à ce que les logiciels de lecture d'écran puissent sélectionner les paramètres de voix appropriés :
 
-- [WebAIM - Document sur les langues](http://webaim.org/techniques/screenreader/#language).
+- [WebAIM - Langue du document](http://webaim.org/techniques/screenreader/#language).
 
 ### Définir le titre du document {#setting-the-document-title}
 
@@ -400,8 +400,8 @@ Nous pouvons le définir dans React en utilisant le [composant React Document Ti
 Assurez-vous que tous les textes lisibles sur votre site web ont un contraste des couleurs suffisant pour rester lisibles de manière optimale par les utilisateurs malvoyants :
 
 - [WCAG - Comprendre l'exigence du contraste des couleurs](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html).
-- [Tout sur le contraste des couleurs et pourquoi vous devez le repenser](https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/).
-- [A11yProject - Qu'est-ce qu'un contraste des couleurs ?](http://a11yproject.com/posts/what-is-color-contrast/)
+- [Tout savoir sur le contraste des couleurs et pourquoi vous devriez le repenser](https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/).
+- [A11yProject - Qu'est-ce que le contraste des couleurs ?](http://a11yproject.com/posts/what-is-color-contrast/)
 
 Il peut être fastidieux de calculer manuellement les combinaisons de couleurs appropriées pour toutes les situations sur votre site web, aussi vous est-il possible de [calculer une palette entière de couleurs accessible avec Colorable](http://jxnblk.com/colorable/).
 
@@ -412,28 +412,28 @@ Si vous souhaitez étendre vos capacités de test de contraste, vous pouvez util
 - [WebAIM - Vérification de contraste des couleurs](http://webaim.org/resources/contrastchecker/).
 - [The Paciello Group - Analyseur de contraste des couleurs](https://www.paciellogroup.com/resources/contrastanalyser/).
 
-## Développement et outils de test {#development-and-testing-tools}
+## Outils de développement et de test {#development-and-testing-tools}
 
 Il existe de nombreux outils que nous pouvons utiliser pour nous assister durant la création d'applications web accessibles.
 
 ### Le clavier {#the-keyboard}
 
-De loin la vérification la plus simple, mais aussi l'une des plus importantes, consiste à tester si l'ensemble de votre site web est accessible et utilisable avec le clavier seul. Procédez ainsi :
+La vérification de loin la plus simple, mais aussi l'une des plus importantes, consiste à tester si l'ensemble de votre site web est accessible et utilisable avec le clavier seul. Procédez ainsi :
 
 1. Débranchez votre souris.
 1. Utilisez `Tab` et `Shift + Tab` pour naviguer.
 1. Utilisez `Entrée` pour activer des éléments.
-1. Le cas échéant, utilisez les touches de direction du clavier pour interagir avec certains éléments, tels que les menus et les menus déroulants.
+1. Le cas échéant, utilisez les touches de curseur du clavier pour interagir avec certains éléments, tels que les menus et les listes déroulantes.
 
 ### Assistance au développement {#development-assistance}
 
-Nous pouvons tester certaines fonctionnalités d'accessibilités directement dans notre code JSX. Souvent des contrôles intellisense sont déjà présents dans les IDE pour prendre en charge les rôles, états et propriétés ARIA. Nous avons également accès à l'outil suivant :
+Nous pouvons tester certaines fonctionnalités d'accessibilité directement dans notre code JSX. Souvent des contrôles automatiques sont déjà présents dans les EDI qui prennent en charge JSX pour vérifier les rôles, états et propriétés ARIA. Nous avons également accès à l'outil suivant :
 
 #### eslint-plugin-jsx-a11y {#eslint-plugin-jsx-a11y}
 
-L'extension [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y) pour ESLint fournit des informations sur l'AST concernant les problèmes d'accessibilité dans votre JSX. De nombreux IDE vous permettent d'intégrer ces résultats directement dans des fenêtres d'analyse de code ou de code source.
+L'extension [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y) pour ESLint fournit des informations concernant les problèmes d'accessibilité dans votre JSX. De nombreux EDI vous permettent d'intégrer ces résultats directement dans leurs fenêtres d'analyse de code ou de code source.
 
-[Create React App](https://github.com/facebookincubator/create-react-app) dispose de cette extension avec un sous-ensemble de règles activées. Si vous souhaitez activer encore plus de règles d'accessibilité, vous pouvez créer un fichier `.eslintrc` à la racine de votre projet avec ce contenu :
+[Create React App](https://facebook.github.io/create-react-app/) pré-configure cette extension avec un sous-ensemble de règles activées. Si vous souhaitez activer encore plus de règles d'accessibilité, vous pouvez créer un fichier `.eslintrc` à la racine de votre projet avec ce contenu :
 
   ```json
   {
@@ -444,15 +444,15 @@ L'extension [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-js
 
 ### Tester l'accessibilité dans le navigateur {#testing-accessibility-in-the-browser}
 
-Il existe un certain nombres d'outils pouvant exécuter des audits d'accessibilité sur des pages web dans votre navigateur. Veuillez les utiliser conjointement avec d'autres contrôles d'accessibilité mentionnés ici car ils ne peuvent que tester l'accessibilité technique de votre HTML.
+Il existe un certain nombre d'outils pour exécuter des audits d'accessibilité sur des pages web dans votre navigateur. Veuillez les utiliser conjointement avec d'autres contrôles d'accessibilité mentionnés ici car ils ne peuvent tester que l'accessibilité technique de votre HTML.
 
 #### aXe, aXe-core et react-axe {#axe-axe-core-and-react-axe}
 
 Deque Systems propose [aXe-core](https://github.com/dequelabs/axe-core) pour automatiser les tests d'accessibilité de bout en bout de vos applications. Ce module comprend des intégrations pour Selenium.
 
-[Le moteur d'accessibilité](https://www.deque.com/products/axe/) ou aXe, est une extension du navigateur d'inspection de l'accessibilité construite sur `aXe-core`.
+[*The Accessibility Engine*](https://www.deque.com/products/axe/) ou aXe, est une extension du navigateur qui fournit un inspecteur d'accessibilité en se basant sur `aXe-core`.
 
-Vous pouvez aussi utiliser le module [react-axe](https://github.com/dylanb/react-axe) pour signaler directement ces résultats d'accessibilité dans la console durant le développement et le déboguage.
+Vous pouvez aussi utiliser le module [react-axe](https://github.com/dylanb/react-axe) pour signaler directement ces résultats d'accessibilité dans la console durant le développement et le débogage.
 
 #### WebAIM WAVE {#webaim-wave}
 
@@ -464,9 +464,9 @@ L'[outil Web Accessibility Evaluation](http://wave.webaim.org/extension/) est un
 
 Sur certains navigateurs, nous pouvons facilement consulter les informations d'accessibilité pour chaque élément de l'arbre d'accessibilité :
 
-- [En utilisant l'inspecteur d'accessibilité de Firefox](https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector).
-- [En activant l'inspecteur d'accessibilité de Chrome](https://gist.github.com/marcysutton/0a42f815878c159517a55e6652e3b23a).
-- [En utilisant l'inspecteur d'accessibilité d'OS X Safari](https://developer.apple.com/library/content/documentation/Accessibility/Conceptual/AccessibilityMacOSX/OSXAXTestingApps.html).
+- [Utiliser l'inspecteur d'accessibilité de Firefox](https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector).
+- [Activer l'inspecteur d'accessibilité de Chrome](https://gist.github.com/marcysutton/0a42f815878c159517a55e6652e3b23a).
+- [Utiliser l'inspecteur d'accessibilité d'OS X Safari](https://developer.apple.com/library/content/documentation/Accessibility/Conceptual/AccessibilityMacOSX/OSXAXTestingApps.html).
 
 ### Lecteurs d'écran {#screen-readers}
 
@@ -474,11 +474,11 @@ Tester avec un lecteur d'écran devrait faire partie de vos tests d'accessibilit
 
 Veuillez noter que les combinaisons navigateur / lecteur d'écran ont leur importance. Il est recommandé de tester votre application dans le navigateur le plus adapté au lecteur d'écran de votre choix.
 
-### Lecteurs d'écran utilisés fréquemment {#commonly-used-screen-readers}
+### Lecteurs d'écran fréquemment utilisés {#commonly-used-screen-readers}
 
 #### NVDA dans Firefox {#nvda-in-firefox}
 
-[*NonVisual Desktop Access*](https://www.nvaccess.org/) ou NVDA est un lecteur d'écran open source qui est largement utilisé.
+[*NonVisual Desktop Access*](https://www.nvaccess.org/) ou NVDA est un logiciel libre de lecteur d'écran qui est largement utilisé.
 
 Reportez-vous aux guides suivants pour savoir comment utiliser au mieux NVDA :
 
@@ -497,7 +497,7 @@ Reportez-vous aux guides suivants pour savoir comment activer et utiliser VoiceO
 
 #### JAWS dans Internet Explorer {#jaws-in-internet-explorer}
 
-[*Job Access With Speech*](http://www.freedomscientific.com/Products/Blindness/JAWS) ou JAWS, est un lecteur d'écran utilisé de manière prolifique sur Windows.
+[*Job Access With Speech*](http://www.freedomscientific.com/Products/Blindness/JAWS) ou JAWS, est un lecteur d'écran très largement utilisé sur Windows.
 
 Reportez-vous aux guides suivants pour utiliser au mieux JAWS :
 
@@ -513,4 +513,4 @@ Reportez-vous aux guides suivants pour utiliser au mieux JAWS :
 Reportez-vous aux guides suivants pour utiliser au mieux ChromeVox :
 
 - [Aide de Google Chromebook - Utiliser le lecteur d'écran intégré](https://support.google.com/chromebook/answer/7031755?hl=fr).
-- [Références des raccourcis clavier pour ChromeVox Classic](http://www.chromevox.com/keyboard_shortcuts.html).
+- [Référence des raccourcis clavier pour ChromeVox Classic](http://www.chromevox.com/keyboard_shortcuts.html).

From 8027a0d2234e5cebf27d2b08b710765cf893aac5 Mon Sep 17 00:00:00 2001
From: Romain Linsolas <linsolas@gmail.com>
Date: Sat, 9 Mar 2019 11:32:48 +0100
Subject: [PATCH 6/9] Add `en anglais` note

---
 content/docs/accessibility.md | 78 +++++++++++++++++------------------
 1 file changed, 39 insertions(+), 39 deletions(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 4c4106384..c6c613352 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -18,9 +18,9 @@ Les [directives pour l'accessibilité au contenu web](https://www.w3.org/WAI/int
 
 Les listes de contrôle du WCAG ci-dessous en fournissent un aperçu :
 
-- [La liste de contrôle WCAG de Wuhcag](https://www.wuhcag.com/wcag-checklist/).
-- [La liste de contrôle WCAG de WebAIM](http://webaim.org/standards/wcag/checklist).
-- [La liste de contrôle de *The A11Y Project*](http://a11yproject.com/checklist.html).
+- [La liste de contrôle WCAG de Wuhcag](https://www.wuhcag.com/wcag-checklist/) (en anglais).
+- [La liste de contrôle WCAG de WebAIM](http://webaim.org/standards/wcag/checklist) (lien en anglais, une traduction est disponible [ici](https://anysurfer.be/fr/en-pratique/sites-web/checklist-wcag-2-1-de-webaim)).
+- [La liste de contrôle de *The A11Y Project*](http://a11yproject.com/checklist.html) (en anglais).
 
 ### WAI-ARIA {#wai-aria}
 
@@ -114,9 +114,9 @@ Tous les champs de formulaire HTML, tels que `<input>` et `<textarea>`, doivent
 
 Les ressources ci-dessous nous montrent comment procéder :
 
-- [Le W3C nous montre comment étiqueter les éléments](https://www.w3.org/WAI/tutorials/forms/labels/).
-- [Le WebAIM nous montre comment étiqueter les éléments](http://webaim.org/techniques/forms/controls).
-- [Le groupe Paciello explique ce qu'est un nom accessible](https://www.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/).
+- [Le W3C nous montre comment étiqueter les éléments](https://www.w3.org/WAI/tutorials/forms/labels/) (en anglais).
+- [Le WebAIM nous montre comment étiqueter les éléments](http://webaim.org/techniques/forms/controls) (en anglais).
+- [Le groupe Paciello explique ce qu'est un nom accessible](https://www.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/) (en anglais).
 
 Bien que ces pratiques HTML standard soient directement utilisables dans React, il faut noter que l'attribut `for` est écrit `htmlFor` en JSX :
 
@@ -129,14 +129,14 @@ Bien que ces pratiques HTML standard soient directement utilisables dans React,
 
 Les situations d'erreur doivent être comprises par tous les utilisateurs. Les liens ci-dessous montrent comment exposer les textes d'erreur aux lecteurs d'écran :
 
-- [Le W3C présente les notifications utilisateur](https://www.w3.org/WAI/tutorials/forms/notifications/).
-- [Le WebAIM se penche sur la validation de formulaire](http://webaim.org/techniques/formvalidation/).
+- [Le W3C présente les notifications utilisateur](https://www.w3.org/WAI/tutorials/forms/notifications/) (en anglais).
+- [Le WebAIM se penche sur la validation de formulaire](http://webaim.org/techniques/formvalidation/) (en anglais).
 
 ## Contrôle du focus {#focus-control}
 
 Assurez-vous que votre application web peut être complètement utilisable avec le clavier seul :
 
-- [Le WebAIM parle de l'accessibilité depuis le clavier](http://webaim.org/techniques/keyboard/).
+- [Le WebAIM parle de l'accessibilité depuis le clavier](http://webaim.org/techniques/keyboard/) (en anglais).
 
 ### Focus clavier et contour de focus {#keyboard-focus-and-focus-outline}
 
@@ -152,13 +152,13 @@ Fournissez un mécanisme permettant aux utilisateurs de sauter les sections de n
 
 Les liens d’évitement *(skiplinks, NdT)* sont des liens de navigation cachés qui ne sont visibles que lorsque l'utilisateur interagit au clavier avec la page. Ils sont très faciles à mettre en œuvre avec les ancres de pages internes et un peu de style :
 
-- [WebAIM - Liens de navigation de passage](http://webaim.org/techniques/skipnav/).
+- [WebAIM - Liens de navigation de passage](http://webaim.org/techniques/skipnav/) (en anglais).
 
 Utilisez également les éléments et rôles de repérage, tels que `<main>` et `<aside>`, afin de délimiter les régions de la page, car les technologies d'assistance permettent à l'utilisateur de naviguer rapidement vers ces sections.
 
 Pour en savoir plus sur l'utilisation de ces éléments pour améliorer l'accessibilité, rendez-vous sur :
 
-- [Repères d'accessibilité](http://www.scottohara.me/blog/2018/03/03/landmarks.html).
+- [Repères d'accessibilité](http://www.scottohara.me/blog/2018/03/03/landmarks.html) (en anglais).
 
 ### Gérer le focus programmatiquement {#programmatically-managing-focus}
 
@@ -370,14 +370,14 @@ C'est un exemple des nombreux cas où le fait de ne dépendre que des événemen
 
 Une expérience utilisateur plus complexe ne doit pas signifier une expérience moins accessible. Alors que l'accessibilité est plus facile à réaliser en codant au plus près du HTML, même les éléments d'interface les plus complexes peuvent être codés de manière accessible.
 
-Nous avons besoin ici de connaître les [rôles ARIA](https://www.w3.org/TR/wai-aria/#roles), ainsi que les [états et propriétés ARIA](https://www.w3.org/TR/wai-aria/#states_and_properties).
+Nous avons besoin ici de connaître les [rôles ARIA](https://www.w3.org/TR/wai-aria/#roles), ainsi que les [états et propriétés ARIA](https://www.w3.org/TR/wai-aria/#states_and_properties) (liens en anglais).
 Ce sont des boîtes à outils pleines d'attributs HTML pris en charge par JSX et qui nous permettent de construire des composants React pleinement accessibles et hautement fonctionnels.
 
 Chaque type d'élément d'interface a son modèle de conception spécifique et devrait fonctionner de la même manière avec les utilisateurs et les agents utilisateurs (notamment les navigateurs) :
 
-- [Pratiques de création WAI-ARIA - Modèles de conception et éléments d’interface](https://www.w3.org/TR/wai-aria-practices/#aria_ex)
-- [Heydon Pickering - Exemples ARIA](http://heydonworks.com/practical_aria_examples/).
-- [Composants inclusifs](https://inclusive-components.design/).
+- [Pratiques de création WAI-ARIA - Modèles de conception et éléments d’interface](https://www.w3.org/TR/wai-aria-practices/#aria_ex) (en anglais).
+- [Heydon Pickering - Exemples ARIA](http://heydonworks.com/practical_aria_examples/) (en anglais).
+- [Composants inclusifs](https://inclusive-components.design/) (en anglais).
 
 ## Autres points à considérer {#other-points-for-consideration}
 
@@ -385,13 +385,13 @@ Chaque type d'élément d'interface a son modèle de conception spécifique et d
 
 Indiquez la langue des pages de texte de façon à ce que les logiciels de lecture d'écran puissent sélectionner les paramètres de voix appropriés :
 
-- [WebAIM - Langue du document](http://webaim.org/techniques/screenreader/#language).
+- [WebAIM - Langue du document](http://webaim.org/techniques/screenreader/#language) (en anglais).
 
 ### Définir le titre du document {#setting-the-document-title}
 
 Définissez la balise `<title>` du document pour décrire correctement le contenu de la page courante, afin de garantir que l'utilisateur soit au courant du contexte de la page en cours :
 
-- [WCAG - Comprendre l'exigence du titre du document](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html).
+- [WCAG - Comprendre l'exigence du titre du document](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html) (en anglais).
 
 Nous pouvons le définir dans React en utilisant le [composant React Document Title](https://github.com/gaearon/react-document-title).
 
@@ -399,18 +399,18 @@ Nous pouvons le définir dans React en utilisant le [composant React Document Ti
 
 Assurez-vous que tous les textes lisibles sur votre site web ont un contraste des couleurs suffisant pour rester lisibles de manière optimale par les utilisateurs malvoyants :
 
-- [WCAG - Comprendre l'exigence du contraste des couleurs](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html).
-- [Tout savoir sur le contraste des couleurs et pourquoi vous devriez le repenser](https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/).
-- [A11yProject - Qu'est-ce que le contraste des couleurs ?](http://a11yproject.com/posts/what-is-color-contrast/)
+- [WCAG - Comprendre l'exigence du contraste des couleurs](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) (en anglais).
+- [Tout savoir sur le contraste des couleurs et pourquoi vous devriez le repenser](https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/) (en anglais).
+- [A11yProject - Qu'est-ce que le contraste des couleurs ?](http://a11yproject.com/posts/what-is-color-contrast/) (en anglais).
 
-Il peut être fastidieux de calculer manuellement les combinaisons de couleurs appropriées pour toutes les situations sur votre site web, aussi vous est-il possible de [calculer une palette entière de couleurs accessible avec Colorable](http://jxnblk.com/colorable/).
+Il peut être fastidieux de calculer manuellement les combinaisons de couleurs appropriées pour toutes les situations sur votre site web, aussi vous est-il possible de [calculer une palette entière de couleurs accessible avec Colorable](http://jxnblk.com/colorable/) (en anglais).
 
 Les outils aXe et WAVE mentionnés ci-dessous incluent également des tests de contraste des couleurs et signalent les erreurs de contraste.
 
 Si vous souhaitez étendre vos capacités de test de contraste, vous pouvez utiliser ces outils :
 
-- [WebAIM - Vérification de contraste des couleurs](http://webaim.org/resources/contrastchecker/).
-- [The Paciello Group - Analyseur de contraste des couleurs](https://www.paciellogroup.com/resources/contrastanalyser/).
+- [WebAIM - Vérification de contraste des couleurs](http://webaim.org/resources/contrastchecker/) (en anglais).
+- [The Paciello Group - Analyseur de contraste des couleurs](https://www.paciellogroup.com/resources/contrastanalyser/) (en anglais).
 
 ## Outils de développement et de test {#development-and-testing-tools}
 
@@ -450,23 +450,23 @@ Il existe un certain nombre d'outils pour exécuter des audits d'accessibilité
 
 Deque Systems propose [aXe-core](https://github.com/dequelabs/axe-core) pour automatiser les tests d'accessibilité de bout en bout de vos applications. Ce module comprend des intégrations pour Selenium.
 
-[*The Accessibility Engine*](https://www.deque.com/products/axe/) ou aXe, est une extension du navigateur qui fournit un inspecteur d'accessibilité en se basant sur `aXe-core`.
+[*The Accessibility Engine*](https://www.deque.com/products/axe/) (en anglais) ou aXe, est une extension du navigateur qui fournit un inspecteur d'accessibilité en se basant sur `aXe-core`.
 
 Vous pouvez aussi utiliser le module [react-axe](https://github.com/dylanb/react-axe) pour signaler directement ces résultats d'accessibilité dans la console durant le développement et le débogage.
 
 #### WebAIM WAVE {#webaim-wave}
 
-L'[outil Web Accessibility Evaluation](http://wave.webaim.org/extension/) est une autre extension du navigateur pour l'accessibilité.
+L'[outil Web Accessibility Evaluation](http://wave.webaim.org/extension/) (en anglais) est une autre extension du navigateur pour l'accessibilité.
 
 #### Inspecteurs d'accessibilité et arbre d'accessibilité {#accessibility-inspectors-and-the-accessibility-tree}
 
-[L'arbre d'accessibilité](https://www.paciellogroup.com/blog/2015/01/the-browser-accessibility-tree/) est un sous-ensemble de l'arbre DOM qui contient des objets d'accessibilité pour chaque élément du DOM devant être exposé aux technologies d'assistance, telles que les lecteurs d'écrans.
+[L'arbre d'accessibilité](https://www.paciellogroup.com/blog/2015/01/the-browser-accessibility-tree/) (en anglais) est un sous-ensemble de l'arbre DOM qui contient des objets d'accessibilité pour chaque élément du DOM devant être exposé aux technologies d'assistance, telles que les lecteurs d'écrans.
 
 Sur certains navigateurs, nous pouvons facilement consulter les informations d'accessibilité pour chaque élément de l'arbre d'accessibilité :
 
-- [Utiliser l'inspecteur d'accessibilité de Firefox](https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector).
-- [Activer l'inspecteur d'accessibilité de Chrome](https://gist.github.com/marcysutton/0a42f815878c159517a55e6652e3b23a).
-- [Utiliser l'inspecteur d'accessibilité d'OS X Safari](https://developer.apple.com/library/content/documentation/Accessibility/Conceptual/AccessibilityMacOSX/OSXAXTestingApps.html).
+- [Utiliser l'inspecteur d'accessibilité de Firefox](https://developer.mozilla.org/fr/docs/Outils/Inspecteur_accessibilite).
+- [Activer l'inspecteur d'accessibilité de Chrome](https://gist.github.com/marcysutton/0a42f815878c159517a55e6652e3b23a) (en anglais).
+- [Utiliser l'inspecteur d'accessibilité d'OS X Safari](https://developer.apple.com/library/content/documentation/Accessibility/Conceptual/AccessibilityMacOSX/OSXAXTestingApps.html) (en anglais).
 
 ### Lecteurs d'écran {#screen-readers}
 
@@ -478,12 +478,12 @@ Veuillez noter que les combinaisons navigateur / lecteur d'écran ont leur impor
 
 #### NVDA dans Firefox {#nvda-in-firefox}
 
-[*NonVisual Desktop Access*](https://www.nvaccess.org/) ou NVDA est un logiciel libre de lecteur d'écran qui est largement utilisé.
+[*NonVisual Desktop Access*](https://www.nvaccess.org/) (en anglais) ou NVDA est un logiciel libre de lecteur d'écran qui est largement utilisé.
 
 Reportez-vous aux guides suivants pour savoir comment utiliser au mieux NVDA :
 
-- [WebAIM - Utiliser NVDA pour évaluer l'accessibilité web](http://webaim.org/articles/nvda/).
-- [Deque - Raccourcis clavier NVDA](https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts).
+- [WebAIM - Utiliser NVDA pour évaluer l'accessibilité web](http://webaim.org/articles/nvda/) (en anglais).
+- [Deque - Raccourcis clavier NVDA](https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts) (en anglais).
 
 #### VoiceOver dans Safari {#voiceover-in-safari}
 
@@ -491,18 +491,18 @@ VoiceOver est un lecteur d'écran intégré dans les appareils d'Apple.
 
 Reportez-vous aux guides suivants pour savoir comment activer et utiliser VoiceOver :
 
-- [WebAIM - Utiliser VoiceOver pour évaluer l'accessibilité web](http://webaim.org/articles/voiceover/).
-- [Deque - Raccourcis clavier pour VoiceOver sur OS X](https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts).
-- [Deque - Raccourcis pour VoiceOver sur iOS](https://dequeuniversity.com/screenreaders/voiceover-ios-shortcuts).
+- [WebAIM - Utiliser VoiceOver pour évaluer l'accessibilité web](http://webaim.org/articles/voiceover/) (en anglais).
+- [Deque - Raccourcis clavier pour VoiceOver sur OS X](https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts) (en anglais).
+- [Deque - Raccourcis pour VoiceOver sur iOS](https://dequeuniversity.com/screenreaders/voiceover-ios-shortcuts) (en anglais).
 
 #### JAWS dans Internet Explorer {#jaws-in-internet-explorer}
 
-[*Job Access With Speech*](http://www.freedomscientific.com/Products/Blindness/JAWS) ou JAWS, est un lecteur d'écran très largement utilisé sur Windows.
+[*Job Access With Speech*](http://www.freedomscientific.com/Products/Blindness/JAWS) (en anglais) ou JAWS, est un lecteur d'écran très largement utilisé sur Windows.
 
 Reportez-vous aux guides suivants pour utiliser au mieux JAWS :
 
-- [WebAIM - Utiliser JAWS pour évaluer l'accessibilité web](http://webaim.org/articles/jaws/).
-- [Deque - Raccourcis clavier pour JAWS](https://dequeuniversity.com/screenreaders/jaws-keyboard-shortcuts).
+- [WebAIM - Utiliser JAWS pour évaluer l'accessibilité web](http://webaim.org/articles/jaws/) (en anglais).
+- [Deque - Raccourcis clavier pour JAWS](https://dequeuniversity.com/screenreaders/jaws-keyboard-shortcuts) (en anglais).
 
 ### Autres lecteurs d'écran {#other-screen-readers}
 
@@ -513,4 +513,4 @@ Reportez-vous aux guides suivants pour utiliser au mieux JAWS :
 Reportez-vous aux guides suivants pour utiliser au mieux ChromeVox :
 
 - [Aide de Google Chromebook - Utiliser le lecteur d'écran intégré](https://support.google.com/chromebook/answer/7031755?hl=fr).
-- [Référence des raccourcis clavier pour ChromeVox Classic](http://www.chromevox.com/keyboard_shortcuts.html).
+- [Référence des raccourcis clavier pour ChromeVox Classic](http://www.chromevox.com/keyboard_shortcuts.html) (en anglais).

From 0f91d748464254d571558fdb61cf492050ced845 Mon Sep 17 00:00:00 2001
From: Romain Linsolas <linsolas@gmail.com>
Date: Sat, 9 Mar 2019 11:34:23 +0100
Subject: [PATCH 7/9] Rephrase

---
 content/docs/accessibility.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index c6c613352..cb5b8d5d5 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -239,7 +239,7 @@ Le composant [react-aria-modal](https://github.com/davidtheclark/react-aria-moda
 
 Assurez-vous que toutes les fonctionnalités exposées via un événement de souris ou de pointeur sont également accessibles avec le clavier seul. Ne dépendre que du pointeur peut aboutir à de nombreuses situations où les utilisateurs de clavier ne pourront pas utiliser votre application.
 
-Pour illustrer cela, examinons un exemple prolifique où l'accessibilité est cassée par les événements de clics. Il s'agit du modèle de clic extérieur dans lequel un utilisateur peut désactiver un menu déroulant en cliquant à l'extérieur de l'élément.
+Pour illustrer cela, examinons un exemple prolifique où l'accessibilité est cassée par les événements de clics. Il s'agit du modèle de clic extérieur dans lequel un utilisateur peut désactiver une liste déroulant en cliquant à l'extérieur de l'élément.
 
 <img src="../images/docs/outerclick-with-mouse.gif" alt="Un bouton ouvrant une liste déroulante implémenté par le modèle du clic externe et déclenché par la souris montrant que l'action de fermeture fonctionne." />
 

From efeeb17fc198acdbef243ded1116735633e7a76d Mon Sep 17 00:00:00 2001
From: Romain Linsolas <linsolas@gmail.com>
Date: Sat, 9 Mar 2019 11:37:21 +0100
Subject: [PATCH 8/9] Fix typo

---
 content/docs/accessibility.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index cb5b8d5d5..13a9b6312 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -239,7 +239,7 @@ Le composant [react-aria-modal](https://github.com/davidtheclark/react-aria-moda
 
 Assurez-vous que toutes les fonctionnalités exposées via un événement de souris ou de pointeur sont également accessibles avec le clavier seul. Ne dépendre que du pointeur peut aboutir à de nombreuses situations où les utilisateurs de clavier ne pourront pas utiliser votre application.
 
-Pour illustrer cela, examinons un exemple prolifique où l'accessibilité est cassée par les événements de clics. Il s'agit du modèle de clic extérieur dans lequel un utilisateur peut désactiver une liste déroulant en cliquant à l'extérieur de l'élément.
+Pour illustrer cela, examinons un exemple prolifique où l'accessibilité est cassée par les événements de clics. Il s'agit du modèle de clic extérieur dans lequel un utilisateur peut désactiver une liste déroulante en cliquant à l'extérieur de l'élément.
 
 <img src="../images/docs/outerclick-with-mouse.gif" alt="Un bouton ouvrant une liste déroulante implémenté par le modèle du clic externe et déclenché par la souris montrant que l'action de fermeture fonctionne." />
 

From 7637998b1d15f13a308234ce823085593d35cdcd Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Sat, 9 Mar 2019 15:37:00 +0100
Subject: [PATCH 9/9] Final tweaks

---
 content/docs/accessibility.md | 39 ++++++++++++++++++-----------------
 1 file changed, 20 insertions(+), 19 deletions(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 13a9b6312..1fb930918 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -4,9 +4,9 @@ title: Accessibilité
 permalink: docs/accessibility.html
 ---
 
-## Pourquoi l'accessibilité ? {#why-accessibility}
+## Pourquoi l'accessibilité ? {#why-accessibility}
 
-L'accessibilité du web (aussi référencée sous la contraction [**a11y**](https://fr.wiktionary.org/wiki/a11y)) concerne le design et la création de sites web qui peuvent être utilisés par tout le monde. La prise en charge de l'accessibilité est nécessaire pour permettre aux technologies d'assistance d'interpréter les pages web. 
+L'accessibilité du web (aussi désignée par la contraction [**a11y**](https://fr.wiktionary.org/wiki/a11y)) concerne le design et la création de sites web qui peuvent être utilisés par tout le monde. La prise en charge de l'accessibilité est nécessaire pour permettre aux technologies d'assistance d'interpréter les pages web.
 
 React prend totalement en charge la création de sites web accessibles, en s'appuyant souvent sur des techniques HTML standard.
 
@@ -19,7 +19,7 @@ Les [directives pour l'accessibilité au contenu web](https://www.w3.org/WAI/int
 Les listes de contrôle du WCAG ci-dessous en fournissent un aperçu :
 
 - [La liste de contrôle WCAG de Wuhcag](https://www.wuhcag.com/wcag-checklist/) (en anglais).
-- [La liste de contrôle WCAG de WebAIM](http://webaim.org/standards/wcag/checklist) (lien en anglais, une traduction est disponible [ici](https://anysurfer.be/fr/en-pratique/sites-web/checklist-wcag-2-1-de-webaim)).
+- [La liste de contrôle WCAG de WebAIM](http://webaim.org/standards/wcag/checklist) (en anglais, une traduction est disponible [ici](https://anysurfer.be/fr/en-pratique/sites-web/checklist-wcag-2-1-de-webaim)).
 - [La liste de contrôle de *The A11Y Project*](http://a11yproject.com/checklist.html) (en anglais).
 
 ### WAI-ARIA {#wai-aria}
@@ -41,7 +41,7 @@ Remarquez que tous les attributs HTML `aria-*` sont autorisés dans JSX. Là où
 
 ## HTML sémantique {#semantic-html}
 
-Le HTML sémantique est la base de l'accessibilité dans une application web. L'utilisation des différents éléments HTML pour renforcer la signification de l'information de nos sites web offre généralement de l'accessibilité à peu de frais.
+Le HTML sémantique est la base de l'accessibilité dans une application web. L'utilisation des différents éléments HTML pour renforcer la signification de l'information de nos sites web améliore généralement l'accessibilité à peu de frais.
 
 - [La référence des éléments HTML sur MDN](https://developer.mozilla.org/fr/docs/Web/HTML/Element).
 
@@ -75,12 +75,13 @@ function Glossary(props) {
 
 Vous pouvez représenter une liste d'éléments comme un tableau de fragments, comme vous le feriez avec tout autre type d'élément :
 
-```javascript{6,9}
+```javascript{7,10}
 function Glossary(props) {
   return (
     <dl>
       {props.items.map(item => (
-        // Les fragments doivent aussi disposer de la propriété `key` lors de l'itération sur les listes.
+        // Les fragments doivent aussi disposer de la propriété `key`
+        // lors de l'itération sur les listes.
         <Fragment key={item.id}>
           <dt>{item.term}</dt>
           <dd>{item.description}</dd>
@@ -91,7 +92,7 @@ function Glossary(props) {
 }
 ```
 
-Lorsque vous n'avez pas besoin de définir de propriété sur la balise fragment, vous pouvez utiliser la [syntaxe courte](/docs/fragments.html#short-syntax), si votre outillage le prend en charge :
+Lorsque vous n'avez pas besoin de définir de propriété sur la balise fragment, vous pouvez utiliser la [syntaxe courte](/docs/fragments.html#short-syntax), si votre outillage la prend en charge :
 
 ```javascript{3,6}
 function ListItem({ item }) {
@@ -152,17 +153,17 @@ Fournissez un mécanisme permettant aux utilisateurs de sauter les sections de n
 
 Les liens d’évitement *(skiplinks, NdT)* sont des liens de navigation cachés qui ne sont visibles que lorsque l'utilisateur interagit au clavier avec la page. Ils sont très faciles à mettre en œuvre avec les ancres de pages internes et un peu de style :
 
-- [WebAIM - Liens de navigation de passage](http://webaim.org/techniques/skipnav/) (en anglais).
+- [WebAIM - Liens d’évitement](http://webaim.org/techniques/skipnav/) (en anglais).
 
 Utilisez également les éléments et rôles de repérage, tels que `<main>` et `<aside>`, afin de délimiter les régions de la page, car les technologies d'assistance permettent à l'utilisateur de naviguer rapidement vers ces sections.
 
-Pour en savoir plus sur l'utilisation de ces éléments pour améliorer l'accessibilité, rendez-vous sur :
+Pour en apprendre davantage sur l'utilisation de ces éléments afin d’améliorer l'accessibilité, rendez-vous sur :
 
 - [Repères d'accessibilité](http://www.scottohara.me/blog/2018/03/03/landmarks.html) (en anglais).
 
 ### Gérer le focus programmatiquement {#programmatically-managing-focus}
 
-Nos applications React modifient en continu le DOM HTML au cours de l'exécution, ce qui entraîne parfois la perte du focus clavier ou le positionne sur un élément inattendu. Pour corriger ça, nous devons déplacer le focus clavier programmatiquement dans la bonne direction. En redonnant par exemple le focus clavier à un bouton qui ouvre une fenêtre modale, lorsque cette dernière se referme.
+Nos applications React modifient en continu le DOM HTML au cours de l'exécution, ce qui entraîne parfois la perte du focus clavier ou le positionne sur un élément inattendu. Pour corriger ça, nous devons déplacer le focus clavier programmatiquement dans la bonne direction. On peut par exemple redonner le focus clavier à un bouton qui ouvre une fenêtre modale, lorsque cette dernière se referme.
 
 La documentation web du MDN se penche sur ça et décrit comment nous pouvons construire [des éléments d’interface JavaScript permettant la navigation au clavier](https://developer.mozilla.org/fr/docs/Contrôles_DHTML_personnalisés_navigables_au_clavier).
 
@@ -227,7 +228,7 @@ class Parent extends React.Component {
 this.inputElement.current.focus();
 ```
 
-Quand vous enrobez des composants à l’aide d’un composant d’ordre supérieur *(Higher-Order Component, ou HOC, NdT)*, il est recommandé de [transférer la référence](/docs/forwarding-refs.html) vers l’élément enrobé grâce à la fonction `forwardRef` de React. Si un HOC tiers n'implémente par le transfert de référence, le modèle ci-dessus peut être utilisé comme solution de secours.
+Quand vous enrobez des composants à l’aide d’un composant d’ordre supérieur *(Higher-Order Component, ou HOC, NdT)*, il est recommandé de [transférer la référence](/docs/forwarding-refs.html) vers l’élément enrobé grâce à la fonction `forwardRef` de React. Si un HOC tiers n'implémente pas le transfert de référence, le modèle ci-dessus peut être utilisé comme solution de secours.
 
 Le composant [react-aria-modal](https://github.com/davidtheclark/react-aria-modal) est un excellent exemple de la gestion du focus. Il s'agit de l'un des rares exemples de fenêtre modale complètement accessible. Non seulement il définit le focus initial sur le bouton d'annulation (empêchant l'utilisateur du clavier d'activer accidentellement l'action de succès), mais il restreint bien le focus clavier à l'intérieur de la fenêtre modale et il remet à terme le focus sur l'élément qui a originellement déclenché la fenêtre modale.
 
@@ -239,7 +240,7 @@ Le composant [react-aria-modal](https://github.com/davidtheclark/react-aria-moda
 
 Assurez-vous que toutes les fonctionnalités exposées via un événement de souris ou de pointeur sont également accessibles avec le clavier seul. Ne dépendre que du pointeur peut aboutir à de nombreuses situations où les utilisateurs de clavier ne pourront pas utiliser votre application.
 
-Pour illustrer cela, examinons un exemple prolifique où l'accessibilité est cassée par les événements de clics. Il s'agit du modèle de clic extérieur dans lequel un utilisateur peut désactiver une liste déroulante en cliquant à l'extérieur de l'élément.
+Pour illustrer ça, examinons un exemple courant où l'accessibilité est cassée par les événements de clics. Il s'agit du modèle de clic extérieur dans lequel un utilisateur peut désactiver une liste déroulante en cliquant à l'extérieur de l'élément.
 
 <img src="../images/docs/outerclick-with-mouse.gif" alt="Un bouton ouvrant une liste déroulante implémenté par le modèle du clic externe et déclenché par la souris montrant que l'action de fermeture fonctionne." />
 
@@ -338,7 +339,7 @@ class BlurExample extends React.Component {
 
   render() {
     // React nous aide en assurant la propagation des
-    //  événements `blur` et `focus` vers le parent.
+    // événements `blur` et `focus` vers le parent.
     return (
       <div onBlur={this.onBlurHandler}
            onFocus={this.onFocusHandler}>
@@ -373,7 +374,7 @@ Une expérience utilisateur plus complexe ne doit pas signifier une expérience
 Nous avons besoin ici de connaître les [rôles ARIA](https://www.w3.org/TR/wai-aria/#roles), ainsi que les [états et propriétés ARIA](https://www.w3.org/TR/wai-aria/#states_and_properties) (liens en anglais).
 Ce sont des boîtes à outils pleines d'attributs HTML pris en charge par JSX et qui nous permettent de construire des composants React pleinement accessibles et hautement fonctionnels.
 
-Chaque type d'élément d'interface a son modèle de conception spécifique et devrait fonctionner de la même manière avec les utilisateurs et les agents utilisateurs (notamment les navigateurs) :
+Chaque type d'élément d'interface a son modèle de conception spécifique et devrait fonctionner de la même manière avec les utilisateurs et les agents utilisateurs (notamment les navigateurs et les lecteurs d’écran) :
 
 - [Pratiques de création WAI-ARIA - Modèles de conception et éléments d’interface](https://www.w3.org/TR/wai-aria-practices/#aria_ex) (en anglais).
 - [Heydon Pickering - Exemples ARIA](http://heydonworks.com/practical_aria_examples/) (en anglais).
@@ -389,7 +390,7 @@ Indiquez la langue des pages de texte de façon à ce que les logiciels de lectu
 
 ### Définir le titre du document {#setting-the-document-title}
 
-Définissez la balise `<title>` du document pour décrire correctement le contenu de la page courante, afin de garantir que l'utilisateur soit au courant du contexte de la page en cours :
+Définissez la balise `<title>` du document pour décrire correctement le contenu de la page courante, afin de garantir que l'utilisateur est au courant du contexte de la page en cours :
 
 - [WCAG - Comprendre l'exigence du titre du document](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html) (en anglais).
 
@@ -401,7 +402,7 @@ Assurez-vous que tous les textes lisibles sur votre site web ont un contraste de
 
 - [WCAG - Comprendre l'exigence du contraste des couleurs](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) (en anglais).
 - [Tout savoir sur le contraste des couleurs et pourquoi vous devriez le repenser](https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/) (en anglais).
-- [A11yProject - Qu'est-ce que le contraste des couleurs ?](http://a11yproject.com/posts/what-is-color-contrast/) (en anglais).
+- [A11yProject - Qu'est-ce que le contraste des couleurs ?](http://a11yproject.com/posts/what-is-color-contrast/) (en anglais).
 
 Il peut être fastidieux de calculer manuellement les combinaisons de couleurs appropriées pour toutes les situations sur votre site web, aussi vous est-il possible de [calculer une palette entière de couleurs accessible avec Colorable](http://jxnblk.com/colorable/) (en anglais).
 
@@ -421,9 +422,9 @@ Il existe de nombreux outils que nous pouvons utiliser pour nous assister durant
 La vérification de loin la plus simple, mais aussi l'une des plus importantes, consiste à tester si l'ensemble de votre site web est accessible et utilisable avec le clavier seul. Procédez ainsi :
 
 1. Débranchez votre souris.
-1. Utilisez `Tab` et `Shift + Tab` pour naviguer.
-1. Utilisez `Entrée` pour activer des éléments.
-1. Le cas échéant, utilisez les touches de curseur du clavier pour interagir avec certains éléments, tels que les menus et les listes déroulantes.
+2. Utilisez `Tab` et `Shift + Tab` pour naviguer.
+3. Utilisez `Entrée` pour activer des éléments.
+4. Le cas échéant, utilisez les touches de curseur du clavier pour interagir avec certains éléments, tels que les menus et les listes déroulantes.
 
 ### Assistance au développement {#development-assistance}