Recommandations pour Agence Parisienne du Climat

136
Erreurs total
18
Erreurs corrigées

Notes correctives

Il reste plusieurs erreurs liées à la navigation principale. Il faut en priorité discocier l’élement header de la navigation et sortir le lien d’évitement de la navigation principale.

Les utilisateurs de lecteur d’écran (utilisateurs aveugles ou grand malvoyants) peuvent rencontrer de grandes difficultés pour se représenter la structure du document.

Pour le lien d’évitement, les personnes navigant au clavier seul peuvent perdre le focus dans la navigation et être bloqués dans la page.

Je vous recommande de traiter tous les points associés à la navigation ou au cartouche de recherche/contact/langue car ils ont un impact important sur les utilisateurs et se trouvent sur toutes les pages. Ces points sont regroupés dans les Éléments transverses .

Ordre des balises

Lorsque le contenu est présenté en “card”, mais également dans des sections de focus en colonnes, l’ordre des balises n’est pas correct. Le titre doit être le premier élément et le contenu doit être strutcturé dans le code de manière à ce qu’il se rapporte à ce titre.

Actuellement, les utilisateurs de lecteur d’écran rencontreront certainement de très grandes difficultés à comprendre la structure de l’information. Positionner le titre de l’article ou de la section en première position dans le code permet de s’assurer que les informations qui quivent s’y rapportent bien.

Par ailleurs, lorsque les liens ont des intitulés génériques (ex. “Se rendre sur la page”), les utilisateurs de lecteur d’écran trouvent le contexte du lien en se référent au titre ou au paragraphe qui précède. Le cas échéant, il est fortement recommandé que les encarts qui comportent des liens génériques aient un titre ou a minima que le paragraphe qui précède directement ne soit pas vide.

Titres

De nombreux utilisateurs de technologies d’assistance ont des stratégies de navigation qui utilisent l’arborescence des titres de la page. Il est primordial que l’information contenue dans la page soit correctement structurée et que les titres représentent la structure de l’information. Ainsi, en consultant le plan des titres, un utilisateur pourra comprendre l’architecture de l’information présentée dans la page.

De manière très simpliste, on peut considérer que tout ce qui ressemble visuellement à un titre doit être un titre.

Il est essentiel que la hiérarchie de l’information soit cohérente. Si un titre de niveau 3 est présent sous un titre de niveau 2, il faut que cela reflête la réalité de l’architecture de l’information visible.

Pour qu’un texte soit interprété comme un titre par les navigateurs et les technologies d’assistance, il est possible d’utiliser les balises hn (h1, h2, h3….) mais vous pouvez également utiliser l’attribut role="heading" assorti de l’attribut aria-level="n" (aria-level="1", aria-level="2"…).

Il n’est pas obligatoire que les niveaux de titre se suivent (ex. h1 > h2 > h4) tant que la hierarchie est cohérente.

Utilisation des listes

Dans le glossaire du RGAA , les listes sont définies ainsi.

Suite d’éléments pouvant être regroupés sous la forme d’une liste structurée ordonnée, non ordonnée ou de définition.

La note 3 de cette notice permet de mieux comprendre :

Note 3 : la notion de « regroupés visuellement sous forme de liste » se caractérise par :

La présence d’un marqueur visuel permettant de faire comprendre qu’il s’agit d’une liste non ordonnée par exemple -, •, *, etc. ;

La présence d’un marqueur visuel permettant de faire comprendre qu’il s’agit d’une liste ordonnée par exemple un chiffre, une lettre grecque, etc. ;

La présence d’une série d’éléments se suivant visuellement les uns les autres, avec une forme visuelle, une nature et un fonctionnement identique, mais sans avoir directement de marqueur visuel de liste (non ordonnée ou ordonnée), par exemple un menu de navigation.

Pour les utilisateurs de lecteur d’écran, utiliser la bonne sémantique permet de faciliter la compréhension dans bien des cas. Mais cela ajoute également des informations qui ne sont parfois pas nécessaires.
Aussi, bien que n’étant pas une non-conformité, le fait de mettre des articles d’une même catégorie (ex. les actualités ou les événements sur la page d’accueil), peut allourdir inutilement la navigation. Je vous recommande donc d’éviter d’utiliser les listes pour regrouper des articles remontés sous forme de “card”.

Images

Que mettre dans l’attribut alt d’une image ?

La très grande majorité des images que nous utilisons sur nos sites sont des images de décorations. Il faut donc laisser vide l’attribut alt alt="".

Cet attribut est à renseigner lorsque l’image apporte une information essentielle à la compréhension du contenu. Par exemple, si le texte à côté de l’image contient déjà ce qui est indiqué sur l’image, il faut laisser son alternative vide.

Parfois, un élément de l’image n’apparaît pas dans le texte. Exemple avec l’actualité “Retour sur les Rencontres AdaptaVille 2023” en page d’accueil. L’image indique que ces rencontres sont annuelles, ce qui n’apparaît pas dans le titre. L’information doit alors apparaître dans l’alternative. Les utilisateurs d’écran pourront ainsi avoir accès à l’ensemble des informations.

A contrario, si les images de décoration ont une alternative, la navigation des utilisateurs de lecteur d’écran est alourdie inutilement.

Vidéos

Beaucoup d’utilisateurs rencontrent des difficultés avec les vidéos. Un utilisateur aveugle aura besoin d’une transcription complète de la vidéo et de son contenu.
Un utilisateur daltonien ou mal-voyant pourra avoir besoin d’une description d’éléments graphiques non perceptibles.
Une utilisatrice malentendante aura besoin de sous-titres précis, voire d’une audiodescription qui décrira plus précisément le contenu de la vidéo. Des utilisateurs atteints de troubles de l’attention ou de la mémoire peuvent également avoir besoin d’une transcription ou de sous-titres.

C’est pourquoi, lorsque vous publiez une vidéo, il est nécessaire de publier également une transcription complète et des sous-titres, voire une audidescription.

PDF

Les documents proposés en téléchargement sur le site doivent être accessibles ou avoir une alternative accessible. Rendre un document PDF accessible dépend de l’outil que vous utilisez. Voici quelques explications pour Adobe Acrobat par exemple.

Le Grand-Duché du Luxembourd a publié un Référentiel d’évaluation de l’accessibilité des documents au format PDF qui retranscrit la norme internationale et européenne, simplifiant ainsi la compréhension des attendus.

Une alternative au document PDF en html peut être proposée. L’ensemble des informations doit alors apparaître dans cette alternative.

Formulaires

L’accessibilité des formulaires nécessite une attention toute particulière. Notamment pour des aides et des contrôles de saisie. Lorsqu’un format spécifique est attendu dans un champ ou que ce champ est obligatoire, les indications doivent être clairement fournies avant soumission du formulaire.
Ces idications doivent également être rappelées dans les messages d’erreur.

Par ailleurs, les messages d’erreur doivent être correctement reliés aux champs qui présentent une erreur. Soit en nommant les champs, soit par l’attribut aria-describedby.

Enfin, la saisie est grandement simplifiée par l’utilisation correcte de l’attribut autocomplete.

Exemple de champ de formulaire :

<p>* Champs obligatoires</p>

<label for="email">E-mail* (nom@domaine.fr)</label>
<input aria-describedby="erreur-email" type="email" id="email" autocomplete="email" aria-invalid="true" required>

<p id="erreur-email" aria-live="alert">L'adress e-mail ne respecte pas le format attendu. Ex. : michel@apc-paris.com</p>

Quick wins

Pour améliorer rapidement le score de conformité, quelques critères sont a priori très simples à corriger car ne nécessitant pas une intervention technique compliquée ou étant présent sur peu de pages.

Critère 1.9 - les légendes d’image

Pour être pleinement comprises par les différentes technologies d’assistance, les images légendées doivent suivre une structure un peu particulière qui peu sembler contre-intuitive et redondante.
Ainsi, lorsque vous rencontrez une image légendée :

ajoutez un role="group" à l’élément <figure>
mettez la légende dans un élément <figcaption>
reprenez le contenu du alt dans la légende auquel vous ajoutez les éléments de légende (copyright ou autre)
reprenez le contenu du figcaption dans un attribut aria-label sur l’élément <figure>

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

Cette non-conformité a été relevée sur les pages Contact, Notre organisation et Actualité : 100^e newsletter de l’Agence Parisienne du Climat.

Critère 2.1 - les titres des cadres

Indiquer un titre pertinent sur les cadres permet aux utilisateurs de lecteur d’écran d’adapter leur stratégie de navigation. Il n’est pas nécessaire de décrire le contenu, mais de permettre de comprendre la nature de l’information (ex. title="vidéo" ou title="graphique interactif").

Cette non-conformité a été relevée sur les pages Actualité : 100^e newsletter de l’Agence Parisienne du Climat, Accompagner les copropriétés à chaque étape de leur projet avec CoachCopro et Comprendre le climat parisien avec Météo-France.

Critère 5.4 - les tableaux

Dans la fenêtre modale de Préférences en matière de cookies, des tableaux sont utilisés pour présenter les différents cookies. Ces tableaux n’ont pas de titres identifiés. Il suffit d’ajouter un élément <caption> qui reprend le titre affiché au-dessus. Cet élément peut être positionné hors écran (.sr-only). Il est également possible d’utiliser un aria-label ou un aria-labelledby.

Cette non-conformité a été relevée dans la page Éléments transverses.

Critère 8.6 - les titres de page

Les titres de pages sont une aide précieuses pour beaucoup d’utilisateurs pour pouvoir retrouver des pages dans l’historique par exemple. Lorsqu’un filtre est activé dans les pages actu ou agenda, ce filtre doit être indiqué dans le titre de la page.

Cette non-conformité a été relevée dans la page Agenda.

Critère 8.7 - les changements de langue

Les lecteurs d’écran utilisent des synthèses vocales. Lorsque ces synthèses vocales rencontrent des termes d’une autre langue, la compréhension peut être très complexe pour un utilisateur de lecteur d’écran. Si un changement de langue est indiqué, la synthèse vocale pourra adapter sa pronociation.
Sur le site, le terme “newsletter” est utilisé sur quasiment chaque écran. Ce terme doit être entouré par une balise associée d’un attribut lang="en".

Note : ce terme apparaît également dans un titre de page, la mise en place d’un mécanisme permettant d’insérer du html dans un titre vient sans doute complexifier outre mesure le fonctionnement standard du CMS. Aussi, l’absence de cet attribut dans le titre ne sera pas considéré comme une non-conformité.

Critères 9.2 et 12.6 - structure de la page et zones de regroupement de contenus

Certaines technologies d’assistance se basent sur les attributs role des zones de regroupement de contenus pour simplifier la navigation. Il est essentiel de bien structurer la page et d’ajouter ces roles.

Il reste quelques ajustement à réaliser dans la page pour que ces deux critères soient conformes :

discocier le header et la navigation principale pour avoir un élément <header role="banner"> et un élément <nav role="navigation" aria-label="navigation principale">
ajouter le role="contentinfo à l’élément footer
supprimer la balise <nav> autour du cartouche de recherche|contact|langue car il ne s’agit pas d’une navigation tel que décrit dans le glossaire du RGAA .

Ces non-conformités ont été relevées dans la page Éléments transverses.

Critère 10.1 - attributs interdits

La mise en page doit être contrôlée uniquement par des feuilles de styles. Cela permet aux utilisateurs d’adapter l’affichage en fonction de leurs préférences. Aussi, certains attributs html sont interdits d’utilisation pour que le code soit compatible avec l’accessibilité.
Les iframe des graphiques interactifs, ont des attributs width et height codés en dur. Utilisez un attribut style ou indiquez les tailles dans la css chargée.

Cette non-conformité a été relevée dans la page Comprendre le climat parisien avec Météo-France.

Critère 10.8 - contenus cachés

Le picto d’horloge précédent le temps de lecture apporte une information et n’a pas d’alternative textuelle. Supprimer l’attribut aria-hidden="true" et ajouter les attributs role="img" aria-label="temps de lecture" permettra aux utilisateurs de lecteur d’écran de comprendre qu’il s’agit d’un temps de lecture.

Critère 11.1 - étiquettes des champs de formulaire

Les labels des formulaires “Candidature spontanée” et “Autre demande” ne sont pas correctement reliés aux champs associés à cause d’une duplication des id des champs.

Cette non-conformité a été relevée dans la page Contact.

Erreurs à corriger

Erreurs par lots de livraison - 20 erreurs sélectionnées

Lot 1 :: corrigées 18/20
Intitulé	Page	Bloc	Critère
LIENS (6.2) ✅ Le lien de contact dans l'entête lorsque le cartouche de recherche \| contact \| EN est affiché en mode réduit n'a plus d'intitulé (le span est en display:none). ➡️ Exemple de correction : mettre l'intitulé hors écran (.sr-only) et ne pas changer la propriété display.	Éléments transverses	cartouche de recherche	6.2 du RGAA
STRUCTURATION (9.2) ✅ Les boutons et liens du cartouche de recherche \| contact \| EN ne sont pas une navigation principale et n'ont pas à être entourés d'une balise nav. ➡️ Ex. de correction : changer la balise <nav> par un <div>	Éléments transverses	cartouche de recherche	9.2 du RGAA
PRÉSENTATION (10.12) ✅ Sur une fenêtre de 1280px de large avec un espacement des lettres augmenté, le cartouche de recherche / contact passe sous le logo, gênant la lecture. ➡️ Modifier la valeur du point de rupture pour passer au menu mobile à 1330 par exemple (attention en cas d'évolution future des items de menu de premier niveau, cette valeur peut être à revoir).	Éléments transverses	cartouche de recherche	10.12 du RGAA
TABLEAUX (5.4) ✅ Dans la modale de "Préférences en matière de cookies", les tableaux décrivant les cookies ne sont pas liés aux titres des sections. ➡️ Ajouter un élément <caption> reprenant le titre de section (ex. Cookies statistiques). Cet élément peut être positionné hors écran (.sr-only)	Éléments transverses	cookies	5.4 du RGAA
SCRIPTS (7.1) - 1 ✅ Lors de l'ouverture de la modale de "Préférences en matière de cookies", le focus n'est pas déplacé empêchant la restitution du titre de la fenêtre au lecteur d'écran. ➡️ Exemple de correction : à l'ouverture de la modale, déplacer le focus sur le bouton fermer.	Éléments transverses	cookies	7.1 du RGAA
SCRIPTS (7.1) - 2 ✅ Le bandeau de cookies ne doit pas être une fenêtre modale. Par ailleurs, le code doit se trouver en tout début de page (cf critère 10.3). ➡️ Supprimer les attributs role="dialog" aria-modal="true" et supprimer les scripts de capture de focus.	Éléments transverses	cookies	7.1 du RGAA
ÉLÉMENTS OBLIGATOIRES (8.9) ✅ Le Bandeau de cookies et la fenêtre modale de gestion des cookies contiennent des paragraphes de texte contenu dans une balise <div> ➡️ Utiliser une balise <p> pour entourer les textes.	Éléments transverses	cookies	8.9 du RGAA
PRÉSENTATION (10.3) ✅ Le bandeau de gestion des cookies doit être présent en premier dans le code HTML, car ils représente une condition de consultation préalable.	Éléments transverses	cookies	10.3 du RGAA
LIENS (6.1) ✅ Dans l'entête et le pied de page, les liens de retour à l'accueil ne sont pas explicites. ➡️ Exemple de correction : modifier le title du lien tel qu'il contienne le texte lisible sur le svg title="Agence Parisienne du Climat, retour à l'accueil'".	Éléments transverses	entête	6.1 du RGAA
SCRIPTS (7.1) - 1 ✅ La fenêtre modale de navigation mobile rentre en conflit avec l'entête principal du site (header). Le header doit avoir un attribut role="banner" (cf critère 12.6). ➡️ Discocier les éléments header du composant (utiliser un élément dialog ou div (plutôt div dans la mesure où le menu desktop ne s'ouvre pas en modale)).	Éléments transverses	navigation	7.1 du RGAA
SCRIPTS (7.1) - 2 ✅ La restitution au lecteur d'écran de la navigation en mode desktop est incorecte puisqu'elle indique que l'utilisateur se trouve dans une fenêtre modale. Par ailleurs, c'est la navigation qui doit porter l'attribut aria-label="Menu principal". ➡️ Lorsque la fenêtre modale de navigation mobile sera discociée du header (cf point précédent), les attributs aria-modal="true" et role="dialog" ne devront apparaître que lorsque le menu sera affiché en mode mobile.	Éléments transverses	navigation	7.1 du RGAA
SCRIPTS (7.1) - 3 ✅ Les boutons de contrôle des composants disclosure de la navigation ont un attribut aria-labelledby qui point vers l'élément lui-même. ➡️ Supprimer l'attribut aria-labelledby	Éléments transverses	navigation	7.1 du RGAA
NAVIGATION (12.8) ✅ Dans la navigation en mode mobile, le lien d'évitement est atteignable et fait sortir le focus de la modale (idem pour la modale de recherche). ➡️ Correction : sortir le lien d'évitement de l'élément header#naigation	Éléments transverses	navigation	12.8 du RGAA
NAVIGATION (12.9) ✅ Dans la navigation principale en mode grand écran, lorsque un sous-menu est ouvert, le focus est piégé dans l'entête de page sans que ce comportement soit prévisible. ➡️ Pour éviter ce fonctionnement, les sous-menus peuvent être repliés automatiquement lorsque le focus arrive sur l'item Agenda.	Éléments transverses	navigation	12.9 du RGAA
ÉLÉMENTS OBLIGATOIRES (8.7) ❌ Dans le menu de pied de page, le changement de langue n'est pas indiqué pour le terme "Newsletter" ➡️ Exemple de correction : ajouter l'attribut lang="en" dans un span contenant le mot. Cette correction doit être également faite dans l'ensemble des pages où apparaît le bloc newsletter.	Éléments transverses	pied de page	8.7 du RGAA
PRÉSENTATION (10.7) ✅ Dans beaucoup de cas, lorsqu'il y des encarts de type "card" (remontées de contenu, encarts de téléchargement, encarts de lien), l'ordre des balises n'est pas bon et peut entraîner plusieurs problèmes majeurs : incompréhension dans l'enchaînement des contenus lorsque plusieurs contenus se suivent perte de contexte pour des liens à l'intitulé générique. ➡️ Pour y remédier, il est nécessaire de : mettre le titre en première position dans le code et changer l'ordre en css si un lien à l'intitulé générique est présent dans le bloc : s'assurer que le texte imédiatement précédent est compris dans une balise <p> (ou de titre) favoriser la présence d'un titre dans l'encart (soit balise hn, soit role="heading" + aria-level="n") s'assurer qu'il n'y a pas de paragraphe vide juste avant le lien	Éléments transverses	PRÉSENTATION	10.7 du RGAA
NAVIGATION (12.8) ✅ Lorque la fenêtre modale de recherche est ouverte, le focus doit rester piégé dans cette modale uniquement. Actuellement, il est possible d'en sortir pour aller dans la navigation. ➡️ Implémenter le modèle de conception ARIA Dialog Modal	Éléments transverses	recherche	12.8 du RGAA
STRUCTURATION (9.3) ❌ Dans le site, des listes sont souvent utilisées pour regrouper des articles de même nature. Ce n'est pas une non-conformité, mais cela peut entraîner des difficultés de navigation pour certains utilisateurs. Je vous recommande de ne pas utiliser de listes dans ce cas.	Éléments transverses	STRUCTURATION	9.3 du RGAA
PRÉSENTATION (10.8) ✅ Lorsqu'une indication de temps de lecture apparaît dans la page, le pictogramme d'horloge apporte une information qui peut gêner la compréhension si elle n'est pas perçue. Par ailleurs, le contraste du picto n'est pas suffisant (il devrait être d'au moins 3:1). Enfin, cette indication doit être entourée d'une balise <p> ➡️ Correction possible : supprimer l'attribut aria-hidden="true" ajouter l'attribut aria-label="temps de lecture" (vérifier la présence de role="img") utiliser une balise <p> pour entourer le picto et le texte augmenter le contrast à plus de 3:1	Éléments transverses	temps de lecture	10.8 du RGAA
NAVIGATION (12.6) ✅ Une ou plusieurs zones de regroupement de contenus ne peuventt être atteintes ou évitées. ➡️ Corrections et exemples : Ajouter l'attribut role="…" aux zones existantes : Ajouter le role="banner" à l'élément <header> principal Ajouter le role="navigation" aux éléments <nav> Ajouter le role="contentinfo" à l'élément <footer>	Éléments transverses	zones de regroupement de contenus	12.6 du RGAA

Accéder aux pages auditées

Éléments transverses
Accueil
Contact
Notre organisation
Agenda
Adapter mon logement aux fortes chaleurs
Actualité : 100^e newsletter de l’Agence Parisienne du Climat
Accompagner les copropriétés à chaque étape de leur projet avec CoachCopro
Newsletter
Comprendre le climat parisien avec Météo-France

Liste des pages auditées

Éléments transverses - 20 erreurs recensées sur cette page

cookies - 5 erreurs recensées sur ce bloc

☒ TABLEAUX (5.4) important

Dans la modale de "Préférences en matière de cookies", les tableaux décrivant les cookies ne sont pas liés aux titres des sections.

➡️ Ajouter un élément <caption> reprenant le titre de section (ex. Cookies statistiques). Cet élément peut être positionné hors écran (.sr-only)

Pour chaque tableau de données ayant un titre, le titre est-il correctement associé au tableau de données ?
Critère : 5.4 du RGAA 4.1.2.

☒ SCRIPTS (7.1) - 1 moindre

Lors de l'ouverture de la modale de "Préférences en matière de cookies", le focus n'est pas déplacé empêchant la restitution du titre de la fenêtre au lecteur d'écran.

➡️ Exemple de correction : à l'ouverture de la modale, déplacer le focus sur le bouton fermer.

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

☒ SCRIPTS (7.1) - 2 moindre

Le bandeau de cookies ne doit pas être une fenêtre modale. Par ailleurs, le code doit se trouver en tout début de page (cf critère 10.3).

➡️ Supprimer les attributs role="dialog" aria-modal="true" et supprimer les scripts de capture de focus.

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

☒ ÉLÉMENTS OBLIGATOIRES (8.9) moindre

Le Bandeau de cookies et la fenêtre modale de gestion des cookies contiennent des paragraphes de texte contenu dans une balise <div>

➡️ Utiliser une balise <p> pour entourer les textes.

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.

☒ PRÉSENTATION (10.3) important: Le bandeau de gestion des cookies doit être présent en premier dans le code HTML, car ils représente une condition de consultation préalable.; Dans chaque page web, l’information reste-t-elle compréhensible lorsque les feuilles de styles sont désactivées ?
Critère : 10.3 du RGAA 4.1.2.

entête - 1 erreurs recensées sur ce bloc

☒ LIENS (6.1) important

Dans l'entête et le pied de page, les liens de retour à l'accueil ne sont pas explicites.

➡️ Exemple de correction : modifier le title du lien tel qu'il contienne le texte lisible sur le svg title="Agence Parisienne du Climat, retour à l'accueil'".

Chaque lien est-il explicite (hors cas particuliers) ?
Critère : 6.1 du RGAA 4.1.2.

cartouche de recherche - 3 erreurs recensées sur ce bloc

☒ LIENS (6.2) critique

Le lien de contact dans l'entête lorsque le cartouche de recherche | contact | EN est affiché en mode réduit n'a plus d'intitulé (le span est en display:none).

➡️ Exemple de correction : mettre l'intitulé hors écran (.sr-only) et ne pas changer la propriété display.

Dans chaque page web, chaque lien a-t-il un intitulé ?
Critère : 6.2 du RGAA 4.1.2.

☒ STRUCTURATION (9.2) important

Les boutons et liens du cartouche de recherche | contact | EN ne sont pas une navigation principale et n'ont pas à être entourés d'une balise nav.

➡️ Ex. de correction : changer la balise <nav> par un <div>

Dans chaque page web, la structure du document est-elle cohérente (hors cas particuliers) ?
Critère : 9.2 du RGAA 4.1.2.

☒ PRÉSENTATION (10.12) moindre

Sur une fenêtre de 1280px de large avec un espacement des lettres augmenté, le cartouche de recherche / contact passe sous le logo, gênant la lecture.

➡️ Modifier la valeur du point de rupture pour passer au menu mobile à 1330 par exemple (attention en cas d'évolution future des items de menu de premier niveau, cette valeur peut être à revoir).

Dans chaque page web, les propriétés d’espacement du texte peuvent-elles être redéfinies par l’utilisateur sans perte de contenu ou de fonctionnalité (hors cas particuliers) ?
Critère : 10.12 du RGAA 4.1.2.

navigation - 5 erreurs recensées sur ce bloc

☒ SCRIPTS (7.1) - 1 important

La fenêtre modale de navigation mobile rentre en conflit avec l'entête principal du site (header). Le header doit avoir un attribut role="banner" (cf critère 12.6).

➡️ Discocier les éléments header du composant (utiliser un élément dialog ou div (plutôt div dans la mesure où le menu desktop ne s'ouvre pas en modale)).

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

☒ SCRIPTS (7.1) - 2 moindre

La restitution au lecteur d'écran de la navigation en mode desktop est incorecte puisqu'elle indique que l'utilisateur se trouve dans une fenêtre modale. Par ailleurs, c'est la navigation qui doit porter l'attribut aria-label="Menu principal".

➡️ Lorsque la fenêtre modale de navigation mobile sera discociée du header (cf point précédent), les attributs aria-modal="true" et role="dialog" ne devront apparaître que lorsque le menu sera affiché en mode mobile.

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

☒ SCRIPTS (7.1) - 3 moindre

Les boutons de contrôle des composants disclosure de la navigation ont un attribut aria-labelledby qui point vers l'élément lui-même.

➡️ Supprimer l'attribut aria-labelledby

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

☒ NAVIGATION (12.8) important

Dans la navigation en mode mobile, le lien d'évitement est atteignable et fait sortir le focus de la modale (idem pour la modale de recherche).

➡️ Correction : sortir le lien d'évitement de l'élément header#naigation

Dans chaque page web, l’ ordre de tabulation est-il cohérent ?
Critère : 12.8 du RGAA 4.1.2.

☒ NAVIGATION (12.9) moindre

Dans la navigation principale en mode grand écran, lorsque un sous-menu est ouvert, le focus est piégé dans l'entête de page sans que ce comportement soit prévisible.

➡️ Pour éviter ce fonctionnement, les sous-menus peuvent être repliés automatiquement lorsque le focus arrive sur l'item Agenda.

Dans chaque page web, la navigation ne doit pas contenir de piège au clavier. Cette règle est-elle respectée ?
Critère : 12.9 du RGAA 4.1.2.

pied de page - 1 erreurs recensées sur ce bloc

☐ ÉLÉMENTS OBLIGATOIRES (8.7) moindre

Dans le menu de pied de page, le changement de langue n'est pas indiqué pour le terme "Newsletter"

➡️ Exemple de correction : ajouter l'attribut lang="en" dans un span contenant le mot. Cette correction doit être également faite dans l'ensemble des pages où apparaît le bloc newsletter.

Dans chaque page web, chaque changement de langue est-il indiqué dans le code source (hors cas particuliers) ?
Critère : 8.7 du RGAA 4.1.2.

STRUCTURATION - 9.3 - 1 erreurs recensées sur ce bloc

☐ STRUCTURATION (9.3): Dans le site, des listes sont souvent utilisées pour regrouper des articles de même nature. Ce n'est pas une non-conformité, mais cela peut entraîner des difficultés de navigation pour certains utilisateurs. Je vous recommande de ne pas utiliser de listes dans ce cas.; Dans chaque page web, chaque liste est-elle correctement structurée ?
Critère : 9.3 du RGAA 4.1.2.

PRÉSENTATION - 10.7 - 1 erreurs recensées sur ce bloc

☒ PRÉSENTATION (10.7) important

Dans beaucoup de cas, lorsqu'il y des encarts de type "card" (remontées de contenu, encarts de téléchargement, encarts de lien), l'ordre des balises n'est pas bon et peut entraîner plusieurs problèmes majeurs :

incompréhension dans l'enchaînement des contenus lorsque plusieurs contenus se suivent
perte de contexte pour des liens à l'intitulé générique.

➡️ Pour y remédier, il est nécessaire de :

mettre le titre en première position dans le code et changer l'ordre en css
si un lien à l'intitulé générique est présent dans le bloc :
- s'assurer que le texte imédiatement précédent est compris dans une balise <p> (ou de titre)
- favoriser la présence d'un titre dans l'encart (soit balise hn, soit role="heading" + aria-level="n")
- s'assurer qu'il n'y a pas de paragraphe vide juste avant le lien

Dans chaque page web, pour chaque élément recevant le focus, la prise de focus est-elle visible ?
Critère : 10.7 du RGAA 4.1.2.

temps de lecture - 1 erreurs recensées sur ce bloc

☒ PRÉSENTATION (10.8) moindre

Lorsqu'une indication de temps de lecture apparaît dans la page, le pictogramme d'horloge apporte une information qui peut gêner la compréhension si elle n'est pas perçue. Par ailleurs, le contraste du picto n'est pas suffisant (il devrait être d'au moins 3:1). Enfin, cette indication doit être entourée d'une balise <p>

➡️ Correction possible :

supprimer l'attribut aria-hidden="true"
ajouter l'attribut aria-label="temps de lecture" (vérifier la présence de role="img")
utiliser une balise <p> pour entourer le picto et le texte
augmenter le contrast à plus de 3:1

Pour chaque page web, les contenus cachés ont-ils vocation à être ignorés par les technologies d’assistance ?
Critère : 10.8 du RGAA 4.1.2.

zones de regroupement de contenus - 1 erreurs recensées sur ce bloc

☒ NAVIGATION (12.6) important

Une ou plusieurs zones de regroupement de contenus ne peuventt être atteintes ou évitées.

➡️ Corrections et exemples : Ajouter l'attribut role="…" aux zones existantes :

Ajouter le role="banner" à l'élément <header> principal
Ajouter le role="navigation" aux éléments <nav>
Ajouter le role="contentinfo" à l'élément <footer>

Les zones de regroupement de contenus présentes dans plusieurs pages web (zones d’ en-tête, de navigation principale, de contenu principal, de pied de page et de moteur de recherche ) peuvent-elles être atteintes ou évitées ?
Critère : 12.6 du RGAA 4.1.2.

recherche - 1 erreurs recensées sur ce bloc

☒ NAVIGATION (12.8) important

Lorque la fenêtre modale de recherche est ouverte, le focus doit rester piégé dans cette modale uniquement. Actuellement, il est possible d'en sortir pour aller dans la navigation.

➡️ Implémenter le modèle de conception ARIA Dialog Modal

Dans chaque page web, l’ ordre de tabulation est-il cohérent ?
Critère : 12.8 du RGAA 4.1.2.

Accueil - 22 erreurs recensées sur cette page

CoachCopro et Adaptaville - 1 erreurs recensées sur ce bloc

☐ IMAGES (1.2) moindre: Les images CoachCopro et Adaptaville n'apportent pas d'information essentielle à la compréhension puisqu'elles sont adjacentes au texte. Leur alternative doit être vide. (Ce qui n'est pas le cas de MeteoFrance associé au texte Bulletins climatiques).; Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
Critère : 1.2 du RGAA 4.1.2.

Rénovation en matériaux biosourcés et végétalisation d’un ensemble des Trente Glorieuses. - 1 erreurs recensées sur ce bloc

☐ IMAGES (1.2) moindre: L'image de l'article "Rénovation en matériaux biosourcés et végétalisation d’un ensemble des Trente Glorieuses." doit avoir une alternative vide.; Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
Critère : 1.2 du RGAA 4.1.2.

Végétaliser une dalle à l’occasion de la réfection d’étanchéité : l’exemple du bailleur social Paris Habitat. - 1 erreurs recensées sur ce bloc

☐ IMAGES (1.2) moindre: L'image de l'article "Végétaliser une dalle à l’occasion de la réfection d’étanchéité : l’exemple du bailleur social Paris Habitat." doit avoir une alternative vide.; Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
Critère : 1.2 du RGAA 4.1.2.

Retour sur les Rencontres AdaptaVille 2023 - 1 erreurs recensées sur ce bloc

☐ IMAGES (1.3) important

L'alternative de l'image de l'actualité "Retour sur les Rencontres AdaptaVille 2023" ne reprend pas le texte qui indique le caractère annuel des rencontres.

➡️ Exemple de correction : alt="Rencontres annuelles AdaptaVille"

Pour chaque image porteuse d’information ayant une alternative textuelle, cette alternative est-elle pertinente (hors cas particuliers) ?
Critère : 1.3 du RGAA 4.1.2.

Bulletin climatique de l’été 2023 - 1 erreurs recensées sur ce bloc

☐ IMAGES (1.3) important

L'alternative de l'image de l'article "Bulletin climatique de l’été 2023" ne reflète pas les informations essentielles données par l'image.

➡️ Exemple de correction : alt="35,5° Pic observé le 9 septembre, 10 jours consécutifs avec température max supérieure à 30°C"

Pour chaque image porteuse d’information ayant une alternative textuelle, cette alternative est-elle pertinente (hors cas particuliers) ?
Critère : 1.3 du RGAA 4.1.2.

Notre action se décline à plusieurs échelles - 1 erreurs recensées sur ce bloc

☐ IMAGES (1.3) important: L'image de la section "Notre action se décline à plusieurs échelles" apporte des informations essentielles. Reprendre le texte dans l'alternative.; Pour chaque image porteuse d’information ayant une alternative textuelle, cette alternative est-elle pertinente (hors cas particuliers) ?
Critère : 1.3 du RGAA 4.1.2.

Nos membres fondateurs et adhérents - 1 erreurs recensées sur ce bloc

☐ IMAGES (1.3) important

Les noms des partenaires de la section "Nos membres fondateurs et adhérents" n'apparaissent pas dans le texte adjacent.

➡️ Reprendre les noms dans l'alternative.

Pour chaque image porteuse d’information ayant une alternative textuelle, cette alternative est-elle pertinente (hors cas particuliers) ?
Critère : 1.3 du RGAA 4.1.2.

contraste - 1 erreurs recensées sur ce bloc

☐ COULEURS (3.2) important: Le contraste entre le texte et l'arrière plan sur les chiffres blanc sur fond orange n'est pas suffisant (3:47), ce rapport doit être de 4,5:1 ou plus (ok pour Agenda car la taille de la font est supérieure à 18,5px).; Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
Critère : 3.2 du RGAA 4.1.2.

temps de lecture - 1 erreurs recensées sur ce bloc

☐ COULEURS (3.3) moindre: Le picto d'horloge précédent le temps de lecture apporte une information et a un rapport de contraste de 2,54:1, ce rapport doit être de 3:1 ou plus.; Dans chaque page web, les couleurs utilisées dans les composants d’interface ou les éléments graphiques porteurs d’informations sont-elles suffisamment contrastées (hors cas particuliers) ?
Critère : 3.3 du RGAA 4.1.2.

Articles à la une - 1 erreurs recensées sur ce bloc

☐ ÉLÉMENTS OBLIGATOIRES (8.9) moindre: Dans la section "Articles à la une", les indications de temps de lecture doivent être entourées par une balise <p>. Pour permettre la comprehension de ce texte (apportée par l'image d'horloge qui n'a pas d'alternative), vous pouvez ajouter un texte hors écran (span.sr-only) pour indiquer qu'il s'agit d'un temps de lecture ou ajouter les attributs role="img" et aria-label="temps de lecture" au svg d'horloge.; 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.

Agenda à venir - 1 erreurs recensées sur ce bloc

☐ ÉLÉMENTS OBLIGATOIRES (8.9) moindre: Dans la section "Agenda à venir", les indications de catégories et de dates doivent être comprises dans des paragraphes.; 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.

Focus sur des projets portés par l’Agence - 2 erreurs recensées sur ce bloc

☐ ÉLÉMENTS OBLIGATOIRES (8.9) moindre: Dans la section "Focus sur des projets portés par l’Agence", les indications de lieu doivent être entourées par une balise <p>; 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.

☐ PRÉSENTATION (10.3) important

Dans la section "Focus sur des projets portés par l’Agence", les titres "CoachCopro", "AdaptaVille", etc. sont décorellés des contenus associés visuellement et vérifier la cohérence de l'ordre des éléments textuels (+ cf critère 9.1).

➡️ Regrouper les titres et leur contenus.

Dans chaque page web, l’information reste-t-elle compréhensible lorsque les feuilles de styles sont désactivées ?
Critère : 10.3 du RGAA 4.1.2.

Le saviez-vous ? - 1 erreurs recensées sur ce bloc

☐ ÉLÉMENTS OBLIGATOIRES (8.9) moindre: Dans la section "Le saviez-vous ?", le texte 1/3 doit être entouré par une balise <p> (ou ignoré par les lecteurs d'écran car il est repris dans le texte adjacent); 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.

Un acteur incontournable de la transition écologique - 1 erreurs recensées sur ce bloc

☐ ÉLÉMENTS OBLIGATOIRES (8.9) moindre

Dans la section "Un acteur incontournable de la transition écologique", un paragrpahe vide est utilisé à des fins de présentation.

➡️ Supprimer ce paragraphe

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.

titre - 5 erreurs recensées sur ce bloc

☐ STRUCTURATION (9.1) - 1 important: Dans la section "Copropriétaires, professionnels, institutionnels, grand public : l’Agence vous accompagne dans votre passage à l’action", les textes "Rénover mon habitat", "Agir sur mon comportement", etc. doivent être des titres de niveau 3; 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.

☐ STRUCTURATION (9.1) - 2 important: Dans la section "Nos actualités et notre agenda", les textes "Actualités à la une" et "Agenda à venir" doivent être des titres de niveau 3 et les titres des articles doivent être de niveau 4; 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.

☐ STRUCTURATION (9.1) - 3 important: Dans la section "Focus sur des projets portés par l’Agence", les textes "CoachCopro", "AdaptaVille", etc. doivent être des titres de niveau 3 et les actuels titres de niveau 3 ("Rénovation en matériaux biosourcés et végétalisation d’un ensemble des Trente Glorieuses.") doivent être des paragraphes.; 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.

☐ STRUCTURATION (9.1) - 4 important: Le texte "Le saviez-vous ?" doit ê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 : 9.1 du RGAA 4.1.2.

☐ STRUCTURATION (9.1) - 5 important: Dans la section "Un acteur incontournable de la transition écologique", les textes "Notre action se décline à plusieurs échelles", "Nos membres fondateurs et adhérents", etc. doivent être des titres de niveau 3; 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.

STRUCTURATION - 9.3 - 1 erreurs recensées sur ce bloc

☐ STRUCTURATION (9.3) important: Dans la section "Copropriétaires, professionnels, institutionnels, grand public : l’Agence vous accompagne dans votre passage à l’action", les listes de liens précédées par des flêches doivent être des listes ul/li; Dans chaque page web, chaque liste est-elle correctement structurée ?
Critère : 9.3 du RGAA 4.1.2.

Actualités à la une et Agenda à venir - 1 erreurs recensées sur ce bloc

☐ PRÉSENTATION (10.3) important

Dans les sections "Actualités à la une" et "Agenda à venir", l'ordre du contenu des articles en exergue n'est pas cohérent. Le titre doit apparaître en premier dans le code, puis les éléments de l'article (image, temps de lecture, résumé…).

➡️ Utilisez css pour modifier cet ordre visuellement.

Dans chaque page web, l’information reste-t-elle compréhensible lorsque les feuilles de styles sont désactivées ?
Critère : 10.3 du RGAA 4.1.2.

Contact - 12 erreurs recensées sur cette page

légende - 1 erreurs recensées sur ce bloc

☐ IMAGES (1.9) moindre

La légende ne vérifie pas toutes les conditions requises pour être perceptible :

➡️ Ajouter le role="group" à l'élemert figure → Ajouter un attribut aria-label reprenant la légende sur l'élément figure

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.

formulaires - 2 erreurs recensées sur ce bloc

☐ ÉLÉMENTS OBLIGATOIRES (8.9) moindre: Le texte des formulaires "Les champs obligatoires sont signalés par un astérisque (*)." doit être contenu dans une balise <p>; 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.

☐ FORMULAIRES (11.1) critique

Les labels des formulaires "Candidature spontanée" et "Autre demande" ne sont pas correctement reliés aux champs associés.

➡️ Relier les labels aux bon champs par des id uniques

Chaque champ de formulaire a-t-il une étiquette ?
Critère : 11.1 du RGAA 4.1.2.

la page - 1 erreurs recensées sur ce bloc

☐ ÉLÉMENTS OBLIGATOIRES (8.9) moindre: Des paragraphes vides sont présents dans la page, supprimez-les.; 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.

titre - 2 erreurs recensées sur ce bloc

☐ STRUCTURATION (9.1) - 1 important

Tout ce qui ressemble visuellement à un titre doit être un titre. Exemple :

"Ma demande concerne un projet de rénovation énergétique ou d’amélioration de mon cadre de vie (végétalisation, mobilité, etc.)" doit être un titre de nivau 3
"Mon besoin se situe à l’échelle de mon appartement uniquement" doit être un titre de niveau 4
"Participation à un évènement" doit être un titre de niveau 4 (et non une liste)
Attention, dans la section "Je suis un professionnel" à la cohérence des niveaux

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.

☐ STRUCTURATION (9.1) - 2 important: Dans la section "Autre profil", les items "Votre demande est un sujet lié à la communication" et "Votre demande est un sujet évènementiel" doivent être également des titres, attention cependant à la cohérence de niveau de titre. Ils doivent avoir le même niveau que "Avez-vous consulté ces pages ?" (le niveau 4 est acceptable).; 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.

Avez-vous consulté ces pages ? - 1 erreurs recensées sur ce bloc

☐ STRUCTURATION (9.3) important: Les listes de liens sous les titres "Avez-vous consulté ces pages ?" doivent être des listes non ordonnées.; Dans chaque page web, chaque liste est-elle correctement structurée ?
Critère : 9.3 du RGAA 4.1.2.

acceptation des conditions - 1 erreurs recensées sur ce bloc

☐ FORMULAIRES (11.10) moindre

Le label d'acceptation des conditions n'a pas de mention du caractère obligatoire.

➡️ Ajouter une asterisque dans le label.

Chaque champ de formulaire a-t-il une étiquette ?
Critère : 11.1 du RGAA 4.1.2.

message d'erreur - 2 erreurs recensées sur ce bloc

☐ FORMULAIRES (11.10) important

Le message d'erreur sur le format d'adresse mail ne permet pas d'identifier le champ associé.

➡️ ajouter un attribut aria-describedb="id_message_erreur"

Chaque champ de formulaire a-t-il une étiquette ?
Critère : 11.1 du RGAA 4.1.2.

☐ FORMULAIRES (11.11) important

Le message d'erreur sur le format d'adresse mail ne comporte pas d'exemple de format.

➡️ ajouter un exemple d'adresse mail valide au message d'erreur

Dans chaque formulaire, le contrôle de saisie est-il accompagné, si nécessaire, de suggestions facilitant la correction des erreurs de saisie ?
Critère : 11.11 du RGAA 4.1.2.

champs Email - 1 erreurs recensées sur ce bloc

☐ FORMULAIRES (11.11) important

Aucune suggestion de format pour les champs Email qui attendent une adresse mail valide.

➡️ Ex. de correction : changer le label : "E-mail* ( prenom@domaine.fr ) :"

Dans chaque formulaire, le contrôle de saisie est-il accompagné, si nécessaire, de suggestions facilitant la correction des erreurs de saisie ?
Critère : 11.11 du RGAA 4.1.2.

champs - 1 erreurs recensées sur ce bloc

☐ FORMULAIRES (11.13) important

Les champs qui attendent une donnée personnelle de l'utilisateur ne sont pas identifiés.

➡️ Exemples et corrections : Implémenter un attribut autocomplete sur les champs suivants :

Le champ "Email" : autocomplete="email"
Le champ "Nom" : autocomplete="name"
etc. Liste des valeurs possibles : https://www.numerique.gouv.fr/publications/rgaa-accessibilite/methode/glossaire/#liste-des-valeurs-possibles-pour-l-attribut-autocomplete

La finalité d’un champ de saisie peut-elle être déduite pour faciliter le remplissage automatique des champs avec les données de l’utilisateur ?
Critère : 11.13 du RGAA 4.1.2.

Notre organisation - 8 erreurs recensées sur cette page

images - 1 erreurs recensées sur ce bloc

☐ IMAGES (1.9) moindre

Plusieurs images ne sont pas correctement associées à leur légende. Par exemple :

la photographie de la président
le logo de l'espace France Rénov

➡️ Les images et leur légende doivent être contenues dans uen balise <figure> → La balise figure doit posseder les attributs role="group" et aria-label dont le contenu est identique au contenu de la légende (ex. aria-label="Fatoumata Koné, présidente" → La légende doit être contenue dans une balise <figcaption> → L'image doit avoir un atribut alt qui reprend tout ou partie de la légende (ex. alt="Fatoumata Koné")

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.

encart Découvrez qui sont les membres de l’équipe de l’Agence Parisienne du Climat et leurs fonctions ! - 1 erreurs recensées sur ce bloc

☐ LIENS (6.1) important

Le lien "Se rendre sur la page" dans l'encart "Découvrez qui sont les membres de l’équipe de l’Agence Parisienne du Climat et leurs fonctions !" n'est pas explicite car précédé par un paragraphe vide et l'intitulé au dessus n'est pas un titre.

➡️ Exemple de correction : supprimer le paragraphe vide et transformer l'intitulé en titre (cf critère 9.1)

Chaque lien est-il explicite (hors cas particuliers) ?
Critère : 6.1 du RGAA 4.1.2.

sommaire en mode mobile - 1 erreurs recensées sur ce bloc

☐ SCRIPTS (7.1) important

Le sommaire en mode mobile est compris dans un disclosure qui n'implémente pas correctement de le modèle de conception ARIA Disclosure.

➡️ Implémenter le modèle de conception ARIA Disclosure

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

En savoir plus sur les projets européens auxquels participe l’Agence Parisienne du Climat - 1 erreurs recensées sur ce bloc

☐ ÉLÉMENTS OBLIGATOIRES (8.9) moindre

Le "lien" "En savoir plus sur les projets européens auxquels participe l’Agence Parisienne du Climat" n'est pas un lien et n'a donc pas de sémantique associée.

➡️ Le transformer en vrai lien ou en faire un paragraphe entouré d'un <p>

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.

Découvrez qui sont les membres de l’équipe de l’Agence Parisienne du Climat et leurs fonctions ! - 1 erreurs recensées sur ce bloc

☐ STRUCTURATION (9.1) important: Les textes tels que "Découvrez qui sont les membres de l’équipe de l’Agence Parisienne du Climat et leurs fonctions !" doivent être des titres de niveau 3.; 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.

L’intérêt général - 1 erreurs recensées sur ce bloc

☐ STRUCTURATION (9.1) important: Les textes tels que "L’intérêt général" doivent être des titres de niveau 3.; 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.

section Le statut d’une ALEC - 1 erreurs recensées sur ce bloc

☐ STRUCTURATION (9.3) moindre: La liste ordonnée dans la section "Le statut d’une ALEC" doit être une structurée par les balises <ol>/<li>; Dans chaque page web, chaque liste est-elle correctement structurée ?
Critère : 9.3 du RGAA 4.1.2.

document pdf - 1 erreurs recensées sur ce bloc

☐ CONSULTATION (13.3) critique

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

➡️ Proposer une alternative accessible (html, document bureautique structuré ou pdf 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) ?
Critère : 13.3 du RGAA 4.1.2.

Agenda - 5 erreurs recensées sur cette page

contraste - 1 erreurs recensées sur ce bloc

☐ COULEURS (3.2) important: Le contraste entre le texte et l'arrière plan sur les chiffres blanc sur fond orange n'est pas suffisant (3:47), ce rapport doit être de 4,5:1.; Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
Critère : 3.2 du RGAA 4.1.2.

filtre - 1 erreurs recensées sur ce bloc

☐ ÉLÉMENTS OBLIGATOIRES (8.6) important: Lorsqu'un filtre est choisi le titre de la page doit comprendre le contenu des filtres choisis. Idem pour une pagination.; Pour chaque page web ayant un titre de page, ce titre est-il pertinent ?
Critère : 8.6 du RGAA 4.1.2.

chaque événement - 2 erreurs recensées sur ce bloc

☐ ÉLÉMENTS OBLIGATOIRES (8.9) moindre: Pour chaque événement, les indications de catégories, de dates ou de lieu doivent être comprises dans des paragraphes.; 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.

☐ PRÉSENTATION (10.3) important: Pour chaque événement, le titre doit être le premier élément dans le code. Utilisez css pour changer l'ordre des éléments graphiquement.; Dans chaque page web, l’information reste-t-elle compréhensible lorsque les feuilles de styles sont désactivées ?
Critère : 10.3 du RGAA 4.1.2.

formulaire de filtrage - 1 erreurs recensées sur ce bloc

☐ FORMULAIRES (11.5) important

Dans le formulaire de filtrage des événements, les groupes de cases à cochées doivent être regroupées.

➡️ Utiliser un <fieldset>/<legend> ou ajouter un role="group" et aria-labelledby="id_du_titre" sur l'élément englobant les champs regroupés.

Dans chaque formulaire, les champs de même nature sont-ils regroupés, si nécessaire ?
Critère : 11.5 du RGAA 4.1.2.

Adapter mon logement aux fortes chaleurs - 13 erreurs recensées sur cette page

section [Lexique Canicule] Comprendre pour mieux s’adapter - 1 erreurs recensées sur ce bloc

☐ IMAGES (1.2) moindre: Comprendre pour mieux s’adapter" doit avoir une alternative vide; Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
Critère : 1.2 du RGAA 4.1.2.

section [Bande dessinée] Coup de chaud sur la ville : comment s’adapter ? - 1 erreurs recensées sur ce bloc

☐ IMAGES (1.2) moindre: Coup de chaud sur la ville : comment s’adapter ?" doit avoir une alternative vide; Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
Critère : 1.2 du RGAA 4.1.2.

Nos conseils - 1 erreurs recensées sur ce bloc

☐ COULEURS (3.2) important: L’élément "Nos conseils" a un contraste de couleurs insuffisant de 3.46 (couleur d’avant plan : #ffffff, couleur d’arrière plan : #eb5b22, taille de police : 13.5pt (18px), graisse : bold). Contraste de couleur attendu : 4.5:1; Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
Critère : 3.2 du RGAA 4.1.2.

sommaire en mode mobile - 1 erreurs recensées sur ce bloc

☐ SCRIPTS (7.1) important

Le sommaire en mode mobile est compris dans un disclosure qui n'implémente pas correctement de le modèle de conception ARIA Disclosure.

➡️ Implémenter le modèle de conception ARIA Disclosure

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

section Le saviez-vous ? - 1 erreurs recensées sur ce bloc

☐ ÉLÉMENTS OBLIGATOIRES (8.9) moindre: Dans la section "Le saviez-vous ?", le texte 35 doit être entouré par une balise <p> (ou ignoré par les lecteurs d'écran car il est repris dans le texte adjacent); 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.

titre - 5 erreurs recensées sur ce bloc

☐ STRUCTURATION (9.1) - 1 moindre: Comprendre pour mieux s’adapter" doit être un titre de niveau 4; 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.

☐ STRUCTURATION (9.1) - 2 moindre: Le texte "Le saviez-vous ?" doit être un titre; 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.

☐ STRUCTURATION (9.1) - 3 important: Les texes des <summary> doivent être des titres de niveau 4; 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.

☐ STRUCTURATION (9.1) - 4 important: Les textes tels que "L’isolation de la toiture et des murs" doivent être des titres de niveau 3 (cf ci-dessous); 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.

☐ STRUCTURATION (9.1) - 5 important: Coup de chaud sur la ville : comment s’adapter ?" doit être un titre de niveau 2 (ou bien il faut que "Plusieurs solutions peuvent être envisagées pour mieux résister à la chaleur" soit un titre de niveau 3 et les textes tels que "L’isolation de la toiture et des murs" soient des titres de niveau 4); 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.

encarts de téléchargement - 2 erreurs recensées sur ce bloc

☐ PRÉSENTATION (10.3) important: Dans les encarts de téléchargement, le titre doit apparaître en première position dans le code (avant image et tags). Le positionnement peut se faire avec css.; Dans chaque page web, l’information reste-t-elle compréhensible lorsque les feuilles de styles sont désactivées ?
Critère : 10.3 du RGAA 4.1.2.

☐ PRÉSENTATION (10.7) important: Le lien "Voir le détail" des encarts de téléchargement n'est pas visible et par conséquence, le focus non plus.; Dans chaque page web, pour chaque élément recevant le focus, la prise de focus est-elle visible ?
Critère : 10.7 du RGAA 4.1.2.

document pdf en téléchargement - 1 erreurs recensées sur ce bloc

☐ CONSULTATION (13.3) critique

Aucun document pdf en téléchargement ne possède de version accessible.

➡️ Proposer une version accessible des documents proposés en téléchargement.

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.

encarts de téléchargement - 3 erreurs recensées sur ce bloc

☐ IMAGES (1.2) moindre: Les images dans les encarts de téléchargement sont des images de décoration et doivent avoir une alternative vide.; Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
Critère : 1.2 du RGAA 4.1.2.

☐ PRÉSENTATION (10.3) important: Dans les encarts de téléchargement, le titre doit apparaître en première position dans le code (avant image et tags). Le positionnement peut se faire avec css.; Dans chaque page web, l’information reste-t-elle compréhensible lorsque les feuilles de styles sont désactivées ?
Critère : 10.3 du RGAA 4.1.2.

☐ PRÉSENTATION (10.7) important: Le lien "Voir le détail" des encarts de téléchargement n'est pas visible et par conséquence, le focus non plus.; Dans chaque page web, pour chaque élément recevant le focus, la prise de focus est-elle visible ?
Critère : 10.7 du RGAA 4.1.2.

images - 1 erreurs recensées sur ce bloc

☐ IMAGES (1.9) moindre

Plusieurs images ne sont pas correctement associées à leur légende. Par exemple :

"100e newsletter de l'Agence Parisienne du Climat"

➡️ Les images et leur légende doivent être contenues dans uen balise <figure> → La balise figure doit posseder les attributs role="group" et aria-label dont le contenu est identique au contenu de la légende (par ailleurs, cette image n'est pas porteuse d'information et la légende n'apporte rien puisqu'elle reprend le titre, cette image pourrait être traitée comme une image de décoration)

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.

vidéos - 3 erreurs recensées sur ce bloc

☐ CADRES (2.1) important

Les cadres utilisés pour les vidéos n'ont pas de titre.

➡️ Ex. de correction : ajouter un attribut title="vidéo"

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

☐ MULTIMÉDIA (4.1) critique: Les vidéos n'ont pas de transcription textuelle et doivent en avoir une.; 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 par youtube ne restituent pas correctement le contenu oral des vidéos.; 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.

temps de lecture - 2 erreurs recensées sur ce bloc

☐ COULEURS (3.3) moindre: Le picto d'horloge précédent le temps de lecture apporte une information et a un rapport de contraste de 2,54:1, ce rapport doit être de 3:1 ou plus.; Dans chaque page web, les couleurs utilisées dans les composants d’interface ou les éléments graphiques porteurs d’informations sont-elles suffisamment contrastées (hors cas particuliers) ?
Critère : 3.3 du RGAA 4.1.2.

☐ PRÉSENTATION (10.8) moindre

Le picto d'horloge précédent le temps de lecture apporte une information et n'a pas d'alternative textuelle.

➡️ Exemple de correction : supprimer l'attribut aria-hidden="true" et ajouter les attributs role="img" aria-label="temps de lecture"

Pour chaque page web, les contenus cachés ont-ils vocation à être ignorés par les technologies d’assistance ?
Critère : 10.8 du RGAA 4.1.2.

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

☐ SCRIPTS (7.1) important

Lorsque les cookies youtube sont refusés, un message s'affiche lorsque l'utilisateur active le bouton "Charger la vidéo". L'utilisateur de lecteur d'écran n'est pas averti de ce changement et la tabulation suivante n'envoie pas vers le bouton "Lire la vidéo".

➡️Exemple de correction :

ajouter un role="alert" sur le paragraphe de texte
ajouter un attribut tabindex="-1" sur le paragraphe de texte et déplacer le focus dessus lorsque le bouton "Charger la vidéo" est activé. Le résultat attendu est que la tabulation suivante soit le bouton "Lire la vidéo" (ou bien simplement placer l'élément .c-embed__cookie après le bouton "Charger la vidéo").

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

encart AdaptaVille - 1 erreurs recensées sur ce bloc

☐ ÉLÉMENTS OBLIGATOIRES (8.9) moindre: Dans l'encart AdaptaVille, les textes "AdaptaVille" et "70" doivent être contenus dans des balises <p>.; 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.

paragraphes - 1 erreurs recensées sur ce bloc

☐ ÉLÉMENTS OBLIGATOIRES (8.9) moindre

Il existe des paragraphes vides.

➡️ Supprimer les paragraphes vides et utiliser css pour la mise en page.

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.

titre - 4 erreurs recensées sur ce bloc

☐ STRUCTURATION (9.1) - 1 important: Le texte "Les 3 dernières fiches publiées" doit être un titre de niveau 3.; 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.

☐ STRUCTURATION (9.1) - 2 important: Les titres des fiches doivent être des titres de niveau 4; 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.

☐ STRUCTURATION (9.1) - 3 important

Les intitulés des titres de niveau 3 de la section "Les publications de l’Agence, pour démocratiser les connaissances auprès du plus grand nombre" ne sont pas appropriés (répétition).

➡️ Revoir les intitulés et / ou le niveau des titres pour rendre la structure appropriée.

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.

☐ STRUCTURATION (9.1) - 4 important: Le texte "Vous avez des suggestions ?" 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 : 9.1 du RGAA 4.1.2.

documents pdf - 1 erreurs recensées sur ce bloc

☐ CONSULTATION (13.3) critique: Les documents pdf en téléchargement ne possèdent 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) ?
Critère : 13.3 du RGAA 4.1.2.

Accompagner les copropriétés à chaque étape de leur projet avec CoachCopro - 10 erreurs recensées sur cette page

rénovations - 3 erreurs recensées sur ce bloc

☐ IMAGES (1.2) moindre

Les logos CoacCopro et les images illustrant les rénovations sont des images de décorations et ont une alternative textuelle.

➡️ Supprimer le contenu de l'attribut alt

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

☐ STRUCTURATION (9.1) important

Les encarts rénovations "Rénovation énergétique d’une copropriété des années 70" et "Rénovation en matériaux biosourcés et végétalisation d’un ensemble des Trente Glorieuses." ne présentent pas une structure de titre cohérente. Les textes CoachCopro devraient être considérés comme des titres, mais leur intitulé identique prêterait à confusion.

➡️ Correction possible : changer la structure de l'information pour rendre les titres cohérents.

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.

☐ PRÉSENTATION (10.3) important: Les blocs d'exemples de rénovations ne sont pas structurés correctement. Chaque bloc doit être regroupé avec son entête. Le titre doit être le premier élément dans le code, la mise en page peut se faire avec css.; Dans chaque page web, l’information reste-t-elle compréhensible lorsque les feuilles de styles sont désactivées ?
Critère : 10.3 du RGAA 4.1.2.

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

☐ CADRES (2.1) important

Les cadres utilisés pour les vidéos n'ont pas de titre.

➡️ Ex. de correction : ajouter un attribut title="vidéo"

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

☐ MULTIMÉDIA (4.1) critique: La vidéo n'a pas de transcription textuelle et doit en avoir une.; 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 de la vidéo sont en anglais.; 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.

☐ SCRIPTS (7.1) important

➡️Exemple de correction :

ajouter un role="alert" sur le paragraphe de texte
ajouter un attribut tabindex="-1" sur le paragraphe de texte et déplacer le focus dessus lorsque le bouton "Charger la vidéo" est activé. Le résultat attendu est que la tabulation suivante soit le bouton "Lire la vidéo" (ou bien simplement placer l'élément .c-embed__cookie après le bouton "Charger la vidéo").

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

Se rendre sur la page - 1 erreurs recensées sur ce bloc

☐ LIENS (6.1) important

Les liens "Se rendre sur la page" ne sont pas explicites.

➡️ Ex. de corrections :

supprimer le parapgraphe vide pour le lien "Intégrer le marché local de la rénovation avec CoachCopro"
faire des titres d'encart des titres de niveau cohérent avec le contexte (h4 pourrait convenir ici).

Chaque lien est-il explicite (hors cas particuliers) ?
Critère : 6.1 du RGAA 4.1.2.

Aujourd’hui, CoachCopro est opérationnel sur plus de 28 territoires en France : - 1 erreurs recensées sur ce bloc

☐ ÉLÉMENTS OBLIGATOIRES (8.9) moindre: Le texte "Aujourd’hui, CoachCopro est opérationnel sur plus de 28 territoires en France : " doit être entouré d'une balise <p>; 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.

paragraphes vides - 1 erreurs recensées sur ce bloc

☐ ÉLÉMENTS OBLIGATOIRES (8.9) moindre: Des paragraphes vides existent sur la page, supprimez-les et utilisez css pour la mise en page.; 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.

formulaire - 9 erreurs recensées sur ce bloc

☐ SCRIPTS (7.1) critique

Le bouton "Valider mes préférences" du formulaire n'a pas le rôle button.

➡️ Utiliser une balise button ou implémentez le motif ARIA Button

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

☐ SCRIPTS (7.5) - 1 important: Les messages d'erreur du formulaire ne sont pas restitués par les technologies d'assistance. Ils doivent se trouver dans une zone avec le role="alert".; Dans chaque page web, les messages de statut sont-ils correctement restitués par les technologies d’assistance ?
Critère : 7.5 du RGAA 4.1.2.

☐ SCRIPTS (7.5) - 2 critique: Le message de confirmation de soumission de formulaire "Vos informations sont enregistrées." n'est pas restitué. Il doit se trouver dans une zone avec le role="status" (ou alert); Dans chaque page web, les messages de statut sont-ils correctement restitués par les technologies d’assistance ?
Critère : 7.5 du RGAA 4.1.2.

☐ ÉLÉMENTS OBLIGATOIRES (8.9) moindre

Certains textes ne sont pas compris dans des <p> (ex. Les champs obligatoires sont signalés par une astérisque (*), les messages d'erreur du formulaire, le texte relatif au recueil des données)

➡️ ajouter une balise <p> autour de ces textes

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.

☐ FORMULAIRES (11.5) important

Dans le formulaire, les cases à cocher doivent être regroupées.

➡️ Exemple de correction : utilisez un <fieldset> / <legend>

Dans chaque formulaire, les champs de même nature sont-ils regroupés, si nécessaire ?
Critère : 11.5 du RGAA 4.1.2.

☐ FORMULAIRES (11.10) - 1 critique: Le texte précédant le formulaire indique que l'on peut décocher les cases pour se désinscrire et les cases à cocher sont obligatoires de fait. Aucune mention sur le caractère obligatoire n'apparaît (problème d'accessibilité) et ce fonctionnement est contradictoire (problème d'UX, pas d'accessibilité).; Chaque champ de formulaire a-t-il une étiquette ?
Critère : 11.1 du RGAA 4.1.2.

☐ FORMULAIRES (11.10) - 2 important

Les champs de formulaire attendant un format spécifique n'ont aucune indications du type de format.

➡️ Ajouter un exemple de saisie dans le label ou dans un texte contigu et associé au champ par un attribut aria-describedby. Ex. E-mail* ( prenom@domaine.com ) :.

Chaque champ de formulaire a-t-il une étiquette ?
Critère : 11.1 du RGAA 4.1.2.

☐ FORMULAIRES (11.11) important

Dans le formulaire, les messages d'erreur relatifs au format de données ne comprennent pas de suggestion de saisie (email et code postal).

➡️ Ajouter un exemple de saisie dans le message d'erreur. Ex. : Veuillez saisir votre code postal (par exemple : 69400).

Dans chaque formulaire, le contrôle de saisie est-il accompagné, si nécessaire, de suggestions facilitant la correction des erreurs de saisie ?
Critère : 11.11 du RGAA 4.1.2.

☐ FORMULAIRES (11.13) important

Les champs de formulaire qui attendent une donnée personnelle de l'utilisateur ne sont pas identifiés.

➡️ Exemples et corrections : Implémenter un attribut autocomplete sur les champs suivants :

Le champ "Email" : autocomplete="email"
Le champ "Code postal" : autocomplete="postal-code"
etc. Liste des valeurs possibles : https://www.numerique.gouv.fr/publications/rgaa-accessibilite/methode/glossaire/#liste-des-valeurs-possibles-pour-l-attribut-autocomplete

La finalité d’un champ de saisie peut-elle être déduite pour faciliter le remplissage automatique des champs avec les données de l’utilisateur ?
Critère : 11.13 du RGAA 4.1.2.

newsletter - 1 erreurs recensées sur ce bloc

☐ ÉLÉMENTS OBLIGATOIRES (8.7) moindre: Le changement de langue pour le terme "newsletter" doit être indiqué par un attribut lang="en".; Dans chaque page web, chaque changement de langue est-il indiqué dans le code source (hors cas particuliers) ?
Critère : 8.7 du RGAA 4.1.2.

paragraphe vide - 1 erreurs recensées sur ce bloc

☐ ÉLÉMENTS OBLIGATOIRES (8.9) moindre

Il existe un paragraphe vide sur la page.

➡️ Supprimer ce paragraphe vide et utiliser css pour la mise en page.

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.

Centre de gestion des préférences - 1 erreurs recensées sur ce bloc

☐ STRUCTURATION (9.1) important: Le texte "Centre de gestion des préférences" doit être un titre de niveau 3.; 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.

années - 1 erreurs recensées sur ce bloc

☐ STRUCTURATION (9.1) important

L'intitulé des années doit être un titre de niveau 3. Cela permettra notamment de donner un contexte pertinent aux liens de téléchargement.

➡️ Utiliser une balise <h3> ou un role="heading" aria-level="3"

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.

abonnement aux newsletters - 1 erreurs recensées sur ce bloc

☐ STRUCTURATION (9.1): Le bloc d'abonnement aux newsletters est perturbant sur cette page mais cela ne relève pas d'une non conformité.; 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.

listes de liens - 1 erreurs recensées sur ce bloc

☐ STRUCTURATION (9.3) important

Les listes de liens doivent être structurées en listes non ordonnées.

➡️ Vous pouvez choisir de faire quatre listes distinctes ou de les intégrées dans une liste globale.

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

pdf - 1 erreurs recensées sur ce bloc

☐ CONSULTATION (13.3) critique

Les pdf des précédentes newsletters n'ont pas de version accessible.

➡️ Produire une version accessible des newsletters (lien vers la version html ?)

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.

Comprendre le climat parisien avec Météo-France - 13 erreurs recensées sur cette page

la page - 1 erreurs recensées sur ce bloc

☐ IMAGES (1.2) moindre

Les images présentes sur la page sont toutes des images décoration et certaines ont une alternative textuelle.

➡️ Supprimer le contenu de l'attribut alt.

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

cadres - 1 erreurs recensées sur ce bloc

☐ CADRES (2.1) important

Les cadres n'ont pas de titre de cadre.

➡️ Ajouter un titre du type title="Graphique interactif : températures moyennes estivales relevées à Paris de 1900 à 2023"

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

temps de lecture - 1 erreurs recensées sur ce bloc

☐ COULEURS (3.3) moindre: Le picto d'horloge précédent le temps de lecture apporte une information et a un rapport de contraste de 2,54:1, ce rapport doit être de 3:1 ou plus.; Dans chaque page web, les couleurs utilisées dans les composants d’interface ou les éléments graphiques porteurs d’informations sont-elles suffisamment contrastées (hors cas particuliers) ?
Critère : 3.3 du RGAA 4.1.2.

encarts d'actualités - 1 erreurs recensées sur ce bloc

☐ ÉLÉMENTS OBLIGATOIRES (8.9) moindre: Dans les encarts d'actualités, les indications de temps de lecture doivent être entourées par une balise <p>.; 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.

Quelques chiffres - 1 erreurs recensées sur ce bloc

☐ ÉLÉMENTS OBLIGATOIRES (8.9) moindre: Les textes "Quelques chiffres", "46 jours", "30°C" doivent être dans des <p>; 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.

paragraphes vides - 1 erreurs recensées sur ce bloc

☐ ÉLÉMENTS OBLIGATOIRES (8.9) moindre

Il existe des paragraphes vides dans la page.

➡️ Supprimez ces paragraphes et utilisez css pour la mise en page.

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.

titre - 2 erreurs recensées sur ce bloc

☐ STRUCTURATION (9.1) - 1 important

L'intitulé des années doit être un titre de niveau 3. Cela permettra notamment de donner un contexte pertinent aux liens de téléchargement.

➡️ Utilisez une balise <h3> ou un role="heading" aria-level="3"

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.

☐ STRUCTURATION (9.1) - 2 important: Dans la section "Nos brochures et autres publications", les titres des borchures à télécharger doivent être de niveau 4.; 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.

listes de liens - 1 erreurs recensées sur ce bloc

☐ STRUCTURATION (9.3) important

Les listes de liens doivent être structurées en listes non ordonnées.

➡️ Vous pouvez choisir de faire des listes distinctes ou de les intégrées dans une liste globale.

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

iframe - 1 erreurs recensées sur ce bloc

☐ PRÉSENTATION (10.1) important

Les iframe utilisent les attributs interdits width et height.

➡️ Supprimer les attributs et utilisez css pour la mise en page.

Dans le site web, des feuilles de styles sont-elles utilisées pour contrôler la présentation de l’information ?
Critère : 10.1 du RGAA 4.1.2.

remontées d'actualité ou les liens de téléchargement des brochures - 1 erreurs recensées sur ce bloc

☐ PRÉSENTATION (10.3) important: Comprendre pour mieux s’adapter") ne sont pas structurés correctement. Le titre doit apparaître en premier dans le code et la mise en page peut se faire avec css.; Dans chaque page web, l’information reste-t-elle compréhensible lorsque les feuilles de styles sont désactivées ?
Critère : 10.3 du RGAA 4.1.2.

encarts de téléchargement - 1 erreurs recensées sur ce bloc

☐ PRÉSENTATION (10.7) important

La prise de focus des liens "Voir le détail" des encarts de téléchargement des brochures n'est pas visible.

➡️ Utilisez css pour rendre la prise de focus visible.

Dans chaque page web, pour chaque élément recevant le focus, la prise de focus est-elle visible ?
Critère : 10.7 du RGAA 4.1.2.

documents pdf - 1 erreurs recensées sur ce bloc

☐ CONSULTATION (13.3) critique

Les documents pdf n'ont pas de version accessible.

➡️ Fournir une 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) ?
Critère : 13.3 du RGAA 4.1.2.

Recommandations pour Agence Parisienne du Climat

Notes correctives

Navigation et balisage

Ordre des balises

Titres

Utilisation des listes

Images

Vidéos

PDF

Formulaires

Quick wins

Critère 1.9 - les légendes d’image

Critère 2.1 - les titres des cadres

Critère 5.4 - les tableaux

Critère 8.6 - les titres de page

Critère 8.7 - les changements de langue

Critères 9.2 et 12.6 - structure de la page et zones de regroupement de contenus

Critère 10.1 - attributs interdits

Critère 10.8 - contenus cachés

Critère 11.1 - étiquettes des champs de formulaire

Erreurs à corriger

Erreurs par lots de livraison - 20 erreurs sélectionnées

Accéder aux pages auditées

Liste des pages auditées

Éléments transverses - 20 erreurs recensées sur cette page

cookies - 5 erreurs recensées sur ce bloc

entête - 1 erreurs recensées sur ce bloc

cartouche de recherche - 3 erreurs recensées sur ce bloc

navigation - 5 erreurs recensées sur ce bloc

pied de page - 1 erreurs recensées sur ce bloc

STRUCTURATION - 9.3 - 1 erreurs recensées sur ce bloc

PRÉSENTATION - 10.7 - 1 erreurs recensées sur ce bloc

temps de lecture - 1 erreurs recensées sur ce bloc

zones de regroupement de contenus - 1 erreurs recensées sur ce bloc

recherche - 1 erreurs recensées sur ce bloc

Accueil - 22 erreurs recensées sur cette page

CoachCopro et Adaptaville - 1 erreurs recensées sur ce bloc

Rénovation en matériaux biosourcés et végétalisation d’un ensemble des Trente Glorieuses. - 1 erreurs recensées sur ce bloc

Végétaliser une dalle à l’occasion de la réfection d’étanchéité : l’exemple du bailleur social Paris Habitat. - 1 erreurs recensées sur ce bloc

Retour sur les Rencontres AdaptaVille 2023 - 1 erreurs recensées sur ce bloc

Bulletin climatique de l’été 2023 - 1 erreurs recensées sur ce bloc

Notre action se décline à plusieurs échelles - 1 erreurs recensées sur ce bloc

Nos membres fondateurs et adhérents - 1 erreurs recensées sur ce bloc

contraste - 1 erreurs recensées sur ce bloc

temps de lecture - 1 erreurs recensées sur ce bloc

Articles à la une - 1 erreurs recensées sur ce bloc

Agenda à venir - 1 erreurs recensées sur ce bloc

Focus sur des projets portés par l’Agence - 2 erreurs recensées sur ce bloc

Le saviez-vous ? - 1 erreurs recensées sur ce bloc

Un acteur incontournable de la transition écologique - 1 erreurs recensées sur ce bloc

titre - 5 erreurs recensées sur ce bloc

STRUCTURATION - 9.3 - 1 erreurs recensées sur ce bloc

Actualités à la une et Agenda à venir - 1 erreurs recensées sur ce bloc

Contact - 12 erreurs recensées sur cette page

légende - 1 erreurs recensées sur ce bloc

formulaires - 2 erreurs recensées sur ce bloc

la page - 1 erreurs recensées sur ce bloc

titre - 2 erreurs recensées sur ce bloc

Avez-vous consulté ces pages ? - 1 erreurs recensées sur ce bloc

acceptation des conditions - 1 erreurs recensées sur ce bloc

message d'erreur - 2 erreurs recensées sur ce bloc

champs Email - 1 erreurs recensées sur ce bloc

champs - 1 erreurs recensées sur ce bloc

Notre organisation - 8 erreurs recensées sur cette page

images - 1 erreurs recensées sur ce bloc

encart Découvrez qui sont les membres de l’équipe de l’Agence Parisienne du Climat et leurs fonctions ! - 1 erreurs recensées sur ce bloc

sommaire en mode mobile - 1 erreurs recensées sur ce bloc

En savoir plus sur les projets européens auxquels participe l’Agence Parisienne du Climat - 1 erreurs recensées sur ce bloc

Découvrez qui sont les membres de l’équipe de l’Agence Parisienne du Climat et leurs fonctions ! - 1 erreurs recensées sur ce bloc

L’intérêt général - 1 erreurs recensées sur ce bloc

section Le statut d’une ALEC - 1 erreurs recensées sur ce bloc

document pdf - 1 erreurs recensées sur ce bloc

Agenda - 5 erreurs recensées sur cette page

contraste - 1 erreurs recensées sur ce bloc

filtre - 1 erreurs recensées sur ce bloc

chaque événement - 2 erreurs recensées sur ce bloc

formulaire de filtrage - 1 erreurs recensées sur ce bloc

Adapter mon logement aux fortes chaleurs - 13 erreurs recensées sur cette page

section [Lexique Canicule] Comprendre pour mieux s’adapter - 1 erreurs recensées sur ce bloc

section [Bande dessinée] Coup de chaud sur la ville : comment s’adapter ? - 1 erreurs recensées sur ce bloc

Actualité : 100^e newsletter de l’Agence Parisienne du Climat - 17 erreurs recensées sur cette page