You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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".
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.
The text was updated successfully, but these errors were encountered:
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é ?
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 !
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="".
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.
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.
Correction :
- Modifier le titre de la page sur le modèle :
<title>Alimentation | Nos Gestes Climat</title>.
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
Corrections :
- Remplacer les balises
<div>
et<span>
par des<p>
ou entourez le texte avec des balises<p>
.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>
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>
.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.
The text was updated successfully, but these errors were encountered: