DazzlingFugu · BlueCutOfficial · Dec 7, 2023 · Dec 8, 2023 · Dec 8, 2023 · Dec 18, 2023
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -111,9 +111,11 @@ If the resource is not translated or if the translation is incomplete, keep the
 ```diff
 - [Using ARIA:](https://www.w3.org/TR/using-aria/) a practical guide for developers on how to add accessibility information to HTML element
 + <!-- spell ignore -->
-+ [Using ARIA](https://www.w3.org/TR/using-aria/) : un guide pratique pour ajouter aux éléments HTML des informations accessibles.
++ <span lang="en">[Using ARIA](https://www.w3.org/TR/using-aria/)</span>&nbsp;: un guide pratique pour ajouter aux éléments HTML des informations accessibles.
 ```
 
+Markdown supports HTML. Embedding English titles in a `<span lang="en">` HTML tag informs assistive technologies the content of that link is written in English. Using this information, screen readers can adapt the voice so the reading is more natural and understandable.
+
 ### 4. Set non-breakable spaces
 
 `&nbsp;` is the HTML sign for "non-breakable space" and can be used in markdown as well. If the space is not set non-breakable, then a punctuation mark like ":" or ";" could be separated from the previous word and moved to the next line, which is incorrect.

diff --git a/app/index.html b/app/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="fr">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">

diff --git a/guides/accessibility/application-considerations.md b/guides/accessibility/application-considerations.md
@@ -5,7 +5,7 @@ Dans cette partie, vous allez en apprendre plus sur les différentes configurati
 Déclarer la langue d'une page HTML permet aux utilisateurs de mieux comprendre son contenu.
 
 > Les outils d'accessibilités ainsi que les navigateurs Web sont capables d'avoir un rendu plus précis quand la langue d'une page est définie. Les lecteurs d'écrans peuvent ainsi affiner leurs prononciations. Les navigateurs Web peuvent correctement afficher les caractères et les scripts. Les lecteurs vidéos peuvent afficher les bons sous-titres. Tout ceci permet aux utilisateurs ayant un handicap, de mieux comprendre le contenu d'une page Web.
-> <!-- spell ignore -->[WCAG Success Criterion 3.1.1: Intent](https://www.w3.org/WAI/WCAG21/Understanding/language-of-page.html#intent)
+> <!-- spell ignore --><span lang="en">[WCAG Success Criterion 3.1.1: Intent](https://www.w3.org/WAI/WCAG21/Understanding/language-of-page.html#intent)</span>
 
 La langue principale doit être définie au niveau de l'attribut `lang` de l'élément `<html>`. Lors de la création d'une nouvelle application, vous pouvez utiliser l'option `--lang` de la commande `ember new` afin d'en définir sa langue principale.
 
@@ -45,15 +45,15 @@ Chaque addon doit être choisi en fonction des bénéfices qu'il apporte et de s
 Voici quelques exemples d'addons axés sur l'accessibilité créés par des membres de la communauté Ember&nbsp;:
 
 - [ember-a11y-landmarks](https://github.com/ember-a11y/ember-a11y-landmarks) - Addon facilitant l'utilisation des rôles sémantiques HTML afin d'améliorer l'accessibilité.
-- [ember-component-focus](https://github.com/ember-a11y/ember-component-focus) - Une _mixin_ pour ajouter des méthodes à vos composants Ember afin de vous aider à gérer l'élément ayant le focus.
-- [ember-steps](https://github.com/rwjblue/ember-steps) - Addon de création de _wizard_, de navigation avec onglets, et plus...
+- [ember-component-focus](https://github.com/ember-a11y/ember-component-focus) - Une <span lang="en">_mixin_</span> pour ajouter des méthodes à vos composants Ember afin de vous aider à gérer l'élément ayant le focus.
+- [ember-steps](https://github.com/rwjblue/ember-steps) - Addon de création de <span lang="en">_wizard_</span>, de navigation avec onglets, et plus...
 - [ember-page-title](https://github.com/tim-evans/ember-page-title) - Addon de gestion des titres de page pour applications Ember.js
 - [ember-self-focused](https://github.com/linkedin/self-focused/tree/master/packages/ember-self-focused) - Bouge le focus sur le corps d'une page au changement de route.
 - [ember-keyboard](https://github.com/patience-tema-baron/ember-keyboard) - Addon pour simplifier la gestion des événements clavier.
 - [ember-a11y-testing](https://github.com/ember-a11y/ember-a11y-testing) - Pour ajouter facilement des tests d'accessibilité dans une suite de tests Ember.
 - [a11y-announcer](https://github.com/ember-a11y/a11y-announcer) - Addon permettant d'annoncer les changements de route côté lecteur d'écran.
-- [ember-template-lint](https://github.com/ember-template-lint/ember-template-lint) - _Linter_ pour les _templates_ Ember.
-  ![Aperçu d'un compte rendu de _lint_ d'un _template_](/images/accessibility/application-considerations/template-lint.png)
+- [ember-template-lint](https://github.com/ember-template-lint/ember-template-lint) - <span lang="en">_Linter_</span> pour les <span lang="en">_templates_</span> Ember.
+  ![Aperçu d'un compte rendu de <span lang="en">_lint_</span> d'un <span lang="en">_template_</span>](/images/accessibility/application-considerations/template-lint.png)
 
 <!-- spell ignore -->
-Bien qu'il y ait beaucoup de notions à prendre en compte et à connaître, voici un aide-mémoire pour vous aider à commencer&nbsp;: [Accessibility Cheat Sheet](https://moritzgiessmann.de/accessibility-cheatsheet/)
+Bien qu'il y ait beaucoup de notions à prendre en compte et à connaître, voici un aide-mémoire pour vous aider à commencer&nbsp;: <span lang="en">[Accessibility Cheat Sheet](https://moritzgiessmann.de/accessibility-cheatsheet/)</span>
diff --git a/guides/accessibility/components.md b/guides/accessibility/components.md
@@ -28,7 +28,7 @@ Alors nous aurions dû écrire le code suivant&nbsp;:
 - ajouter la fonctionnalité du clavier (une fonction JavaScript pour activer l'action associée quand la touche `ENTRÉE` est pressée)
 
 <!-- spell ignore -->
-Ceci n'est qu'un exemple d'utilisation des intégrations HTML pour améliorer l'accessibilité et réduire le besoin de personnaliser le code. Pour en savoir plus&nbsp;: ["Just use a button"](https://developer.paciellogroup.com/blog/2011/04/html5-accessibility-chops-just-use-a-button/).
+Ceci n'est qu'un exemple d'utilisation des intégrations HTML pour améliorer l'accessibilité et réduire le besoin de personnaliser le code. Pour en savoir plus&nbsp;: <span lang="en">["Just use a button"](https://developer.paciellogroup.com/blog/2011/04/html5-accessibility-chops-just-use-a-button/)</span>.
 
 ## Gestion du focus dans les composants
 
@@ -37,11 +37,11 @@ Le focus est une manière parmi tant d'autres pour un composant de communiquer a
 Par exemple quand vous pressez l'onglet d'une page, ou cliquez dans un champ de formulaire, une bordure bleue va le plus souvent apparaître autour de l'élément. C'est en partie ce que l'on peut appeler le focus. Nous pouvons utiliser JavaScript pour contrôler le focus dans nos applications, permettant la navigation au clavier et l'utilisation des lecteurs d'écrans.
 
 <!-- spell ignore -->
-Cet article est une bonne introduction pour en apprendre plus sur le focus&nbsp;: [Keyboard accessibility](https://webaim.org/techniques/keyboard/)
+Cet article est une bonne introduction pour en apprendre plus sur le focus&nbsp;: <span lang="en">[Keyboard accessibility](https://webaim.org/techniques/keyboard/)</span>.
 
 Voici quelques astuces pour bien commencer&nbsp;:
 
-- <!-- spell ignore --> Il y a une différence entre le mode navigateur et le mode focus dans un lecteur d'écrans- En savoir plus: ["Focus Please"](https://codepen.io/melsumner/live/ZJeYoP).
+- <!-- spell ignore --> Il y a une différence entre le mode navigateur et le mode focus dans un lecteur d'écrans- En savoir plus: <span lang="en">["Focus Please"](https://codepen.io/melsumner/live/ZJeYoP)</span>.
 - Le focus doit retourner d'où il provient, par exemple, si un élément bouton `<button>` ouvre une modale, le focus devrait ensuite retourner sur le même élément bouton quand cette modale est fermée.
 - On notera que `role="presentation"` ou `aria-hidden="true"` ne devraient pas être utilisés sur un élément qui peut être ciblé.
 
@@ -50,7 +50,7 @@ Voici quelques astuces pour bien commencer&nbsp;:
 Tous les éléments interactifs doivent avoir un nom accessible. Mais qu'est ce que ça signifie exactement&nbsp;?
 
 <!-- spell ignore -->
-Ça signifie que le code fourni doit être lisible par d'autres machines (par exemple, les technologies d'assistance comme les lecteurs d'écrans). Voici de la documentation pour comprendre comment ce nom accessible est déterminé: [Accessible Name and Description Computation](https://www.w3.org/TR/accname-1.1/).
+Ça signifie que le code fourni doit être lisible par d'autres machines (par exemple, les technologies d'assistance comme les lecteurs d'écrans). Voici de la documentation pour comprendre comment ce nom accessible est déterminé: <span lang="en">[Accessible Name and Description Computation](https://www.w3.org/TR/accname-1.1/)</span>.
 
 
 Cependant, les méthodes les plus communes pour fournir des noms accessibles peuvent être examinées dans la section suivante.

diff --git a/guides/accessibility/learning-resources.md b/guides/accessibility/learning-resources.md
@@ -5,31 +5,30 @@ Ces ressources d'apprentissage sur l'accessibilité ont pour but d'apporter une
 - [Documentation Web MDN: Accessibilité](https://developer.mozilla.org/fr/docs/Learn/Accessibility)
 
 <!-- spell ignore -->
-- [Using ARIA](https://www.w3.org/TR/using-aria/) : un guide pratique pour ajouter aux éléments HTML des informations accessibles.
-- [Web Content Accessibility Guidelines(WCAG) : Directives du contenu web sur l'accessibilité 2.1](https://www.w3.org/TR/WCAG21/)
-- [Accessible Rich Internet Applications (ARIA) : Applications Internet Riches et Accessibles 1.1](https://www.w3.org/TR/wai-aria-1.1/)
-- [How to Meet WCAG (Quick Reference)](https://www.w3.org/WAI/WCAG21/quickref/)
+- <span lang="en">[Using ARIA](https://www.w3.org/TR/using-aria/)</span>&nbsp;: un guide pratique pour ajouter aux éléments HTML des informations accessibles.
+- <span lang="en">[Web Content Accessibility Guidelines(WCAG)](https://www.w3.org/TR/WCAG21/)</span>&nbsp;: Directives du contenu web sur l'accessibilité 2.1.
+- <span lang="en">[Accessible Rich Internet Applications (ARIA)](https://www.w3.org/TR/wai-aria-1.1/)</span>&nbsp;: Applications Internet Riches et Accessibles 1.1.
+- <span lang="en">[How to Meet WCAG (Quick Reference)](https://www.w3.org/WAI/WCAG21/quickref/)</span>
 
 ## Ressources pratiques
 
-- <!-- spell ignore -->[Accessibility Insights](https://accessibilityinsights.io/)- Utiliser FastPass pour trouver des problèmes communs à fort impact
+- <!-- spell ignore --><span lang="en">[Accessibility Insights](https://accessibilityinsights.io/)</span>&nbsp;: Utiliser FastPass pour trouver des problèmes communs à fort impact
 - [Extension aXe pour Chrome](https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd)
-- <!-- spell ignore -->[Accessibility Support](https://a11ysupport.io/)- Comprendre si son code marche avec les technologies d'assistance
-- <!-- spell ignore -->[How and where to report accessibility bugs](https://www.digitala11y.com/how-where-to-report-accessibility-bugs/)
-
+- <!-- spell ignore --><span lang="en">[Accessibility Support](https://a11ysupport.io/))</span>&nbsp;: Comprendre si son code marche avec les technologies d'assistance
+- <!-- spell ignore --><span lang="en">[How and where to report accessibility bugs](https://www.digitala11y.com/how-where-to-report-accessibility-bugs/)/span>
 
 ### Design
 
-- [ColorSafe](http://colorsafe.co/)- Appuyer les designers en proposant de magnifiques palettes de couleurs accessibles, basées sur les directives WCAG, avec ratio de couleurs de contraste de textes et arrières plans.
+- [ColorSafe](http://colorsafe.co/)&nbsp;: Appuyer les designers en proposant de magnifiques palettes de couleurs accessibles, basées sur les directives WCAG, avec ratio de couleurs de contraste de textes et arrières plans.
 - [Créateur de palettes de couleur accessibles](https://toolness.github.io/accessible-color-matrix/)
 
 
 ### Écriture
 
-- [plainlanguage.gov](https://plainlanguage.gov/) - Apprendre comment écrire d'une manière accessible et inclusive pour une compréhension de lecture plus facile.
+- [plainlanguage.gov](https://plainlanguage.gov/)&nbsp;: Apprendre comment écrire d'une manière accessible et inclusive pour une compréhension de lecture plus facile.
 
 
 ### Autres articles utiles
 
 <!-- spell ignore -->
-- [The difference between keyboard and screen reader navigation](https://tink.uk/the-difference-between-keyboard-and-screen-reader-navigation/)
+- <span lang="en">[The difference between keyboard and screen reader navigation](https://tink.uk/the-difference-between-keyboard-and-screen-reader-navigation/)</span>
diff --git a/guides/accessibility/page-template-considerations.md b/guides/accessibility/page-template-considerations.md
@@ -1,7 +1,7 @@
 Quand on regarde la page d'une application, il y a quelques aspects fondamentaux auxquels il faut penser en amont&nbsp;:
 
 - Le titre de page
-- Les liens pour sauter la navigation (_skip navigation links_)
+- Les liens pour sauter la navigation (<span lang="en">_skip navigation links_</span>)
 - La gestion du focus
 
 ## Titre de page
@@ -16,7 +16,7 @@ Considérons le format suivant&nbsp;:
 
 Notons que le titre de page unique est placé en premier. C'est parce qu'il s'agit de l'information la plus importante dans le contexte courant. Puisqu'un utilisateur utilisant un lecteur d'écran peut interrompre celui-ci comme il le souhaite, il est plus efficace d'avoir le titre de page unique en premier, tout en fournissant les informations additionnelles si besoin.
 
-Un moyen simple d'ajouter des titres de page est d'utiliser le _helper_ `page-title` fournit par l'addon [ember-page-title](https://github.com/ember-cli/ember-page-title), installé par défaut dans les nouvelles applications. Ce _helper_ peut être utilisé pour définir le titre de page depuis n'importe quel _template_.
+Un moyen simple d'ajouter des titres de page est d'utiliser le <span lang="en">_helper_</span> `page-title` fournit par l'addon [ember-page-title](https://github.com/ember-cli/ember-page-title), installé par défaut dans les nouvelles applications. Ce <span lang="en">_helper_</span> peut être utilisé pour définir le titre de page depuis n'importe quel <span lang="en">_template_</span>.
 
 Par exemple, si nous avons une route "_posts_" (messages), le titre de page peut être défini comme suit&nbsp;:
 
@@ -40,7 +40,7 @@ Quand vos besoins deviennent plus complexes, les addons suivants permettent une
 - [ember-cli-document-title](https://github.com/kimroen/ember-cli-document-title)
 
 <!-- spell ignore -->
-Pour découvrir plus d'addons d'ajout / gestion de contenu dans le `<head>` d'une page, jetez un œil à la catégorie [header-content](https://emberobserver.com/categories/header-content) sur Ember Observer.
+Pour découvrir plus d'addons d'ajout / gestion de contenu dans le `<head>` d'une page, jetez un œil à la catégorie <span lang="en">[header-content](https://emberobserver.com/categories/header-content)</span> sur Ember Observer.
 
 Vous pouvez vous assurer que les titres de page sont générés correctement en écrivant une assertion sur la valeur de `document.title` dans vos tests&nbsp;:
 
@@ -61,17 +61,17 @@ module('Acceptance | posts', function(hooks) {
 
 ## Liens pour sauter la navigation
 
-Un lien pour sauter la navigation (_skip navigation link_ ou _skip link_) est une fonctionnalité utile aux utilisateurs qui souhaitent passer le contenu répété sur plusieurs pages (par exemple, l'entête du site). C'est particulièrement bienvenu pour les utilisateurs qui s'aident de technologies d'assistance, qui naviguent dans le contenu du site de manière plus linéaire, mais c'est aussi utile pour les utilisateurs avancés qui préfèrent naviguer sur le site uniquement avec le clavier.
+Un lien pour sauter la navigation (<span lang="en">_skip navigation link_</span> ou <span lang="en">_skip link_</span>) est une fonctionnalité utile aux utilisateurs qui souhaitent passer le contenu répété sur plusieurs pages (par exemple, l'entête du site). C'est particulièrement bienvenu pour les utilisateurs qui s'aident de technologies d'assistance, qui naviguent dans le contenu du site de manière plus linéaire, mais c'est aussi utile pour les utilisateurs avancés qui préfèrent naviguer sur le site uniquement avec le clavier.
 
 <img width="675px" title="Exemple où la navigation est sautée" alt="Une représentation visuelle de la manière dont le lien pour sauter la navigation fonctionne dans le navigateur" src="/images/accessibility/page-template-considerations/skip-main-content.png"/>
 
 Pour implémenter un tel lien dans une application, il faut ajouter un élément d'ancrage le plus tôt possible après l'ouverture de l'élément `<body>`, et le lier au début de la zone de contenu principal de la page.
 
-Pour lire davantage sur les _skip links_, visitez [la documentation MDN (non traduite)](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML#skip_links).
+Pour lire davantage sur les <span lang="en">_skip links_</span>, visitez [la documentation MDN (non traduite)](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML#skip_links).
 
 ## Gestion du focus
 
-Aucun framework d'application monopage (_single-page_) ne fournit par défaut une gestion des niveaux de routes appropriée pour les technologies d'assistance. Ceci est principalement dû à la manière dont `pushState` fonctionne, et au manque d'une gestion d'événement pour les frameworks JavaScript qui permettrait de notifier les technologies d'assistance que le contenu de la page a changé. Ça signifie _aussi_ que le focus reste inchangé lors de la navigation d'une route à l'autre, ce qui veut dire que, dans certains cas, il est entièrement perdu (si l'élément qui avait le focus n'est plus présent sur la nouvelle page).
+Aucun framework d'application monopage (<span lang="en">_single-page_</span>) ne fournit par défaut une gestion des niveaux de routes appropriée pour les technologies d'assistance. Ceci est principalement dû à la manière dont `pushState` fonctionne, et au manque d'une gestion d'événement pour les frameworks JavaScript qui permettrait de notifier les technologies d'assistance que le contenu de la page a changé. Ça signifie _aussi_ que le focus reste inchangé lors de la navigation d'une route à l'autre, ce qui veut dire que, dans certains cas, il est entièrement perdu (si l'élément qui avait le focus n'est plus présent sur la nouvelle page).
 
 La plupart des frameworks proposent des mécaniques pour ajouter les fonctionnalités manquantes à une application. Avec Ember.js, une tentative de remédier à ces deux lacunes existe via la [RFC 433](https://github.com/emberjs/rfcs/pull/433)&nbsp;; d'ici là, quelques addons fournissent une aide pour gérer le focus au niveau de la vue de l'application. À vous d'évaluer toutes les options pour déterminer la plus appropriée à votre cas d'usage&nbsp;:
 

diff --git a/guides/accessibility/testing.md b/guides/accessibility/testing.md
@@ -2,7 +2,7 @@
 
 Il est important d'utiliser un lecteur d'écran pour s'assurer que son application est accessible.
 
-Des technologies d'assistance (aussi appelées lecteurs d'écran, ou plus couramment _screen readers_ en anglais) sont disponibles sur la plupart les plateformes d'ordinateurs et smartphones.
+Des technologies d'assistance (aussi appelées lecteurs d'écran, ou plus couramment <span lang="en">_screen readers_</span> en anglais) sont disponibles sur la plupart les plateformes d'ordinateurs et smartphones.
 
 - VoiceOver, intégré sur les produits Apple
 - Narrator, intégré sur les produits Windows