Vous êtes sur la page 1sur 29

Rapport d’audit RGAA 3.

Site internet de la ville du moule


15 juillet 2019

Réalisé par : IPEOS I-Solutions


Inspecteur : Laurent VERGEROLLE – Expert en accessibilité numérique

Droit de reproduction
Ce document a été réalisé selon le modèle défini par la DINSIC dans le kit d’audit RGAA 3 sous
licence ouverte 1.0 ou ultérieure.

Rapport d’audit accessibilité – Juillet 2019 – www.lemoule.fr p.1 sur 29


Table des matières
Rapport d’audit RGAA 3.0...................................................................................................................1
Introduction......................................................................................................................................5
Contexte......................................................................................................................................5
Accessibilité du site....................................................................................................................6
Annexe technique............................................................................................................................7
Images.........................................................................................................................................7
Résultats d’audit.....................................................................................................................7
Détail des critères non conformes..........................................................................................7
Critère 1.1 [A] Chaque image a-t-elle une alternative textuelle ?.....................................7
Critère 1.2 [A] Pour chaque image de décoration ayant une alternative textuelle, cette
alternative est-elle vide ?...................................................................................................8
Critère 1.3 [A] Pour chaque image porteuse d'information ayant une alternative
textuelle, cette alternative est-elle pertinente (hors cas particuliers) ?..............................8
Critère 1.6 [A] Chaque image porteuse d'information a-t-elle, si nécessaire, une
description détaillée ?........................................................................................................8
Cadres..........................................................................................................................................9
Résultats d’audit.....................................................................................................................9
Détail des critères non conformes..........................................................................................9
Critère 2.1 [A] Chaque cadre en ligne a-t-il un titre de cadre ?.........................................9
Critère 2.2 [A] Pour chaque cadre en ligne ayant un titre de cadre, ce titre de cadre est-il
pertinent ?..........................................................................................................................9
Couleurs....................................................................................................................................10
Résultats d’audit...................................................................................................................10
Détail des critères non conformes........................................................................................10
Critère 3.1 [A] Dans chaque page web, l'information ne doit pas être donnée
uniquement par la couleur. Cette règle est-elle respectée ?.............................................10
Critère 3.2 [A] Dans chaque page web, l'information ne doit pas être donnée
uniquement par la couleur. Cette règle est-elle implémentée de façon pertinente ?........10
Critère 3.3 [AA] 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) ?...............10
Multimédia................................................................................................................................11
Résultats d’audit...................................................................................................................11
Détail des critères non conformes........................................................................................12
Critère 4.1 [A] Chaque média temporel pré-enregistré a-t-il, si nécessaire, une
transcription textuelle ou une audiodescription (hors cas particuliers) ?........................12
Critère 4.3 [A] Chaque média temporel synchronisé pré-enregistré a-t-il, si nécessaire,
des sous-titres synchronisés (hors cas particuliers) ?......................................................12
Critère 4.7 [AA] Chaque média temporel pré-enregistré a-t-il, si nécessaire, une
audiodescription synchronisée (hors cas particuliers) ?..................................................12
Critère 4.22 [A] Chaque média temporel et non temporel est-il compatible avec les
technologies d'assistance (hors cas particuliers) ?...........................................................12
Tableaux....................................................................................................................................13
Résultats d’audit...................................................................................................................13
Détail des critères non conformes........................................................................................13
Critère 5.4 [A] Chaque tableau de données a-t-il un titre ?.............................................13
Critère 5.6 [A] Pour chaque tableau de données, chaque en-tête de colonnes et chaque
en-tête de lignes sont-ils correctement déclarés ?............................................................13
Liens..........................................................................................................................................14

Rapport d’audit accessibilité – Juillet 2019 – www.lemoule.fr p. 2 sur 29


Résultats d’audit...................................................................................................................14
Détail des critères non conformes........................................................................................14
Critère 6.1 [A] Chaque lien est-il explicite (hors cas particuliers) ?...............................14
Critère 6.2 [A] Pour chaque lien ayant un titre de lien, celui-ci est-il pertinent ?...........14
Critère 6.5 [A] Dans chaque page web, chaque lien, à l'exception des ancres, a-t-il un
intitulé ?...........................................................................................................................14
Scripts........................................................................................................................................16
Résultats d’audit...................................................................................................................16
Détail des critères non conformes........................................................................................16
Critère 7.1 [A] Chaque script est-il, si nécessaire, compatible avec les technologies
d'assistance ?....................................................................................................................16
Critère 7.3 [A] Chaque script est-il contrôlable par le clavier et la souris (hors cas
particuliers) ?...................................................................................................................16
Critère 7.4 [A] Pour chaque script qui initie un changement de contexte, l'utilisateur est-
il averti ou en a-t-il le contrôle ?......................................................................................17
Éléments obligatoires................................................................................................................18
Résultats d’audit...................................................................................................................18
Détail des critères non conformes........................................................................................18
Critère 8.2 [A] Pour chaque page web, le code source est-il valide selon le type de
document spécifié (hors cas particuliers) ?......................................................................18
Critère 8.6 [A] Pour chaque page web ayant un titre de page, ce titre est-il pertinent ?. 18
Critère 8.9 [A] 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 ?..........................19
Structuration de l’information...................................................................................................20
Résultats d’audit...................................................................................................................20
Détail des critères non conformes........................................................................................20
Critère 9.1 [A] Dans chaque page web, l'information est-elle structurée par l'utilisation
appropriée de titres ?........................................................................................................20
Critère 9.2 [A] Dans chaque page web, la structure du document est-elle cohérente ?. .20
Critère 9.3 [A] Dans chaque page web, chaque liste est-elle correctement structurée ?. 20
Présentation de l’information....................................................................................................22
Résultats d’audit...................................................................................................................22
Détail des critères non conformes........................................................................................22
Critère 10.2 [A] Dans chaque page web, le contenu visible reste-t-il présent lorsque les
feuilles de styles sont désactivées ?.................................................................................22
Critère 10.4 [AA] Dans chaque page web, le texte reste-t-il lisible lorsque la taille des
caractères est augmentée jusqu'à 200%, au moins (hors cas particuliers) ?....................22
Critère 10.7 [A] Dans chaque page web, pour chaque élément recevant le focus, la prise
de focus est-elle visible ?.................................................................................................23
Critère 10.14 [A] Dans chaque page web, l'information ne doit pas être donnée
uniquement par la forme, taille ou position. Cette règle est-elle respectée ?..................23
Formulaires...............................................................................................................................24
Résultats d’audit...................................................................................................................24
Détail des critères non conformes........................................................................................24
Critère 11.1 [A] Chaque champ de formulaire a-t-il une étiquette ?...............................24
Critère 11.5 [A] Dans chaque formulaire, les informations de même nature sont-elles
regroupées, si nécessaire ?...............................................................................................24
Critère 11.9 [A] Dans chaque formulaire, l'intitulé de chaque bouton est-il pertinent ?. 25
Critère 11.10 [A] Dans chaque formulaire, le contrôle de saisie est-il utilisé de manière
pertinente ?......................................................................................................................25

Rapport d’audit accessibilité – Juillet 2019 – www.lemoule.fr p. 3 sur 29


Critère 11.11 [AA] Dans chaque formulaire, le contrôle de saisie est-il accompagné, si
nécessaire, de suggestions facilitant la correction des erreurs de saisie ?.......................25
Critère 11.12 [AA] Pour chaque formulaire, les données à caractère financier, juridique
ou personnel peuvent-elles être modifiées, mises à jour ou récupérées par l'utilisateur ?
.........................................................................................................................................25
Navigation.................................................................................................................................26
Résultats d’audit...................................................................................................................26
Détail des critères non conformes........................................................................................26
Critère 12.10 [A] Dans chaque page web, les groupes de liens importants (menu, barre
de navigation…) et la zone de contenu sont-ils identifiés ?............................................26
Critère 12.11 [A] Dans chaque page web, des liens d'évitement ou d'accès rapide aux
groupes de liens importants et à la zone de contenu sont-ils présents (hors cas
particuliers) ?...................................................................................................................26
Critère 12.13 [A] Dans chaque page web, l'ordre de tabulation est-il cohérent ?...........26
Consultation..............................................................................................................................27
Résultats d’audit...................................................................................................................27
Détail des critères non conformes........................................................................................27
Critère 13.2 [A] Dans chaque page web, pour chaque ouverture de nouvelle fenêtre,
l'utilisateur est-il averti ?..................................................................................................27
Critère 13.7 [A] Dans chaque page web, chaque document bureautique en
téléchargement possède-t-il, si nécessaire, une version accessible ?...............................28
Critère 13.17 [A] Dans chaque page web, chaque contenu en mouvement ou clignotant
est-il contrôlable par l'utilisateur ?...................................................................................28
Conclusion.....................................................................................................................................29
Avis de l’inspecteur...................................................................................................................29
Priorisation des réparations.......................................................................................................29

Rapport d’audit accessibilité – Juillet 2019 – www.lemoule.fr p. 4 sur 29


Introduction
Contexte
Cette note accompagne le relevé d’audit effectué sur le site officiel de la ville du Moule
(www.lemoule.fr). L’audit a été réalisé par M. Laurent Vergerolle au moyen de l’utilisation de
navigateurs web et d’outils spécialisés. Des tests de restitution ont également été faits
conformément à la base de référence définie par le RGAA 3.0.
L’audit a porté sur un échantillon de 26 pages pour le niveau double A (AA) du RGAA 3.0.
Le RGAA 3.0 est consultable à l'adresse suivante :
https://references.modernisation.gouv.fr/rgaa-accessibilite/

N° Page
1 https://www.lemoule.fr/
2 https://www.lemoule.fr/nous-contacter
3 https://www.lemoule.fr/le-contrat-de-ville
4 https://www.lemoule.fr/le-contrat-de-ville?start=6
5 https://www.lemoule.fr/le-contrat-de-ville/887-appel-a-projets-2019
6 https://www.lemoule.fr/demarches/naissance/acte-de-naissance
https://www.lemoule.fr/rechercher?
7
searchword=moule&searchphrase=all
8 https://www.lemoule.fr/rechercher?searchword=&searchphrase=all
https://www.lemoule.fr/rechercher?
9
searchword=moule123456&searchphrase=all
10 https://www.lemoule.fr/plan-du-site
11 https://www.lemoule.fr/demarches/solidarite-col-237
12 https://www.lemoule.fr/vous-etes-un-nouveau-resident
13 https://www.lemoule.fr/tout-l-agenda/list (du 10 mars au 30 juin)
14 https://www.lemoule.fr/annuaire-de-la-ville
15 https://www.lemoule.fr/annuaire-de-la-ville/2-services-mairie
16 https://www.lemoule.fr/annuaire-de-la-ville/37-mairie
17 https://www.lemoule.fr/plan-de-la-ville
18 https://www.lemoule.fr/restaurants-scolaires

Rapport d’audit accessibilité – Juillet 2019 – www.lemoule.fr p. 5 sur 29


N° Page
19 https://www.lemoule.fr/programme-cinema
20 https://www.lemoule.fr/necrologie
21 https://www.lemoule.fr/marches-publics
22 https://www.lemoule.fr/signaler
23 https://www.lemoule.fr/tous-les-communiques
https://www.lemoule.fr/vie-citoyenne/conseil-municipal/les-
24
comptes-rendus
25 https://www.lemoule.fr/tous-les-albums
https://www.lemoule.fr/tous-les-albums/657-alsh-marie-eva-dupuits-
26
visite-du-parc-aquacole-de-pointe-noire

Accessibilité du site
Malgré le fait que beaucoup de critères reste non applicables, le site n’est pas accessible. Il y a un
minimum de 22 critères redondants non conformes qui empêchent l’accessibilité de presque toutes
les pages.
Une attention particulière doit être portée à la correction des couleurs, la génération des images
d’illustrations et les formulaires qui sont des problèmes récurrents sur les sites mais qui peuvent être
évité. De plus la pertinence de certaines informations est à améliorer.
Plusieurs de ces modifications devraient être réalisées directement dans la génération des modèles
des pages et auront un impact immédiat sur l’accessibilité de toutes les pages auditées.
Résumé des tableaux d’audit de conformité pour le niveau double A :

Niveau Nombre de critères Conformes Non conformes Non applicables


Niveau A 82 14 38 30
Niveau AA 20 8 4 8
Total 102 22 42 38

Rapport d’audit accessibilité – Juillet 2019 – www.lemoule.fr p. 6 sur 29


Annexe technique
Dans cette partie nous listerons l’ensemble des critères non conformes par catégorie et nous
donnerons des exemples qui illustrent la non-conformité ainsi que des solutions qui pourraient être
apportées.

Images
Donner à chaque image porteuse d’information une alternative textuelle pertinente et une
description détaillée si nécessaire. Lier les légendes à leurs images. Remplacer les images textes par
du texte stylé lorsque c’est possible.

Résultats d’audit
Critère 1. Niveau Conforme Non Non Dérogé Non testé
conforme applicable
1 A X
2 A X
3 A X
4 A X
5 A X
6 A X
7 A X
8 AA X
9 AAA X
10 A X
Détail des critères non conformes
Critère 1.1 [A] Chaque image a-t-elle une alternative textuelle ?
Sur certaines pages qui liste du contenu, les images d’illustration n’ont pas d’attribut « alt » défini.
1. URL : https://www.lemoule.fr/vous-etes-un-nouveau-resident
Sur la page ci-dessus les images utilisées pour la décoration des zones de texte « Je souhaite
pratiquer une activité culturelle ou sportive » n’a pas l’attribut.
2. URL : https://www.lemoule.fr/annuaire-de-la-ville/37-mairie
Sur la page ci-dessus les tuiles qui composent la carte n’ont pas d’attribut « alt ». Il faut soit
changer de fournisseur de carte, soit mettre en place une alternative qui permettrait d’ajouter
l’attribut manquant.

Rapport d’audit accessibilité – Juillet 2019 – www.lemoule.fr p. 7 sur 29


Critère 1.2 [A] Pour chaque image de décoration ayant une alternative textuelle, cette
alternative est-elle vide ?
Sur certaines pages des images utilisées pour décorer une introduction n’ont pas un attribut « alt »
vide.
1. URL : https://www.lemoule.fr/
Sur la page ci-dessus les photos associées aux actualités sont des décorations et doivent
avoir un attribut « alt » vide

Critère 1.3 [A] Pour chaque image porteuse d'information ayant une alternative
textuelle, cette alternative est-elle pertinente (hors cas particuliers) ?
Les alternatives textuelles doivent correspondre au contenu de l’image ou à la fonction indiquée par
l’image.
1. URL : https://www.lemoule.fr/
Sur la page ci-dessus il y a beaucoup d’icônes qui peuvent être utilisé comme image de
décoration comme les images qui composent le bandeau bleu « Touriste, Nouveau résident,
Parent, ... »
2. URL : https://www.lemoule.fr/
Sur la page ci-dessus le contenu de l’attribut « alt » de la bannière « Portail Famille de la
ville du Moule » indique « Msaplemoule » qui n’est pas du tout pertinent.

Critère 1.6 [A] Chaque image porteuse d'information a-t-elle, si nécessaire, une
description détaillée ?
1. URL : https://www.lemoule.fr/
Sur la page ci-dessus la banière « Maison de service public » devrait contenir un attribut
« longdesc » contenant l’URL marquée sur l’image. Toutefois, renseigner correctement
l’attribut « alt » de l’image permettrait de se passer de cette modification.

Rapport d’audit accessibilité – Juillet 2019 – www.lemoule.fr p. 8 sur 29


Cadres
Donner à chaque cadre en ligne un titre pertinent.

Résultats d’audit
Critère 2. Niveau Conforme Non Non Dérogé Non testé
conforme applicable
1 A X
2 A X
Détail des critères non conformes
Critère 2.1 [A] Chaque cadre en ligne a-t-il un titre de cadre ?
1. Les vidéos sur le côté intégrées depuis Youtube n’ont pas de titre de cadre.
URL : https://www.lemoule.fr/le-contrat-de-ville/
Les vidéos sur le côté intégré depuis Youtube n’ont pas d’attribut « title ». Un attribut
« title » avec comme contenu le titre de la vidéo doit être défini.

Critère 2.2 [A] Pour chaque cadre en ligne ayant un titre de cadre, ce titre de cadre
est-il pertinent ?
Certaines vidéos intégrées depuis Youtube ont un titre non-pertinent.
1. URL : https://www.lemoule.fr/
La vidéo dans l’encart « Moul’ TV » a pour titre « Simple youtube module by
JoomShaper.com » au lieu du titre de la vidéo « Les vœux du Maire »

Rapport d’audit accessibilité – Juillet 2019 – www.lemoule.fr p. 9 sur 29


Couleurs
Ne pas donner l'information uniquement par la couleur et utiliser des contrastes de couleurs
suffisamment élevés.

Résultats d’audit
Critère 3. Niveau Conforme Non Non Dérogé Non testé
conforme applicable
1 A X
2 A X
3 AA X
4 AAA X
Détail des critères non conformes
Critère 3.1 [A] Dans chaque page web, l'information ne doit pas être donnée
uniquement par la couleur. Cette règle est-elle respectée ?
Cette règle n’est pas respectée et crée des confusions sur les fonctions des widgets.
1. URL : https://www.lemoule.fr/
Les liens « Toutes les actualités » ont strictement la même forme que les titres Agenda /
Travaux, incidents, communiqués … L’information de lien n’est pas différenciable.
2. URL : Global à tout le site
Le rouge véhicule aussi bien l’idée de titre que de lien.

Critère 3.2 [A] Dans chaque page web, l'information ne doit pas être donnée
uniquement par la couleur. Cette règle est-elle implémentée de façon pertinente ?
Pour éviter des confusions il faut sélectionner des formes et des couleurs qui évitent le doute entre
les titres et les liens.
1. URL : Global à tout le site
« Signaler un problème sur cette page » est un lien cliquable définit par la couleur et la
réduction de taille du texte. Cette solution diminue la lisibilité et peut entraîner des
confusions car tous les autres liens ont pour définition la couleur bleu et le texte en gras. Il
serait donc pertinent de rendre ce lien identique.

Critère 3.3 [AA] 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) ?
Certaines alliances de couleurs ne permettent pas de garantir un contraste suffisant.
• URL : Global à tout le site
Le bleu « #02A3BF » sur fond blanc ou inversement choisi pour l’ensemble des liens
n’est valide que pour des textes de grande taille. Actuellement cela n’est pas conforme. Il
faudrait foncer ce bleu en sélectionnant par exemple la couleur suivante : « #368093 »

Rapport d’audit accessibilité – Juillet 2019 – www.lemoule.fr p. 10 sur 29


Multimédia
Donner si nécessaire à chaque média temporel une transcription textuelle, des sous-titres
synchronisés et une audiodescription synchronisée pertinents. Donner à chaque média non temporel
une alternative textuelle pertinente. Rendre possible le contrôle de la consultation de chaque média
temporel et non-temporel au clavier et s'assurer de leur compatibilité avec les technologies
d'assistance.

Résultats d’audit
Critère 4. Niveau Conforme Non Non Dérogé Non testé
conforme applicable
1 A X
2 A X
3 A X
4 A X
5 AA X
6 AA X
7 AA X
8 AA X
9 AAA X
10 AAA X
11 AAA X
12 AAA X
13 AAA X
14 AAA X
15 A X
16 A X
17 A X
18 A X
19 AAA X
20 A X
21 A X
22 A X

Rapport d’audit accessibilité – Juillet 2019 – www.lemoule.fr p. 11 sur 29


Détail des critères non conformes
Critère 4.1 [A] Chaque média temporel pré-enregistré a-t-il, si nécessaire, une
transcription textuelle ou une audiodescription (hors cas particuliers) ?
Actuellement sur l’ensemble des pages auditées les seuls médias temporels visibles sont intégrés
depuis Youtube. Toutefois, si l’ajout d’une audiodescription n’est pas possible depuis Youtube, une
transcription textuelle peut être mise en place.

Critère 4.3 [A] Chaque média temporel synchronisé pré-enregistré a-t-il, si


nécessaire, des sous-titres synchronisés (hors cas particuliers) ?
Actuellement sur l’ensemble des pages auditées les seuls médias temporels visibles sont intégrés
depuis Youtube. Pour des questions de coût et de gestion cette règle peut être dérogée pour
l’ensemble des vidéos publiées avant cet audit d’accessibilité. Néanmoins, Youtube permettant de
gérer les sous-titres synchronisés, toutes les nouvelles vidéos venant de ce média et produites par la
ville du Moule devraient avoir cette fonctionnalité.

Critère 4.7 [AA] Chaque média temporel pré-enregistré a-t-il, si nécessaire, une
audiodescription synchronisée (hors cas particuliers) ?
Actuellement sur l’ensemble des pages auditées les seuls médias temporels visibles sont intégrés
depuis Youtube. Pour des questions de coût et de gestion au niveau de la mairie cette règle sera
dérogée.

Critère 4.22 [A] Chaque média temporel et non temporel est-il compatible avec les
technologies d'assistance (hors cas particuliers) ?
Actuellement sur l’ensemble des pages auditées les seuls médias temporels visibles sont intégrés
depuis Youtube. Pour des questions de coût et de gestion au niveau de la mairie cette règle sera
dérogée.

Rapport d’audit accessibilité – Juillet 2019 – www.lemoule.fr p. 12 sur 29


Tableaux
Donner à chaque tableau de données complexe, un résumé et un titre pertinent, identifier clairement
les cellules d'en-tête, utiliser un mécanisme pertinent pour lier les cellules de données aux cellules
d'en-tête. Pour chaque tableau de mise en forme, veiller à sa bonne linéarisation.

Résultats d’audit
Critère 5. Niveau Conforme Non Non Dérogé Non testé
conforme applicable
1 A X
2 A X
3 A X
4 A X
5 A X
6 A X
7 A X
8 A X
Détail des critères non conformes
Critère 5.4 [A] Chaque tableau de données a-t-il un titre ?
Les tableaux saisis par les webmestres n’ont pas de titre via la balise « caption »
1. URL : https://www.lemoule.fr/necrologie
Chaque tableau doit avoir une balise « caption » qui renseigne un titre comme « Nécrologie
du mois de juillet 2018 »
2. URL : https://www.lemoule.fr/restaurants-scolaires
Le titre « Menus du 28 au 29 mai 2019 » devrait être dans une balise « caption » à l’intérieur
du tableau

Critère 5.6 [A] Pour chaque tableau de données, chaque en-tête de colonnes et
chaque en-tête de lignes sont-ils correctement déclarés ?
Les tableaux saisis n’utilisent pas les balises « th » nécessaires pour déclarer les entêtes de
colonnes.
1. URL : https://www.lemoule.fr/restaurants-scolaires
Les jours de la semaine devraient être déclarés dans des balises « th » et pas « td »

Rapport d’audit accessibilité – Juillet 2019 – www.lemoule.fr p. 13 sur 29


Liens
Donner des intitulés de lien explicites, grâce à des informations de contexte notamment, et utiliser
le titre de lien le moins possible.

Résultats d’audit
Critère 6. Niveau Conforme Non Non Dérogé Non testé
conforme applicable
1 A X
2 A X
3 AAA X
4 A X
5 A X
Détail des critères non conformes
Critère 6.1 [A] Chaque lien est-il explicite (hors cas particuliers) ?
Les liens ne sont pas tous explicites.
1. URL : Global à toutes les pages.
Les liens pour « Agrandir » et « Réduire » le texte sont définis avec deux lettres « A » de
taille différentes. Ce n’est pas pertinent.
2. URL : https://www.lemoule.fr/le-contrat-de-ville/
Les liens de pagination sont définis ainsi : « 1 », « 2 », etc. Or, la pagination nécessite un
texte ou un titre comme « Pagination » ou « Page » avant les liens afin de rendre le contexte
compréhensible.

Critère 6.2 [A] Pour chaque lien ayant un titre de lien, celui-ci est-il pertinent ?
Certains attributs « title » sont des redites du texte du lien ou sont vides.
1. URL : https://www.lemoule.fr/
Les liens « Toutes les actualités » en rouge ont pour title « Toutes les actualités ». Cela est
inutile et donc pas pertinent.
2. URL : https://www.lemoule.fr/le-contrat-de-ville/
Les liens de pagination ont des « title » qui sont des redites du texte. Cela est inutile et donc
pas pertinent. Il faudrait éventuellement y mettre du contexte comme « Page 1 », « Page 2 »,
etc.

Critère 6.5 [A] Dans chaque page web, chaque lien, à l'exception des ancres, a-t-il un
intitulé ?
Beaucoup de liens sont vides à cause des choix graphiques.

Rapport d’audit accessibilité – Juillet 2019 – www.lemoule.fr p. 14 sur 29


1. URL : https://www.lemoule.fr/ ou https://www.lemoule.fr/annuaire-de-la-ville/
Les icônes utilisées comme RSS après « Toute l’actualité » sont des liens vides, sans
contenu textuel.
2. URL : https://www.lemoule.fr/vous-etes-un-nouveau-resident ou
https://www.lemoule.fr/tous-les-albums/
Les images cliquables comme « Je souhaite pratiquer une activité culturelle et sportive »
créent des liens vides.

Rapport d’audit accessibilité – Juillet 2019 – www.lemoule.fr p. 15 sur 29


Scripts
Donner si nécessaire à chaque script une alternative pertinente. Rendre possible le contrôle de
chaque code script au moins par le clavier et la souris et s'assurer de leur compatibilité avec les
technologies d'assistance.

Résultats d’audit
Critère 7. Niveau Conforme Non Non Dérogé Non testé
conforme applicable
1 A X
2 A X
3 A X
4 A X
Script alterative sur les animations
5 AAA X
Détail des critères non conformes
Critère 7.1 [A] Chaque script est-il, si nécessaire, compatible avec les technologies
d'assistance ?
Les composants d’interface contrôlés avec les scripts n’ont pas nécessairement d’alternative alors
qu’ils transmettent une information.
1. URL : https://www.lemoule.fr/
Le carrousel d’actualité disparaît quand le script n’est pas chargé. L’ensemble des
informations qui y sont contenues sont perdues. De plus ce composant ne notifie pas ses
changements d’état
2. URL : https://www.lemoule.fr/demarches/naissance/acte-de-naissance
Le composant « Vous êtes » permettant de naviguer dans le site est déclenché par script mais
aucune indication sur le « rôle » n’est donnée.
3. URL : https://www.lemoule.fr/tout-l-agenda/list
Le moteur de recherche de l’agenda entraîne un rechargement de la page pour créer une
navigation mais aucune indication sur le « rôle » ou les valeurs ne sont données.

Critère 7.3 [A] Chaque script est-il contrôlable par le clavier et la souris (hors cas
particuliers) ?
Certains scripts qui créent une navigation ne sont pas contrôlables par le clavier
1. URL : https://www.lemoule.fr/nous-contacter
Le composant « Vous êtes » se déclenche dès le changement de valeur. Il est impossible
pour quelqu’un qui navigue au clavier de choisir sa page.
2. URL : https://www.lemoule.fr/tout-l-agenda/list
Le filtre de recherche dans l’agenda se déclenche dès le changement de valeur. Il est
impossible pour quelqu’un qui filtre au clavier de finir sa sélection.

Rapport d’audit accessibilité – Juillet 2019 – www.lemoule.fr p. 16 sur 29


Critère 7.4 [A] Pour chaque script qui initie un changement de contexte, l'utilisateur
est-il averti ou en a-t-il le contrôle ?
Certains scripts sont déclenchés automatiquement et recharge complètement la page.
1. URL : https://www.lemoule.fr/tout-l-agenda/list
Le composant « Vous êtes » et le filtre de recherche se déclenchent dès le changement de
valeur sans alerte. Un bouton devrait contrôler les changements d’état.

Rapport d’audit accessibilité – Juillet 2019 – www.lemoule.fr p. 17 sur 29


Éléments obligatoires
Vérifier que chaque page web a un code source valide selon le type de document, un titre pertinent
et une indication de langue par défaut. Vérifier que les balises ne sont pas utilisées uniquement à
des fins de présentation, que les changements de langues et de direction de sens de lecture sont
indiqués.

Résultats d’audit
Critère 8. Niveau Conforme Non Non Dérogé Non testé
conforme applicable
1 A X
2 A X
3 A X
4 A X
5 A X
6 A X
7 AA X
8 AA X
9 A X
10 A X
Détail des critères non conformes
Critère 8.2 [A] Pour chaque page web, le code source est-il valide selon le type de
document spécifié (hors cas particuliers) ?
Des blocs sont construits sans correspondre aux logiques d’imbrication conforme des balises
utilisées et les mauvais attributs sont utilisés sur les balises.
1. URL : https://www.lemoule.fr/
Les attributs « target » ou « href » sont utilisés sur des balises « div » alors qu’elles
devraient l’être sur des balises « a »
2. URL : https://www.lemoule.fr/necrologie
Des balises « p » sont fermées alors qu’elles n’ont pas été ouvertes

Critère 8.6 [A] Pour chaque page web ayant un titre de page, ce titre est-il pertinent ?
Les pages qui changent en fonction du contexte ne changent pas leur titre de page.
1. URL : https://www.lemoule.fr/rechercher?searchword=moule&searchphrase=all
Cette page est le résultat de la recherche « moule » mais le titre est juste « Rechercher ». Il
serait pertinent d’écrire « Résultat de recherche — « moule » »
2. URL : https://www.lemoule.fr/tout-l-agenda/list
Les résultats de l’agenda changent en fonction de la date sélectionnée dans le filtre hors le

Rapport d’audit accessibilité – Juillet 2019 – www.lemoule.fr p. 18 sur 29


titre est toujours « Tout l’agenda ». Il serait pertinent d’écrire « Agenda du 11 mars 2019 au
30 juillet 2019 » si c’est la sélection de l’utilisateur.

Critère 8.9 [A] 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 ?
Certaines balises hors « div, span et table » sont utilisées uniquement pour charger un composant
d’interface
1. URL : https://www.lemoule.fr/annuaire-de-la-ville/
Les icônes sont intégrées via une balise « i » qui doit être utilisée pour mettre en italique du
contenu. Il faut remplace ces balises « i » par une balise « span ».

Rapport d’audit accessibilité – Juillet 2019 – www.lemoule.fr p. 19 sur 29


Structuration de l’information
Utiliser des titres, des listes, des abréviations et des citations pour structurer l'information. S'assurer
que la structure du document est cohérente.

Résultats d’audit
Critère 9. Niveau Conforme Non Non Dérogé Non testé
conforme applicable
1 A X
2 A X
3 A X
4 AAA X
5 AAA X
6 A X
Détail des critères non conformes
Critère 9.1 [A] Dans chaque page web, l'information est-elle structurée par
l'utilisation appropriée de titres ?
Les titres ne s’enchaînent pas de façon cohérente. Il y a des passages de titre 1 à 3 sur certaines
pages.
1. URL : https://www.lemoule.fr/
Le titre 3 « Travaux, incidents, communiqués » vient juste après le titre 1 « Agenda ». Le
titre 2 est manquant.
2. URL : globalement sur toutes les pages internes
Le premier titre de la page est un titre 2. Le titre 1 est manquant

Critère 9.2 [A] Dans chaque page web, la structure du document est-elle cohérente ?
L’arborescence du document n’est pas cohérente.
1. URL : https://www.lemoule.fr/
Le titre 1 de la page est « Agenda » au lieu de « Accueil » et le titre 2 « En un clic » se
retrouve dans la catégorie « Agenda » au lieu d’être totalement dissocié.
2. URL : https://www.lemoule.fr/le-contrat-de-ville/
Le titre des vidéos latérales apparaissent comme appartenant à la catégorie
« Renouvellement urbain et cadre de vie » qui est le dernier article listé dans la pagination
du contenu principal

Critère 9.3 [A] Dans chaque page web, chaque liste est-elle correctement
structurée ?
Les listes ne sont pas systématiquement structurées avec les balises adéquates ou les attributs ARIA
correspondant

Rapport d’audit accessibilité – Juillet 2019 – www.lemoule.fr p. 20 sur 29


1. URL : https://www.lemoule.fr/
Les liens listés dans le bloc « Travaux, incidents, communiqués » sont structurés avec des
balises « div » sans attributs ARIA alors que le bloc « En un clic » adjacent est correctement
structuré.
2. URL : globalement pour les listings de contenu (https://www.lemoule.fr/tout-l-agenda/list)
La liste des événements ou des articles qui est paginable doit contenir les attributs ARIA ou
être construite à partir des balises de liste.

Rapport d’audit accessibilité – Juillet 2019 – www.lemoule.fr p. 21 sur 29


Présentation de l’information
Utiliser des feuilles de styles pour contrôler la présentation de l'information. Vérifier l'effet de
l'agrandissement des taille des caractères sur la lisibilité. S'assurer que les liens sont correctement
identifiables, que la prise de focus est signalée, que l'interlignage est suffisant et donner la
possibilité à l'utilisateur de contrôler la justification des textes. S'assurer que les textes cachés sont
correctement restitués et que l'information n'est pas donnée uniquement par la forme ou la position
d'un élément.

Résultats d’audit
Critère 10. Niveau Conforme Non Non Dérogé Non testé
conforme applicable
1 A X
2 A X
3 A X
4 AA X
5 AA X
6 A X
7 A X
8 AAA X
9 AAA X
10 AAA X
11 AAA X
12 AAA X
13 A X
14 A X
15 A X
Détail des critères non conformes
Critère 10.2 [A] Dans chaque page web, le contenu visible reste-t-il présent lorsque
les feuilles de styles sont désactivées ?
Du texte disparaît quand les feuilles de styles sont désactivées.
1. URL: https://www.lemoule.fr/
L’information « Moul’info » disparaît quand les feuilles de style sont désactivées

Critère 10.4 [AA] Dans chaque page web, le texte reste-t-il lisible lorsque la taille des
caractères est augmentée jusqu'à 200%, au moins (hors cas particuliers) ?
Certains éléments sont inutilisables quand la taille est augmentée.

Rapport d’audit accessibilité – Juillet 2019 – www.lemoule.fr p. 22 sur 29


1. URL : Global à toutes les pages
Le menu déroulant sort de l’écran en fonction du nombre d’item qui le compose certains
items sont inatteignables. Il est inutilisable

Critère 10.7 [A] Dans chaque page web, pour chaque élément recevant le focus, la
prise de focus est-elle visible ?
La propriété « outline » a été globalement désactivée sur le site. Il est impossible de voir les prises
de focus lors d’une navigation au clavier

Critère 10.14 [A] Dans chaque page web, l'information ne doit pas être donnée
uniquement par la forme, taille ou position. Cette règle est-elle respectée ?
Dans le menu de navigation quand la page concernant un lien de navigation est active, le lien
devient rouge. Aucune autre indication n’est donnée pour spécifier son activation.

Rapport d’audit accessibilité – Juillet 2019 – www.lemoule.fr p. 23 sur 29


Formulaires
Associer pour chaque formulaire chacun de ses champs à son étiquette, grouper les champs dans des
blocs d'informations de même nature, structurer les listes de choix de manière pertinente, donner à
chaque bouton un intitulé explicite. Vérifier la présence d'aide à la saisie, s'assurer que le contrôle
de saisie est accessible et que l'utilisateur peut contrôler les données à caractère financier, juridique
ou personnel.

Résultats d’audit
Critère 11. Niveau Conforme Non Non Dérogé Non testé
conforme applicable
1 A X
2 A X
3 AA X
4 A X
5 A X
6 A X
7 A X
8 A X
9 A X
10 A X
11 AA X
12 AA X
13 AAA X
14 AAA X
15 AAA X
Détail des critères non conformes
Critère 11.1 [A] Chaque champ de formulaire a-t-il une étiquette ?
Tous les champs de formulaire n’ont pas d’étiquette ou d’attribut « title ».
1. URL : Globale sur toutes les pages
Le moteur de recherche et le formulaire de « Newsletter » n’ont pas d’étiquette sur leurs
champs
2. URL : https://www.lemoule.fr/nous-contacter
Aucun des champs du formulaire n’est relié à une étiquette via la balise « label »

Critère 11.5 [A] Dans chaque formulaire, les informations de même nature sont-elles
regroupées, si nécessaire ?
Les informations de même nature ne sont pas regroupées.

Rapport d’audit accessibilité – Juillet 2019 – www.lemoule.fr p. 24 sur 29


1. URL : https://www.lemoule.fr/signaler
La construction du message se fait sur plusieurs champs « Objet », « Page », « Message » et
ne sont pas regroupés.

Critère 11.9 [A] Dans chaque formulaire, l'intitulé de chaque bouton est-il pertinent ?
Les intitulés des boutons ne sont pas pertinents
1. URL : Global à toutes les pages
Le bouton du moteur de recherche est vide

Critère 11.10 [A] Dans chaque formulaire, le contrôle de saisie est-il utilisé de
manière pertinente ?
Les champs obligatoires ne sont pas signalés par les attributs adéquats.
1. URL : https://www.lemoule.fr/signaler
L’attribut « required » est manquant sur les champs obligatoires

Critère 11.11 [AA] Dans chaque formulaire, le contrôle de saisie est-il accompagné, si
nécessaire, de suggestions facilitant la correction des erreurs de saisie ?
Les messages d’erreur ne sont pas pertinents
1. URL : https://www.lemoule.fr/nous-contacter
Quand l’adresse mail est vide le message est « Votre adresse email est vide ». Ce même
message est utilisé si le champ email ne contient pas une valeur valide.

Critère 11.12 [AA] Pour chaque formulaire, les données à caractère financier,
juridique ou personnel peuvent-elles être modifiées, mises à jour ou récupérées par
l'utilisateur ?
Critère non applicable car une erreur sur les formulaires empêche leur soumission complète.

Rapport d’audit accessibilité – Juillet 2019 – www.lemoule.fr p. 25 sur 29


Navigation
Faciliter la navigation dans un ensemble de pages par au moins deux systèmes de navigation
différents (menu de navigation, plan du site ou moteur de recherche), un fil d'Ariane et l'indication
de la page active dans le menu de navigation. Identifier les groupes de liens importants et la zone de
contenu et donner la possibilité de les éviter par des liens de navigation interne. S'assurer que l'ordre
de tabulation est cohérent et que la page ne comporte pas de piège au clavier.

Résultats d’audit
Critère 12. Niveau Conforme Non Non Dérogé Non testé
conforme applicable
1 AA X
2 AA X
3 AA X
4 AA X
5 AA X
6 AA X
7 AA X
8 AAA X
9 AAA X
10 A X
11 A X
12 AAA X
13 A X
14 A X
Détail des critères non conformes
Critère 12.10 [A] Dans chaque page web, les groupes de liens importants (menu,
barre de navigation…) et la zone de contenu sont-ils identifiés ?
L’API ARIA n’est pas implémentée sur le site

Critère 12.11 [A] Dans chaque page web, des liens d'évitement ou d'accès rapide aux
groupes de liens importants et à la zone de contenu sont-ils présents (hors cas
particuliers) ?
Il n’y a pas de lien d’évitement ou d’accès rapide sur le site

Critère 12.13 [A] Dans chaque page web, l'ordre de tabulation est-il cohérent ?
L’ordre de tabulation n’est pas cohérent. La tabulation passe du nom du site « Ville du Moule » aux
liens de réduction et d’agrandissement du contenu sans passer par les réseaux sociaux.

Rapport d’audit accessibilité – Juillet 2019 – www.lemoule.fr p. 26 sur 29


Consultation
Vérifier que l'utilisateur a le contrôle des procédés de rafraîchissement, des changements brusques
de luminosité, des ouvertures de nouvelles fenêtres et des contenus en mouvement ou clignotants.
Indiquer lorsqu'un contenu s'ouvre dans une nouvelle fenêtre et donner des informations relatives à
la consultation des fichiers en téléchargement. Ne pas faire dépendre l'accomplissement d'une tâche
d'une limite de temps sauf si elle est essentielle et s'assurer que les données saisies sont récupérées
après une interruption de session authentifiée. S'assurer que les expressions inhabituelles et le
jargon sont explicités. Proposer des versions accessibles ou rendre accessibles les documents en
téléchargement.

Résultats d’audit
Critère 13. Niveau Conforme Non Non Dérogé Non testé
conforme applicable
1 A X
2 A X
3 A X
4 AAA X
5 AAA X
6 A X
7 A X
8 A X
9 AAA X
10 AAA X
11 A X
12 A X
13 AAA X
14 AAA X
15 A X
16 AAA X
17 A X
Détail des critères non conformes
Critère 13.2 [A] Dans chaque page web, pour chaque ouverture de nouvelle fenêtre,
l'utilisateur est-il averti ?
Certaines ouvertures vers une nouvelle fenêtre ne sont pas spécifiées à l’utilisateur.
1. URL : https://www.lemoule.fr/le-contrat-de-ville/
Le lien « Voir les vidéos » renvoie sur Youtube. L’utilisateur ne sait pas que ce lien ouvrira
une nouvelle fenêtre. Il faudrait l’indiquer avec un message « (nouvelle fenêtre) »

Rapport d’audit accessibilité – Juillet 2019 – www.lemoule.fr p. 27 sur 29


2. URL : https://www.lemoule.fr/
Les bandeaux qui renvoient vers le « Portail famille » et la « MSAP » n’indiquent pas
qu’une nouvelle fenêtre sera ouverte. Il faudrait l’indiquer dans l’attribut du lien « Ouvre
une nouvelle fenêtre vers le portail famille de la ville du Moule »

Critère 13.7 [A] Dans chaque page web, chaque document bureautique en
téléchargement possède-t-il, si nécessaire, une version accessible ?
Tous les documents proposés ne sont pas accessibles et ne proposent pas d’alternative accessible.
1. URL : https://www.lemoule.fr/le-contrat-de-ville/887-appel-a-projets-2019
Le document à télécharger « Appel à projet 2019 » en PDF ne respecte pas certains critères
des documents accessibles, notamment les critères suivants :
- [Critère Doc 9.1 – A] ou Dans chaque page, l’information est-elle structurée par
l’utilisation appropriée de titres ?
- [Critère Doc 9.5 – A] Dans chaque page, les éléments de structure ne doivent pas être
utilisés uniquement à des fins de présentation, cette règle est-elle respectée ?
2. URL : https://www.lemoule.fr/vie-citoyenne/conseil-municipal/les-comptes-rendus
Les comptes rendus municipaux sont des documents scannés sans alternative accessible.

Critère 13.17 [A] Dans chaque page web, chaque contenu en mouvement ou
clignotant est-il contrôlable par l'utilisateur ?
Les carrousels n’ont pas de moyen de contrôle pour stopper et relancer le mouvement.
1. URL : https://www.lemoule.fr/
Le grand carrousel de la page d’accueil se lance automatiquement et ne peut être contrôlé
par l’utilisateur qui souhaiterait le stopper.

Rapport d’audit accessibilité – Juillet 2019 – www.lemoule.fr p. 28 sur 29


Conclusion
Avis de l’inspecteur
Pour accéder au label e-accessible, 50 critères essentiels du niveau simple A doivent être validés. Le
taux de non-conformité du site indique clairement que le site n’est pas accessible et présente des
manquements qui sont dus aussi bien à la méthode de construction qu’au besoin de formation des
webmasters pour la gestion de contenus dans le cadre de l’accessibilité numérique. Les réparations
pour la mise en conformité sont lourdes et risque d’être onéreuses, mais restent possible.
Toutefois certains critères ont été placés non conforme parce qu’ils échouent sur une ou 2 pages
alors que globalement la directive a été suivie. C’est notamment le cas pour le critère « 1.1 –
Chaque image a-t-elle une alternative textuelle » ce qui montre que l’implémentation des critères
reste techniquement possible mais demandera une réécriture de l’ensemble des modèles de pages.

Priorisation des réparations


Dans un premier temps, il faudra axer les réparations sur l’ensemble des critères niveau « A » en
priorisant les 50 critères essentiels au niveau simple A du label e-accessible.
Certains critères qui étaient non applicables seront alors de fait à rendre conforme comme les
critères liés à la transcription textuelle des contenus multimédias.
Les grands axes à prendre en compte dans un premier temps sont :
1. Les critères liés à la structuration du contenu
2. Les critères liés aux couleurs
3. Les critères liés aux formulaires
4. Les critères liés aux images
5. Les critères liés aux tableaux
6. Les critères liés aux liens
7. Les critères de consultation
Mettre en conformité ces premiers axes permettront d’améliorer grandement l’accessibilité sans
repenser complètement votre plateforme.

Rapport d’audit accessibilité – Juillet 2019 – www.lemoule.fr p. 29 sur 29

Vous aimerez peut-être aussi