auto-evaluation checklist Web (#596)

* ajout d'une checklist de tests pour les 11 critères web incontournables

src/_data/navigation.js

@@ -129,7 +129,8 @@ module.exports = {
           { label: 'Développer', href: '/fr/web/developper/' },
           { label: 'Tester', href: '/fr/web/tester/' },
           { label: 'Auditer', href: '/fr/web/audit-wcag/' },
-          { label: 'Boite à outils', href: '/fr/web/outils/' }
+          { label: 'Boite à outils', href: '/fr/web/outils/' },
+          { label: 'Incontournables', href: '/fr/web/checklist-initiale/' }
         ]
       },
       {

src/assets/json/checklist/tests-concepteur-checklist-fr.json

@@ -0,0 +1,3 @@
+[
+
+]

src/assets/json/checklist/tests-web-checklist-fr.json

@@ -0,0 +1,155 @@
+[{ 
+	"themes": "Contenu textuel", 
+	"title": "Donner un titre aux pages",  
+	"type": ["Test manuel - Inspecteur de code"], 
+	"tests": [["Lancer l'inspecteur de code du navigateur et examiner le titre de page (<code>&lt;title&gt;[titre de la page]&lt;/title&gt;</code>)."], ["Ou lire le titre présent dans l'onglet du navigateur."]], 
+	"verifier": ["Le titre de page est renseigné.", "Le titre de page est unique et explicite le contenu de la page.", "Le titre de page reflète les modifications du contenu (exemple : erreur dans un formulaire, nombre et termes d'une recherche, étape dans un parcours, mise à jour asynchrone du contenu…)."], 
+	"resultat": ["Chaque page possède un titre unique et descriptif du contenu, globalement du plus précis vers le plus général (exemple : [résumé du contenu de la page - nom du site])."], 
+	"exception": "", 
+	"raccourcis": "", 
+	"moreInfo": "https://a11y-guidelines.orange.com/fr/web/developper/contenu-textuel/#donner-un-titre-aux-pages", 
+    "profils": ["Checklist incontournables"], 
+	"wcag": ["2.4.2"], 
+	"ID": "testWebID-0", 
+	"IDorigin": "testWebID-0" 
+}, {
+	"themes": "Contenu textuel", 
+    "title": "Donner des titres aux rubriques", 
+	"type": ["Bookmarklet"],
+    "tests": ["Installer le <a href='https://pauljadam.com/bookmarklets/headings.html'>bookmarklet Headings</a> en le glissant dans la barre des favoris de votre navigateur puis l'exécuter."],
+    "verifier": ["Les titres sont pertinents, reflètent le contenu de la page et sont non vides.", "Les titres de niveaux sont hiérarchisés (balises <code>&lt;h1&gt;</code> à <code>&lt;h6&gt;</code>) de manière à refléter l'importance et la hiérarchie visible à l'écran (sur le principe d'une table des matières)."], 
+    "resultat": ["Tous les contenus traités visuellement comme des titres possèdent une sémantique de titre (balises <code>&lt;h1&gt;</code> à <code>&lt;h6&gt;</code>).", "Les titres de niveaux sont hiérarchisés de manière à refléter leur poids sémantique."], 
+    "exception": "<p>Ne pas tenir compte des titres masqués avec les attributs <code>visibility:hidden</code>, <code>aria-hidden='true'</code> ou <code>display:none</code>. Si un de ces titres masqués est susceptible d'apparaître, il faut refaire les observations sur la nouvelle structuration du titrage.</p>", 
+    "raccourcis": "", 
+    "moreInfo": "", 
+    "profils": ["Checklist incontournables"], 
+    "wcag": ["2.4.6", "1.3.1"], 
+    "ID": "testWebID-1", 
+    "IDorigin": "testWebID-1" 
+}, {
+	"themes": "Contenu textuel",
+	"title": "Indiquer la langue principale",
+	"type": ["Test manuel - Inspecteur de code"],
+	"tests": ["Lancer l'inspecteur de code du navigateur.", "Examiner l'élément <code>&lt;html&gt;</code>."],
+	"verifier": ["L'attribut lang est présent.", "La valeur de l'attribut <code>lang</code> doit correspondre à la langue principale du document. Voir la <a href='https://fr.wikipedia.org/wiki/Liste_des_codes_ISO_639-1'>liste des codes ISO 639-1</a>."],
+	"resultat": [["Un attribut lang est présent dans l'élément <code>&lt;html&gt;</code> de la page."], ["La valeur de l'attribut lang correspond à la langue principale du document, exemple : <code>&lt;html lang='fr'&gt;</code>, <code>&lt;html lang='en-US'&gt;</code>."]],
+	"exception": "",
+	"raccourcis": "",
+	"moreInfo": "",
+    "profils": ["Checklist incontournables"], 
+	"wcag": ["3.1.1"],
+	"ID": "testWebID-4",
+	"IDorigin": "testWebID-4"
+}, {
+	"themes": "Contenu non-textuel",
+	"title": "S'assurer que les images ont une alternative textuelle",
+	"type": ["Bookmarklet"],
+	"tests": ["Installer puis lancer le bookmarklet <a href='https://pauljadam.com/bookmarklets/images.html'.>List Images</a> ou l'inspecteur de code."], 
+	"verifier": ["La valeur des attributs <code>alt</code> est pertinente."], 
+	"resultat": ["La valeur de l'attribut <code>alt</code> dépend du type d'image : <ul><li><strong>Image lien :</strong>  le contenu de l'attribut alt de chaque image-lien est pertinent par rapport à la cible du lien.</li><li><strong>Image porteuse d'information :</strong> l'attribut <code>alt</code> de chaque image est pertinent par rapport au rôle de l'image dans la page.</li><li><strong>Image contenant du texte :</strong>  l'attribut <code>alt</code> reprend au moins le texte de l'image.</li><li><strong>Image décorative :</strong> l'attribut <code>alt</code> est présent mais vide.</li><li><strong>Image complexe dont le contenu du <code>alt</code> serait trop long (schémas, graphes…) :</strong> pour toute description d'image trop longue pour être mise dans un attribut <code>alt</code>, la description de l'image sous forme de texte html est soit présente dans la page, soit consultable par lien à proximité de l'image à décrire et pointant vers une page html contenant la description.</li></ul>"], 
+	"exception": "",
+	"raccourcis": "",
+	"moreInfo": "",
+    "profils": ["Checklist incontournables"], 
+	"wcag": ["1.1.1"],
+	"ID": "testWebID-7",
+	"IDorigin": "testWebID-7"
+}, { 
+	"themes": "Couleurs et contrastes", 
+	"title": "Assurer un contraste suffisamment élevé entre texte et arrière-plan", 
+	"type": ["<span lang='en'>Color Contrast Analyser</span>"],
+	"tests": ["Installer et lancer <a href='https://www.tpgi.com/color-contrast-checker/'>Color Contrast Analyser</a>."],
+	"verifier": ["Le contraste est suffisant pour les textes et les textes sous forme d'images."], 
+	"resultat": ["<strong> Color Contrast Analyser affiche 'Conforme' pour les critères AA :</strong><ul><li>Texte normal : taille inférieure à 24px ou à 18,5px gras.</li><li>Grand texte : Taille supérieure ou égale à 24px ou à 18,5px gras.</li><li>Contenu non textuel : indicateurs de focus, graphiques, icones, liens non soulignés...</li></ul>"], 
+	"exception": ["Du texte qui fait partie d'un composant d'interface utilisateur inactif ou d'un logo, un nom de marque."], 
+	"raccourcis": "", 
+	"moreInfo": [["Lien Color Contrast Analyser : "],["Comment utiliser CCA : https://a11y-guidelines.orange.com/fr/web/outils/methodes-et-outils-de-test/mesurer-contraste-couleurs/"]],
+    "profils": ["Checklist incontournables"], 
+	"wcag": ["1.4.3"], 
+	"ID": "testWebID-16", 
+	"IDorigin": "testWebID-16" 
+}, { 
+	"themes": "Couleurs et contrastes", 
+	"title": "S'assurer que l'information n'est pas transmise uniquement par la couleur", 
+	"type": ["Test manuel"],
+	"tests": ["Identifier les éléments utilisant de la couleur pour transmettre de l'information."], 
+	"verifier": ["La couleur n'est pas le seul moyen de convoyer l'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 : icônes utilisant des couleurs et 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."], 
+	"exception": "", 
+	"raccourcis": "", 
+	"moreInfo": "https://a11y-guidelines.orange.com/fr/web/developper/couleurs-et-contrastes/#ne-pas-utiliser-la-couleur-ou-linformation-sensorielle-comme-seule-source-dinformation", 
+    "profils": ["Checklist incontournables"], 
+	"wcag": ["1.4.1"], 
+	"ID": "testWebID-18", 
+	"IDorigin": "testWebID-18" 
+}, {
+	"themes": "Navigation générale",
+	"title": "Permettre le contrôle des animations",
+	"type": ["Test manuel"],
+	"tests": ["Identifier tout contenu en mouvement, mis à jour automatiquement, clignotant ou en défilement, durant plus de 5 secondes et lancé automatiquement (exemple : un carrousel)."],
+	"verifier": [["Pour chaque contenu animé, un mécanisme est présent pour permettre à l'utilisateur de le mettre en pause ou de le masquer."], ["Ce mécanisme est accessible à la souris et à la navigation clavier."]],
+	"resultat": ["L'utilisateur peut mettre pause ou masquer les animations, les mouvements, les mises à jour ou les clignotements."],
+	"exception": "",
+	"raccourcis": "",
+	"moreInfo": "https://a11y-guidelines.orange.com/fr/web/developper/navigation-generale/#permettre-le-controle-des-animations",
+    "profils": ["Checklist incontournables"], 
+	"wcag": ["2.2.2"],
+	"ID": "testWebID-37",
+	"IDorigin": "testWebID-37"
+}, {
+	"themes": "Navigation clavier",
+	"title": "Permettre l'utilisation de l'application au clavier",
+	"type": ["Navigation clavier"],
+	"tests": ["Parcourir la page au clavier à l'aide des touches <kbd>Tab</kbd> ou <kbd>shift + Tab</kbd>.","Utiliser tous les éléments interactifs (en tapant sur les touches <kbd>Entrer</kbd>, <kbd>Espace</kbd> pour les boutons/liens, et les flèches directionnelles pour certains composants : une série de boutons radio, un système d'onglets…)."],
+	"verifier": [["Tout ce qui peut être fait à la souris peut être fait au clavier et inversement."],["L'ordre de déplacement du focus conserve une logique de lecture et d'utilisation."],["Le focus ne reste pas bloqué sur une partie de la page (piège clavier)."],["L'indicateur de focus (outline) est visible sur tous les éléments interactifs et possède un contraste suffisant."]],
+	"resultat": ["Tous les éléments interactifs sont atteignables en naviguant au clavier.", "Tous les éléments interactifs sont utilisables depuis des interactions clavier."],
+	"exception": "",
+	"raccourcis": "",
+	"moreInfo": "https://a11y-guidelines.orange.com/fr/web/developper/navigation-clavier/#permettre-dutiliser-les-principales-fonctionnalites-de-lapplication-au-clavier",
+    "profils": ["Checklist incontournables"], 
+	"wcag": ["2.1.1"],
+	"ID": "testWebID-38",
+	"IDorigin": "testWebID-38"
+}, {
+	"themes": "Mise en page",
+	"title": "Utiliser des tailles relatives et faire du web adaptatif (responsive)",
+	"type": ["Test manuel"],
+	"tests": ["Avec Firefox, à partir du menu \"Affichage\", sélectionner \"Zoom\" puis \"Agrandir uniquement le texte\" et activer un niveau de zoom à 200%."],
+	"verifier": ["Il n'y a ni contenus tronqués ou masqués ni fonctionnalités inutilisables."], 
+	"resultat": ["Absence de contenus tronqués ou masqués et absence de fonctionnalités inutilisables."], 
+	"exception": "",
+	"raccourcis": "",
+	"moreInfo": "https://a11y-guidelines.orange.com/fr/web/developper/mise-en-page/#utiliser-des-tailles-relatives-et-faire-du-web-adaptatif",
+    "profils": ["Checklist incontournables"], 
+	"wcag": ["1.4.11"],
+	"ID": "testWebID-42",
+	"IDorigin": "testWebID-42"
+}, {
+	"themes": "Formulaires",
+	"title": "S'assurer qu'un nom accessible est associé à chaque champ de formulaire",
+	"type": ["Test manuel - Inspecteur de code"],
+	"tests": ["Utiliser l'inspecteur de code du navigateur sur l'onglet \"Accessibilité\"."],
+	"verifier": ["Chaque champ de formulaire doit posséder un nom accessible."],
+	"resultat": ["Chaque champ a au moins un nom accessible pertinent et contient au moins le texte de l'étiquette de champ visible à l'écran (un placeholder n'est pas conforme)."],
+	"exception": "Le nom accessible peut être caché visuellement lorsque le rôle d'un champ de formulaire est évident et non ambigu (exemple : champ de recherche accompagné d'un bouton en forme de loupe, case à cocher pour sélectionner une ligne dans un tableau de données).",
+	"raccourcis": "",
+	"moreInfo": "https://a11y-guidelines.orange.com/fr/web/developper/formulaires/#rendre-accessibles-les-champs-de-formulaire",
+    "profils": ["Checklist incontournables"], 
+	"wcag": ["2.4.6", "3.3.2"],
+	"ID": "testWebID-47",
+	"IDorigin": "testWebID-47"
+}, {
+	"themes": "Formulaires",
+	"title": "S'assurer que les messages d'erreurs sont pertinents",
+	"type": ["Test manuel"],
+	"tests": ["Renseigner les formulaires avec des données erronées et des champs obligatoires laissés vides.", "Soumettre les formulaires."],
+	"verifier": ["Les messages d'erreurs sont présents, pertinents, et identifient les champs en erreur."],
+	"resultat": ["Les erreurs sont détectées et les messages sont pertinents."],
+	"exception": "",
+	"raccourcis": "",
+	"moreInfo": "https://a11y-guidelines.orange.com/fr/web/developper/formulaires/#detecter-identifier-les-erreurs-et-suggerer-des-corrections",
+    "profils": ["Checklist incontournables"], 
+	"wcag": ["3.3.3"],
+	"ID": "testWebID-52",
+	"IDorigin": "testWebID-52"
+}]