Audit Accessibilité pour Grand Paris Climat
Scores - 106 critères
Conformité globale selon les critères
- 79%
Critères conformes - 21%
Critères non conformes
- 54
Critères conformes - 38
Critères non applicables - 14
Critères non conformes
Conformité détaillée de répartition
Contexte
Version du référentiel : RGAA 4.1
Technologies utilisées sur le site : HTML, CSS, JS
Outils pour réaliser l’audit : WCAG Color Contrast Checker, Stylus, Web Developper, Heading Maps, Console navigateur
Environnement de test : Firefox sur Linux Mint, NVDA 2024.3.1 + Firefox 130, Jaws 2023.2307.37 + Firefox 130, VoiceOver + Safari 18, Talkback Android 13
Liste des pages auditées
Accéder aux pages auditées
Notes correctives
Images
On retrouve plusieurs images dans le site qui posent des problèmes pour les utilisateurs handicapés.
Images de décoration
Les images de décoration représentent généralement 90% des images présentes sur un site. Un utilisateur aveugle ou grand-malvoyant ne passera pas à côté d’une information essentielle à la compréhension du contenu. Par exemple, un portrait associé au nom d’une personne.
Pour toutes ces images, il est important de vérifier que l’alternative textuelle est bien vide. Cela évite que les utilisateurs de lecteur d’écran soient gênés dans leur navigation.
Images porteuses d’information
Lorsqu’une information n’est donnée que par une image, il est essentiel que cette information apparaisse sous forme de texte. Les utilisateurs aveugles ou grand malvoyant, mais également les personnes daltoniennes peuvent passer à côté de cette information.
Lorsque vous utilisez une image, interrogez-vous sur ce qu’elle apporte. Par exemple, la carte des ALEC et ECFR présente dans la page Qui sommes-nous ? donne plusieurs informations. Le nom et la répartition des établissements, mais également le découpage par territoire.
En fonction de la longueur de l’information à transmettre, il faut choisir le moyen de transmettre cette information :
- le moyen le plus simple est de mettre l’information dans le texte de la page, l’image devient alors une image de décoration
- lorsque l’information tient en quelques mots, le contenu de l’attribut alt convient parfaitement (alternative textuelle)
- il est possible de la mettre également dans une légende; la gymnastique est alors plus délicate (cf plus bas)
- vous pouvez également accoler une description détaillée quand nécessaire ; cette description peut être masquée par défaut et découverte par l’action d’un bouton, par exemple
Légender une image
Lorsqu’une légende d’image est nécessaire, par exemple, lorsqu’un copyright apparaît, il faut donner une alternative textuelle à l’image quand bien même elle n’est pas porteuse d’information. Il s’agit d’un label simple (par ex. Portrait) qui apparaîtra dans la légende également. L’alternative sera ainsi : Portrait d’Untel La légende : Portrait : crédit le fameux photographe 2024
Utilisation de la sémantique html
Le langage html affiché dans les navigateurs est un langage à balise dont la plupart sont porteuses de sens. Lorsque vous utilisez telle ou telle balise, elle donne une information aux navigateurs. Les technologies d’assistance utilisent cette information pour permettre à leurs utilisateurs de comprendre, d’interagir, de naviguer correctement dans la page.
Aussi, il est essentiel de structurer votre contenu de manière à ce qu’il soit correctement perçu.
Le RGAA insiste sur les titres, les listes et les citations. Structurer correctement ces contenus est un passage obligatoire. Lorsque vous publiez un contenu, vous devez vous poser la question de comment un utilisateur aveugle pourra comprendre sa structure. L’ordre et la hiérarchie des titres permettent-ils de se représenter mentalement la hiérarchie de la page ? Lorsqu’une liste à puce est présente sur la page, est-elle correctement structurée ? Les utilisateurs de lecteur d’écran pourront-ils comprendre qu’il s’agit d’une citation ?
Dans votre outils de gestion de contenu, utilisez les options et les boutons adéquats pour vous assurer que ces contenus seront perçus de manière claire par les utilisateurs.
Détournement de balises
Avec un outil de gestion de contenu, il est parfois tentant de faire des mises en pages qui ne sont pas prévues initialement par l’outil. On utilise alors des paragraphes vides pour créer des espaces, on met en gras et en couleur pour indiquer des titres, on utilise des tirets ou des émoticones pour faire des listes… Cette pratique est catastrophique pour les utilisateurs de lecteur d’écran notamment. Ils n’ont alors plus la capacité de percevoir correctement la structuration du contenu et peuvent vivre un véritable enfer (ex. le faux gras sur linkedin).
Faites la chasse aux paragraphes vides, aux titres utilisés pour rendre un style, etc. et vous simplifierez la vie de très nombreux utilisateurs !
Vidéos
Lorsque vous produisez une vidéo, une alerte accessibilité doit résonner dans votre tête !
Une vidéo pose des problèmes à de très nombreux utilisateurs. Les utilisateurs aveugles ou mal-voyant ne seront pas en mesure de lire les diapositives des présentations dont parle l’intervenant. Les utilisateurs sourds ou mal-entendant n’auront pas la possibilité d’entendre ce qui est dit. D’autres, atteints de trouble de l’attention vont avoir besoin de conditions de lecture adaptées ou préfèreront se tourner vers une version textuelle etc.
Aussi, il est nécessaire de fournir des sous-titres voire une audiodescription ou une transcription textuelle .
Le lecteur multimédia doit également permettre aux utilisateurs de contrôler la lecture. Vous utilisez le lecteur youtube qui est compatible avec les technologies d’assistance.
Documents bureautiques
Chaque document bureautique que vous produisez ou que vous commandez doit être accessible. Cela dépend beaucoup des outils que vous utilisez. Il est à noter que le format PDF pose de très nombreux problèmes et qu’il peut être vraiment laborieux de rendre des documents PDF accessibles.
Il est alors possible et parfois plus simple de fournir une alternative accessible, en html par exemple.
Formez-vous et choisissez des prestataires réellement formés.
Pour tester l’accessibilité d’un PDF, vous pouvez utiliser l’outil PDF Accessibility Checker .
Par ordre des critères du référentiel RGAA
Anomalies présentes sur toutes les pages
Aucune erreur commune à toutes les pages.
Anomalies présentes sur les pages spécifiques
Page : Éléments transverses : https://www.grandparisclimat.org/
Page : Accueil : https://www.grandparisclimat.org/
Page : Contact : https://www.grandparisclimat.org/nous-contacter/
Page : Accessibilité : https://www.grandparisclimat.org/accessibilité
Page : Mentions légales : https://www.grandparisclimat.org/mentions-legales/
Page : Plan du site : https://www.grandparisclimat.org/plan-du-site/
Page : Actualités : https://www.grandparisclimat.org/actualites/
Page : Actualité : Qu’est-ce que Pass’Réno Habitat, la plateforme dédiée aux logements individuels? : https://www.grandparisclimat.org/passreno-habitat/
Critère 1.1 - Non conforme
Commentaire(s) : L'image Pass'Réno Habitat contient un texte comprenant des informations qui n'apparaissent pas ailleurs dans la page.
Chaque image porteuse d’information a-t-elle une alternative textuelle ?
Page : Actualité : Retour sur le colloque « Rénovation énergétique et patrimoine architectural » : https://www.grandparisclimat.org/retour-sur-le-colloque-renovation-energetique-et-patrimoine-architectural/
Critère 4.1 - Non conforme
Commentaire(s) : la vidéo n'a pas de transcription textuelle.
Chaque média temporel pré-enregistré a-t-il, si nécessaire, une transcription textuelle ou une audiodescription (hors cas particuliers) ?
Critère 4.4 - Non conforme
Commentaire(s) : Les sous-titres générés automatiquement par youtube ne sont pas pertinents (ex. JEC à la place de GIEC, 200 à la place de 2100…)
Pour chaque média temporel synchronisé pré-enregistré ayant des sous-titres synchronisés, ces sous-titres sont-ils pertinents ?
Critère 9.4 - Non conforme
Commentaire(s) : De nombreuses citations courtes sont présentes dans le corps de texte et sont mise en valeur par une balise <strong>
Dans chaque page web, chaque citation est-elle correctement indiquée ?
Page : Notre réseau : https://www.grandparisclimat.org/notre-reseau-2/notre-reseau/
Page : Lexique : https://www.grandparisclimat.org/on-vous-explique-le-lexique/
Critère 9.4 - Non conforme
Commentaire(s) : Il existe des citations dans les définition du lexique (ex. Espaces Conseil France Rénov (ECFR)), ces citations ne sont pas correctement indiquée par une balise <q>
Dans chaque page web, chaque citation est-elle correctement indiquée ?
Critère 13.3 - Non conforme
Commentaire(s) : Les deux fichiers PDF à télécharger n'ont pas de version accessible.
Dans chaque page web, chaque document bureautique en téléchargement possède-t-il, si nécessaire, une version accessible (hors cas particuliers) ?
Page : Agenda : https://www.grandparisclimat.org/agenda/
Page : Agenda : Visite de copropriété dans le 20e
Critère 9.1 - Non conforme
Commentaire(s) : Le texte est hiérarchisé par une suite de titres (ex. Qu’est-ce qu’une visite de copropriété ?) qui n'ont pas de sémantique correcte.
Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres ?
Page : Connexion à l’espace privé : https://www.grandparisclimat.org/wp/wp-login.php?redirect_to=https%3A%2F%2Fwww.grandparisclimat.org%2Fwp%2Fwp-admin%2F&reauth=1
Page : Publications : https://www.grandparisclimat.org/publication/
Page : Publications : Lancement du site web Grand Paris Climat : https://www.grandparisclimat.org/publication/communique-de-presse-lancement-du-site-web-grand-paris-climat/
Critère 13.3 - Non conforme
Commentaire(s) : Le fichier PDF n'est pas compatible avec l'accessibilité et n'a pas d'alternative accessible.
Dans chaque page web, chaque document bureautique en téléchargement possède-t-il, si nécessaire, une version accessible (hors cas particuliers) ?
Page : Trouver un conseiller France Rénov’ pour m’accompagner : https://www.grandparisclimat.org/trouver-un-conseiller-france-renov-pour-maccompagner/
Critère 7.1 - Non conforme
Commentaire(s)
- 1. La recherche par commune n'est pas compatible avec l'accessibilité - une fois le focus dans le champ, impossible d'en sortir dans sélectionner une entrée ou faire le tour de toutes les entrées - le focus n'est pas déplacé vers l'élément filtré - les commandes au clavier ne sont pas cohérentes
- 2. La carte interactive est porteuse d'information (une agence par territoire), n'est pas compatible avec les technologies d'assistance (par exemple, navigation impossible au clavier, liens vides…) et n'a pas d'alternative accessible. Ex. de correction :
Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Critère 9.1 - Non conforme
Commentaire(s) : Le texte "Retrouvez la carte détaillée des Espaces Conseil France Rénov’ de la Métropole du Grand Paris" devrait être un titre de niveau 2
Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres ?
Critère 13.3 - Non conforme
Commentaire(s) : Le fichier PDF n'est pas compatible avec l'accessibilité et n'a pas d'alternative accessible.
Dans chaque page web, chaque document bureautique en téléchargement possède-t-il, si nécessaire, une version accessible (hors cas particuliers) ?
Page : Offres d’emploi : Chargé·e de mission Copropriétés : https://www.grandparisclimat.org/nous-rejoindre/charge%c2%b7e-de-mission-coproprietes/
Page : Pourquoi rénover ? : https://www.grandparisclimat.org/pourquoi-renover/
Critère 9.1 - Non conforme
Commentaire(s) : L'accroche de la page ne doit pas être un titre (_Pourquoi rénover mon logement ? Pourquoi engager des travaux dans ma copropriété ? Alors que le parcours peut paraître complexe et coûteux, qu’ai-je à gagner en engageant un projet de rénovation énergétique ?).
Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres ?
Page : Comment trouver des informations : https://www.grandparisclimat.org/la-renovation-energetique/comment-trouver-des-informations/
Page : Retours d’expérience : https://www.grandparisclimat.org/retours-dexperiences/
Page : Estimez vos aides : https://www.grandparisclimat.org/simulez-vos-aides-a-la-renovation-energetique/
Critère 2.1 - Non conforme
Commentaire(s) : Le cadre n'a pas de titre
Chaque cadre a-t-il un titre de cadre ?
Critère 10.11 - Non conforme
Commentaire(s) : Le cadre crée un dépassement
Pour chaque page web, les contenus peuvent-ils être présentés sans avoir recours à un défilement vertical pour une fenêtre ayant une hauteur de 256px ou à un défilement horizontal pour une fenêtre ayant une largeur de 320px (hors cas particuliers) ?
Page : S’inscrire à la newsletter : https://www.grandparisclimat.org/sinscrire-a-la-newsletter/
Page : Grand Paris Climat – EN : https://www.grandparisclimat.org/grand-paris-climat-en/
Critère 1.6 - Non conforme
Commentaire(s) : Le nom des agences et leur répartition par territoire sur l'image de carte est une information qui n'a pas d'alternative.
Chaque image porteuse d’information a-t-elle, si nécessaire, une description détaillée ?
Critère 1.9 - Non conforme
Commentaire(s) : La légende et l'image de carte ne sont pas correctement reliées
Chaque légende d’image est-elle, si nécessaire, correctement reliée à l’image correspondante ?
Critère 8.9 - Non conforme
Commentaire(s)
- 1. L'accroche de la page doit être contenue dans un <p>
- 2. des paragraphes vides sont utilisés pour créer de l'espace autour de la carte interactive.
- 3. Un titre vide est utilisé en fin de texte pour créer de l'espace.
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 ?
Critère 9.3 - Non conforme
Commentaire(s) : La liste non-ordonnée dans la section "To achieve this, the association" n'est pas correctement structurée.
Dans chaque page web, chaque liste est-elle correctement structurée ?
Page : Espace privé : https://www.grandparisclimat.org/espace-prive/
Critère 9.1 - Non conforme
Commentaire(s) : L'accroche de la page ne doit pas être un titre.
Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres ?
Page : Qui sommes-nous ? : https://www.grandparisclimat.org/association/qui-sommes-nous/
Critère 1.6 - Non conforme
Commentaire(s) : La répartition des agence par territoire sur l'image de carte est une information qui n'est pas détaillée dans la légende.
Chaque image porteuse d’information a-t-elle, si nécessaire, une description détaillée ?
Critère 1.9 - Non conforme
Commentaire(s) : La légende et l'image de carte ne sont pas correctement reliées
Chaque légende d’image est-elle, si nécessaire, correctement reliée à l’image correspondante ?
Page : Nos instances et notre équipe : https://www.grandparisclimat.org/association/notre-equipe/
Critère 1.2 - Non conforme
Commentaire(s) : Certains portraits ont une alternative textuelle.
Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
Page : Espace Presse : https://www.grandparisclimat.org/association/espace-presse/
Critère 8.9 - Non conforme
Commentaire(s)
- 1. Un titre de niveau 3 vide est utilisé pour créer un espacement entre le bloc de contact et le titre "Communiqués de presse".
- 2. Les éléments <time> n'ont pas de valeur dans l'attribut datetime.
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 ?
Critère 9.1 - Non conforme
Commentaire(s)
- 1. L'accroche du texte ne devrait pas être un titre (Vous cherchez un témoignage d’acteurs engagés dans le service public...).
- 2. Le titre de la plaquette "Le réseau de Grand Paris Climat" devrait être de niveau 3
Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres ?
Tous les critères non conformes du site
Critère 1.1
Certaines images porteuses d’information n’ont pas d’alternative textuelle.
Critère 1.2
Certaines images de décoration ne sont pas correctement ignorées par les technologies d’assistance.
Critère 1.6
Certaines images porteuses d’information n’ont pas de description détaillée.
Critère 1.9
Certaines légendes d’image ne sont pas correctement reliées à l’image correspondante.
Critère 2.1
Certains cadres n’ont pas de titre de cadre.
Critère 4.1
Certains médias temporels pré-enregistrés n’ont pas de transcription textuelle ni d’audiodescription.
Critère 4.4
Certains médias temporels synchronisés pré-enregistrés ayant des sous-titres synchronisés, ont des sous-titres non pertinents.
Critère 7.1
Certains scripts ne sont pas compatibles avec les technologies d’assistance.
Critère 8.9
Pour certaines pages web, les balises ne doivent pas être utilisées uniquement à des fins de présentation.
Critère 9.1
Pour certaines pages web, l’information n’est pas structurée par l’utilisation appropriée de titres.
Critère 9.3
Pour certaines pages web, certaines listes ne sont pas correctement structurées.
Critère 9.4
Pour certaines pages web, certaines citations ne sont pas correctement indiquées.
Critère 10.11
Pour certaines pages web, les contenus sont présentés en ayant recours à la fois à un défilement vertical pour une fenêtre ayant une hauteur de 256px ou une largeur de 320px.
Critère 13.3
Pour certaines pages web, certains documents bureautiques en téléchargement ne possèdent pas une version accessible.