fix #558

src/fr/articles/liens-evitement.md

@@ -50,7 +50,7 @@ Il s’agit généralement d'un lien pointant vers un élément HTML possédant
 1. Il est possible d’intégrer un lien d’évitement de contenu au site sous forme d’image (type « flèche » par exemple avec un attribut title) apparaissant après avoir fait défiler la page vers le bas. Le lien d’évitement permettra de faire un retour vers le haut de page directement.
 Ce lien d’évitement ne doit pas empêcher la lecture ou la compréhension de l’information, il doit être le dernier élément ciblable au clavier.
 2.	Le lien d’évitement doit être atteignable au clavier quel que soit le sens de navigation (TAB ou Shift+TAB).
-3.	Placer un lien d’évitement sur un « id » fonctionne, mais cibler le lien d’évitement sur des éléments comme <code>aside /</code>, <code>footer /</code> ou <code>main /</code> permet de rendre le lien d’évitement de contenu moins sensible aux éventuelles modifications. (Changement d’« id », ou simplement non repris dans le code d’une nouvelle page par exemple)
+3.	Placer un lien d’évitement sur un « id » fonctionne, mais cibler le lien d’évitement sur des éléments comme <code lang="en">aside /</code>, <code lang="en">footer /</code> ou <code lang="en">main /</code> permet de rendre le lien d’évitement de contenu moins sensible aux éventuelles modifications. (Changement d’« id », ou simplement non repris dans le code d’une nouvelle page par exemple)
 4.	les liens d’évitements ou d’accès rapide doivent être visuellement situés au même endroit dans la page et dans le même ordre relatif dans le code source sur l’ensemble des pages du site.
 
 ### Quand doit-on mettre en place des liens d’évitement&nbsp;?
@@ -68,7 +68,7 @@ il n’existe pas de moyen autre pour naviguer au sein de la page (titre de rubr
 Si un utilisateur active un lien « Aller au contenu » à l’aide du clavier, au prochain « TAB » de l’utilisateur le focus doit se déplacer dans le contenu principal et non sur le lien d’évitement suivant. 
 Ce focus peut être fait en plaçant une ancre vers le prochain « &nbsp;id&nbsp; » à cibler par exemple.
 
-Les lecteurs d'écran font la distinction entre le focus système et leur curseur (les lecteurs d'écran utilisent divers autres noms pour cela). Sur VoiceOver d'Apple, il s'appelle le «&nbsp;curseur VO&nbsp;», et NVDA l'appelle «&nbsp;l'objet Navigator&nbsp;», par exemple. Cette distinction est faite puisque le focus système ne peut être défini que sur des éléments focusables. Le rôle du curseur du lecteur d'écran est de définir et de lire des éléments non focusables tels que des paragraphes de textes.
+Les lecteurs d'écran font la distinction entre le focus système et leur curseur (les lecteurs d'écran utilisent divers autres noms pour cela). Sur <span lang="en">VoiceOver</span> d'Apple, il s'appelle le «&nbsp;curseur VO&nbsp;», et NVDA l'appelle «&nbsp;l'objet Navigator&nbsp;», par exemple. Cette distinction est faite puisque le focus système ne peut être défini que sur des éléments focusables. Le rôle du curseur du lecteur d'écran est de définir et de lire des éléments non focusables tels que des paragraphes de textes.
 
 Ainsi, Lorsque nous utilisons un lien d'ancrage, le focus système se déplace avec lui. Cependant le curseur du lecteur d'écran se déplacera pour être défini sur l'élément ancré que s'il est focusable. Lorsque l'élément ancré n'est pas focusable, le lien de saut est toujours considéré comme «&nbsp;l'élément actif&nbsp;».
 
@@ -108,7 +108,7 @@ Quelle que soit la solution, il faut que les liens d’évitement soient visible
 ## Exemples d’usage particulier
 
 Si les liens d’évitement ne sont pas rendus visibles à l’écran par défaut (pour des questions de design par exemple). Il est important que ceux-ci restent interprétés par les outils d’assistance.
-La solution consiste à utiliser une classe CSS de masquage accessible. Les frameworks type **Bootstrap** et **Boosted** embarquent directement ce type de classe (&nbsp;<code>visually-hidden</code>&nbsp; et &nbsp;<code>visually-hidden-focusable</code>&nbsp;). Ainsi même s’il ne sera pas visible à l’écran, un élément possédant la classe &nbsp;<code>visually-hidden</code>&nbsp; sera correctement vocalisé par un lecteur d’écran.
+La solution consiste à utiliser une classe CSS de masquage accessible. Les <span lang="en">frameworks</span> type **Bootstrap** et **Boosted** embarquent directement ce type de classe (&nbsp;<code lang="en">visually-hidden</code>&nbsp; et &nbsp;<code lang="en">visually-hidden-focusable</code>&nbsp;). Ainsi même s’il ne sera pas visible à l’écran, un élément possédant la classe &nbsp;<code lang="en">visually-hidden</code>&nbsp; sera correctement vocalisé par un lecteur d’écran.
 
 ```css
 a.evitement {

src/fr/mobile/index.md

@@ -32,8 +32,8 @@ Section à destination des développeurs.
 Tout ce qu’il faut savoir pour coder accessible sur mobile.  
    
 
-#### 3. Talkback
-Guide simple pour utiliser le lecteur d’écran natif qui détaille toutes les gestuelles nécessaires pour maîtriser Talkback, outil incontournable dans une démarche d'accessibilité mobile.  
+#### 3. <span lang="en">Talkback</span>
+Guide simple pour utiliser le lecteur d’écran natif qui détaille toutes les gestuelles nécessaires pour maîtriser <span lang="en">Talkback</span>, outil incontournable dans une démarche d'accessibilité mobile.  
 &nbsp;  
 
 #### 4. Tests
@@ -49,8 +49,8 @@ Liste des différents critères à respecter pour obtenir une application mobile
 Section à destination des développeurs.
 <br>Tout ce qu’il faut savoir pour coder accessible sur mobile.
 <br><br>
-#### 3. VoiceOver
-Guide simple pour utiliser le lecteur d’écran natif qui détaille toutes les gestuelles nécessaires pour maîtriser VoiceOver, outil incontournable dans une démarche d'accessibilité mobile.
+#### 3. <span lang="en">VoiceOver</span>
+Guide simple pour utiliser le lecteur d’écran natif qui détaille toutes les gestuelles nécessaires pour maîtriser <span lang="en">VoiceOver</span>, outil incontournable dans une démarche d'accessibilité mobile.
 <br><br>
 #### 4. WWDC
 Section qui détaille des présentations Apple faites au `World Wide Developers Conference` ayant un impact fort dans la démarche d'accessibilité mobile.

src/fr/mobile/ios/audit-wcag.md

@@ -7,7 +7,7 @@ abstract: "La vallydette l'outil de test Orange pour mesurer le taux de conformi
 
 L’audit WCAG a pour objectif de calculer les taux de conformité mentionnés sur les déclarations d’accessibilité des applications Orange.
 
-Orange a mis en place une grille de questions nommée la va11ydette.  Cette grille reprend les 50 critères du standard WCAG version 2.1 de niveau A et AA en 52 questions. Chaque question permet de valider ou d’invalider un ou plusieurs critères, un critère peut être traité par une ou plusieurs questions. 
+Orange a mis en place une grille de questions nommée la Va11ydette. Cette grille reprend les 50 critères du standard WCAG version 2.1 de niveau A et AA en 52 questions. Chaque question permet de valider ou d’invalider un ou plusieurs critères, un critère peut être traité par une ou plusieurs questions. 
 
 La grille calcule un taux de conformité par écran audité : ce taux est égal à la somme des critères conformes divisée par le nombre de critères applicables. Elle calcule aussi le taux moyen de conformité qui correspond à la moyenne des taux de conformité de chaque écran de l’échantillon.
 

src/fr/mobile/ios/conception.md

@@ -986,7 +986,7 @@ La liste exhaustive de ces options est fournie ci-dessous en détaillant leur ac
 
 15. [Activer le Contrôle de Sélection](#optionA11Y_switchControl).
 
-16. [Activer VoiceOver](#optionA11Y_voiceOver).
+16. [Activer <span lang="en">VoiceOver</span>](#optionA11Y_voiceOver).
 
 17. [Prévisualisation vidéo](#optionA11Y_autoPlayVideoPreviews).
 
@@ -1619,7 +1619,7 @@ Depuis **iOS 13**, cette option d'accessibilité est désormais une **<a href="h
 
 <a name="optionA11Y_voiceOver"></a>
 
-- **Activer VoiceOver** (UIAccessibilityIsVoiceOverRunning)&nbsp;: active le lecteur d'écran.
+- **Activer <span lang="en">VoiceOver</span>** (UIAccessibilityIsVoiceOverRunning)&nbsp;: active le lecteur d'écran.
 
 <ul class="nav nav-tabs" role="tablist">
     <li class="nav-item" role="presentation">

src/fr/mobile/ios/developpement.md

@@ -240,7 +240,7 @@ var body: some View {
      id="textAlt-Description"
      role="tabpanel">
      
-Avec VoiceOver, la vocalisation de chaque élément apportant de l'information doit être parfaitement comprise par l'utilisateur pour lui permettre de ne pas avoir à se poser quelque question que ce soit concernant le contenu de la page qu'il consulte.
+Avec <span lang="en">VoiceOver</span>, la vocalisation de chaque élément apportant de l'information doit être parfaitement comprise par l'utilisateur pour lui permettre de ne pas avoir à se poser quelque question que ce soit concernant le contenu de la page qu'il consulte.
 
 Cette précision nécessaire dans l'implémentation de ce mode de fonctionnement est possible en grande partie grâce à 4 attributs&nbsp;: `label`, `hint`, `value` et `trait`.
 </div>
@@ -832,7 +832,7 @@ Si on utilise l'attribut `accessibilityLanguage` sur un `UILabel`, alors celui-c
 
 <br>
 
-Si l'on souhaite ajouter un mot dans une langue spécifique au sein d'une phrase à prononcer de façon appropriée avec VoiceOver, on peut s'appuyer sur les **Attributed Accessibility Properties** en utilisant un `NSAttributedString` [depuis iOS&nbsp;11](https://a11y-guidelines.orange.com/fr/mobile/ios/wwdc/2017/215/#attributed-accessibility-properties-2607).
+Si l'on souhaite ajouter un mot dans une langue spécifique au sein d'une phrase à prononcer de façon appropriée avec <span lang="en">VoiceOver</span>, on peut s'appuyer sur les **Attributed Accessibility Properties** en utilisant un `NSAttributedString` [depuis iOS&nbsp;11](https://a11y-guidelines.orange.com/fr/mobile/ios/wwdc/2017/215/#attributed-accessibility-properties-2607).
 </div>
 <div class="tab-pane" id="changeLang-Links" role="tabpanel">
 
@@ -1674,7 +1674,7 @@ class ViewController: UIViewController {
 
 - L'[article de Rob Whitaker](https://mobilea11y.com/blog/custom-accessibility-content/) apporte une belle description pédagogique de cette nouvelle fonctionnalité qu'il est un des seuls à avoir exposé à l'issue de la WWDC 2020.
 
-- [WWDC 2021 : Optimiser VoiceOver dans un contexte riche en données](../wwdc/2021/121).
+- [WWDC 2021 : Optimiser <span lang="en">VoiceOver</span> dans un contexte riche en données](../wwdc/2021/121).
 </div>
 </div>
 <br><br>
@@ -2953,7 +2953,7 @@ Des éléments graphiques comme le `picker`, le `stepper` ou encore le `slider`
 
 La méthodologie utilisée pour solutionner cette problématique pour une personne non voyante utilisant <span lang="en">VoiceOver</span> reste la même pour ces trois éléments, c'est pourquoi seul le cas du `stepper` sera traité.
 
-L'implémentation de cet objet graphique est relativement simple mais son utilisation avec VoiceOver requiert quelques ajustements pour obtenir un meilleur parcours utilisateur.
+L'implémentation de cet objet graphique est relativement simple mais son utilisation avec <span lang="en">VoiceOver</span> requiert quelques ajustements pour obtenir un meilleur parcours utilisateur.
 
 Si on crée un <span lang="en">stepper</span> auquel on ajoute un `label` pour afficher sa valeur, on obtient un ensemble d'éléments disjoints.
 ![](../../images/iOSdev/ValeursAjustables_2.png)
@@ -3211,7 +3211,7 @@ class ContinuousAdjustableValues: UIViewController, AdjustableForAccessibilityDe
      id="customActions-Description"
      role="tabpanel">
      
-Certaines manipulations basiques peuvent devenir un vrai casse-tête pour se fondre dans une navigation sereine avec VoiceOver et se transformer en éléments parfaitement accessibles.
+Certaines manipulations basiques peuvent devenir un vrai casse-tête pour se fondre dans une navigation sereine avec <span lang="en">VoiceOver</span> et se transformer en éléments parfaitement accessibles.
 
 Un exemple probant est celui du mail iOS natif qui permet d'accéder à un ensemble d'actions.
 
@@ -3236,9 +3236,9 @@ Un exemple probant est celui du mail iOS natif qui permet d'accéder à un ensem
      id="CustomActionsVoiceOver"
      role="tabpanel">
      
-![accès aux actions d'un mail sans voiceover avec un balayage gauche](../../images/iOSdev/Actions_VoiceOver.png)
+![accès aux actions d'un mail sans <span lang="en">VoiceOver</span> avec un balayage gauche](../../images/iOSdev/Actions_VoiceOver.png)
 
-La gestuelle utilisée sans utilisation du lecteur d'écran ne peut pas convenir à VoiceOver pour obtenir le résultat désiré&nbsp;: un balayage vers la gauche sélectionnerait l'élément accessible suivant au lieu de proposer les actions à réaliser sur le mail sélectionné.
+La gestuelle utilisée sans utilisation du lecteur d'écran ne peut pas convenir à <span lang="en">VoiceOver</span> pour obtenir le résultat désiré&nbsp;: un balayage vers la gauche sélectionnerait l'élément accessible suivant au lieu de proposer les actions à réaliser sur le mail sélectionné.
 
 Dans un cas comme celui-là, il conviendrait de réaliser les opérations décrites dans l'onglet `Exemple` pour donner accès à ces opérations si elles n'étaient pas implémentées nativement.
 </div>
@@ -3261,12 +3261,12 @@ Ce comportement qui n'a jamais été présenté ni expliqué par <span lang="en"
 
 
 ⚠️ ATTENTION : **vérifier l'activation des actions personnalisées** dans les réglages utilisateurs via '`Réglages` - `Accessibilité` - `VoiceOver` - `Verbosité` - `Actions`' avec `Énoncer` sélectionné. ⚠️
-Si ce n'est pas le cas, l'implémentation des actions personnalisées sera totalement ignorée par VoiceOver.
+Si ce n'est pas le cas, l'implémentation des actions personnalisées sera totalement ignorée par <span lang="en">VoiceOver</span>.
 </div>
 
 <div class="tab-pane" id="customActions-Example" role="tabpanel">
 
-Que ce soit pour le lecteur d'écran ou le contrôle de sélection, la réalisation programmatique est exactement la même pour obtenir les actions souhaitées&nbsp;: l'exemple suivant sera illustré pour VoiceOver.
+Que ce soit pour le lecteur d'écran ou le contrôle de sélection, la réalisation programmatique est exactement la même pour obtenir les actions souhaitées&nbsp;: l'exemple suivant sera illustré pour <span lang="en">VoiceOver</span>.
 
 Une solution consiste à **associer à l'élément sélectionné un tableau d'actions** dont le système se chargera d'indiquer automatiquement la présence en informant vocalement l'utilisateur de leur disponibilité.
 
@@ -3378,7 +3378,7 @@ class CustomActions: UIViewController {
 
 <br>Le code implémenté ci-dessus permet d'obtenir le résultat suivant par balayages successifs sur l'élément accessible sélectionné&nbsp;:
 
-![accès aux actions avec voiceover en utilisant un balayage vers le haut](../../images/iOSdev/Actions_3.png)
+![accès aux actions avec <span lang="en">VoiceOver</span> en utilisant un balayage vers le haut](../../images/iOSdev/Actions_3.png)
 <br>Pour plus d'informations sur ce sujet, ne pas hésiter à visualiser la vidéo **Utiliser les actions personnalisées** dont le [résumé&nbsp;détaillé](../wwdc/2019/#utiliser-les-actions-personnalisees) se trouve dans la section WWDC de ce site.
 </div>
 <div class="tab-pane" id="customActions-Links" role="tabpanel">
@@ -3641,7 +3641,7 @@ Par exemple, si <span lang="en">VoiceOver</span> est désactivé durant l’util
 Mais que se passe-t-il si <span lang="en">VoiceOver</span> est désactivé alors que ce traitement a déjà eu lieu&nbsp;?
 C’est là que les événements système peuvent être utilisés et, en restant à leur écoute, il est possible d’appliquer des traitements spécifiques de manière dynamique.
 
-Dans l'exemple suivant, on appelle une méthode spécifique au moment où le statut de VoiceOver ou du Switch Control change.
+Dans l'exemple suivant, on appelle une méthode spécifique au moment où le statut de <span lang="en">VoiceOver</span> ou du Switch Control change.
 <div class="code-tab-pane">
 
 <pre><code class="objectivec">

src/fr/mobile/ios/historique.md

@@ -12,7 +12,7 @@ displayToc: false
 
 **01/12/21** ⟹ mises à jour (swift 5.5, Xcode 13 et iOS 15)
 
-**14/09/21** ⟹ WWDC 2021 <a href="../wwdc/2021/121/">🎬</a> Optimiser VoiceOver dans un contexte riche en données
+**14/09/21** ⟹ WWDC 2021 <a href="../wwdc/2021/121/">🎬</a> Optimiser <span lang="en">VoiceOver</span> dans un contexte riche en données
 
 **09/09/21** ⟹ WWDC 2021 <a href="../wwdc/2021/122/">🎬</a> Incorporer efficacement l'accessibilité à vos graphes
 

src/fr/mobile/ios/outils.md

@@ -20,7 +20,7 @@ sideNavigationLinks:
 
 Des ressources et outils pour faciliter la prise en compte de l’accessibilité numérique sur iOS :
 
-- Guide d'utilisation du lecteur d'écran VoiceOver
+- Guide d'utilisation du lecteur d'écran <span lang="en">VoiceOver</span>
 - Informations pour développer accessible avec Flutter
 - mDAN, une application mobile pour se former sur les options d'accessibilité des mobiles et des applications sous iOS
 - Quelques personae

src/fr/mobile/ios/test.md

@@ -111,7 +111,7 @@ Les **tests** à réaliser pour le `Dynamic Type` sont **assez longs** car plusi
 
 ![Accès à la vidéo WWDC mentionnant l'importance du grossissement de texte dans un projet](../../images/ios-test-DynamicTypeWWDC.png)
 <br><br>
-### VoiceOver
+### <span lang="en">VoiceOver</span>
 
 L'activation du lecteur d'écran natif change radicalement les résultats obtenus par les gestes standards effectués sur l’écran tactile, c'est pourquoi son utilisation demande un certain temps d'adaptation pour une maîtrise de sa [gestuelle&nbsp;spécifique](../voiceover/).
 
@@ -158,7 +158,7 @@ Il est donc **très fortement recommandé** de connaître au moins les gestes de
 
 </div></div>
 
-<br>Pour aboutir à une parfaite implémentation de VoiceOver, il ne faut surtout pas croire que chaque élément doit absolument être vocalisé et se contenter de passer au suivant pour renouveler cette opération : ce type de réalisation est tout sauf productif&nbsp;!
+<br>Pour aboutir à une parfaite implémentation de <span lang="en">VoiceOver</span>, il ne faut surtout pas croire que chaque élément doit absolument être vocalisé et se contenter de passer au suivant pour renouveler cette opération : ce type de réalisation est tout sauf productif&nbsp;!
 
 Il faut bien avoir à l'esprit que l'**information** diffusée visuellement est assimilée en très peu de temps alors que celle fournie par le lecteur d'écran arrive de façon **séquentielle** à la vitesse de sélections successives d'éléments&nbsp;: un **effort énorme de mémorisation** est à fournir pour avoir une vision synoptique de l'écran et comprendre réellement ce qui est proposé.
 
@@ -175,7 +175,7 @@ En plus des [critères&nbsp;de&nbsp;conception](../conception/) à respecter, qu
 
 4. l'utilisateur doit réaliser un minimum de sélections au sein de l'écran.
 
-Ici encore, les tests demandent beaucoup de temps et requièrent une forte empathie pour avancer des critiques constructives sur la façon dont l'information vocale doit être diffusée par VoiceOver.
+Ici encore, les tests demandent beaucoup de temps et requièrent une forte empathie pour avancer des critiques constructives sur la façon dont l'information vocale doit être diffusée par <span lang="en">VoiceOver</span>.
 
 Maintenant, **si le lecteur d'écran n'est pas encore implémenté** sur une application déjà en diffusion publique, il est primordial d'en **informer l'utilisateur** dès [sélection&nbsp;de&nbsp;l'icône&nbsp;applicatif](../developpement/#vocalisation-du-nom-de-lapplication) en indiquant très clairement la situation de façon à éviter une consultation catastrophique et décevante.
 <br><br>