← Retour à la page projet

Recommandations pour generationecologie.fr

  • 119
    Erreurs total
  • 0
    Erreurs corrigées

Notes correctives

Pas de panique !

Le score d’un premier audit est toujours alarmant, c’est le rôle d’un auditeur que d’aller chercher la petite bête partout. Rien de dramatique ici, rien qui ne soit insurmontable à mon sens et un site déjà bien robuste et utilisable. Une fois de plus, quelques corrections rapides débloqueront beaucoup de sujets, notamment les sujets structurels qui sont corrigés une fois pour toute.

D’autres corrections sont plus délicates car elles impliquent une “hygiène” du quotidien. Il s’agit d’intégrer l’accessibilité dans la contribution des contenus. Il s’agit de penser alternatives textuelles, contrastes, sous-titres, transcriptions, audiodescriptions, hiérarchie des titres, structuration des listes et citations…

Même avec la meilleure volonté du monde, tous ces sujets ne peuvent que difficilement être intégrés sans avoir recours à un œil aguerri et un processus de vérification / correction. Génération Écologie a peut-être déjà un commité de relecture et de validation des contenus, la bonne idée serait qu’une ou plusieurs personnes se forment à la contribution accessible et mettent le chapeau accessibilité pour valider et corriger ce qui a été fait. Ainsi, une amélioration continue peut être mise en place, intégrant réellement l’accessibilité dans le cycle de vie du nouveau site.

J’insiste sur la formation, l’accessibilité web est à la fois question de compréhension des enjeux, des termes, des différents handicaps mais aussi de la technique, du fonctionnement d’un site.

Je suis développeur web formé à l’accessibilité, lorsque je produis un site, je fais toujours des corrections lors de l’audit. Mais alors qu’avant d’être formé, ces corrections pouvaient être très lourdes et très coûteuses à mettre en place, désormais, il s’agit d’ajustements mineurs comme on corrigerait des fautes de frappe lors de la relecture d’un mail.

Ci-après, quelques points d’explication ou recommandations sur le site generationecologie.fr

Images (thématique 1 du RGAA)

Certaines images utilisées pour illustrer les actualités ou autres mises-en-avant sont porteuses d’information. Le glossaire du RGAA indique qu’une image porteuse d’information est une Image qui véhicule une information nécessaire à la compréhension du contenu auquel elle est associée. Impossible de confier le choix de ce qui est ou n’est pas une information à une intelligence artificielle, il faut faire marcher son intelligence humaine et tenter de comprendre ce qui pourrait manquer à un utilisateur aveugle par exemple. Parfois il s’agit d’une information évidente qui n’apparaît pas dans le texte d’un article, parfois, c’est plus subtil et l’information vient apporter un contexte, un sens non-dit. Parfois, le texte sur l’image est juste illustratif, il n’est alors pas nécessaire de donner une alternative à l’image.

Exemple sur le site, l’image de la page de la commission Écoféminisme offre un slogan de manifestation qui synthétise le propos de la page.

Couleurs (thématique 3 du RGAA)

L’utilisation de couleurs suffisamment contrastées est nécessaire pour permettre à de très nombreux utilisateurs de percevoir les contenus et les composants d’interface. Lorsque la couleur est le seul moyen de percevoir le changement d’état d’un composant d’interface, le rapport de contraste entre les différents états doit également être suffisant.

Sur le site, sur la page Nous contacter par exemple les champs de formulaire ne sont parfois pas perceptibles car leur bordure est insuffisamment contrastée vis-à-vis du fond du champ et du fond de la page. Les utilisateurs malvoyants peuvent rencontrer des difficultés à utiliser le formulaire.

Vidéos (thématique 4 du RGAA)

Les médias synchronisés (vidéos et podcasts) demandent une attention toute particulière pour permettre à tous les utilisateurs d’accéder au contenu. Utilisateurs aveugles, grand-malvoyants, malvoyants, malentendants, sourds, dyslexiques, navigant au clavier, sujets aux crises d’épilepsie… Ces medias confrontent bien trop souvent de très nombreux utilisateurs à l’impossibilité de consulter un contenu.

Les transcriptions textuelles et/ou audiodescriptions pour les fichiers son sont essentielles pour l’accès à l’information. Ce sujet ne fait pas partie du périmètre du présent audit et n’apparaît donc pas dans le rapport.

Les vidéos attendent également une transcription textuelle, des sous-titres synchronisés et/ou une audiodescription. Le lecteur doit également être contrôlable au clavier.

Il est parfois des vidéos trop complexes à rendre totalement accessibles, demandant des moyens trop importants au regard de votre organisation. Je vous recommande alors de vous concentrer sur une transcription textuelle et une synthèse.

Le RGAA ne parle plus de version en LSF (langue des signes française), mais c’est également un sujet d’accessibilité à explorer.

Liens (thématique 6 du RGAA)

Tous les liens doivent avoir un intitulé et doivent être explicites. L’intitulé du lien peut être fourni par l’alternative de l’image lorsque l’image est le seul contenu du lien.

Le lien est explicite lorsque son intitulé permet de comprendre où mène le lien ou bien lorsque le contexte du lien permet de le déduire. Par exemple, le contexte d’un lien “Voir plus” peut être donné par un titre ou un paragraphe de texte directement précédent.

Éléments obligatoires (thématique 8 du RGAA)

Les balises HTML apportent du sens au contenu qu’elles contiennent. Lorsque ces balises sont utilisées à des fins de présentation uniquement, la compréhension de la structure de la page peut être rendue difficile pour les utilisateurs de lecteur d’écran.

Il est nécessaire de veiller à ne pas utiliser des balises titre ou paragraphe pour faire de la mise en page. Sur le site, on retrouve de nombreux titres ou paragraphes vides pour créer des espaces visuels. Ces titres et paragraphes doivent être supprimés.

De nombreux utilisateurs naviguent en activant le zoom navigateur. Le logo fixe prend alors une place importante dans la fenêtre, gênant la lecture. Sans être une non-conformité au RGAA, il me semblerait intéressant de réfléchir à un moyen de rendre le logo plus discret.

Pour tester l’affichage, il suffit d’activer le zoom sur votre navigateur. Sur firefox ou chrome, dans le menu du navigateur, définir le zoom à 200%.

Par ailleurs, ce logo offre un rapport de contraste insuffisant entre le texte et le fond vert. Ce n’est pas une non-conformité non plus, un logo étant l’un des cas particuliers listés dans la notice du critère 3.2 du RGAA . Il est cependant intéressant de savoir que certains utilisateurs mal-voyants, notamment des utilisateurs daltoniens, ne peuvent pas percevoir le logo.

PDF

Produire des PDF accessibles n’est pas simple. Cela demande également de solides connaissances, des outils et des habitudes de travail. Le format PDF n’est pas un format fait pour l’accessibilité et c’est souvent une lutte que de parvenir à un résultat acceptable. Aussi, il convient d’offrir une alternative accessible aux documents bureautiques.

Cela peut se faire par la simple création d’une page sur votre site. Vous avez déjà cette habitude d’intégrer le texte des résolutions, par exemple, dans la page qui permet de télécharger le document. Cette pratique est excellente et offre une alternative accessible au fichier PDF.

Il faut cependant s’assurer que toutes les informations présentes dans le document PDF sont bien présentes dans la page web.

Il est à noter que la production d’alternative accessible de certains documents peut être très délicate. Par exemple, le rapport de l’étude statistique sur la loi Duplomb vient cocher beaucoup de cases en matière de problèmes d’accessibilité.

Pour tester l’accessibilité des fichiers PDF, j’utilise l’outil PDF Accessibility Checker . L’onglet WCAG du logiciel indique si le fichier contient des erreurs. S’il n’en contient pas (ce qui est extrêmement rare), je vais alors utiliser un lecteur d’écran pour m’assurer que le contenu est correctement restitué.

Affichage 320px de large

Le RGAA intègre un critère bien étrange. Le site doit être consultable dans une fenêtre de 320px de large sans générer l’apparition d’une bare de défilement horizontale. Il s’agit en fait de reproduire les conditions de navigations d’utilisateurs grand-malvoyants qui zooment parfois jusqu’à 500% pour pouvoir lire le contenu.

Sur le site, quelques pages posent problème. Par exemple : https://www.generationecologie.fr/2025/07/27/les-francaises-et-les-francais-contre-la-promulgation-de-la-loi-duplomb/

Une bonne pratique, lors du développement, est de produire le site complet à cette taille et d’adapter ensuite l’affichage à des dispositifs d’affichage plus large. C’est le mobile first à partir de 320px.

En tant que développeur, je démarre à 320px et suivant les besoins, j’utilise ou non les points de rupture suivants :

/**
Breakpoints :
320px => 20em
480px => 30em
800px => 50em
1024px => 64em
1280px => 80em
1920px => 120em
/**/

Formulaires

Le site a recours à de nombreux formulaires. La thématique du RGAA à ce sujet comporte 13 critères à elle-seule.

De nombreuses corrections sont à apporter bien que beaucoup de bonnes pratiques aient déjà été intégrées dans le design et le développement.

Un des points est la visibilité des champs. Les utilisateurs doivent pouvoir percevoir clairement les champs de saisie. Le contraste, voire l’épaisseur de la bordure du champs sont alors de bons moyens de parvenir à un résultat satisfaisant (contraste de 3:1).

La prise de focus doit également être visible. Le changement de couleur de la bordure est un exercice périlleux, car le rapport de contraste entre la couleur “normale” et la couleur “focus” doit également être supérieur à 3:1. L’utilisation de la propriété css outline peut alors être de bon aloi. Ne pas surcharger le style natif de prise de focus reste en général la plus simple des solutions.

Par ailleurs, une bonne pratique pour annoncer le résultat de la soumission, qu’il y-ait une erreur ou que le résultat soit un succès, est de l’indiquer dans le titre de la page après soumission. Ainsi, les utilisateurs de lecteur d’écran ont l’information directement sans avoir à naviguer dans la page jusqu’au message de retour.
Une autre solution est de mettre une propriété aria-live=“polite” sur le message.

Structure du document

Un dernier point très technique, c’est l’importance de la structure du document. Il s’agit de déterminer les zones principales de la page avec la sémantique html appropriée. Deux critères concernent ce sujet, le 9.2 et le 12.6 .

Sur le site, on est presque tout bon (bravo !), mais le fait de fusionner l’élément <header> et le menu mobile fait que l’attribut role est incorrect. Utiliser ces landmarks (rôles ARIA qui semblent redondants avec la sémantique html5) est l’unique solution pour que les technologies d’assistance puissent atteindre ou éviter efficacement ces zones.

Erreurs à corriger

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

Lot 1 :: corrigées 0/8
Intitulé Page Bloc Critère
Scripts (7.1) ❌

La fenêtre modale du menu mobile n’implémente pas totalement le motif de conception ARIA Modal.


➡️ Lors d’une navigation par clavier, à l’ouverture de la fenêtre modale, le focus doit être déplacé sur le bouton Fermer.
➡️ Les attributs role="dialog" aria-modal="true" aria-label="Menu principal" doivent être supprimés de l’élément <header> pour être mis sur un élément contenant l’ensemble des éléments de la modale. L’utilisation de l’élement <header> comme élément de dialog est impropre.

 Éléments transverses Menu mobile 7.1
du RGAA
Liens (6.2) ❌

Le lien pour accéder à la recherche n’a pas d’intitulé.


➡️ Ajouter un intitulé au lien entre <a> et </a>. Par exemple, supprimer l’attribut aria-hidden="true" sur le svg et ajouter un attribut aria-label="Recherche"

 Éléments transverses Menu 6.2
du RGAA
Scripts (7.1) ❌

Le menu principal n’implémente pas totalement le motif de conception ARIA Disclosure.


➡️ Lorsqu’un volet est ouvert, l’appui sur la touche Echap ferme le volet, le focus doit alors être déplacé sur le bouton qui commande l’ouverture de ce volet.

 Éléments transverses Menu 7.1
du RGAA
Structuration (9.2) ❌

 La structure du document n’est pas totalement cohérente. Par exemple :

  • l’élément <header> qui définit l’entête du site a un attribut role="dialog"
  • la navigation principale n’a pas d’attribut aria-label


➡️ Dissocier l’élément header de l’entête de site et l’élément conteneur de la fenêtre modale de menu mobile.
➡️ Ajouter un attribut nom accessible à la navigation principale, exemple : aria-label="Navigation principale"

 Éléments transverses Menu 9.2
du RGAA
Structuration (9.3) ❌

 Le lien vers la recherche dans l’entête du site n’est pas compris dans la liste de navigation principale.


➡️ Intégrer le lien vers la recherche dans la navigation principale.

 Éléments transverses Menu 9.3
du RGAA
Navigation (12.1) ❌

La page Faire un don ne dispose pas de deux systèmes de navigation.


➡️ Ajouter le menu de navigation et/ou le moteur de recherche. Les navigations peuvent être à un endroit différent des autres pages. Le cas échéant, un lien d’accès rapide vers la navigation peut être le bienvenu.

 Éléments transverses Menu 12.1
du RGAA
Présentation (10.5) ❌

La couleur de fond n’est pas définie sur l’élément <body>


➡️ Définir une couleur de fond par défaut au même titre que la couleur de police sur l’élément <body>

 Éléments transverses Page 10.5
du RGAA
Navigation (12.6) ❌

Seul l’élément <main> est doté d’un landmark adéquat.


➡️ Ajouter les landmarks aux zones de regroupement ➡️ pour la zone d’en-tête principale, <header role="banner"> ➡️ pour les navigations, <nav role="navigation"> ➡️ pour la zone de pied de page, <footer role="contentinfo"> ➡️ pour le lien vers le moteur de recherche, ajouter un élément <div role="search"> autour du lien. ⚠️ Cet élément doit être déplacé autour du moteur de recherche dans la page rerche.

 Éléments transverses Page 12.6
du RGAA

Accéder aux pages auditées

Liste des pages auditées

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

URL de la page : https://generationecologie.fr/

 - Accéder à la capture écran
Éléments transverses

Menu - 5 erreurs recensées sur ce bloc

☐ Liens (6.2)  critique

Le lien pour accéder à la recherche n’a pas d’intitulé.


➡️ Ajouter un intitulé au lien entre <a> et </a>. Par exemple, supprimer l’attribut aria-hidden="true" sur le svg et ajouter un attribut aria-label="Recherche"

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

Éléments transverses Menu Liens (6.2)
☐ Scripts (7.1)  important

Le menu principal n’implémente pas totalement le motif de conception ARIA Disclosure.


➡️ Lorsqu’un volet est ouvert, l’appui sur la touche Echap ferme le volet, le focus doit alors être déplacé sur le bouton qui commande l’ouverture de ce volet.

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

☐ Structuration (9.2)  important

 La structure du document n’est pas totalement cohérente. Par exemple :

  • l’élément <header> qui définit l’entête du site a un attribut role="dialog"
  • la navigation principale n’a pas d’attribut aria-label


➡️ Dissocier l’élément header de l’entête de site et l’élément conteneur de la fenêtre modale de menu mobile.
➡️ Ajouter un attribut nom accessible à la navigation principale, exemple : aria-label="Navigation principale"

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

☐ Structuration (9.3)  important

 Le lien vers la recherche dans l’entête du site n’est pas compris dans la liste de navigation principale.


➡️ Intégrer le lien vers la recherche dans la navigation principale.

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

La page Faire un don ne dispose pas de deux systèmes de navigation.


➡️ Ajouter le menu de navigation et/ou le moteur de recherche. Les navigations peuvent être à un endroit différent des autres pages. Le cas échéant, un lien d’accès rapide vers la navigation peut être le bienvenu.

Chaque ensemble de pages dispose-t-il de deux systèmes de navigation différents, au moins (hors cas particuliers) ?
Critère : 12.1 du RGAA 4.1.2.

Éléments transverses Menu Navigation (12.1)

Menu mobile - 1 erreurs recensées sur ce bloc

☐ Scripts (7.1)  important

La fenêtre modale du menu mobile n’implémente pas totalement le motif de conception ARIA Modal.


➡️ Lors d’une navigation par clavier, à l’ouverture de la fenêtre modale, le focus doit être déplacé sur le bouton Fermer.
➡️ Les attributs role="dialog" aria-modal="true" aria-label="Menu principal" doivent être supprimés de l’élément <header> pour être mis sur un élément contenant l’ensemble des éléments de la modale. L’utilisation de l’élement <header> comme élément de dialog est impropre.

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

Éléments transverses Menu mobile Scripts (7.1)

Page - 2 erreurs recensées sur ce bloc

☐ Présentation (10.5)  important

La couleur de fond n’est pas définie sur l’élément <body>


➡️ Définir une couleur de fond par défaut au même titre que la couleur de police sur l’élément <body>

Dans chaque page web, les déclarations CSS de couleurs de fond d’élément et de police sont-elles correctement utilisées ?
Critère : 10.5 du RGAA 4.1.2.

Seul l’élément <main> est doté d’un landmark adéquat.


➡️ Ajouter les landmarks aux zones de regroupement ➡️ pour la zone d’en-tête principale, <header role="banner"> ➡️ pour les navigations, <nav role="navigation"> ➡️ pour la zone de pied de page, <footer role="contentinfo"> ➡️ pour le lien vers le moteur de recherche, ajouter un élément <div role="search"> autour du lien. ⚠️ Cet élément doit être déplacé autour du moteur de recherche dans la page rerche.

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.

Accueil - 10 erreurs recensées sur cette page

URL de la page : https://generationecologie.fr/

 - Accéder à la capture écran
Accueil

Agissez - 3 erreurs recensées sur ce bloc

☐ Images (1.1)  critique

L’image du bloc Agissez avec nous ! est porteuse d’information et n’a pas d’alternative textuelle.


➡️ Ajouter une alternative textuelle. Par ex. : alt="La décroissance au pouvoir"

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

☐ Structuration (9.3)  important

Dans le bloc Agissez avec nous ! les liens ne sont pas structurés dans une liste.


➡️ Structurer les liens dans une liste <ul><li>

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

Accueil Agissez Structuration (9.3)
☐ Présentation (10.3)  important

Le bloc Agissez avec nous ! présente des problèmes de compréhension.


➡️ L’image porteuse d’information du bloc est située avant le titre du bloc dans l’ordre du code. Mettre le titre en premier dans l’ordre du code et ajuster l’affichage avec css.
➡️ Une autre manière de régler ce problème ainsi que le problème d’alternative textuelle décrit au critère 1.1 de cette page est de mettre une image non porteuse d’information.

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.

Actualités - 2 erreurs recensées sur ce bloc

☐ Liens (6.2)  critique

Le lien image de l’actualité Alerte loi Duplomb 2 ! n’a pas d’intitulé.


➡️ Ce cas est particulièrement intéressant car l’image est porteuse d’informations qui n’apparaissent pas dans l’accorche ni dans l’actualité (L’appel de La Rochelle pour une véritable transition agricole, troisième édition), l’alternative de l’image venant déterminer l’intulé du lien, cet intitulé deviendrait indigeste et un utilisateur de lecteur d’écran pourrait avoir du mal à comprendre la présence de deux liens menant vers la même actualité avec des intitulés différents.
💡 Je recommande de modifier la structure HTML de l’actualité afin de mettre le titre en premier dans l’ordre du code, puis les autres éléments dont l’image avec alternative, puis le lien dont la zone de clic peut recouvrir l’ensemble.
➡️ Définir une alternative à l’image comme alt="L’appel de La Rochelle pour une véritable transition agricole, troisième édition, marche citoyenne samedi 20 septembre à 11h sur le parvis de la gare"

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

Accueil Actualités Liens (6.2)
☐ Présentation (10.12)  important

Le bouton Voir toute l’actualité chevauche le titre lorsque les propriétés d’espacement sont redéfinies.


➡️ Empêcher le chevauchement du titre et du bouton (ex. en utilisant la propriété css max-width sur le titre).

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.

Accueil Actualités Présentation (10.12)

Newsletter - 2 erreurs recensées sur ce bloc

☐ éléments obligatoires (8.9)  moindre

Dans le bloc d’inscription à la newsletter, la mention du caractère obligatoire n’a pas la sémantique html appropriée.


➡️ Ajouter un élément <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.

Accueil Newsletter éléments obligatoires (8.9)
☐ éléments obligatoires (8.9) - 2  moindre

Le message de succès d’inscription à la newsletter n’a pas la sémantique html appropriée.


➡️ Ajouter un élément <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.

Accueil Newsletter éléments obligatoires (8.9) - 2

Une - 1 erreurs recensées sur ce bloc

☐ Structuration (9.1)  critique

Dans le premier bloc de contenu, la structuration des titres est incohérente et empêche la compréhension de la structure du contenu.


➡️ Revoir la hiérarchie entre titres de niveau 3 et 5, actuellement, le titre La décroissance apparaît en enfant du titre Alerte loi Duplomb 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.

Accueil Une Structuration (9.1)

Podcasts - 1 erreurs recensées sur ce bloc

☐ Structuration (9.3)  important

Les liens d’écoute ou de téléchargement des podcasts ne sont pas structurés dans une liste.


➡️ Structurer les liens dans une liste <ul><li>

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

Accueil Podcasts Structuration (9.3)

Agenda - 1 erreurs recensées sur ce bloc

☐ Présentation (10.12)  important

Le bouton Voir tous les événements chevauche le titre lorsque les propriétés d’espacement sont redéfinies.


➡️ Empêcher le chevauchement du titre et du bouton (ex. en utilisant la propriété css max-width sur le titre).

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.

Accueil Agenda Présentation (10.12)

Contact - 4 erreurs recensées sur cette page

URL de la page : https://generationecologie.fr/agir-avec-nous/echanger/nous-contacter/

 - Accéder à la capture écran
Contact

Formulaire - 4 erreurs recensées sur ce bloc

☐ Couleurs (3.3)  important

La couleur du contour des champs texte du formulaire de contact n’est pas assez contrastée.


➡️ Augmenter le rapport de contraste pour obtenir 3:1 a minima

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.

☐ éléments obligatoires (8.9)  moindre

La mention du caractère obligatoire de saisie pour les champs du formulaire n’a pas la sémantique html appropriée.


➡️ Utiliser un élément <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.

Contact Formulaire éléments obligatoires (8.9)
☐ Formulaires (11.10)  important

 Le message d’erreur après soumission n’est pas correctement lié au champ e-mail.


➡️ Ajouter un attribut aria-invalid="true" au champ en erreur
➡️ Lier le message d’erreur au champ en utilisant un attribut aria-describedby

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

Contact Formulaire Formulaires (11.10)
☐ Formulaires (11.11)  important

Dans le formulaire, le message d’erreur du champ email n’inclut pas de suggestion de saisie.


➡️ Ajouter un exemple réel de saisie dans le 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.

Politique de confidentialité - 1 erreurs recensées sur cette page

URL de la page : https://generationecologie.fr/politique-de-confidentialite/

 - Accéder à la capture écran
Politique de confidentialité

Contenu - 1 erreurs recensées sur ce bloc

☐ Structuration (9.3)  important

La liste d’items présentée sous le titre Wordpress n’est pas correctement structurée.


➡️ Utiliser une liste <ul><li>

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

Politique de confidentialité Contenu Structuration (9.3)

Recherche - 2 erreurs recensées sur cette page

URL de la page : https://generationecologie.fr/?s=

 - Accéder à la capture écran
Recherche

Formulaire - 1 erreurs recensées sur ce bloc

☐ Couleurs (3.3)  important

La couleur utilisée pour la bordure des champs de formulaire n’est pas suffisament contrastée.


➡️ Augmenter le rapport de contraste pour obtenir au moins 3:1 entre la couleur de la bordure, la couleur de fond (gris clair).
➡️ Attention à vérifier alors que le rapport de contraste sera suffisant lors de la prise de focus sur la liste déroulante. Le focus est en effet un simple changement de couleur de la bordure, le rapport de contraste doit être également de 3:1 pour la bordure entre les deux états.

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.

Titre - 1 erreurs recensées sur ce bloc

☐ éléments obligatoires (8.6)  moindre

Le titre de la page Résultats de recherche pour « » n’est pas pertinent dans la mesure où on n’a pas encore lancé de recherche.


➡️ Définir un titre pertinent tant qu’aucune recherche n’a été lancée, par exemple : Recherche – Génération Écologie

Pour chaque page web ayant un titre de page, ce titre est-il pertinent ?
Critère : 8.6 du RGAA 4.1.2.

Résultats d’une recherche - 4 erreurs recensées sur cette page

URL de la page : https://generationecologie.fr/?s=d%C3%A9croissance&type=podcast

 - Accéder à la capture écran
Résultats d’une recherche

Filtres - 1 erreurs recensées sur ce bloc

☐ Couleurs (3.1)  moindre

Le filtre actif est indiqué par la couleur.


➡️ Ce n’est pas une non-conformité puisque le terme est repris dans le paragraphe suivant, mais il serait pertinent de mettre un attribut aria-current="page" sur le lien actif (Podcasts)

Dans chaque page web, l’ information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?
Critère : 3.1 du RGAA 4.1.2.

Formulaire - 1 erreurs recensées sur ce bloc

☐ Couleurs (3.3)  important

La couleur utilisée pour la bordure des champs de formulaire n’est pas suffisament contrastée.


➡️ Augmenter le rapport de contraste pour obtenir au moins 3:1 entre la couleur de la bordure, la couleur de fond (gris clair).
➡️ Attention à vérifier alors que le rapport de contraste sera suffisant lors de la prise de focus sur la liste déroulante. Le focus est en effet un simple changement de couleur de la bordure, le rapport de contraste doit être également de 3:1 pour la bordure entre les deux états.

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.

Titre - 1 erreurs recensées sur ce bloc

☐ éléments obligatoires (8.6)  moindre

Le type de contenu n’apparaît pas dans le titre.


➡️ Ajouter le type de contenu dans le titre de la page.

Pour chaque page web ayant un titre de page, ce titre est-il pertinent ?
Critère : 8.6 du RGAA 4.1.2.

Podcasts - 1 erreurs recensées sur ce bloc

☐ Structuration (9.3)  important

Les liens d’écoute ou de téléchargement des podcasts ne sont pas structurés dans une liste.


➡️ Structurer les liens dans une liste <ul><li>

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

S’inscrire à la newsletter - 5 erreurs recensées sur cette page

URL de la page : https://generationecologie.fr/newsletter/

 - Accéder à la capture écran
S’inscrire à la newsletter

Formulaire - 5 erreurs recensées sur ce bloc

☐ Couleurs (3.3)  important

Le champs de saisie de l’adresse mail dans le formulaire n’est pas perceptible (rapport de contraste de 1.32:1).


➡️ Augmenter le rapport de contraste en ajoutant une bordure au champ par exemple (rapport de contraste attendu : 3:1).

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.

☐ éléments obligatoires (8.9)  moindre

Dans le formulaire, la mention du caractère obligatoire n’a pas la sémantique html appropriée.


➡️ Ajouter un élément <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.10)  critique

Le format attendu du champ Votre email du formulaire n’est pas donné de manière perceptible avant soumission.


➡️ Indiquer un exemple de saisie dans le label du champ ou dans un passage de texte lié avec l’attribut aria-describedby, l’utilisation de l’attribut placeholder n’est pas une option valide.

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

☐ Formulaires (11.10) - 4  important

 Le message d’erreur après soumission n’est pas correctement lié au champ e-mail.


➡️ Ajouter un attribut aria-invalid="true" au champ en erreur
➡️ Lier le message d’erreur au champ en utilisant un attribut aria-describedby

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

S’inscrire à la newsletter Formulaire Formulaires (11.10) - 4
☐ Formulaires (11.11)  important

Dans le formulaire, le message d’erreur du champ email n’inclut pas de suggestion de saisie.


➡️ Ajouter un exemple réel de saisie dans le 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.

Qui sommes-nous ? - 4 erreurs recensées sur cette page

URL de la page : https://generationecologie.fr/a-propos/generation-ecologie/qui-sommes-nous/

 - Accéder à la capture écran
Qui sommes-nous ?

Contenu - 2 erreurs recensées sur ce bloc

☐ éléments obligatoires (8.9)  moindre

Des paragraphes vides sont utilisés à des fins de présentation.


➡️ Supprimer les paragrpahes vides et utiliser css pour la présentation.

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.

Qui sommes-nous ? Contenu éléments obligatoires (8.9)
☐ Structuration (9.3)  important

Dans les sections Découvrir Génération Écologie et La charte de l’action écoféministe, les listes de liens ne sont pas structurées en liste.


➡️ Structurer les liste avec <ul><li>

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

Qui sommes-nous ? Contenu Structuration (9.3)

Newsletter - 1 erreurs recensées sur ce bloc

☐ Structuration (9.1)  important

Le titre Tenez-vous au courant de l’actualité de Génération Écologie est de niveau 3 et devrait être de niveau 2.


➡️ Modifier le niveau de 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.

PDF - 1 erreurs recensées sur ce bloc

☐ Consultation (13.3)  critique

Les trois documents PDF ne sont pas compatibles avec l’accessibilité et n’ont pas d’alternative accessible.


➡️ Proposer une version accessible des documents, telle qu’une page web dédiée où le contenu complet est repris.

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.

L’équipe - 2 erreurs recensées sur cette page

URL de la page : https://generationecologie.fr/a-propos/notre-organisation/lequipe/

 - Accéder à la capture écran
L’équipe

Modale - 2 erreurs recensées sur ce bloc

☐ Scripts (7.1)  important

Les fenêtres modales de présentation des membres de l’équipe ne suivent pas totalement le motif de conception ARIA Modal.


➡️ Ajouter un nom accessible sur l’élément dialog (ex. aria-label="À propos de Cécile Faure")
➡️ Le rôle ARIA alertdialog est réservé aux fenêtres modales d’alerte. Supprimer l’attribut role="alertdialog", l’élément <dialog> ayant le rôle adéquat par défaut.

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

Des paragraphes vides sont utilisés pour créer des espaces dans les fenêtres modales.


➡️ Supprimer les paragraphes vides et utiliser css pour adapter la présentation.

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’équipe Modale éléments obligatoires (8.9)

La commission Écoféminisme - 4 erreurs recensées sur cette page

URL de la page : https://generationecologie.fr/minformer/nos-groupes-de-travail/la-commission-ecofeminisme/

 - Accéder à la capture écran
La commission Écoféminisme

Intro - 1 erreurs recensées sur ce bloc

☐ Images (1.1)  critique

L’image présente dans la section d’inrtroduction est porteuse d’information et a une alternative vide.


➡️ Ajouter une alternative, par exemple : alt="Slogan de manifestation : Ni la terre ni les femmes ne sommes un territoire de conquête"

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

La commission Écoféminisme Intro Images (1.1)

Actualité - 2 erreurs recensées sur ce bloc

☐ éléments obligatoires (8.7)  important

Le changement de langue dans le titre de l’actualité “We are coming” : la sororité pour l’égalité et l’émancipation n’est pas indiqué.


➡️ Indiquer le changement de langue, par exemple en utilisant un élément <span 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.

☐ Structuration (9.4)  important

Les citations sont présentes dans les titres des actualités et ne sont pas indiquées.


➡️ Utiliser un élément <q> pour indiquer les citations courtes.

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

La commission Écoféminisme Actualité Structuration (9.4)

Contenu - 1 erreurs recensées sur ce bloc

☐ éléments obligatoires (8.9)  important

Dans la page, des paragraphes vides sont utilisés pour créer des espacements.


➡️ Supprimer les paragraphes vides et utiliser css pour adapter la présentation.

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.

La commission Écoféminisme Contenu éléments obligatoires (8.9)

Actualités - 3 erreurs recensées sur cette page

URL de la page : https://generationecologie.fr/minformer/nos-ressources/nos-actualites/

 - Accéder à la capture écran
Actualités

Une - 1 erreurs recensées sur ce bloc

☐ Liens (6.2)  critique
{Une} cf. même critère en P02 (Page d’accueil)

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

Newsletter - 1 erreurs recensées sur ce bloc

☐ Structuration (9.1)  important

Le titre Tenez-vous au courant de nos prochaines actualités est de niveau 3 et devrait être de niveau 2.


➡️ Changer le niveau de 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.

Liens - 1 erreurs recensées sur ce bloc

☐ Structuration (9.3)  moindre

Les liens Recherche et Dossiers thématiques doivent être intégrés dans une liste.


➡️ Utiliser une liste <ul><li> pour structurer les liens.

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

Actualité 1 - 6 erreurs recensées sur cette page

URL de la page : https://generationecologie.fr/2025/07/27/les-francaises-et-les-francais-contre-la-promulgation-de-la-loi-duplomb/

 - Accéder à la capture écran
Actualité 1

Partage - 4 erreurs recensées sur ce bloc

☐ Liens (6.2)  critique

Les liens vers les réseaux sociaux dans la fenêtre modale de partage n’ont pas d’intitulé.


➡️ Supprimer l’attribut aria-hidden="true" des éléments <svg> et leur ajouter un attribut aria-label.

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

☐ Scripts (7.1)  important

La fenêtre modale de partage de l’article n’est pas complètement compatible avec les technologies d’assistance.


➡️ Supprimer l’attribut role="alertdialog", ce rôle est réservé aux fenêtres d’alerte, l’élément <dialog> a le rôle adéquat par défaut.

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  important

Le système de copie de l’adresse URL de l’article n’est pas complètement compatible avec les technologies d’assistance.


➡️ Ajouter un moyen autre que visuel pour prévenir de la réussite de l’action.
Par exemple un texte hors écran dans le label du champ lorsque l’utilisateur a activé le bouton de copie.

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

Code modifié
html
<label for="url-input-share-post" class="u-h3 u-text-color">URL <span class="sr-only">copié dans le presse-papier</span>:</label>

☐ Structuration (9.3)  important

Les liens de partage vers les réseaux sociaux ne sont pas structurés dans une liste.


➡️ Structurer les liens à l’aide d’une liste <ul><li>

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

Navigation - 1 erreurs recensées sur ce bloc

☐ Structuration (9.2)  important

Les liens Article précédent et Article suivant ne sont pas compris dans un élément <nav>.


➡️ Structurer les liens en utilisant un élément <nav role="navigation" aria-label="Navigation transversale">
➡️ Structurer les deux liens dans une liste <ul><li>
➡️ Ajouter le titre de l’article à l’intitulé des liens, à l’aide par exemple d’un attribut aria-label="Article précédent : Rendez-vous à DÉCROISSANCE LE FESTIVAL 2025 !", un attribut aria-hidden="true" peut alors être ajouté sur l’élément <p> contenant le titre de l’article pour plus de clarté.
➡️ Le bouton de partage ne doit pas être compris dans la navigation.

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

Sondage - 1 erreurs recensées sur ce bloc

☐ Consultation (13.3)  critique

Le rapport d’étude téléchargeable n’a pas de version accessible.


➡️ Outre le fait que le document n’est pas accessible, ce rapport regroupe plusieurs thématiques problématiques au regard de l’accessibilité, par exemple, des graphiques utilisant des couleurs, des tableaux de données complexes, même la vignette dans l’article peut être considérée comme porteuse d’information et nécessite alors une description détaillée. Pour offrir une alternative accessible à ce genre de document, par le biais d’une page html par exemple, il convient d’être formé sérieusement à l’accessibilité.
➡️ Un auditeur encore plus tatillon que moi pourrait considérer que l’image de vignette (graphique) est porteuse d’information (critère 1.1) et nécessite donc une alternative et que par ailleurs, l’information n’est donnée que par la couleur (critère 3.1).

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.

Actualité 2 - 13 erreurs recensées sur cette page

URL de la page : https://generationecologie.fr/2025/07/09/loi-duplomb-adoptee-la-bataille-de-la-sante-environnementale-doit-samplifier/

 - Accéder à la capture écran
Actualité 2

Vidéo - 7 erreurs recensées sur ce bloc

☐ Cadres (2.1)  important

Le cadre utilisé pour la vidéo n’a pas de titre.


➡️ Ajouter un attribut title="video" sur l’élément <iframe>

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.


➡️ Fournir une transcription textuelle.

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

☐ Multimédia (4.5)  critique

La vidéo n’a pas d’audiodescription.


➡️ Les réactions des députés ne sont pas retranscrites dans les sous-titres. Une audiodescription comprend ce qui est entendu et ne peut être vu.

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

☐ Multimédia (4.7)  important

La vidéo n’est pas clairement identifiable.


➡️ Ajouter le terme vidéo dans le paragraphe introductif. Par exemple : *Vidéo : L’explication de vote contre la loi Duplomb par Delphine Batho à l’Assemblée nationale le 8 juillet *

Chaque média temporel est-il clairement identifiable (hors cas particuliers) ?
Critère : 4.7 du RGAA 4.1.2.

☐ Multimédia (4.11)  critique

Le lecteur vidéo n’est pas contrôlable au clavier.


➡️ Une fois la vidéo lancée, il est impossible d’atteindre les contrôles du lecteur vidéo à l’aide du clavier.

La consultation de chaque média temporel est-elle, si nécessaire, contrôlable par le clavier et tout dispositif de pointage  ?
Critère : 4.11 du RGAA 4.1.2.

☐ Scripts (7.1)  important

La séquence d’actions précédant la lecture de la vidéo n’est pas compatible avec les technologies d’assistance (navigation au clavier et prise de focus).


➡️ Après que l’utilisateur a choisi de lire la vidéo, le focus doit être déplacé sur le paragraphe d’avertissement au sujet des cookies (tabindex="-1" sur l’élément <p>).
➡️ Une fois le bouton Lire la vidéo activé, le focus doit être déplacé sur le lecteur vidéo.

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

☐ Présentation (10.1)  important

L’attribut frameborderest utilisé sur l’élément <iframe>.


➡️ Supprimer l’attribut frameborder et utiliser css pour ajsuter l’affichage.

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.

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

☐ Liens (6.2)
cf. P14 (Actualité 1)

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

☐ Scripts (7.1)
cf. P14 (Actualité 1)

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

☐ Structuration (9.2)
cf. P14 (Actualité 1)

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

☐ Structuration (9.3)
cf. P14 (Actualité 1)

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

Défilement - 1 erreurs recensées sur ce bloc

☐ Présentation (10.11)  important

Une bare de défilement horizontale est nécessaire lorsque la page est affichée dans une largeur de 320px.


➡️ Ajuster l’affichage avec css pour empêcher l’apparition d’une barre de défilement horizontalle à cette taille.

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.

PDF - 1 erreurs recensées sur ce bloc

☐ Consultation (13.3)  critique

Les documents PDF ne sont pas accessibles et n’ont pas d’alternative accessible.


➡️ Fournir une alternative accessible aux documents PDF.

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.

Actualité 3 - 5 erreurs recensées sur cette page

URL de la page : https://generationecologie.fr/2025/03/07/8-mars-2025-stop-aux-violences-stop-aux-reculs-des-droits-des-femmes/

 - Accéder à la capture écran
Actualité 3

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

☐ Liens (6.2)
cf. P14 (Actualité 1)

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

☐ Scripts (7.1)
cf. P14 (Actualité 1)

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

☐ Structuration (9.2)
cf. P14 (Actualité 1)

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

☐ Structuration (9.3)
cf. P14 (Actualité 1)

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

Citation - 1 erreurs recensées sur ce bloc

☐ Structuration (9.4)  critique

La citation n’est pas correctement indiquée.


➡️ Utiliser les éléments <blockquote> et <cite> pour structurer la citation.

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

Dossier thématique 1 - 6 erreurs recensées sur cette page

URL de la page : https://generationecologie.fr/sinformer/nos-ressources/dossiers-thematiques/neonicotinoides-quand-cest-non-cest-non/

 - Accéder à la capture écran
Dossier thématique 1

Chiffres - 1 erreurs recensées sur ce bloc

☐ Couleurs (3.2)  critique

Les chiffres clés dans le bloc En quelques chiffres… offrent un rapport de contraste insuffisant.


➡️ Augmenter le rapport de contraste pour arriver à 3:1 a minima

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.

Actualités - 1 erreurs recensées sur ce bloc

☐ Liens (6.1)  critique

Le lien Voir plus dans le bloc des actualités n’est pas explicite.


➡️ Fournir un contexte pertinent. Par exemple, modifier l’intitulé du lien pour Voir plus d’actualités.

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

Contenu - 2 erreurs recensées sur ce bloc

☐ éléments obligatoires (8.9)  moindre

Des titres et paragraphes vides sont utilisés pour ajouter des espaces.


➡️ Supprimer les paragraphes et titres vides et utiliser css pour ajuster la présentation.

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.

Dossier thématique 1 Contenu éléments obligatoires (8.9)
☐ Structuration (9.1)  critique

Les titres de section (titres de couleur pourpre) doivent être de niveau 2.


➡️ Modifier le niveau des titres.

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.

Podcasts - 1 erreurs recensées sur ce bloc

☐ Structuration (9.3)  important

Les liens d’écoute ou de téléchargement des podcasts ne sont pas structurés dans une liste.


➡️ Structurer les liens dans une liste <ul><li>

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

Le dossier PDF en téléchargement n’est pas accessible et n’a pas d’alternative accessible.


➡️ Fournir une alternative accessible.

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

Adhérer - 11 erreurs recensées sur cette page

URL de la page : https://generationecologie.fr/agir-avec-nous/sengager/adherer/

 - Accéder à la capture écran
Adhérer

Formulaire - 10 erreurs recensées sur ce bloc

☐ Couleurs (3.1)  critique

L’état d’avancement du formulaire est indiqué uniquement par la couleur.


➡️ Exemple de correction : Ajouter un texte hors écran (.sr-only) indiquant quelle est l’étape courante.
➡️ La liste utilisée étant une liste ordonnée, il n’est pas nécessaire de mettre à disposition l’index de l’étape aux lecteurs d’écran (attribut aria-hidden="true")

Dans chaque page web, l’ information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?
Critère : 3.1 du RGAA 4.1.2.

Code modifié
html
<ol class="c-form__steps">
    <li class="c-form__step --active">
        <span aria-hidden="true">1</span>
        Type d’adhésion
        <span class="sr-only"> - étape courante</span>
              </li>

☐ Couleurs (3.3)  critique

Les champs de saisie du formulaire ne sont pas suffisament contrastés.


➡️ Augmenter le contraste de la bordure (attention alors à la prise de focus pour la liste de sélection)

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.

☐ éléments obligatoires (8.9)  important

La mention du caractère obligatoire des champs dans le formulaire n’a pas la sémantique html appropriée.


➡️ Utiliser un élément <p> pour structurer le texte.

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

La prise de focus sur la liste déroulante dans le formulaire n’est pas visible.


➡️ Rendre visible la prise de focus sur la liste de sélection (pour les champs de saisie, la présence du curseur suffit à indiquer cette prise de focus).

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.

☐ Formulaires (11.5)  important

Les champs de même nature ne sont pas regroupés.


➡️ Regrouper les boutons radio en utilisant un élément <fieldset> avec un élément <legend>

🚨 Vérifier la légende lors de l’audit de contrôle

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.

Code modifié
html
<div class="c-form__control c-form__full-width c-form__condition">
  <fieldset>
    <legend class="required">Type d’adhésion</legend>
    <div id="membership_step1_form_amount_list">
      <div class="c-form__checkbox"><input type="radio" id="membership_step1_form_amount_list_0" name="membership_step1_form[amount_list]" required="required" value="1000"><label for="membership_step1_form_amount_list_0" class="required">Normale (10 € par an)</label></div>
    ....
    </div>
  </fieldset>
</div>

☐ Formulaires (11.10)  important

Les champs attendant un type de données particulier ne proposent pas d’indication de type de données (montant personnalisé, code postal, e-mail).


➡️ Ajouter une indication dans l’étiquette. Ex. : Montant personnalisé (nombre entier) ou E-mail ( prenom@nom.fr )

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

Adhérer Formulaire Formulaires (11.10)
☐ Formulaires (11.10) - 7  important

 Les champs en erreur après soumission ne sont pas identifiables.


➡️ Ajouter un attribut aria-invalid="true" au champ présentant une erreur
➡️ Lier le message d’erreur et le lien avec l’attribut aria-describedby

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

☐ Formulaires (11.11)  important

Les messages d’erreur relatifs au format de données n’offrent pas tous un exemple de saisie.


➡️ Ajouter un exemple de saisie pour les messages d’erreur pour les champs Montant personnalisé et Code postal

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.12)  critique

Les données saisies dans le formulaire de paiement ne peuvent être vérifiées par l’utilisateur.


➡️ Ajouter une étape de récapitulation et validation des données (permettant la correction en revenant dans les pages précédentes) avant paiement par exemple. Ou bien, ajouter une case à cocher supplémentaire pour s’assurer de la confirmation explicite de l’utilisateur.
➡️ La page doit indiquer explicitement la durée pendant laquelle l’utilisateur peut demander l’annulation de sa saisie. Elle devra également contenir la procédure à effectuer pour annuler cette saisie. Cette procédure n’a pas à être obligatoirement réalisable en ligne même si cela reste recommandé.

Pour chaque formulaire qui modifie ou supprime des données, ou qui transmet des réponses à un test ou à un examen, ou dont la validation a des conséquences financières ou juridiques, les données saisies peuvent-elles être modifiées, mises à jour ou récupérées par l’utilisateur ?
Critère : 11.12 du RGAA 4.1.2.

☐ Formulaires (11.13)  important

La saisie de certains champs du formulaire ne peut pas être facilitée par un remplissage automatique.


➡️ Ajouter l’attribut autocomplete avec la valeur adéquate pour tous les champs éligibles.

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.

Citations - 1 erreurs recensées sur ce bloc

☐ Structuration (9.4)  important

Les citations des articles de loi ne sont pas indiquées correctement.


➡️ Utiliser un élémént <q> pour indiquer les citations en ligne.

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

Adhérer Citations Structuration (9.4)

Faire un don - 12 erreurs recensées sur cette page

URL de la page : https://generationecologie.fr/mengager/faire-un-don/

 - Accéder à la capture écran
Faire un don

Formulaire - 11 erreurs recensées sur ce bloc

☐ Couleurs (3.1)  critique

L’état d’avancement du formulaire est indiqué uniquement par la couleur.


➡️ Exemple de correction : Ajouter un texte hors écran (.sr-only) indiquant quelle est l’étape courante.
➡️ La liste utilisée étant une liste ordonnée, il n’est pas nécessaire de mettre à disposition l’index de l’étape aux lecteurs d’écran (attribut aria-hidden="true")

Dans chaque page web, l’ information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?
Critère : 3.1 du RGAA 4.1.2.

Code modifié
html
<ol class="c-form__steps">
    <li class="c-form__step --active">
        <span aria-hidden="true">1</span>
        Type d’adhésion
        <span class="sr-only"> - étape courante</span>
              </li>

☐ Couleurs (3.3)  critique

Les champs de saisie du formulaire ne sont pas suffisament contrastés.


➡️ Augmenter le contraste de la bordure (attention alors à la prise de focus pour la liste de sélection).

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.

☐ éléments obligatoires (8.9)  moindre

La mention du caractère obligatoire des champs dans le formulaire n’a pas la sémantique html appropriée.


➡️ Utiliser un élément <p> pour structurer le texte.

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

Le titre Résumé dans le formulaire doit être de niveau 3.


➡️ Modifier le niveau de titre du titre Résumé.

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.

Faire un don Formulaire Structuration (9.1)
☐ Présentation (10.7)  critique

La prise de focus sur la liste déroulante dans le formulaire n’est pas visible.


➡️ Rendre visible la prise de focus sur la liste de sélection (pour les champs de saisie, la présence du curseur suffit à indiquer cette prise de focus).

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.

☐ Formulaires (11.5)  important

Les champs de même nature ne sont pas regroupés.


➡️ Regrouper les boutons radio en utilisant un élément <fieldset> avec un élément <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.

Code modifié
html
<div class="c-form__control c-form__full-width c-form__condition">
  <fieldset>
    <legend class="required">Type d’adhésion</legend>
    <div id="membership_step1_form_amount_list">
      <div class="c-form__checkbox"><input type="radio" id="membership_step1_form_amount_list_0" name="membership_step1_form[amount_list]" required="required" value="1000"><label for="membership_step1_form_amount_list_0" class="required">Normale (10 € par an)</label></div>
    ....
    </div>
  </fieldset>
</div>

☐ Formulaires (11.10)  important

Les champs attendant un type de données particulier ne proposent pas d’indication du type de données (montant personnalisé, code postal, e-mail).


➡️ Ajouter une indication dans l’étiquette. Ex. : Montant personnalisé (ex. 120) ou E-mail ( prenom@nom.fr )

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

☐ Formulaires (11.10) - 8  important

 Les champs en erreur après soumission ne sont pas identifiables.


➡️ Ajouter un attribut aria-invalid="true" au champ présentant une erreur
➡️ Lier le message d’erreur et le lien avec l’attribut aria-describedby

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

Faire un don Formulaire Formulaires (11.10) - 8
☐ Formulaires (11.11)  important

Les messages d’erreur relatifs au format de données n’offrent pas tous un exemple de saisie.


➡️ Ajouter un exemple de saisie pour les messages d’erreur pour les champs Montant personnalisé et Code postal

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.

Faire un don Formulaire Formulaires (11.11)
☐ Formulaires (11.12)  critique

Les données saisies dans le formulaire de paiement ne peuvent vérifiées par l’utilisateur.


➡️ Ajouter une étape de récapitulation et validation des données (permettant la correction en revenant dans les pages précédentes) avant paiement par exemple. Ou bien, ajouter une case à cocher supplémentaire pour s’assurer de la confirmation explicite de l’utilisateur.
➡️ La page doit indiquer explicitement la durée pendant laquelle l’utilisateur peut demander l’annulation de sa saisie. Elle devra également contenir la procédure à effectuer pour annuler cette saisie. Cette procédure n’a pas à être obligatoirement réalisable en ligne même si cela reste recommandé.

Pour chaque formulaire qui modifie ou supprime des données, ou qui transmet des réponses à un test ou à un examen, ou dont la validation a des conséquences financières ou juridiques, les données saisies peuvent-elles être modifiées, mises à jour ou récupérées par l’utilisateur ?
Critère : 11.12 du RGAA 4.1.2.

☐ Formulaires (11.13)  important

La saisie de certains champs du formulaire ne peut pas être facilitée par un remplissage automatique.


➡️ Ajouter l’attribut autocomplete avec la valeur correspondante pour tous les champs éligibles.

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.

Contenu - 1 erreurs recensées sur ce bloc

☐ éléments obligatoires (8.9)  moindre

Un titre vide est utilisé pour créer de l’espacement.


➡️ Supprimer le titre vide et utiliser css pour ajuster la présentation.

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.

Faire un don Contenu éléments obligatoires (8.9)

Nos podcasts - 2 erreurs recensées sur cette page

URL de la page : https://generationecologie.fr/sinformer/nos-ressources/nos-podcasts/

 - Accéder à la capture écran
Nos podcasts

Newsletter - 1 erreurs recensées sur ce bloc

☐ Structuration (9.1)  important

Le titre Tenez-vous au courant des nouveaux podcasts doit être de niveau 2.


➡️ Changer le niveau de 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.

Podcasts - 1 erreurs recensées sur ce bloc

☐ Structuration (9.3)  important

Les liens d’écoute ou de téléchargement des podcasts ne sont pas structurés dans une liste.


➡️ Structurer les liens dans une liste <ul><li>

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

Podcast - 3 erreurs recensées sur cette page

URL de la page : https://generationecologie.fr/nos-podcasts/archive/que-doivent-penser-les-ecologistes-de-la-guerre/

 - Accéder à la capture écran
Podcast

Contenu - 2 erreurs recensées sur ce bloc

☐ éléments obligatoires (8.7)  moindre

Le changement de langue pour le terme backlash doit être indiqué.


➡️ Indiquer le changement de langue avec, par exemple, un élément <span 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.

Podcast Contenu éléments obligatoires (8.7)
☐ Structuration (9.4)  important

Les citations en ligne ne sont pas correctement indiquées.


➡️ Utiliser l’élément <q> pour indiquer les citations en ligne.

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

Podcast Contenu Structuration (9.4)

Liens - 1 erreurs recensées sur ce bloc

☐ Structuration (9.3)  important

Les liens d’écoute ou de téléchargement du podcast ne sont pas structurés dans une liste.


➡️ Structurer les liens dans une liste <ul><li>

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

Nos publications - 1 erreurs recensées sur cette page

URL de la page : https://generationecologie.fr/publication/

 - Accéder à la capture écran
Nos publications

Affichage - 1 erreurs recensées sur ce bloc

☐ Présentation (10.11)  important

Une bare de défilement horizontale est nécessaire pour consulter le site dans une fenêtre de 320px de largeur.


➡️ Ajuster les syles pour éviter la bare de défilement horizontale.

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.

Publication - 5 erreurs recensées sur cette page

URL de la page : https://generationecologie.fr/publication/declaration-de-principes-de-generation-ecologie/

 - Accéder à la capture écran
Publication

Partage - 4 erreurs recensées sur ce bloc

☐ Liens (6.2)  critique

Les liens vers les réseaux sociaux dans la fenêtre modale de partage n’ont pas d’intitulé.


➡️ Supprimer l’attribut aria-hidden="true" des éléments <svg> et leur ajouter un attribut aria-label.

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

☐ Scripts (7.1)  important

La fenêtre modale de partage de l’article n’est pas complètement compatible avec les technologies d’assistance.


➡️ Supprimer l’attribut role="alertdialog", ce rôle est réservé aux fenêtres d’alerte, l’élément <dialog> a le rôle adéquat par défaut.

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  important

Le système de copie de l’adresse URL de l’article n’est pas complètement compatible avec les technologies d’assistance.


➡️ Ajouter un moyen autre que visuel pour prévenir de la réussite de l’action.
Par exemple un texte hors écran dans le label du champ lorsque l’utilisateur a activé le bouton de copie.

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

Code modifié
html
<label for="url-input-share-post" class="u-h3 u-text-color">URL <span class="sr-only">copié dans le presse-papier</span>:</label>

☐ Structuration (9.3)  important

Les liens de partage vers les réseaux sociaux ne sont pas structurés dans une liste.


➡️ Structurer les liens à l’aide d’une liste <ul><li>

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.4)  critique

Le contenu accessible de la page n’est pas tout à fait complet.


➡️ Ajouter la mention Annexe à l’article 1er des statuts de Génération Ecologie

Pour chaque document bureautique ayant une version accessible, cette version offre-t-elle la même information ?
Critère : 13.4 du RGAA 4.1.2.

Agenda - 2 erreurs recensées sur cette page

URL de la page : https://generationecologie.fr/agenda/

 - Accéder à la capture écran
Agenda

Newsletter - 1 erreurs recensées sur ce bloc

☐ Structuration (9.1)  important

Le titre Tenez-vous au courant de nos prochains évènements doit être de niveau 2.


➡️ Modifier le niveau de 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.

Affichage - 1 erreurs recensées sur ce bloc

☐ Présentation (10.11)  critique

Une bare de défilement horizontale est nécessaire lorsque la page est affichée dans une largeur de 320px.


➡️ Ajuster l’affichage avec css pour empêcher l’apparition d’une barre de défilement horizontalle à cette taille.

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.

Événément - 6 erreurs recensées sur cette page

URL de la page : https://generationecologie.fr/agenda/espace-decoute-et-de-parole-de-la-commission-emotions-et-eco-anxiete-2/

 - Accéder à la capture écran
Événément

Partage - 4 erreurs recensées sur ce bloc

☐ Liens (6.2)  critique

Les liens vers les réseaux sociaux dans la fenêtre modale de partage n’ont pas d’intitulé.


➡️ Supprimer l’attribut aria-hidden="true" des éléments <svg> et leur ajouter un attribut aria-label.

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

☐ Scripts (7.1)  important

La fenêtre modale de partage de l’article n’est pas complètement compatible avec les technologies d’assistance.


➡️ Supprimer l’attribut role="alertdialog", ce rôle est réservé aux fenêtres d’alerte, l’élément <dialog> a le rôle adéquat par défaut.

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  important

Le système de copie de l’adresse URL de l’article n’est pas complètement compatible avec les technologies d’assistance.


➡️ Ajouter un moyen autre que visuel pour prévenir de la réussite de l’action.
Par exemple un texte hors écran dans le label du champ lorsque l’utilisateur a activé le bouton de copie.

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

Code modifié
html
<label for="url-input-share-post" class="u-h3 u-text-color">URL <span class="sr-only">copié dans le presse-papier</span>:</label>

☐ Structuration (9.3)  important

Les liens de partage vers les réseaux sociaux ne sont pas structurés dans une liste.


➡️ Structurer les liens à l’aide d’une liste <ul><li>

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

Formulaire - 2 erreurs recensées sur ce bloc

☐ Formulaires (11.10)  important

L’indication sur le caractère obligatoire n’est pas correctement liée à la case à cocher obligatoire.


➡️ Supprimer l’élément <fieldset> et déplacer la mention dans la bonne étiquette.

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

☐ Formulaires (11.13)  important

La saisie dans les champs du formulaire ne peut pas être déduite.


➡️ Ajouter l’attribut autocomplete avec la valeur adéquate pour les champs Prénom, Nom et E-mail

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.