From 419a13f513707527ff8084627537f246c800cd18 Mon Sep 17 00:00:00 2001 From: Guillaume PERE Date: Wed, 31 Jul 2024 15:03:59 +0200 Subject: [PATCH] =?UTF-8?q?Fixes=20#535=20:=20Des=20changements=20de=20lan?= =?UTF-8?q?gue=20=C3=A0=20indiquer=20dans=20du=20texte?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/json/checklist/tests-web-fr.json | 18 +++---- src/fr/mobile/ios/conception.md | 2 +- src/fr/mobile/ios/developpement.md | 4 +- src/fr/mobile/ios/test.md | 56 ++++++++++----------- src/fr/web/developper/contenu-textuel.md | 2 +- 5 files changed, 41 insertions(+), 41 deletions(-) diff --git a/src/assets/json/checklist/tests-web-fr.json b/src/assets/json/checklist/tests-web-fr.json index 39f3fbb12..68b500578 100644 --- a/src/assets/json/checklist/tests-web-fr.json +++ b/src/assets/json/checklist/tests-web-fr.json @@ -15,8 +15,8 @@ }, { "themes": "Contenu textuel", "title": "Donner des titres aux rubriques", - "type": [["HeadingsMap"], ["ANDI"]], - "tests": [["Utiliser HeadingsMap"],["Utiliser ANDI/Structures/Headings"]], + "type": [["HeadingsMap"], ["ANDI"]], + "tests": [["Utiliser HeadingsMap"],["Utiliser ANDI/Structures/Headings"]], "verifier": ["Vérifier que les titres sont pertinents, reflètent le contenu de la page et sont non vides", "Vérifier que les titres ont un niveau correspondant à leur poids sémantique dans la structure de la page"], "resultat": ["Tous les contenus, traités visuellement comme des titres, possèdent une sémantique de titre (balises <h1> à <h6>)", " Les titres de niveaux sont hiérarchisés de manière à refleter leur poids sémantique"], "exception": "

Ne pas tenir compte des titres masqués (visibility:hidden, aria-hidden='true' ou display:none). Si un de ces titres masqués est susceptible d'apparaître, il faut refaire les observations sur la nouvelle structuration du titrage.

", @@ -225,8 +225,8 @@ }, { "themes": "Couleurs et contrastes", "title": "Assurer un contraste suffisamment élevé entre texte et arrière-plan", - "type": ["Color Contrast Analyser"], - "tests": ["Lancer le Color Contrast Analyser"], + "type": ["Color Contrast Analyser"], + "tests": ["Lancer le Color Contrast Analyser"], "verifier": ["Vérifier que le contraste soit suffisant pour les textes et les textes sous forme d'images", "Vérifier que les liens non-soulignés ont un rapport de contraste suffisant avec le texte environnant et la couleur de fond"], "resultat": ["Présence d'éléments textuels ou images sous forme de texte suffisamment contrastés :
  • Pour les textes gras ", "Les liens non-soulignés ont un rapport de contraste de 3:1 avec le texte environnement et la couleur de fond"], "exception": "N'a pas d'exigence de contraste :", @@ -239,8 +239,8 @@ }, { "themes": "Couleurs et contrastes", "title": "Assurer un contraste suffisamment élevé dans les composants d'interface ou les éléments graphiques porteurs d'information", - "type": ["Color Contrast Analyser"], - "tests": ["Lancer le Color Contrast Analyser"], + "type": ["Color Contrast Analyser"], + "tests": ["Lancer le Color Contrast Analyser"], "verifier": ["Vérifier que les graphiques, les icônes, et les composants interactifs graphiques ont un contraste suffisant pour transmettre l'information"], "resultat": ["Présence d'objets graphiques, d'icônes, et de composants interactifs ayant un contraste de 3:1"], "exception": "Sont exclus du périmètre : ", @@ -267,7 +267,7 @@ },{ "themes": "Couleurs et contrastes", "title": "S'assurer que l'information est transmise par un autre moyen que la couleur", - "type": ["Color Contrast Analyser"], + "type": ["Color Contrast Analyser"], "tests": ["Identifier les éléments utilisant de la couleur pour porter de l'information"], "verifier": ["Vérifier que la couleur n'est pas le seul moyen de convoyer d'information :
    au moins un autre moyen visuel est disponible pour obtenir la même information"], "resultat": ["L'information transmise par la couleur peut également être obtenue par un texte explicite", "L'information transmise par la couleur est complétée par une autre information visuelle (exemple : des icônes utilisent des couleurs, mais également des formes différentes)", "Cas particulier des liens dans du texte : s'ils ne sont pas soulignés, au focus clavier et au survol souris, fournir un autre moyen que la couleur pour les distinguer."], @@ -281,7 +281,7 @@ }, { "themes": "Couleurs et contrastes", "title": "S'assurer que les liens sont identifiables par un autre moyen que la couleur", - "type": ["Color Contrast Analyser"], + "type": ["Color Contrast Analyser"], "tests": ["Parcourir la page", "Identifier les liens dans le corps du texte"], "verifier": ["Vérifiez que les liens dans le corps du texte sont identifiables visuellement par un moyen autre que la couleur (souligné, gras, etc.) par rapport au reste du texte", "Si ce n'est pas le cas, s'assurer d'un contraste de 3:1 entre le texte, le fond et les liens et qu'il existe un autre moyen que la couleur pour les identifier au survol et au focus"], "resultat": ["Les liens sont identifiables visuellement dans du texte par un autre moyen que la couleur ou par un rapport de contraste suffisant avec le corps du texte"], @@ -420,7 +420,7 @@ }, { "themes": "Navigation générale", "title": "La structure sémantique globale du document est-elle cohérente ?", - "type": ["Wave toolbar"], + "type": ["Wave toolbar"], "tests": ["Lancer Wave > Structure", "Examiner la hiérarchisation des landmarks ARIA"], "verifier": [""], "resultat": ["Les différentes régions sont clairement identifiables programmatiquement"], diff --git a/src/fr/mobile/ios/conception.md b/src/fr/mobile/ios/conception.md index 69e8ed2fd..652851c33 100644 --- a/src/fr/mobile/ios/conception.md +++ b/src/fr/mobile/ios/conception.md @@ -153,7 +153,7 @@ Dans ce cas, l'utilisation de l'option d'accessibilité . diff --git a/src/fr/mobile/ios/developpement.md b/src/fr/mobile/ios/developpement.md index 6f58f4c3f..3d11b79bc 100644 --- a/src/fr/mobile/ios/developpement.md +++ b/src/fr/mobile/ios/developpement.md @@ -2445,7 +2445,7 @@ extension ContentSizeCategory {
    - - ne pas oublier d'adapter les contraintes graphiques aux éléments susceptibles de voir leur taille modifiée en privilégiant l'utilisation de valeurs dynamiques : penser à paramétrer les éléments inclus dans les navigation/tab/status bar et toolbar qui seront affichés via le **[Large Content Viewer](../wwdc/2019/261)**, + - ne pas oublier d'adapter les contraintes graphiques aux éléments susceptibles de voir leur taille modifiée en privilégiant l'utilisation de valeurs dynamiques : penser à paramétrer les éléments inclus dans les navigation/tab/status bar et toolbar qui seront affichés via le **[Large Content Viewer](../wwdc/2019/261)**, - penser à adapter le [contraste des couleurs](../conception/#couleurs) à la taille de texte modifiée si nécessaire. @@ -2492,7 +2492,7 @@ Il est toutefois nécessaire de bien garder à l'esprit que cette nouveauté&nbs id="truncHyphen-Description" role="tabpanel"> -L'utilisation du `Dynamic Type` exposé dans le paragraphe précédent s'accompagne indéniablement de la troncature de mots en fonction du grossissement de texte choisi par l'utilisateur. +L'utilisation du `Dynamic Type` exposé dans le paragraphe précédent s'accompagne indéniablement de la troncature de mots en fonction du grossissement de texte choisi par l'utilisateur. Malheureusement, cela n'est pas pris en compte nativement par le système et seule une intervention au niveau programmatique permet d'obtenir ce rendu visuel particulièrement apprécié. diff --git a/src/fr/mobile/ios/test.md b/src/fr/mobile/ios/test.md index 64d66e1c3..b68b0c9cd 100644 --- a/src/fr/mobile/ios/test.md +++ b/src/fr/mobile/ios/test.md @@ -4,11 +4,11 @@ abstract: "Guide pour tester l'accessibilité d'une application mobile iOS" displayToc: true --- -# Tester l'accessibilité d'une application iOS +# Tester l'accessibilité d'une application iOS -Cette page décrit l'ensemble des tests nécessaires à l'évaluation d'une application iOS dans le cadre de l'accessibilité. +Cette page décrit l'ensemble des tests nécessaires à l'évaluation d'une application iOS dans le cadre de l'accessibilité. -Il est indispensable que **TOUS** les intervenants du projet connaissent les spécificités d'accessibilité iOS présentées sur ce site de façon à comprendre parfaitement le lien entre les besoins des utilisateurs et leur implémentation au sein de l'application à développer. +Il est indispensable que **TOUS** les intervenants du projet connaissent les spécificités d'accessibilité iOS présentées sur ce site de façon à comprendre parfaitement le lien entre les besoins des utilisateurs et leur implémentation au sein de l'application à développer. Chacune des fonctionnalités doit être vue comme un élément impactant fortement le confort de l'utilisateur, comme une **brique essentielle à connotation humaine** et pas juste fonctionnelle. @@ -29,18 +29,18 @@ Que ce soit dans la conception, la réalisation ou la vérification, chaque déc ## Environnement de travail Quatre grandes familles peuvent être dépeintes au sein de chaque projet : -- à l'initiative de tout ce qui va être créé, la **personne en charge de prioriser les fonctionnalités à implémenter** doit parfaitement comprendre les besoins utilisateurs et la façon de les décliner sous iOS. +- à l'initiative de tout ce qui va être créé, la **personne en charge de prioriser les fonctionnalités à implémenter** doit parfaitement comprendre les besoins utilisateurs et la façon de les décliner sous iOS. Cette personne doit s'assurer que des **critères d'acceptations** sont **parfaitement définis** pour chacune des fonctionnalités et que leur réalisation répond exactement à ce qui était demandé **en vérifiant elle-même le fonctionnement souhaité**, - l'équipe **DESIGN** doit réellement se mettre à la place de l'utilisateur de façon à **fournir les préconisations** les plus précises possibles en fonction des demandes projet en amont, - l'équipe **DÉVELOPPEMENT** doit grandement s'appuyer sur les [vidéos WWDC](../wwdc/) et sur le [guide pour les développeurs](../developpement/) afin de **trouver les solutions** les plus appropriées aux différentes situations rencontrées, -- l'équipe **TEST** doit parfaitement maîtriser la [gestuelle spécifique](../voiceover/) et comprendre toutes les possibilités offertes par iOS pour **réaliser chacun des tests** de façon optimum avant mise en production. +- l'équipe **TEST** doit parfaitement maîtriser la [gestuelle spécifique](../voiceover/) et comprendre toutes les possibilités offertes par iOS pour **réaliser chacun des tests** de façon optimum avant mise en production. Quel que soit le mode de fonctionnement *(SCRUM, ...)*, les fonctions dévolues à chacune de ces équipes doivent être présentes au sein du projet. -De façon à pouvoir s'assurer que les recommandations d'accessibilité iOS ont bien été prises en compte, deux modes d'évaluation sont à prévoir : +De façon à pouvoir s'assurer que les recommandations d'accessibilité iOS ont bien été prises en compte, deux modes d'évaluation sont à prévoir : - [**FONCTIONNEL**](#evaluation-fonctionnelle) : on s'assure que l'utilisateur peut naviguer parmi tous les écrans sans soucis, en ayant accès à toute l'information visuelle mise à disposition et surtout sans avoir à se poser de questions. Le parcours utilisateur doit être fluide, simple et sans équivoque, @@ -50,7 +50,7 @@ Ce mode vient aussi souvent confirmer et solutionner certains problèmes fonctio
    ## Évaluation fonctionnelle -La participation aux tests de cette partie ne nécessite aucune connaissance technique particulière si ce n'est savoir (dés)activer et utiliser des fonctionnalités d'accessibilité iOS. +La participation aux tests de cette partie ne nécessite aucune connaissance technique particulière si ce n'est savoir (dés)activer et utiliser des fonctionnalités d'accessibilité iOS. En plus des [critères de base](../conception/) à respecter, il est primordial de s'assurer que des [options d'accessibilité](../conception/#options-daccessibilite) activées par un utilisateur sont parfaitement opérationnelles dans toutes les pages de l'application développée. @@ -63,20 +63,20 @@ Ci-dessous, quelques critères importants à tester impérativement : - **réduire le floutage et la transparence** : victime de problèmes visuels, une personne peut rapidement trouver les effets de flou et de transparence très inconfortables. Il faut donc vérifier que l'[atténuation proposée par le système](../wwdc/2018/230/#floutage-et-transparence-0307) est bien prise en compte sur les pages applicatives où ces effets sont implémentés, -- **mode sombre** : le résultat graphique de cette *fonctionnalité iOS 13* doit absolument être vérifié pour s'assurer que les différents contrastes de couleurs utilisées sont conformes aux critères de conception, sans oublier l'option d'accessibilité [augmenter le contraste](../conception/#options-daccessibilite) qui est aussi un élément incontournable à vérifier dans ce contexte. +- **mode sombre** : le résultat graphique de cette *fonctionnalité iOS 13* doit absolument être vérifié pour s'assurer que les différents contrastes de couleurs utilisées sont conformes aux critères de conception, sans oublier l'option d'accessibilité [augmenter le contraste](../conception/#options-daccessibilite) qui est aussi un élément incontournable à vérifier dans ce contexte.
    -En plus de ces critères fondamentaux, il y a bien évidemment les incontournables iOS pour qualifier à minima une application d'accessible : +En plus de ces critères fondamentaux, il y a bien évidemment les incontournables iOS pour qualifier à minima une application d'accessible : -1. [Dynamic Type](#dynamic-type) (grossissement de texte) +1. [Dynamic Type](#dynamic-type) (grossissement de texte) 2. [VoiceOver](#voiceover) (lecteur d'écran) 3. [Contrôle de sélection](#controle-de-selection) -![Principales options d'accessibilité sur iOS : options utilisateurs, raccourcis & Siri, mode sombre, grossissement de texte, lecteur d'écran, contrôle de sélection](../../images/ios-test-overview.png) -### Dynamic Type +![Principales options d'accessibilité sur iOS : options utilisateurs, raccourcis & Siri, mode sombre, grossissement de texte, lecteur d'écran, contrôle de sélection](../../images/ios-test-overview.png) +### Dynamic Type Pour bien comprendre comment le grossissement de texte fonctionne, il est fortement recommandé de visionner l'exemple proposé dans la [vidéo WWDC 2017](../wwdc/2017/245/#exemple-2432) parfaitement résumée dans la partie WWDC de ce site. @@ -99,13 +99,13 @@ Enfin, les quelques points suivants sont à examiner minutieusement : ![Exemple de troncature : première ligne "Synchronisa-" et deuxième ligne "tion Wifi"](../../images/ios-test-DynamicType_2.png) -- **les illustrations comme les icônes doivent s'adapter au grossissement souhaité** : l'utilisation du [Large Content Viewer](../wwdc/2019/261/) après un appui long, l'implémentation d'un pinch à 2 doigts afin d’éviter à l’utilisateur d’avoir recours à la fonctionnalité `Zoom` ou encore le simple [grossissement d'un élément graphique](../developpement/#taille-des-elements-graphiques) peuvent être des solutions selon les cas rencontrés, +- **les illustrations comme les icônes doivent s'adapter au grossissement souhaité** : l'utilisation du [Large Content Viewer](../wwdc/2019/261/) après un appui long, l'implémentation d'un pinch à 2 doigts afin d’éviter à l’utilisateur d’avoir recours à la fonctionnalité `Zoom` ou encore le simple [grossissement d'un élément graphique](../developpement/#taille-des-elements-graphiques) peuvent être des solutions selon les cas rencontrés, - penser à **modifier le grossissement de texte au sein de chaque écran** pour s’assurer que tous ses éléments répondent parfaitement aux contraintes graphiques mises en place, - dès que la **correction d’une anomalie** remontée sur un terminal est effective, elle **doit être vérifiée sur les autres terminaux utilisés en tests** afin de s'assurer que le problème est réellement éradiqué. -Les **tests** à réaliser pour le `Dynamic Type` sont **assez longs** car plusieurs terminaux sont à étudier et chaque écran est à vérifier avec une modification de la taille du texte à faire pour chacun des écrans. +Les **tests** à réaliser pour le `Dynamic Type` sont **assez longs** car plusieurs terminaux sont à étudier et chaque écran est à vérifier avec une modification de la taille du texte à faire pour chacun des écrans.
    My biggest tip is to think about these early on in the design process. WWDC 2020 - Make Your App Visually Accessible (voir la vidéo)


    @@ -122,38 +122,38 @@ Il est donc **très fortement recommandé** de connaître au moins les gestes de data-bs-toggle="tab" href="#VoiceOver-iOS15" role="tab" - aria-selected="true">iOS 15 + aria-selected="true" lang="en">iOS 15
    • -![Sur iOS 15 : activer Voice Over à partir du menu Réglages-Accessibilité-Voice Over](../../images/ios-test-VO_iOS15.png) +![Sur iOS 15 : activer Voice Over à partir du menu Réglages-Accessibilité-Voice Over](../../images/ios-test-VO_iOS15.png)
    -![Sur iOS 13 : activer Voice Over à partir du menu Réglages-Accessibilité-Voice Over](../../images/ios-test-VO_iOS13.png) +![Sur iOS 13 : activer Voice Over à partir du menu Réglages-Accessibilité-Voice Over](../../images/ios-test-VO_iOS13.png)
    -![Sur iOS 12 : activer Voice Over à partir du menu Général-Accessibilité-Voice Over](../../images/ios-test-VO_iOS12.png) +![Sur iOS 12 : activer Voice Over à partir du menu Général-Accessibilité-Voice Over](../../images/ios-test-VO_iOS12.png)
    @@ -198,36 +198,36 @@ Remarque : l'activation de cette fonctionnalité se fait elle aussi via les data-bs-toggle="tab" href="#SwitchControl-iOS15" role="tab" - aria-selected="true">iOS 15 + aria-selected="true" lang="en">iOS 15
    -![Sur iOS 15 : activer Contrôle de sélection à partir du menu Réglages-Accessibilité-Contrôle de sélection](../../images/ios-test-SwitchControl_iOS15.png) +![Sur iOS 15 : activer Contrôle de sélection à partir du menu Réglages-Accessibilité-Contrôle de sélection](../../images/ios-test-SwitchControl_iOS15.png)
    -![Sur iOS 13 : activer Contrôle de sélection à partir du menu Réglages-Accessibilité-Contrôle de sélection](../../images/ios-test-SwitchControl_iOS13.png) +![Sur iOS 13 : activer Contrôle de sélection à partir du menu Réglages-Accessibilité-Contrôle de sélection](../../images/ios-test-SwitchControl_iOS13.png)
    -![Sur iOS 12 : activer Contrôle de sélection à partir du menu Général-Accessibilité-Contrôle de sélection](../../images/ios-test-SwitchControl_iOS12.png) +![Sur iOS 12 : activer Contrôle de sélection à partir du menu Général-Accessibilité-Contrôle de sélection](../../images/ios-test-SwitchControl_iOS12.png)

    @@ -245,9 +245,9 @@ L'outil Accessibility Inspector dispose d'une fonctionnal

    ### Inspection de code -L'interface de développement Xcode fournit un outil particulièrement intéressant intitulé **Accessibility Inspector**. +L'interface de développement Xcode fournit un outil particulièrement intéressant intitulé **Accessibility Inspector**. -L'intérêt et l'utilisation de cet outil ne seront pas développés ici car ils sont très bien expliqués dans les vidéos parfaitement détaillées [`Audit` `d'une` `app` `en` `accessibilité`](../wwdc/2016/407/) et [`Découvrir` `Accessibility` `Inspector`](../wwdc/2019/#decouvrir-accessibility-inspector) dont le visionnage est très fortement recommandé. +L'intérêt et l'utilisation de cet outil ne seront pas développés ici car ils sont très bien expliqués dans les vidéos parfaitement détaillées [`Audit` `d'une` `app` `en` `accessibilité`](../wwdc/2016/407/) et [`Découvrir` `Accessibility` `Inspector`](../wwdc/2019/#decouvrir-accessibility-inspector) dont le visionnage est très fortement recommandé.

    ### Tests liés au code diff --git a/src/fr/web/developper/contenu-textuel.md b/src/fr/web/developper/contenu-textuel.md index 06d2582bf..9a93230db 100644 --- a/src/fr/web/developper/contenu-textuel.md +++ b/src/fr/web/developper/contenu-textuel.md @@ -83,7 +83,7 @@ Un titrage de page avec un saut de niveau h2 → h4 : **Outils :** Des extensions à installer dans votre navigateur permettent d'extraire la liste des titres : -- L’extension HeadingsMaps disponible sur Firefox et chrome. +- L’extension HeadingsMaps disponible sur Firefox et chrome. - L'extension Web developer. **Référence WCAG :**