Accessibilité page documentation

[Clemog]

Hello !

Suite à un audit accessibilité sur nosgestesclimat.fr, nous avons eu quelques retours sur des éléments non accessibles sur la page documentation du modèle de calcul (générée via la lib publicodes 😉). Cette issue permet de mentionner les problèmes rencontrés en vue d'une correction (en espérant que l'on puisse contribuer sur le sujet de notre côté aussi ping @laem)

A noter que certains points, notamment le 9.1 me semble discutable..? Dispo pour échanger sujet !

Critère RGAA	Recommandation	Modification
6.1	Chaque lien est-il explicite (hors cas particuliers) ?	Au moins un intitulé de lien n'est pas pertinent. Par exemple : - Le lien composite "Alimentation fourchette et couteau avec assiette" - Le lien composite "détails triangle pointant vers la droite" - Le lien composite "main écrivant avec un stylo Voir la règle dans le bac à sable Publicodes" - Les liens composites "signe de haute tension Lancer le calcul" dans les fenêtres modales Corrections : - Pour les liens composites, laisser l'attribut alt de l'image vide alt="".
7.1	Chaque script est-il, si nécessaire, compatible avec les technologies d'assistance ?	Au moins un composant ou une fonctionnalité JavaScript n'est pas compatible avec les technologies d'assistance. Par exemple : - L'intitulé du bouton "loupe Rechercher" n'est pas pertinent. - Les zones afficher/masquer ne sont pas accessibles, elles devraient implémenter les principes du motif de conception ARIA Disclosure. Par exemple les zones "déplier" et "détail". - Les fenêtres modales ne respectent pas le motif de conception ARIA Dialog. Par exemple la fenêtre "variations". Corrections : - Pour le bouton "loupe Rechercher", laisser l'attribut alt de l'image vide alt="". - Implémenter le motif de conception ARIA Disclosure sur les zones afficher/masquer : https://www.w3.org/TR/wai-aria-practices-1.1/#disclosure. - Compléter l'implémentation du motif de conception ARIA Dialog : https://www.w3.org/TR/wai-aria-practices-1.1/#dialog\_modal.
8.2	Pour chaque page web, le code source généré est-il valide selon le type de document spécifié (hors cas particuliers) ?	La page contient des erreurs de code HTML qui peuvent impacter l'accessibilité. Par exemple : - Erreurs d'imbrication de balises : des <div> dans des <span> et des <pre> dans des <h2> - Mauvaise valeur d'attribut id : id="non applicable si" contient des espaces Corrections : - Corriger les erreurs de code relatives à l'écriture des balises, l'imbrication des balises, l'écriture des attributs, la validité des valeurs d'attributs.
8.6	Pour chaque page web ayant un titre de page, ce titre est-il pertinent ?	Le titre de la page n'est pas pertinent. Correction : - Modifier le titre de la page sur le modèle : <title>Alimentation | Nos Gestes Climat</title>.
8.9	Dans chaque page web, les balises ne doivent pas être utilisées uniquement à des fins de présentation. Cette règle est-elle respectée ?	Au moins une balise est utilisée uniquement pour créer des effets de présentation. Par exemple : - Le texte "Une question, un problème ?" est uniquement structuré avec des . - Dans le bloc "Comment cette donnée est-elle calculée ?", le détail des catégories est uniquement structuré avec des . Par exemple le texte "Petit déjeuner 0,33 kgCO2e × 365 = 119,24 kgCO2e". Corrections : - Remplacer les balises <div> et <span> par des <p> ou entourez le texte avec des balises <p>.
9.1	Dans chaque page web, l'information est-elle structurée par l'utilisation appropriée de titres ?	La hiérarchie des titres n'est pas pertinente. Par exemple : - La hiérarchie des titres n'est pas cohérente (il manque des titres, ou des titres ne sont pas pertinents) Corrections : - Les titres des catégories dans les zones "déplier" doivent être un titre de niveau 3. Par exemple le texte "Petit déjeuner". - Si l'utilisation des éléments titres html est problématique, il est possible de créer des titres avec les propriétés aria-level et role="heading" : <div role="heading" aria-level="1">XXX</div>
9.3	Dans chaque page web, chaque liste est-elle correctement structurée ?	Au moins un contenu présenté sous forme de liste n'est pas structuré correctement. Par exemple : - La suite de catégories. Par exemple les éléments "Petit déjeuner 119,24 kgCO2e" et "Déjeuner et dîner 965,28 kgCO2e". Corrections : - Pour la liste des catégories, utiliser un élément de liste <ul>/<li>.
10.2	Dans chaque page web, le contenu visible reste-t-il présent lorsque les feuilles de styles sont désactivées ?	Les feuilles de styles CSS insèrent du contenu porteur d'information. Par exemple : - Les parenthèses des calculs sont insérées en CSS. Corrections : - Remplacer le contenu inséré avec CSS par un contenu inséré directement dans le code HTML. - Ou associer une alternative textuelle au contenu inséré avec CSS.

[mquandalle]

cc @bjlaa ces problèmes sont-ils toujours d'actualité ? Il y a t-il des choses à documentation sur l'utilisation du composant <RulePage /> ou <Link /> concernant l'accessibilité ?

[bjlaa]

@mquandalle Je n'ai pas encore touché à publicodes mais c'est la prochaine étape sur ma TODO :) je lierai cette issue à ma PR.