← Retour à la page projet

Recommandations pour Grand Paris Climat

  • 26
    Erreurs total
  • 0
    Erreurs corrigé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 .

Accéder aux pages auditées

Liste des pages auditées

[Actualité : Qu’est-ce que Pass’Réno Habitat, la plateforme dédiée aux logements individuels?](https://www.grandparisclimat.org/passreno-habitat/) - 1 erreurs recensées sur cette page

contenu - 1 erreurs recensées sur ce bloc

☐ Images (1.1)  critique

L'image Pass'Réno Habitat contient un texte comprenant des informations qui n'apparaissent pas ailleurs dans la page.


➡️ Ajouter une alternative à l'image (ex. alt="Pass'Réno Habitat, le service public de la Métropole du Grand Paris pour la rénovation énergétique de l'habitat individuel").

🚨 NOK

Chaque image porteuse d’information a-t-elle une alternative textuelle  ?
Critère : 1.1 du RGAA 4.1.2.

[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/) - 3 erreurs recensées sur cette page

vidéo - 2 erreurs recensées sur ce bloc

☐ Multimédia (4.1)  critique

la vidéo n'a pas de transcription textuelle.


➡️ Mettre à disposition une transcription textuelle

🚨 NOK

Chaque média temporel pré-enregistré a-t-il, si nécessaire, une transcription textuelle ou une audiodescription (hors cas particuliers) ?
Critère : 4.1 du RGAA 4.1.2.

☐ Multimédia (4.4)  critique

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…)


➡️ Mettre à disposition des sous-titres pertinents.

🚨 NOK

Pour chaque média temporel synchronisé pré-enregistré ayant des sous-titres synchronisés, ces sous-titres sont-ils pertinents ?
Critère : 4.4 du RGAA 4.1.2.

contenu - 1 erreurs recensées sur ce bloc

☐ Structuration (9.4)  important

De nombreuses citations courtes sont présentes dans le corps de texte et sont mise en valeur par une balise <strong>


➡️ Utiliser une balise <q> à la place ou en plus de la balise <strong>

🚨 NOK

Dans chaque page web, chaque citation est-elle correctement indiquée ?
Critère : 9.4 du RGAA 4.1.2.

[Lexique](https://www.grandparisclimat.org/on-vous-explique-le-lexique/) - 2 erreurs recensées sur cette page

contenu - 1 erreurs recensées sur ce bloc

☐ Structuration (9.4)  important

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>

🚨 NOK

Dans chaque page web, chaque citation est-elle correctement indiquée ?
Critère : 9.4 du RGAA 4.1.2.

documents bureautiques - 1 erreurs recensées sur ce bloc

☐ Consultation (13.3)  critique

Les deux fichiers PDF à télécharger n'ont pas de version accessible.


➡️ Fournir une version accessible des documents ou une alternative accessible.

🚨 NOK

Dans chaque page web, chaque document bureautique en téléchargement possède-t-il, si nécessaire, une version accessible (hors cas particuliers) ?
Critère : 13.3 du RGAA 4.1.2.

[Agenda : Visite de copropriété dans le 20e | Rénovation globale d’une copropriété du début du XXe siècle – travaux en cours](https://www.grandparisclimat.org/agenda/visite-de-copropriete-dans-le-20e-renovation-globale-dune-copropriete-du-debut-du-xxe-siecle-travaux-en-cours/) - 1 erreurs recensées sur cette page

contenu - 1 erreurs recensées sur ce bloc

☐ Structuration (9.1)  important

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.


➡️ Ajouter des balises <h2> à chaque titre dans le corps de l'article

🚨 NOK

Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres  ?
Critère : 9.1 du RGAA 4.1.2.

[Publications : Lancement du site web Grand Paris Climat](https://www.grandparisclimat.org/publication/communique-de-presse-lancement-du-site-web-grand-paris-climat/) - 1 erreurs recensées sur cette page

document bureautique - 1 erreurs recensées sur ce bloc

☐ Consultation (13.3)  critique

Le fichier PDF n'est pas compatible avec l'accessibilité et n'a pas d'alternative accessible.


➡️ Mettre à disposition une alternative accessible.

🚨 NOK

Dans chaque page web, chaque document bureautique en téléchargement possède-t-il, si nécessaire, une version accessible (hors cas particuliers) ?
Critère : 13.3 du RGAA 4.1.2.

[Trouver un conseiller France Rénov’ pour m’accompagner](https://www.grandparisclimat.org/trouver-un-conseiller-france-renov-pour-maccompagner/) - 4 erreurs recensées sur cette page

Général - 1 erreurs recensées sur ce bloc

☐ Scripts (7.1)  important

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


➡️ Ex. de correction :

  • implémenter le motif de conception ARIA Combobox
  • ou bien proposer l'alternative décrite dans la notice précédente (recommandé)

🚨 NOK

Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance  ?
Critère : 7.1 du RGAA 4.1.2.

carte interactive - 1 erreurs recensées sur ce bloc

☐ Scripts (7.1)  critique

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 :


➡️ Proposer une alternative textuelle sous forme de liste ou de tableau présentant chaque agence associée au territoire et regroupant les communes avec code postal (un peu comme le PDF mais en html et accessible).
 ➡️ Cette alternative peut être masquée et affichée à l'activation d'un bouton.
 ➡️ La description des agences doit être également présente dans cette alternative ou liée.

Note du 8 août 2025

La solution choisie est de fournir une alternative accessible dans une page tierse.

  • dans le back-office du wordpress, créer une page vide
  • le titre de la page peut être : Liste des conseillers France Rénov’ (ou équivalent)
  • ajouter un paragraphe permettant de contextualiser cette page au cas où un utilisateur arriverait dessus directement (présent dans la page d’exemple ci-dessous)
  • insérer un bloc de code html avec la source du tableau complété par vos soins
  • ajouter un lien vers cette page avant le moteur de recherche et à côté du bouton de téléchargement de la version PDF

La page d’exemple est à trouver ici : https://lacooperativedesinternets.bojo.work/recommandations/liste-partenaires.html

Pour compléter le tableau, vous pouvez créer un fichier texte sur votre ordinateur, le nommer liste.hml et l’ouvrir avec un éditeur de texte qui permet de modifier du html (pas word, j’utilise vscodium mais un éditeur texte de base peut faire l’affaire). Pour copier le contenu de la page d’exemple, il faut en afficher la source (sous firefox, menu Outils > Outils du navigateur > Code source de la page ou Ctrl + u).

Ce qui est à copier dans le wordpress est le contenu des balises <table> et </table>

La balise <table> introduit un tableau de données. La balise <tr> délimite une ligne, la balise <td> correspond à une case dans la ligne.

🚨 NOK

Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance  ?
Critère : 7.1 du RGAA 4.1.2.

contenu - 1 erreurs recensées sur ce bloc

☐ Structuration (9.1)  important

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

🚨 NOK

Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres  ?
Critère : 9.1 du RGAA 4.1.2.

document bureautique - 1 erreurs recensées sur ce bloc

☐ Consultation (13.3)  critique

Le fichier PDF n'est pas compatible avec l'accessibilité et n'a pas d'alternative accessible.


➡️ Mettre à disposition une alternative accessible (cf 7.1).

🚨 NOK

Dans chaque page web, chaque document bureautique en téléchargement possède-t-il, si nécessaire, une version accessible (hors cas particuliers) ?
Critère : 13.3 du RGAA 4.1.2.

[Pourquoi rénover ?](https://www.grandparisclimat.org/pourquoi-renover/) - 1 erreurs recensées sur cette page

contenu - 1 erreurs recensées sur ce bloc

☐ Structuration (9.1)  important

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 ?).


➡️ Utiliser une balise <p>

🚨 NOK

Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres  ?
Critère : 9.1 du RGAA 4.1.2.

[Estimez vos aides](https://www.grandparisclimat.org/simulez-vos-aides-a-la-renovation-energetique/) - 2 erreurs recensées sur cette page

cadre - 2 erreurs recensées sur ce bloc

☐ Cadres (2.1)  critique

Le cadre n'a pas de titre


➡️ Ajouter un titre du type title="Calculateur"

🚨 NOK

Chaque cadre a-t-il un titre de cadre  ?
Critère : 2.1 du RGAA 4.1.2.

☐ Présentation (10.11)  critique

Le cadre crée un dépassement


➡️ Adapter le style ou afficher un bouton renvoyant vers le service pour les affichages générant une barre de défilement.

🚨 NOK

Pour chaque page web, les contenus peuvent-ils être présentés sans perte d’information ou de fonctionnalité et sans avoir recours soit à un défilement vertical pour une fenêtre ayant une hauteur de 256 px, soit à un défilement horizontal pour une fenêtre ayant une largeur de 320 px (hors cas particuliers) ?
Critère : 10.11 du RGAA 4.1.2.

[Grand Paris Climat – EN](https://www.grandparisclimat.org/grand-paris-climat-en/) - 5 erreurs recensées sur cette page

carte - 2 erreurs recensées sur ce bloc

☐ Images (1.6)  critique

Le nom des agences et leur répartition par territoire sur l'image de carte est une information qui n'a pas d'alternative.


➡️ Ajouter une alternative (alt="Carte des agences")
➡️ Ajouter une description détaillée adjacente indiquant la correspondance entre les agences et les territoires. Cette description peut être masquée et affichable par un bouton visible (Show the long description of the image)

🚨 NOK

Chaque image porteuse d’information a-t-elle, si nécessaire, une description détaillée  ?
Critère : 1.6 du RGAA 4.1.2.

☐ Images (1.9)  critique

La légende et l'image de carte ne sont pas correctement reliées


➡️implémenter la structure suivante

🚨 NOK

Chaque légende d’image est-elle, si nécessaire, correctement reliée à l’image correspondante ?
Critère : 1.9 du RGAA 4.1.2.

Code modifié
<figure role="group" aria-label="[contenu du figcaption]">
  <img src="…" alt="label-image" />
  <figcaption>
[label-image] Légende de l’image
  </figcaption>
</figure>

contenu - 3 erreurs recensées sur ce bloc

☐ éléments obligatoires (8.9)  important

des paragraphes vides sont utilisés pour créer de l'espace autour de la carte interactive.


➡️ Supprimer les paragraphes vides et utiliser css pour modifier le style

🚨 NOK

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 : 8.9 du RGAA 4.1.2.

☐ éléments obligatoires (8.9) - 2  important

Un titre vide est utilisé en fin de texte pour créer de l'espace.


➡️ Supprimer le titre vide et utiliser css pour modifier le style

🚨 NOK

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 : 8.9 du RGAA 4.1.2.

☐ Structuration (9.3)  important

La liste non-ordonnée dans la section "To achieve this, the association" n'est pas correctement structurée.


➡️ Utiliser une seule balise <ul> et mettre tous les items dans des balises <li> dans cette balise.
➡️ Utiliser css pour ajuster le style

🚨 NOK

Dans chaque page web, chaque liste est-elle correctement structurée ?
Critère : 9.3 du RGAA 4.1.2.

[Espace privé](https://www.grandparisclimat.org/espace-prive/) - 1 erreurs recensées sur cette page

contenu - 1 erreurs recensées sur ce bloc

☐ Structuration (9.1)  moindre

L'accroche de la page ne doit pas être un titre.


➡️ Utiliser un <p>

🚨 NOK

Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres  ?
Critère : 9.1 du RGAA 4.1.2.

[Qui sommes-nous ?](https://www.grandparisclimat.org/association/qui-sommes-nous/) - 2 erreurs recensées sur cette page

carte - 2 erreurs recensées sur ce bloc

☐ Images (1.6)  critique

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.


➡️ Ajouter une description détaillée adjacente indiquant la correspondance entre les agences et les territoires. Cette description peut être masquée et affichable par un bouton visible (Afficher la description détaillée)

🚨 NOK

Chaque image porteuse d’information a-t-elle, si nécessaire, une description détaillée  ?
Critère : 1.6 du RGAA 4.1.2.

☐ Images (1.9)  critique

La légende et l'image de carte ne sont pas correctement reliées


➡️implémenter la structure suivante

🚨 NOK

Chaque légende d’image est-elle, si nécessaire, correctement reliée à l’image correspondante ?
Critère : 1.9 du RGAA 4.1.2.

Code modifié
<figure role="group" aria-label="[contenu du figcaption]">
  <img src="…" alt="label-image" />
  <figcaption>
[label-image] Légende de l’image
  </figcaption>
</figure>

[Nos instances et notre équipe](https://www.grandparisclimat.org/association/notre-equipe/ ) - 1 erreurs recensées sur cette page

image - 1 erreurs recensées sur ce bloc

☐ Images (1.2)  moindre

Certains portraits ont une alternative textuelle.


➡️ Supprimer le contenu de l'attribut alt vide

🚨 NOK

Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
Critère : 1.2 du RGAA 4.1.2.

[Espace Presse](https://www.grandparisclimat.org/association/espace-presse/) - 2 erreurs recensées sur cette page

contenu - 2 erreurs recensées sur ce bloc

☐ éléments obligatoires (8.9)  important

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".


➡️ Supprimer ce titre vide et utiliser css pour la présentation

🚨 NOK

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 : 8.9 du RGAA 4.1.2.

☐ Structuration (9.1)  important

L'accroche du texte ne devrait pas être un titre (Vous cherchez un témoignage d’acteurs engagés dans le service public…).


➡️ Utiliser une balise <p>

🚨 NOK

Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres  ?
Critère : 9.1 du RGAA 4.1.2.