Le but de ce document est d’évaluer le niveau d’accessibilité du site Contre-visite Plateforme des Accrédités.
2. Référentiel
Le référentiel utilisé pour l’audit est le R.G.A.A. version 4.1.2, publié par l’état français.
Ce référentiel s’appuie sur les préconisations internationales W.C.A.G. 2.1 (Web Content Accessibility Guidelines) niveau AA.
Il est complètement compatible avec les W.C.A.G. 2.1 niveau AA, ainsi qu’avec la norme européenne EN 301 549 V2.1.2.
(Les W.C.A.G. sont également repris dans l’A.D.A. (American with Disability Act).
Le référentiel R.G.A.A. version 4.1.2 fournit une méthode d’application et d’évaluation des préconisations internationales W.C.A.G. 2.1, plus efficace à mettre en œuvre lors des audits, et plus facile à exploiter pour les personnes qui auront ensuite à prendre en charge les correctifs.
Le R.G.A.A. se décline en treize thématiques :
Images
Cadres
Couleurs
Multimédia
Tableaux
Liens
Scripts
Éléments obligatoires
Structuration de l'information
Présentation de l'information
Formulaires
Navigation
Consultation
3. Périmètre du test
Le périmètre du test est constitué des pages suivantes :
Dans l’audit, il pourra être fait référence à la notion de masquage accessible. Cette technique consiste à enrichir la page de contenus textuels, qui seront visuellement cachés, mais qui resteront exploitables par les outils d’aide technique tels que les synthèses vocales.
Ceci a pour but, lorsque des informations additionnelles sont nécessaires aux utilisateurs de synthèse vocale pour la bonne compréhension de la page, de les leur procurer sans modifier l’aspect visuel de la page.
Un exemple éprouvé de classe CSS permettant de mettre en place cette fonctionnalité est disponible sous l’url :
Ce style redéfinit la classe « sr-only », initialement proposée par bootstrap, mais peut être adaptée à n’importe quel contexte de développement.
5. Taux de contraste
La combinaison de deux couleurs, (l’une utilisée comme couleur de texte, et l’autre utilisée comme couleur de fond, ou réciproquement) produit un taux de contraste mesurable.
Le R.G.A.A. version 4.1.2 recommande des taux de contrastes qui vont dépendre de la taille des caractères, de la graisse de la police, et du niveau d’accessibilité souhaité :
Taux de contraste minimum
Le texte et le texte en image sans effet de graisse d’une taille restituée inférieure à 24px.
4.5:1
Le texte et le texte en image en gras d’une taille restituée inférieure à 18,5px.
4.5:1
Le texte et le texte en image sans effet de graisse d’une taille restituée supérieure ou égale à 24px.
3:1
Le texte et le texte en image en gras d’une taille restituée supérieure ou égale à 18,5px.
3:1
Les composants d’interface ou les éléments graphiques porteurs d’informations
3:1
Note : Bien que cela puisse restreindre un tout petit peu la palette des nuances disponibles, on voit qu’en s’imposant un taux de contraste minimum de 4.5:1 on s’assure d’être conforme, quelle que soit la taille et la graisse de police utilisées.
6. Navigation sur mobile
Les périphériques Android et IOS intègrent nativement une synthèse vocale, qui peut être activée depuis les paramètres du périphérique.
Pour parcourir les écrans, l’utilisateur de synthèse vocale aura deux modes principaux d’interaction :
La navigation séquentielle
La navigation « au doigt » ou « sous le doigt »
Le premier mode est la navigation séquentielle, qui consiste à balayer l’écran de gauche à droite. Chaque balayage vocalise les données textuelles de l’élément suivant, dans l’ordre dans lequel les éléments ont été insérés dans la page. Le balayage de droite à gauche fait la même chose mais en sens inverse.
Ce mode de navigation, permet de lister à coup sûr, tous les éléments de la page. Ceci est très pertinent en mode « découverte », pour découvrir de façon exhaustive tous les éléments que contient la page. L’inconvénient est que sur une page volumineuse dans laquelle l’élément que recherche l’internaute est situé plutôt vers la fin de la page, cela peut être long et fastidieux.
Un deuxième mode que nous appelons « navigation au doigt » ou « sous le doigt », va vocaliser ce qui se trouve sous le doigt à mesure qu’on le déplace sur l’écran. Ce premier mode est intéressant pour une personne non voyante qui connaît l’écran dans lequel elle se trouve, et qui sait à peu près ou est positionné l’élément qu’elle cherche.
L’inconvénient de ce mode de navigation est que l’on ne vocalisera jamais un élément sur lequel on n’a pas posé le doigt (par exemple un élément ne proposant qu’une surface d’affichage minime à côté de laquelle on risque fort de passer) et qu’il est moins efficace sur une page inconnue de l’utilisateur.
Il est important de s’assurer que la construction de la page interagit correctement avec ces deux modes de navigation.
B. Synthèse
1. Résultats
Le taux de conformité par critère du site est de 51% et le taux moyen de conformité du service en ligne est de 68%.
L'audit d'accessibilité initial de France Assureurs révèle un taux d'accessibilité à 41%.
Après corrections de certaines anomalies, l'audit de contrôle révèle un taux à 51% rendant le site partiellement conforme.
Les principales entraves à la navigation des personnes en situation de handicap seront les composants scriptes, la structure de page qui ne permet pas de se repérer correctement dans le site.
Les intitulés de liens sont également non conformes.
Certains contenus comme les contenus multimédias ne seront pas accessibles aux personnes non voyante et sourde.
Des contenus qui semblent être gérés par des tiers sont problématiques sur le site. Il s'agit de :
La modale des cookies
Le fil tweeter
la carte interactive
Les lecteurs audios et vidéos
Ces éléments devraient avoir une attention particulière.
D'autres points permettent d'améliorer rapidement le taux :
Les images,
La structuration de l'information,
Les éléments obligatoires,
Les formulaires.
Il est à noter que des points positifs facilitent la navigation de certains utilisateurs. Par exemple la gestion des messages d'erreurs et la possibilité d'augmenter la taille des caractères sont un point très important pour les personnes souffrant de trouble cognitif.
1. Images
Critère 1.1 - Chaque image porteuse d’information a-t-elle une alternative textuelle ?
Image <img> porteuse d'information sans alternative textuelle
12/06/2025
KO Urbilog - Assurance emploie. Absence d'alternatives sur des images informatives.
Chaque image porteuse d’information doit avoir une alternative textuelle transmettant une information équivalente aux aides techniques telles que les synthèses vocales.
Assurance emploie : les formations :
L'image présente dans l'élément de fermeture des modales des formations doit avoir un attribut « alt » avec comme valeur « Fermer ». (voir thématique 7 pour les modales des formations)
Figure n°1 : Image <img> porteuse d'information sans alternative textuelle (Assurance emploi : les formations)Figure n°2 : Image <img> porteuse d'information sans alternative textuelle (Assurance emploie : les formations) (Code)
Critère 1.2 - Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
Image <img> décorative non ignorée par les technologies d'assistance
12/06/2025
OK Urbilog
Chaque image décorative, c’est-à-dire dont le contenu graphique n’est pas nécessaire pour la compréhension de la page, doit être ignoré par la synthèse vocale afin de ne pas vocaliser une information inutile ou parasite qui alourdit la navigation auditive.
Modales de cookies :
L’image décorative présentant l'émoticône de doigt pointant vers la gauche doit avoir un attribut « alt » bien présent, mais vide, dans le but d'être ignorée par les synthèses vocales.
Dans le cas où l'attribut « alt » ne peut être laissé vide pour des raisons de référencement, on pourra ajouter un attribut « aria-hidden » avec la valeur « true » ou « role="presentation" ».
Modales des formations (Page Assurance emploie : les formations) :
Les images présentes dans les modales des formations au côté des éléments textuels doivent avoir un attribut « alt » bien présent, mais vide, dans le but d'être ignorée par les synthèses vocales.
Dans le cas où l'attribut « alt » ne peut être laissé vide pour des raisons de référencement, on pourra ajouter un attribut « aria-hidden » avec la valeur « true » ou « role="presentation" ».
Figure n°3 : Image <img> décorative non ignorée par les technologies d'assistance (Modales de cookies)Figure n°4 : Image <img> décorative non ignorée par les technologies d'assistance (Modales de cookies) (Code)Figure n°5 : Image <img> décorative non ignorée par les technologies d'assistance (Modales des formations (Page Assurance emploie : les formations))Figure n°6 : Image <img> décorative non ignorée par les technologies d'assistance (Modales des formations (Page Assurance emploie : les formations)) (Code)
Critère 1.3 - Pour chaque image porteuse d’information ayant une alternative textuelle, cette alternative est-elle pertinente (hors cas particuliers) ?
Alternative textuelle non pertinente sur une image <img>
12/06/2025
OK Urbilog
Pied de page :
L'image du logo de France Assureurs doit plutôt avoir un attribut « alt » avec comme valeur « France Assureurs Faire avancer la société en confiance ».
Figure n°7 : Alternative textuelle non pertinente sur une image <img> (Pied de page)Figure n°8 : Alternative textuelle non pertinente sur une image <img> (Pied de page) (Code)
Critère 1.4 - Pour chaque image utilisée comme CAPTCHA ou comme image-test, ayant une alternative textuelle, cette alternative permet-elle d’identifier la nature et la fonction de l’image ?
Non applicable
Critère 1.5 - Pour chaque image utilisée comme CAPTCHA, une solution d’accès alternatif au contenu ou à la fonction du CAPTCHA est-elle présente ?
Non applicable
Critère 1.6 - Chaque image porteuse d’information a-t-elle, si nécessaire, une description détaillée ?
Non applicable
Critère 1.7 - Pour chaque image porteuse d’information ayant une description détaillée, cette description est-elle pertinente ?
Non applicable
Critère 1.8 - Chaque image texte porteuse d’information, en l’absence d’un mécanisme de remplacement, doit si possible être remplacée par du texte stylé. Cette règle est-elle respectée (hors cas particuliers) ?
Non applicable
Critère 1.9 - Chaque légende d’image est-elle, si nécessaire, correctement reliée à l’image correspondante ?
Non applicable
2. Cadres
Critère 2.1 - Chaque cadre a-t-il un titre de cadre ?
"Page non présente en production depuis l'audit". Signalé dans les correctifs effectués. Le critère devient alors non applicable pour la page "nos positions".
Chaque cadre doit posséder un attribut « title » indiquant le contenu du cadre.
Nos positions : Présidentielle 2022 :
Le cadre de podcast n’a pas d’attribut « title ». Un exemple de titre attendu est « Les Décrypteurs en podcast ».
Figure n°9 : Cadre sans titre (Nos positions : Présidentielle 2022)Figure n°10 : Cadre sans titre (Nos positions : Présidentielle 2022) (Code)
Critère 2.2 - Pour chaque cadre ayant un titre de cadre, ce titre de cadre est-il pertinent ?
Conforme
3. Couleurs
Critère 3.1 - Dans chaque page web, l’information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?
Aucune information ne doit être donnée uniquement par la couleur.
Il faut ajouter une icône, ou un traitement visuel ne reposant pas sur la couleur (graisse, soulignement ou autre) ou encore un attribut “title” afin d’identifier l’information autrement que par la couleur.
Dans le cas où la couleur transmet une information sur l'état de l'élément, un attribut « aria-* » (« aria-selected » / « aria-checked » / « aria-current » / ...) devra être associée.
Exemple :
Pour un fil d’Ariane ou d’un menu de navigation, l’étape en cours identifiée par la couleur doit comporter un attribut "aria-current" avec la valeur "page" sur le lien actif.
Modales de cookies :
Dans les modales des cookies, l’information est transmise uniquement par la couleur.
En l'occurrence, il y a un passage de texte présent dans les deux modales : "Votre choix est conservé pendant 12 mois. Vous pouvez changer d’avis à tout moment en cliquant sur l’icône rouge en bas à gauche de chaque page du site.".
Celui-ci identifie un bouton permettant d'accéder aux modales à tout moment, via une information donnée par la couleur et la position (voir critère 10.9).
L'information sur la position peut être suffisante pour identifier le bouton dans le cas d'un problème de perception des couleurs.
Néanmoins, cette information ne sera pas accessible pour des personnes non ou mal voyantes.
Il faudra donc que le bouton soit identifié nommément dans le texte, par exemple : "Votre choix est conservé pendant 12 mois. Vous pouvez changer d’avis à tout moment en accédant aux cookies via le bouton "Gérez vos préférences en matière de cookies et données personnelles" (icône de main)."
Figure n°11 : Information transmise uniquement par la couleur (Modales de cookie)Figure n°12 : Information transmise uniquement par la couleur (Modales de cookie)Figure n°13 : Information transmise uniquement par la couleur (Modales de cookie)Figure n°14 : Information transmise uniquement par la couleur (Modales de cookie) (Code)
Information transmise uniquement par la couleur (légende de la carte et alternative sous forme de liste)
Dans la page "Assurance emploie : les formations", l’information est transmise uniquement par la couleur dans la légende de la carte interactive et son alternative sous forme de liste, il faudrait éventuellement ajouter un texte en masquage accessible dans la liste a minima, indiquant le domaine de formation concerné.
De cette façon, les utilisateurs de lecteur d'écran pourront avoir l'information.
Idéalement, il faudrait par ailleurs, pour que les utilisateurs avec un trouble de la perception des couleurs, la liste et même la carte ainsi que la légende devraient présenter une indication autre que la couleur, comme la première lettre du domaine de formation, présente au côté de la couleur en indice ou en exposant par exemple.
Cet élément pourra être masqué aux technologies d'assistance via un attribut aria-hidden="true", afin d'éviter des vocalisations peu claires.
Figure n°15 : Information transmise uniquement par la couleur (légende de la carte et alternative sous forme de liste)
Critère 3.2 - 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) ?
Contraste inférieur à 4.5:1 entre le texte et son arrière-plan
12/06/2025
KO Urbilog
Modale des cookies présentant toujours l'anomalie.
Les pages comportant des tags (exemple : le tag "commercial" dans la page listant les formations) restent non conformes en raison du taux de contraste insuffisant de certains encadrés de tag.
Le contraste requis entre la couleur du texte et celle de son arrière-plan, est fonction de la taille des caractères et de la graisse de la police.
Dans le(s) cas suivant(s), le contraste minimum attendu est 4.5:1. (Pour plus de précision, se référer à la section 5 - Taux de contraste de ce document).
Modales de cookies :
Le texte présent dans l'accordéon de présentation d'Axeptio possède un taux de contraste insuffisant avec son arrière-plan.
Il est de seulement 4:1.
Le texte du lien "Découvrez Axeptio" un taux de contraste insuffisant avec son arrière-plan au survol de la souris.
Il est de seulement 1:1.
Modale de paramétrage des cookies :
Le taux de contraste entre le texte "?" et son arrière-plan est de seulement 3.1:1.
Entête et pied de page :
Plusieurs textes ne possèdent pas un taux de contraste suffisant avec leur arrière-plan.
Ils sont de 3:1, 4.2:1 et 2.2:1 respectivement selon les textes et leur état de base, au survol de la souris ou au focus du clavier.
On retrouve des problèmes de contraste similaire dans les contenus principaux des pages du périmètre.
Assurance emploie : les formations :
Plusieurs textes ne possèdent pas un taux de contraste suffisant avec leur arrière-plan.
Exemple de recherche :
Les options du champ de sélection "Trier par" ne possèdent pas un taux de contraste suffisant avec leur arrière-plan.
Figure n°16 : Taux de contraste insuffisant (3.1:1) (Modale de paramétrage des cookies)Figure n°17 : Taux de contraste insuffisant (4:1) (Modales de cookies)Figure n°18 : Taux de contraste insuffisant (1:1) (Modales de cookies)Figure n°19 : Taux de contraste insuffisant (3:1) (Entête de page)Figure n°20 : Taux de contraste insuffisant (4.2:1) (Entête de page)Figure n°21 : Taux de contraste insuffisant (3:1) (Entête de page)Figure n°22 : Taux de contraste insuffisant (3:1) (Pied de page)Figure n°23 : Taux de contraste insuffisant (2.2:1) (Pied de page)Figure n°24 : Taux de contraste insuffisant (2.8:1) (Assurance emploie : les formations)Figure n°25 : Taux de contraste insuffisant (2.3:1) (Assurance emploie : les formations)Figure n°26 : Taux de contraste insuffisant (2.3:1) (Assurance emploie : les formations)Figure n°27 : Taux de contraste insuffisant (3.7:1) (Exemple de recherche)
Contraste inférieur à 4.5:1 entre le texte et son arrière-plan (Fil Twitter)
13/06/2025
OK Urbilog
Fil Twitter supprimé, cette anomalie n'est donc plus présente.
Le contraste requis entre la couleur du texte et celle de son arrière-plan, est fonction de la taille des caractères et de la graisse de la police.
Dans le(s) cas suivant(s), le contraste minimum attendu est 4.5:1. (Pour plus de précision, se référer à la section 5 - Taux de contraste de ce document).
Accueil - Fil Twitter :
Les taux de contraste sont insuffisants entre différents textes présents dans le fil Twitter et leur arrière-plan.
Figure n°28 : Taux de contraste insuffisant (3.3:1)Figure n°29 : Taux de contraste insuffisant (3.0:1)Figure n°30 : Taux de contraste insuffisant (3.2:1)
Contraste inférieur à 4.5:1 entre le texte et son arrière-plan (Image d'arrière-plan)
12/06/2025
OK Urbilog
Page refondue et éléments supprimés. L'anomalie n'est donc plus présente.
Le contraste requis entre la couleur du texte et celle de son arrière-plan, est fonction de la taille des caractères et de la graisse de la police.
Dans le(s) cas suivant(s), le contraste minimum attendu est 4.5:1. (Pour plus de précision, se référer à la section 5 - Taux de contraste de ce document).
Accueil :
Dans le carrousel, les taux de contraste ne sont pas suffisants de façon consistante, à cause de différences de couleurs dans l'image d'arrière-plan.
Il est recommandé, dans ce genre de cas, d'appliquer un aplat de couleur ayant un contraste suffisant avec le texte, pour éviter ce problème.
Figure n°31 : Taux de contraste non suffisant de façon consistante (Min 2:1 et 1:1)Figure n°32 : Taux de contraste non suffisant de façon consistante (Min 1.2:1)
Critère 3.3 - 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) ?
Contraste inférieur à 3:1 entre un composant d’interface et son arrière-plan
12/06/2025
KO Urbilog
Modale des cookies présentant toujours l'anomalie. Idem pour les boutons de navigation des carrousels.
Modale de paramétrage des cookies :
Les couleurs utilisées entre le composant d’interface des boutons-bascule et leur fond contigüe ne produisent pas un taux de contraste suffisant.
Il est de seulement 2.2:1 dans l'état décoché.
Celui-ci doit être au minimum de 3:1.
Dans le cas où la modification de couleur n’est pas envisageable, un mécanisme alternatif doit permettre la modification des couleurs pour atteindre le niveau de contraste minimum requis.
Assurance protège : l’assurance en pratique pour les particuliers :
Les onglets des carrousels ne possèdent pas un taux de contraste suffisant par rapport à l'arrière-plan.
Idem dans les pages "Assurance finance : Les programmes d’investissements", "Nos positions : Présidentielle 2022", "Nos chiffres clés : Données globales" et "Article (une actualité)".
Article (une actualité) :
Le bouton d'impression de la page ne possède pas un taux de contraste suffisant par rapport à l'arrière-plan.
Figure n°33 : Taux de contraste insuffisant (2.2:1) (Modale de paramétrage des cookies)Figure n°34 : Taux de contraste insuffisant (2.2:1 et 1.4:1) (Assurance protège : l’assurance en pratique pour les particuliers)Figure n°35 : Taux de contraste insuffisant (2.3:1) (Article (une actualité))
Contraste inférieur à 3:1 entre un composant d’interface et son arrière-plan (Fil Twitter)
12/06/2025
OK Urbilog
Fil Twitter supprimé. L'anomalie n'est donc plus présente.
Les couleurs utilisées entre certains composants d’interface du fil Twitter et leur fond contigüe ne produisent pas un taux de contraste suffisant. Celui-ci doit être au minimum de 3:1.
Dans le cas où la modification de couleur n’est pas envisageable, un mécanisme alternatif doit permettre la modification des couleurs pour atteindre le niveau de contraste minimum requis.
Figure n°36 : Taux de contraste insuffisant (2.1:1)Figure n°37 : Taux de contraste insuffisant (2.0:1)
Contraste inférieur à 3:1 entre les couleurs contiguës d’un élément graphique
1/06/2025
KO Urbilog
Contraste encore insuffisant sur les boutons de navigations des carrousels.
Accueil :
Les couleurs contiguës de l’élément graphique des onglets du carrousel n’ont pas un taux de contraste suffisamment élevé entre elles. Celui-ci doit atteindre un taux minimum de 3:1. Dans le cas où la modification de couleur n’est pas envisageable, un mécanisme alternatif doit permettre la modification des couleurs pour atteindre le niveau de contraste minimum requis.
Assurance protège : l’assurance en pratique pour les particuliers :
Les couleurs contiguës de l’élément graphique des onglets du carrousel n’ont pas un taux de contraste suffisamment élevé entre elles.
Idem dans les pages "Assurance finance : Les programmes d’investissements", "Nos positions : Présidentielle 2022", "Nos chiffres clés : Données globales" et "Article (une actualité)".
Figure n°38 : Contraste inférieur à 3:1 entre les couleurs contiguës d’un élément graphique (1.9:1) (Accueil)Figure n°39 : Contraste inférieur à 3:1 entre les couleurs contiguës d’un élément graphique (1.6:1) (Assurance protège : l’assurance en pratique pour les particuliers)
Contraste inférieur à 3:1 entre un élément graphique et son arrière-plan
12/06/2025
KO Urbilog
Encadrés signifiant une sélection dont le contraste reste parfois insuffisant.
Assurance emploie : les formations :
Les couleurs utilisées entre certains éléments graphiques de la légende de la carte et leur fond contigüe ne produisent pas un taux de contraste suffisant. Celui-ci doit être au minimum de 3:1.
Dans le cas où la modification de couleur n’est pas envisageable, un mécanisme alternatif doit permettre la modification des couleurs pour atteindre le niveau de contraste minimum requis.
Figure n°40 : Ratio de contraste insuffisant (2.3) (Assurance emploie : les formations)
4. Multimédia
Critère 4.1 - Chaque média temporel pré-enregistré a-t-il, si nécessaire, une transcription textuelle ou une audiodescription (hors cas particuliers) ?
Présence d’un média temporel multimédia sans transcription textuelle ni audio description
Chaque média temporel préenregistré (audio seul, vidéo seul, ou audio et vidéo synchronisés) doit avoir une transcription textuelle ou, si nécessaire, une audio description pertinente.
Dans le cas d’une animation purement vidéo, l’audio description pourra également être proposée sous forme d’alternative purement audio.
La transcription textuelle reprend tout ce qui est exprimé oralement (y compris l’identification de l’intervenant), et tout ce qui est nécessaire à la compréhension (bruits, informations purement visuelles).
C’est en quelque sorte le roman de la vidéo.
Cette transcription peut être affichée soit après le média de manière clairement identifiable, soit accessible via un lien ou un bouton adjacent (par exemple pilotant un accordéon qui contiendra la transcription).
L’audio description est un flux audio additionnel reprenant les informations visuelles nécessaires à la compréhension de l’action. Dans le cas d’un contenu audio et vidéo synchronisé, son contenu doit s’insérer de façon à ne pas se télescoper avec le contenu du flux audio principal.
L’audio description peut être actionnable via l’interface du lecteur si ce dernier le permet, ou proposée dans une autre version du lecteur qui forcera l’affichage de l’audiodescription, et qui sera disponible via un lien ou un bouton.
Accueil :
L’animation multimédia YouTube "Pour une France assurable - Conférence de presse 27 mars 2024" nécessite une transcription textuelle.
Celle-ci est disponible en se rendant sur YouTube, néanmoins il faudrait qu'un élément présent au niveau de la vidéo sur la page, indique cette possibilité.
Le titre du cadre pourrait être envisageable si possible, sinon un texte adjacent à la vidéo devrait le préciser.
Même problème pour la vidéo "Tous les chemins mènent à l’assurance !" présente dans la page "Assurance emploie : les formations".
Idem pour les vidéos présentes dans la page "Nos positions : Présidentielle 2022".
Figure n°41 : Présence d’un média temporel multimédia sans transcription textuelle ni audio description (Accueil)Figure n°42 : Présence d’un média temporel multimédia sans transcription textuelle ni audio description (Assurance emploie : les formations)Figure n°43 : Présence d’un média temporel multimédia sans transcription textuelle ni audio description (Nos positions : Présidentielle 2022)
Présence d’un média temporel seulement audio sans transcription textuelle
Chaque média temporel préenregistré (audio seul, vidéo seul, ou audio et vidéo synchronisés) doit avoir une transcription textuelle ou, si nécessaire, une audio description pertinente.
Dans le cas d’une animation purement vidéo, l’audio description pourra également être proposée sous forme d’alternative purement audio.
La transcription textuelle reprend tout ce qui est exprimé oralement (y compris l’identification de l’intervenant), et tout ce qui est nécessaire à la compréhension (bruits, informations purement visuelles).
C’est en quelque sorte le roman de la vidéo.
Cette transcription peut être affichée soit après le média de manière clairement identifiable, soit accessible via un lien ou un bouton adjacent (par exemple pilotant un accordéon qui contiendra la transcription).
L’audio description est un flux audio additionnel reprenant les informations visuelles nécessaires à la compréhension de l’action. Dans le cas d’un contenu audio et vidéo synchronisé, son contenu doit s’insérer de façon à ne pas se télescoper avec le contenu du flux audio principal.
L’audio description peut être actionnable via l’interface du lecteur si ce dernier le permet, ou proposée dans une autre version du lecteur qui forcera l’affichage de l’audiodescription, et qui sera disponible via un lien ou un bouton.
Nos positions : Présidentielle 2022 :
L’animation multimédia de podcast via SoundCloud nécessite une transcription textuelle, disponible sur la page même du périmètre.
Figure n°44 : Présence d’un média temporel seulement audio sans transcription textuelle (Nos positions : Présidentielle 2022)
Critère 4.2 - Pour chaque média temporel pré-enregistré ayant une transcription textuelle ou une audiodescription synchronisée, celles-ci sont-elles pertinentes (hors cas particuliers) ?
Non applicable
Critère 4.3 - Chaque média temporel synchronisé pré-enregistré a-t-il, si nécessaire, des sous-titres synchronisés (hors cas particuliers) ?
Présence d'un média temporel sans sous-titres synchronisés
12/06/2025
OK Urbilog
(Les pages Accueil et Nos positions : Présidentielle 2022 qui ne comportent plus de média temporel. Le critère y est alors non applicable.)
La page Les formations comporte une vidéo avec des sous-titres synchronisés. Le critère 4.3 est conforme, mais il est important de connaître les limites d'accessibilité des sous-titres incrustés
En plus de l'absence de contrôle nécessaire en critère 4.11 (lequel sera relevé au prochain audit complet), les sous-titres incrustés posent des limites importantes en matière d’accessibilité :
Ils ne peuvent pas être personnalisés (changement de police, taille de caractère, couleur, contraste ou espacement), contrairement aux sous-titres non incrustés.
Certains utilisateurs ayant des besoins spécifiques (ex. : déficiences visuelles ou troubles cognitifs) ne pourront donc pas adapter l’affichage à leurs préférences ou contraintes.
Le sous-titrage consiste à donner les informations audio (paroles d’un personnage, bruit important pour comprendre l’action…) présentes dans un média temporel et affichées de manière synchrone avec le flux de l’objet multimédia.
Pour différencier les sources sonores (différents personnages, voix off…), il est recommandé d’utiliser un mécanisme approprié (mise entre crochets, mise en italique, annonce explicite du type “voix off : …”).
[Le sous-titrage en temps réel (comme celui proposé par YouTube) ne permet pas de répondre aux exigences de conformité. Le sous-titrage doit être enregistré et synchronisé au média temporel].
[Si les sous-titres synchronisés sont diffusés via une balise <track>, celle-ci doit posséder un attribut kind=’’captions’’.].
[il ne faut pas confondre le sous-titrage pour la traduction (attribut kind="subtitles" de la balise <track>) et le sous-titrage pour sourds et malentendants (attribut kind="captions" de la balise <track>). Ces deux types de sous-titrage poursuivent des buts différents. Seules la présence et la pertinence d’un sous-titrage pour sourds et malentendants permettent d’être conforme.].
Accueil :
L’animation multimédia YouTube "Pour une France assurable - Conférence de presse 27 mars 2024" devrait être sous-titrée ou avoir une version alternative qui possède des sous-titres synchronisés.
Assurance emploie : les formations :
L’animation multimédia YouTube "Tous les chemins mènent à l’assurance !" présente bien des sous-titres synchronisés, mais ceux-ci sont incrustés dans la vidéo, ce qui empêchera certains utilisateurs de modifier leur apparence pour les lire plus facilement.
Nos positions : Présidentielle 2022 :
L’animation multimédia YouTube "Les Décrypteurs | Le regard de Florence Lustman #5" présente bien des sous-titres synchronisés, mais ceux-ci sont incrustés dans la vidéo, ce qui empêchera certains utilisateurs de modifier leur apparence pour les lire plus facilement.
L'autre vidéo ne possède pas de sous-titres synchronisés.
Figure n°45 : Présence d'un média temporel sans sous-titres synchronisés (Acceuil)Figure n°46 : Présence d'un média temporel avec sous-titres synchronisés incrustés non valides (Assurance emploie : les formations)Figure n°47 : Présence d'un média temporel sans sous-titres synchronisés (Nos positions : Présidentielle 2022)
Critère 4.4 - Pour chaque média temporel synchronisé pré-enregistré ayant des sous-titres synchronisés, ces sous-titres sont-ils pertinents ?
Non applicable
Critère 4.5 - Chaque média temporel pré-enregistré a-t-il, si nécessaire, une audiodescription synchronisée (hors cas particuliers) ?
Non applicable
Critère 4.6 - Pour chaque média temporel pré-enregistré ayant une audiodescription synchronisée, celle-ci est-elle pertinente ?
Non applicable
Critère 4.7 - Chaque média temporel est-il clairement identifiable (hors cas particuliers) ?
Conforme
Critère 4.8 - Chaque média non temporel a-t-il, si nécessaire, une alternative (hors cas particuliers) ?
Non applicable
Critère 4.9 - Pour chaque média non temporel ayant une alternative, cette alternative est-elle pertinente ?
Non applicable
Critère 4.10 - Chaque son déclenché automatiquement est-il contrôlable par l’utilisateur ?
Non applicable
Critère 4.11 - La consultation de chaque média temporel est-elle, si nécessaire, contrôlable par le clavier et tout dispositif de pointage ?
Les éléments d’interface du lecteur permettant de consulter un média doivent être contrôlables au clavier.
Ces éléments doivent être atteignables par navigation avec la touche tab et activables avec la touche entrée (ou la barre d’espace pour les boutons lecture/pause).
Cela concerne a minima les éléments d’interface lecture, pause ou stop ?
[Si le média a du son, il faut ajouter la possibilité de couper et rétablir le son.] [Si le média possède une audiodescription, il faut ajouter la possibilité de l’apparition ou la disparition de celle-ci.]
Nos positions : Présidentielle 2022 :
Certains éléments tabulés ne sont pas visibles, la tabulation est peu ou pas perceptible selon les éléments, le menu de partage et l'accès aux différents podcasts présents ne sont pas correctement utilisables au clavier.
Enfin, la fonctionnalité de sélection du temps écoulé n'est pas accessible via le clavier.
Figure n°48 : Média temporel non contrôlable au clavier (Nos positions : Présidentielle 2022)
Critère 4.12 - La consultation de chaque média non temporel est-elle contrôlable par le clavier et tout dispositif de pointage ?
Non applicable
Critère 4.13 - Chaque média temporel et non temporel est-il compatible avec les technologies d’assistance (hors cas particuliers) ?
Média non compatible avec les technologies d’assistance
Une animation multimédia doit transmettre aux outils d’assistance les informations permettant de l’utiliser : nom, rôle, valeur, paramétrage, état et changements d’états des composants.
Si ce n’est pas possible, une alternative compatible permettant d’accéder à toutes les fonctionnalités doit être fournie.
[En cas de présence d’une alternative accessible, celle-ci doit se trouver à proximité de l’élément qu’elle remplace, ou accessible par un lien ou un bouton adjacent, ou qu’un mécanisme permette le remplacement du média par son alternative].
Nos positions : Présidentielle 2022 :
Les éléments d’interface du lecteur SoundCloud ne permettent pas aux utilisateurs de technologies d’assistance telles que la synthèse vocale d’obtenir toutes les informations nécessaires à une utilisation complète de la fonctionnalité et pleinement fonctionnel à l'usage.
Figure n°49 : Média non compatible avec les technologies d’assistance (Nos positions : Présidentielle 2022)
5. Tableaux
Critère 5.1 - Chaque tableau de données complexe a-t-il un résumé ?
Non applicable
Critère 5.2 - Pour chaque tableau de données complexe ayant un résumé, celui-ci est-il pertinent ?
Non applicable
Critère 5.3 - Pour chaque tableau de mise en forme, le contenu linéarisé reste-t-il compréhensible ?
L’ordre de vocalisation des informations insérées dans un tableau de présentation (tableau qui ne sert qu’à positionner visuellement des éléments entre eux), est soumis au séquencement imposé par le tableau : de la première cellule à gauche de la première ligne à la dernière cellule à droite, puis même chose sur la ligne suivante, etc.
Il se peut que cet ordre ne soit pas pertinent selon les informations fournies.
D’autre part, un tableau utilisé uniquement à des fins de présentation doit avoir un attribut “role” avec la valeur “presentation” afin que sa structure tabulaire soit ignorée par les aides techniques telles que les synthèses vocales.
Le tableau de présentation présentant les raccourcis clavier dans les cadres de carte interactive Google Maps devrait avoir un attribut “role” avec la valeur “presentation”.
Figure n°50 : Tableau de mise en forme sans rôle présentation (Assurance emploie : les formations - Cadre Google Maps)
Critère 5.4 - Pour chaque tableau de données ayant un titre, le titre est-il correctement associé au tableau de données ?
Non applicable
Critère 5.5 - Pour chaque tableau de données ayant un titre, celui-ci est-il pertinent ?
Non applicable
Critère 5.6 - Pour chaque tableau de données, chaque en-tête de colonne et chaque en-tête de ligne sont-ils correctement déclarés ?
Non applicable
Critère 5.7 - Pour chaque tableau de données, la technique appropriée permettant d’associer chaque cellule avec ses en-têtes est-elle utilisée (hors cas particuliers) ?
Non applicable
Critère 5.8 - Chaque tableau de mise en forme ne doit pas utiliser d’éléments propres aux tableaux de données. Cette règle est-elle respectée ?
Non applicable
6. Liens
Critère 6.1 - Chaque lien est-il explicite (hors cas particuliers) ?
Modale des cookies dont certains liens sont encore insuffisamment explicites.
Chaque lien doit avoir un libellé qui permet d’identifier clairement la cible du lien.
Si le texte du lien n’est pas suffisamment explicite par lui-même, il peut être considéré comme explicite si certains éléments de contexte viennent l’expliciter.
Ces éléments de contexte sont les suivants :
Le contenu de la phrase dans laquelle le lien texte est présent ;
Le contenu du paragraphe (balise <p>) dans lequel le lien texte est présent ;
Le contenu de l’item de liste (balise <li>) ou le contenu d’un item de liste parent (balise <li>) dans lequel le lien texte est présent ;
Le contenu du titre (balise <hx>) précédent le lien texte ;
Le contenu de la ou les cellule(s) d’en-tête de tableau (balise(s) <th>) associée(s) à la cellule de donnée (balise <td>) dans laquelle le lien texte est présent ;
Le contenu de la cellule de donnée (balise <td>) dans laquelle le lien texte est présent.
Modale de paramétrage des cookies :
Les liens "?" possèdent des attributs "title" qui reprennent bien les intitulés visibles, mais ne sont pas assez explicites sur la destination des liens.
Leur valeur devrait être "? Google Analytics, en savoir plus (Nouvelle fenêtre)" par exemple.
Article (une actualité) :
Les liens de partage via Twitter, LinkedIn et E-mail ne sont pas explicites.
Les balises <svg> présentes devraient être masquées à la vocalisation via un attribut aria-hidden="true".
Les textes en masquage accessible devraient être "Partager l'article via Twitter", "Partager l'article via LinkedIn" et "Partager l'article via E-mail".
Figure n°51 : Libellé de lien non explicite (Modale de paramétrage des cookies)Figure n°52 : Libellé de lien non explicite (Modale de paramétrage des cookies) (Code)Figure n°53 : Libellé de lien non explicite (Article (une actualité))Figure n°54 : Libellé de lien non explicite (Article (une actualité)) (Code)
Les liens des réseaux sociaux dans l'entête de page et le pied de page pourraient être plus précis avec des intitulés en masquage accessible, comme "Retouvez-nous sur Twitter (Nouvelle fenêtre)".
Figure n°55 : Liens des réseaux sociaux dans l'entête de pageFigure n°56 : Liens des réseaux sociaux dans le pied de page en mode desktopFigure n°57 : Liens des réseaux sociaux dans le pied de page en mode responsive
Lien composite à créer (Remarque pour les modales des formations)
Un lien composite est un lien comprenant tout à la fois des contenus graphiques et textuels.
Le libellé du lien est le résultat de la concaténation des alternatives textuelles, des contenus graphiques, et des contenus textuels.
Lorsque plusieurs liens graphiques et textuels vers la même cible sont contiguës, cela alourdit considérablement la navigation auditive et clavier.
Il faut les fusionner en un seul lien composite.
Si les contenus textuels sont eux-mêmes suffisamment explicites, les images seront traitées comme décoratives, mais les images seront tout de même incluses dans le lien afin d’élargir la surface cliquable pour les utilisateurs de souris (Toutefois, si l'image décorative nécessite un attribut "alt" alimenté, pour des raisons de référencement, il faudra ajouter à l’image un attribut "aria-hidden" avec la valeur "true" afin qu'elle soit ignorée par les synthèses vocales.).
Remarque pour les modales des formations :
L'image décorative de téléphone et le numéro de téléphone adjacent devraient être fusionnés en un seul lien composite (attribut href="tel:0185733100" par exemple).
De même, l'image décorative et le lien-texte "Visiter le site" devraient être fusionnés en un seul lien composite, doté d'un attribut "title" reprenant l'intitulé visible tel quel, suivi du texte "(Nouvelle Fenêtre)".
Figure n°58 : Lien composite à créer éventuellementFigure n°59 : Lien composite à créer éventuellement (Code)
Les intitulés des liens de pagination ne sont pas explicites. Il faut leur ajouter un attribut "aria-label" explicite indiquant par exemple "page 1 sur [nombre de page]", page "2 sur [nombre de page]" et "page 5 sur [nombre de page]".
C'est le cas dans les pages "Assurance protège : l’assurance en pratique pour les particuliers", "Espace presse" et "Actualités".
KO Urbilog pour les pages Assurance protège : l’assurance en pratique pour les particuliers ; Assurance finance ; Qui sommes-nous, notre raison d'être et nos missions ; Actualités ; Article.
Un lien composite est un lien comprenant tout à la fois des contenus graphiques et textuels.
Le libellé du lien est le résultat de la concaténation des alternatives textuelles, des contenus graphiques, et des contenus textuels.
Lorsque plusieurs liens graphiques et textuels vers la même cible sont contiguës, cela alourdit considérablement la navigation auditive et clavier.
Il faut les fusionner en un seul lien composite.
Si les contenus textuels sont eux-mêmes suffisamment explicites, les images seront traitées comme décoratives, mais les images seront tout de même incluses dans le lien afin d’élargir la surface cliquable pour les utilisateurs de souris (Toutefois, si l'image décorative nécessite un attribut "alt" alimenté, pour des raisons de référencement, il faudra ajouter à l’image un attribut "aria-hidden" avec la valeur "true" afin qu'elle soit ignorée par les synthèses vocales.).
Accueil :
Les liens-texte présents dans le carrousel sont redondants entre eux, et devraient donc être fusionnés en un seul lien a minima.
Il faudrait même idéalement les intégrer dans un lien composite avec l'image décorative présente à leur suite, afin de créer un lien dont la zone cliquable soit plus grande accessoirement.
Une problématique et une solution identique peuvent s'appliquer aux autres liens présents dans la page d'accueil.
Certains ont le lien-texte "Plus de détails" masqués via les styles et d'autres non.
Il faudra peut-être, dans ce dernier cas, laisser ce seul texte en tant que lien, ou alors créer des liens-composites.
Des cas semblables sont présents dans le reste du périmètre.
Premier cas : Un lien-image vide (voir critère 6.2) est présent au côté de deux liens textes, ayant la même destination que lui.
Il faudra donc créer un lien composite ou coder un seul de ces éléments comme un lien.
Deuxième cas : Un lien-image non vide est présent au côté de deux liens textes, ayant la même destination que lui, de plus l'alternative est redondante par rapport aux éléments textuels.
Il faudra donc créer un lien composite avec une image décorative ou coder un seul de ces éléments comme un lien.
Troisième cas : Un lien-image vide (voir critère 6.2) est présent au côté de deux liens textes, ayant la même destination que lui, néanmoins l'image apporte des informations non présentes dans les éléments textuels.
Il faudra donc créer un lien composite avec une image doté d'une alternative pertinente (donnant accès aux informations supplémentaires données par l'image) ou coder un seul de ces éléments comme un lien.
Figure n°61 : Lien composite à créer (Accueil)Figure n°62 : Lien composite à créer (Accueil) (Code)Figure n°63 : Lien composite à créer (Accueil)Figure n°64 : Lien composite à créer (Accueil) (Code)Figure n°65 : Lien composite à créer (Accueil)Figure n°66 : Lien composite à créer (Assurance protège : l’assurance en pratique pour les particuliers) (Premier cas)Figure n°67 : Lien composite à créer (Assurance protège : l’assurance en pratique pour les particuliers) (Premier cas) (Code)Figure n°68 : Lien composite à créer (Assurance protège : l’assurance en pratique pour les particuliers) (Deuxième cas)Figure n°69 : Lien composite à créer (Assurance protège : l’assurance en pratique pour les particuliers) (Deuxième cas) (Code)Figure n°70 : Lien composite à créer (Assurance finance : Les programmes d’investissements) (Troisième cas)Figure n°71 : Lien composite à créer (Assurance finance : Les programmes d’investissements) (Troisième cas) (Code)
Problème de vocalisation des liens dans le fil Twitter
13/06/2025
OK Urbilog
Fil twitter ayant disparu, anomalie inexistante.
Plusieurs problèmes de vocalisation des liens sont présents dans le fil Twitter.
Pour le cas de la première section de celui-ci, un attribut "title" ne reprenant pas le contenu visible est présent, il vaudrait mieux le supprimer.
L'image du logo de France Assureurs a une alternative qui pourrait suggérer la destination du lien, à savoir le profil Twitter de France Assureurs, en concaténation des autres éléments visibles et masqués.
En parlant de ces derniers, les attributs "title" indiquant le nombre de Tweets et de Followers ne sont pas vocalisés, car ils sont présents sur une simple balise <span>.
Il faudrait les supprimer et les remplacer par des textes en masquage accessible, présents à la suite des textes visibles.
Pour le cas de la deuxième section et des suivantes, en premier lieu, un lien composite, dont la destination est le profil Twitter de France Assureurs, est présent.
Ils concatènent une image qui devrait être décorative, et deux éléments textuels, eux-mêmes codés comme des liens.
Ils ne devraient pas être codés comme tels, et ils pourraient être suivis d'un élément textuel en masquage accessible, indiquant la destination et l'ouverture d'une nouvelle fenêtre.
Un lien texte non explicite, avec une date incomplète et un texte en masquage accessible non pertinent, pointant vers un tweet est présent à la suite.
Il devrait vocaliser de façon claire la date et la destination, via un attribut "aria-label" par exemple.
Il est suivi d'un autre lien composite, dont les éléments graphiques et textuels, en masquage accessible, forment une concaténation non pertinente, quant au contenu visuel et la destination du lien.
Enfin, quatre liens qui devraient former une liste non ordonnée (voir critère 9.3), sont présents, avec des éléments graphiques qui devraient être décoratifs, et des éléments textuels en masquage accessible, dont les contenus ne sont totalement pertinents.
Ces contenus devraient avoir des valeurs comme "Répondre sur Twitter à ce tweet (nouvelle fenêtre)" par exemple.
Figure n°72 : Problème de vocalisation des liens dans le fil TwitterFigure n°73 : Problème de vocalisation des liens dans le fil Twitter (Code)Figure n°74 : Problème de vocalisation des liens dans le fil Twitter (Code)Figure n°75 : Problème de vocalisation des liens dans le fil TwitterFigure n°76 : Problème de vocalisation des liens dans le fil Twitter (Code)Figure n°77 : Problème de vocalisation des liens dans le fil TwitterFigure n°78 : Problème de vocalisation des liens dans le fil Twitter (Code)Figure n°79 : Problème de vocalisation des liens dans le fil TwitterFigure n°80 : Problème de vocalisation des liens dans le fil Twitter (Code)Figure n°81 : Problème de vocalisation des liens dans le fil TwitterFigure n°82 : Problème de vocalisation des liens dans le fil Twitter (Code)
Critère 6.2 - Dans chaque page web, chaque lien a-t-il un intitulé ?
Chaque lien doit proposer un contenu textuel entre ses balises d'ouverture et de fermeture.
Ceci peut être un libellé textuel, ou l’alternative textuelle d’une image.
Si nécessaire, ce peut être un libellé textuel caché par masquage accessible, si l’on ne souhaite pas modifier l’apparence de la page.
Accueil :
Le lien vers la chaîne YouTube de France Assureurs présent dans le titre suivant la vidéo YouTube n’a pas de contenu. Une solution consisterait à placer un élément graphique avec l'alternative appropriée dans la balise <a>.
Ce point est bloquant.
Assurance protège : l’assurance en pratique pour les particuliers :
De nombreux liens-images ne possèdent pas d'alternatives, et par conséquent ne possèdent pas de contenu.
Une solution consisterait à les intégrer dans des liens composites, comme vu au critère 6.1.
Idem dans les page "Assurance finance : Les programmes d’investissements", "Nos positions : Présidentielle 2022", "Nos chiffres clés : Données globales" et "Actualités".
Figure n°83 : Présence d’un lien sans intitulé (Accueil)Figure n°84 : Présence d’un lien sans intitulé (Accueil) (Code)Figure n°85 : Présence d’un lien sans intitulé (Assurance protège : l’assurance en pratique pour les particuliers)Figure n°86 : Présence d’un lien sans intitulé (Assurance protège : l’assurance en pratique pour les particuliers) (Code)
7. Scripts
Critère 7.1 - Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Les modales de cookies ne transmettent pas toutes les informations nécessaires correctement.
En l'occurrence, l'attribut "aria-modal" a une valeur "false".
Et surtout, les attributs "aria-describedby" et "aria-labelledby" présents renvoient toujours à deux passages de textes trop longs en masquage accessible après le reste du contenu des modales.
Ainsi, il n'est pas possible d'identifier clairement la modale ouverte.
Par conséquent, il faudrait que les attributs "aria-labelledby" renvoient aux titres visibles et explicites de chaque modale "Gérer mes cookies" et "Personnaliser mes choix".
Les attributs "aria-describedby" pourraient référencer les passages de texte identiques entre les deux modales, mais plus concis et clair, à savoir : "Votre choix est conservé pendant 12 mois. Vous pouvez changer d’avis à tout moment en cliquant sur l’icône rouge en bas à gauche de chaque page du site.".
Les textes en masquage accessible devraient être supprimés ou a minima masqués à la vocalisation via un attribut aria-hidden="true" sur leur conteneur.
Il en sera de même pour la case à cocher "Axeptio consent", qui est bien masqué à la tabulation via un attribut tabindex="-1", mais pas à la vocalisation.
Il faut ajouter à cela que le bouton de fermeture possède des attributs "title" et "aria-label" dont les valeurs ne sont pas identiques.
Il faudrait que leurs valeurs soient "Continuer sans accepter et Fermer le widget sans consentement".
Modales des formations (Page "Assurance emploie : les formations") :
Les modales des formations ne transmettent pas toutes les informations nécessaires correctement, car elles ne possèdent aucun des attributs attendus sur leurs conteneurs.
De plus, la balise <span> contenant une balise <img> sans attribut "alt" sert de bouton de fermeture, elle devrait avoir un rôle "button".
Tandis que la balise <img> devrait avoir un attribut "alt" comme "Fermer" (voir critère 1.1).
Modales des événements (Agenda) :
Les modales des événementsne transmettent pas toutes les informations nécessaires correctement, car elles ne possèdent aucun des attributs attendus sur leurs conteneurs.
De plus, leur bouton de fermeture ne possède pas d'intitulé pertinent.
Figure n°87 : Mauvaise vocalisation d’une fenêtre modale (Modales des cookies)Figure n°88 : Mauvaise vocalisation d’une fenêtre modale (Modales des cookies)Figure n°89 : Mauvaise vocalisation d’une fenêtre modale (Modales des cookies) (Code)Figure n°90 : Mauvaise vocalisation d’une fenêtre modale (Modales des cookies) (Code)Figure n°91 : Mauvaise vocalisation d’une fenêtre modale (Modales des formations (Page "Assurance emploie : les formations"))Figure n°92 : Mauvaise vocalisation d’une fenêtre modale (Modales des formations (Page "Assurance emploie : les formations")) (Code)Figure n°93 : Mauvaise vocalisation d’une fenêtre modale (Modales des formations (Modales des événements (Agenda))Figure n°94 : Mauvaise vocalisation d’une fenêtre modale (Modales des formations (Modales des événements (Agenda)) (Code)
Utilisation redondante d'une case à cocher customisée empêchant la vocalisation des contenus
13/06/2025
KO Urbilog
Modale de paramétrage des cookies :
Au sein de cette modale, une utilisation redondante d'une case à cocher customisée empêchant la vocalisation des contenus est présente.
En l'occurrence, une case à cocher customisée implémentant correctement le motif de conception WAI-ARIA "Checkbox" est présente dans une autre case à cocher customisée mal implémentée.
Cette première case à cocher bien implémentée pourra par ailleurs recevoir le rôle "switch" au lieu du rôle "checkbox" pour implémenter le motif de conception WAI-ARIA correspondant.
La case à cocher mal implémentée est redondante vis-à-vis de la première case à cocher, surtout elle possède un attribut "aria-label" qui surcharge la vocalisation des contenus visibles et en masquage accessible présents à l'intérieur hormis le lien et la première case à cocher.
Il faudra donc supprimer cette implémentation redondante pour que les contenus soient vocalisés.
Figure n°95 : Utilisation redondante d'une case à cocher customisée empêchant la vocalisation des contenus (Modale de paramétrage des cookies)Figure n°96 : Utilisation redondante d'une case à cocher customisée empêchant la vocalisation des contenus (Modale de paramétrage des cookies) (Code)Figure n°97 : Utilisation redondante d'une case à cocher customisée empêchant la vocalisation des contenus (Modale de paramétrage des cookies) (Code)
Le bouton permettant d’ouvrir ou fermer un accordéon doit indiquer l’état de l’élément dont il pilote l’ouverture (ouvert/fermé) au moyen d’un attribut aria-expanded, qui aura la valeur « true » lorsque l’élément est ouvert, et « false » lorsque l’élément est fermé.
Il faudra également qu’il soit relié à l’élément dont il pilote l’ouverture au moyen d’un attribut « aria-controls » qui reprendra la valeur de l’attribut « id » de cet élément.
Une autre solution est d'utiliser les éléments HTML5 <details> et <summary> qui nativement, et de façon accessible, remplissent cette fonction.
Entête de page :
Les accordéons du menu de navigation principal interagissent mal avec les aides techniques, car ils ne vocalisent pas leur état.
C'est également le cas de l'accordéon de recherche et de l'accordéon du menu responsive.
De plus, en mode responsive, les accordéons du menu de navigation principal ne masquent pas leur contenu via les styles, ce qui entraîne une vocalisation des sous-menus quel que soit l'état de l'accordéon correspondant.
Pied de page :
Les accordéons présents dans le pied de page interagissent mal avec les aides techniques, car ils ne vocalisent pas leur état.
De plus, ils ne masquent pas leur contenu via les styles, ce qui entraîne une vocalisation des sous-menus quel que soit l'état de l'accordéon correspondant.
Nos positions : Présidentielle 2022 / Nos chiffres clés : Données globales :
Les accordéons présents dans le pied de page interagissent mal avec les aides techniques, car ils ne vocalisent pas leur état.
De plus, les titres devraient idéalement placer dans des balises <button>.
Même problème pour l'accordéon "Affiner les résultats" dans la page "Exemple de recherche".
Figure n°98 : Mauvaise vocalisation d’un accordéon (Entête de page)Figure n°99 : Mauvaise vocalisation d’un accordéon (Entête de page) (Code)Figure n°100 : Mauvaise vocalisation d’un accordéon (Entête de page)Figure n°101 : Mauvaise vocalisation d’un accordéon (Entête de page) (Code)Figure n°102 : Mauvaise vocalisation d’un accordéon (Entête de page)Figure n°103 : Mauvaise vocalisation d’un accordéon (Entête de page) (Code)Figure n°104 : Mauvaise vocalisation d’un accordéon (Entête de page)Figure n°105 : Mauvaise vocalisation d’un accordéon (Entête de page) (Code)Figure n°106 : Mauvaise vocalisation d’un accordéon (Pied de page)Figure n°107 : Mauvaise vocalisation d’un accordéon (Pied de page) (Code)Figure n°108 : Mauvaise vocalisation d’un accordéon (Pied de page) (Code)Figure n°109 : Mauvaise vocalisation d’un accordéon (Nos positions : Présidentielle 2022)Figure n°110 : Mauvaise vocalisation d’un accordéon (Nos positions : Présidentielle 2022) (Code)Figure n°111 : Mauvaise vocalisation d’un accordéon (Nos chiffres clés : Données globales)Figure n°112 : Mauvaise vocalisation d’un accordéon (Nos chiffres clés : Données globales) (Code)Figure n°113 : Mauvaise vocalisation d’un accordéon (Exemple de recherche)Figure n°114 : Mauvaise vocalisation d’un accordéon (Exemple de recherche) (Code)
Un fil d'Ariane consiste en une liste de liens vers les pages parents de la page en cours dans l'ordre hiérarchique.
Pour qu’un fil d’Ariane soit conforme, il faut que :
Il soit structuré via un élément <nav> avec un rôle « navigation » et un nom accessible pertinent, donné via un attribut « aria-label » ou « aria-labelledby ».
Il soit également structuré comme une liste ordonnée (éléments <ol> et <li>) ou non ordonnée (éléments <ul> et <li>).
La page courante soit indiquée via un attribut aria-current="page".
Plusieurs pages du périmètre présentes des fils d'Ariane qui ne respectent aucune des préconisations.
Figure n°115 : Fil d'Ariane non conformeFigure n°116 : Fil d'Ariane non conforme (Code)
Une pagination consiste en une liste de liens liés à un ensemble de pages formant une suite logique, le plus souvent accompagnée par des boutons permettant de passer d’une page à l’autre, qu’il s’agisse de la page suivante ou précédente, ou même la première ou dernière page de l’ensemble.
Pour qu’une pagination soit conforme, il faut que :
Elle soit structurée via un élément <nav> avec un rôle « navigation » et un nom accessible pertinent, donné via un attribut « aria-label » ou « aria-labelledby ».
Elle soit également structurée comme une liste ordonnée (éléments <ol> et <li>) ou non ordonnée (éléments <ul> et <li>).
La page courante soit indiquée via un attribut aria-current="page".
Bien entendu, les liens des pages doivent pouvoir être accessibles à la tabulation, ainsi ils doivent posséder un attribut « href » non vide ou un attribut tabindex="0", ainsi que le cas échéant des attributs « aria-label », comme « Page 1 » par exemple.
De même pour les boutons ou liens permettant de naviguer entre les pages, étant idéalement des éléments <button> ou <a>, dont l’intitulé peut être donné via un attribut « aria-label ».
Les pages "Assurance protège : l’assurance en pratique pour les particuliers", "Espace presse" et "Actualités" présentent des paginations à qui ils ne manquent que la structuration en liste.
Figure n°117 : Pagination non conformeFigure n°118 : Pagination non conforme (Code)
Champ de sélection non accessible à la vocalisation
13/06/2025
KO Urbilog
Assurance emploie : les formations :
Les champs de sélection des formations ne sont pas accessibles à la vocalisation.
Il faudrait le remplacer par un élément natif <select>, doté d'une étiquette pertinente et correctement associée.
Sinon, il faudrait implémenter le motif de conception WAI-ARIA "Combobox", en s'appuyant sur cet exemple.
Figure n°119 : Champ de sélection non accessible à la vocalisation (Assurance emploie : les formations)Figure n°120 : Champ de sélection non accessible à la vocalisation (Assurance emploie : les formations) (Code)Figure n°121 : Champ de sélection non accessible à la vocalisation (Assurance emploie : les formations) (Code)Figure n°122 : Champ de sélection non accessible à la vocalisation (Assurance emploie : les formations) (Code)
Carrousel à onglets non conforme à la vocalisation
13/06/2025
KO Urbilog
Accueil :
Le carrousel à onglets présent dans la page n'est pas conforme à la vocalisation.
En premier lieu, l'attribut "aria-roledescription" est redondant avec l'attribut "aria-label" présent sur le conteneur du carrousel avec un rôle "group".
L'attribut "aria-roledescription" devrait être supprimé, la valeur de l'attribut "aria-label" devrait être "Carrousel, En ce moment", et le rôle "group" pourra être remplacé par un rôle "region".
En deuxième lieu, le conteneur des diapositives possède des attributs aria-live="polite" et aria-atomic="true" qui sont inutiles dans le cas présent.
En l'occurrence, les contenus des diapositives sont simplement masqués à la vocalisation via un attribut aria-hidden="true" quand ils ne sont pas affichés.
Sachant que le fonctionnement des zones "live" est tel que seuls les changements dynamiques des contenus (leur insertion, ou leur démasquage via les styles) sont vocalisés.
En troisième lieu, les diapositives possèdent des attributs aria-roledescription="slide" inutiles et parasitant la vocalisation des rôles "tabpanel".
De plus, les attributs "aria-label" présents devraient être remplacés par des attributs "aria-labelledby" référençant les onglets correspondants.
En quatrième lieu, le conteneur des onglets possède un attribut "aria-label" inutile et non pertinent.
Tandis que les onglets devraient posséder des attributs "id" uniques et surtout des attributs "aria-label" en français.
Assurance protège : l’assurance en pratique pour les particuliers :
Les carrousels à onglets présents dans la page ne sont pas conformes à la vocalisation.
En premier lieu, le conteneur du carrousel avec un rôle "region" doit posséder un attribut aria-roledescription="Carrousel" et un attribut "aria-labelledby" référençant le titre qui le précède.
En deuxième lieu, les boutons de commande devraient avoir des attributs "aria-label" avec des valeurs en français.
En troisième lieu, le conteneur des onglets possède un attribut "aria-label" inutile et non pertinent.
Tandis que les onglets devraient posséder des attributs "id" uniques et surtout des attributs "aria-label" en français.
De plus, leurs attributs "aria-controls" référencent trois éléments au lieu d'un seul.
En quatrième lieu, les diapositives possèdent des attributs aria-roledescription="slide" inutiles et parasitant la vocalisation des rôles "tabpanel".
De plus, les attributs "aria-label" présents devraient être remplacés par des attributs "aria-labelledby" référençant les onglets correspondants.
Et surtout, comme vu par rapport aux onglets qui ne devraient référencer qu'un seul élément dans leurs attributs "aria-controls", les trois éléments contenus dans chacune des diapositives devraient être rassemblés dans un seul panneau d'onglets.
En cinquième lieu, le conteneur des diapositives possède des attributs aria-live="polite" et aria-atomic="true" qui ne sont pas totalement inutiles dans le cas présent.
En l'occurrence, ils vocalisent l'onglet sélectionné lors de l'utilisation des boutons de commande, probablement à cause de la liaison des onglets et des panneaux via les attributs "aria-controls".
On retrouve des carrousels avec les mêmes problèmes dans d'autres pages du périmètre.
Figure n°123 : Carrousel à onglets non conforme à la vocalisation (Accueil)Figure n°124 : Carrousel à onglets non conforme à la vocalisation (Accueil) (Code)Figure n°125 : Carrousel à onglets non conforme à la vocalisation (Accueil) (Code)Figure n°126 : Carrousel à onglets non conforme à la vocalisation (Accueil) (Code)Figure n°127 : Carrousel à onglets non conforme à la vocalisation (Assurance protège : l’assurance en pratique pour les particuliers)Figure n°128 : Carrousel à onglets non conforme à la vocalisation (Assurance protège : l’assurance en pratique pour les particuliers) (Code)Figure n°129 : Carrousel à onglets non conforme à la vocalisation (Assurance protège : l’assurance en pratique pour les particuliers) (Code)Figure n°130 : Carrousel à onglets non conforme à la vocalisation (Assurance protège : l’assurance en pratique pour les particuliers) (Code)Figure n°131 : Carrousel à onglets non conforme à la vocalisation (Assurance protège : l’assurance en pratique pour les particuliers) (Code)
Lorsque l’on navigue dans un panneau d’onglets, chaque onglet doit transmettre aux technologies d’assistance un certain nombre d’informations, par exemple son intitulé, son positionnement dans le nombre d’onglets que compte le panneau d’onglets, et le fait qu’il soit l’onglet actif si c’est le cas, etc.
Le panneau d’onglets présent ne transmet pas toutes les informations nécessaires.
En l'occurrence, les panneaux d'onglets possèdent des attributs "aria-labelledby" référençant leurs propres attributs "id" au lieu de ceux des onglets correspondants.
De plus, le conteneur des onglets pourra posséder un attribut "aria-labelledby" référençant le titre "Nos adhérents".
Figure n°132 : Mauvaise vocalisation d’un panneau d’onglets (Qui sommes-nous ? Nos adhérents)Figure n°133 : Mauvaise vocalisation d’un panneau d’onglets (Qui sommes-nous ? Nos adhérents) (Code)Figure n°134 : Mauvaise vocalisation d’un panneau d’onglets (Qui sommes-nous ? Nos adhérents) (Code)
Date Picker accessible et Alternative pertinente présente
Espace presse / Agenda / Exemple de recherche :
Le dispositif d’aide à la saisie de date est accessible et possède une alternative pertinente et accessible via l'usage de balise <input> de type "date" correctement reliée à leur étiquette.
Figure n°135 : Date Picker accessible et Alternative pertinente présenteFigure n°136 : Date Picker accessible et Alternative pertinente présente (Code)
Critère 7.2 - Pour chaque script ayant une alternative, cette alternative est-elle pertinente ?
Lorsqu’il n’a pas été possible de rendre un script accessible, il est possible de fournir une solution alternative.
Toutefois, cette solution doit bien donner accès à la même information ou au même service.
Assurance emploie : les formations :
Le contenu présent au côté de la carte peut être considéré comme une solution alternative à celle-ci, mais il n’est pas pertinent et accessible.
En l'occurrence, les éléments présents devraient être structurés dans une liste ordonnée (voir critère 9.3).
Et surtout, les conteneurs de ceux-ci devraient posséder des rôles "button" et des attributs tabindex="0", afin d'être accessibles à la vocalisation et au clavier.
Figure n°137 : Alternative de script non pertinente (Assurance emploie : les formations)Figure n°138 : Alternative de script non pertinente (Assurance emploie : les formations) (Code)
Critère 7.3 - Chaque script est-il contrôlable par le clavier et par tout dispositif de pointage (hors cas particuliers) ?
Mauvaise interaction avec le clavier pour une fenêtre modale
13/06/2025
KO Urbilog
Chaque fenêtre modale, doit être contrôlable à la souris comme au clavier, par exemple placer le focus sur un le premier élément se trouvant à l’intérieur de la fenêtre modale afin d’assurer la continuité de la navigation clavier, limiter la navigation clavier, limiter la navigation clavier au contenu de la modale, etc.
Les modales de cookies ne sont pas correctement contrôlables au clavier.
En l'occurrence, elles ne prennent pas le focus à l'ouverture, ne le gardent pas à la tabulation et à son retour, ne restituent pas le focus à leur élément d'ouverture, et ne peuvent pas être fermé via la touche "Echap".
Modales des formations (Page "Assurance emploie : les formations") :
Les modales des formations ne sont pas correctement contrôlables au clavier.
En l'occurrence, elles ne prennent pas le focus à l'ouverture, ne le gardent pas à la tabulation et à son retour, ne restituent pas le focus à leur élément d'ouverture, et ne peuvent pas être fermé via la touche "Echap".
De plus, la balise <span> contenant une balise <img> sans attribut "alt" sert de bouton de fermeture, elle devrait avoir un attribut tabindex="0" pour être tabulable.
Modales des événements (Agenda) :
Les modales des événementsne sont pas correctement contrôlables au clavier.
En l'occurrence, elles ne prennent pas le focus à l'ouverture, ne le gardent pas à la tabulation et à son retour, ne restituent pas le focus à leur élément d'ouverture, et ne peuvent pas être fermé via la touche "Echap".
Figure n°139 : Mauvaise interaction avec le clavier pour une fenêtre modale (Modales des cookies)Figure n°140 : Mauvaise interaction avec le clavier pour une fenêtre modale (Modales des cookies)Figure n°141 : Mauvaise interaction avec le clavier pour une fenêtre modale (Modales des formations (Page "Assurance emploie : les formations"))Figure n°142 : Mauvaise interaction avec le clavier pour une fenêtre modale (Modales des formations (Page "Assurance emploie : les formations")) (Code)Figure n°143 : Mauvaise interaction avec le clavier pour une fenêtre modale (Modales des événements (Agenda))
Utilisation redondante d'une case à cocher customisée empêchant la visualisation des contenus
13/06/2025
KO Urbilog
Modale de paramétrage des cookies :
Au sein de cette modale, une utilisation redondante d'une case à cocher customisée empêchant la visualisation des contenus est présente.
En l'occurrence, une case à cocher customisée implémentant correctement le motif de conception WAI-ARIA "Checkbox" est présente dans une autre case à cocher customisée mal implémentée.
La case à cocher mal implémentée est redondante vis-à-vis de la première case à cocher, elle n'est pas accessible via la tabulation.
Comme vu au critère 7.1, il faudra donc supprimer cette implémentation redondante pour que les contenus soient vocalisés.
De plus, elle possède aussi un attribut "title" qui reprend les contenus en masquage accessible.
Toutefois, cet attribut "title" n'est visible qu'au survol de la souris.
Ainsi, en naviguant au clavier seul, ses contenus ne seront pas visibles.
Par conséquent, il faudrait que les contenus en masquage accessible soient disponibles dans un accordéon conforme, commandés via un bouton "Plus de détails" par exemple.
Figure n°144 : Utilisation redondante d'une case à cocher customisée empêchant la visualisation des contenus (Modale de paramétrage des cookies)Figure n°145 : Utilisation redondante d'une case à cocher customisée empêchant la visualisation des contenus (Modale de paramétrage des cookies) (Code)Figure n°146 : Utilisation redondante d'une case à cocher customisée empêchant la visualisation des contenus (Modale de paramétrage des cookies) (Code)
Mauvaise interaction avec le clavier d’un accordéon
13/06/2025
KO Urbilog
Erreurs recensées encore présentes.
Lorsque l’on actionne le bouton qui pilote l’ouverture d’un accordéon, pour l’ouvrir, le focus doit rester sur le bouton, de façon à ce que l’utilisateur puisse le refermer sans aller consulter son contenu s’il le désire.
Entête de page :
En mode responsive, les accordéons du menu de navigation principal ne masquent pas leur contenu via les styles, ce qui entraîne une tabulation des sous-menus quel que soit l'état de l'accordéon correspondant.
De plus, ils ne peuvent pas être fermés via une action sur la touche "Echap" séparément les uns des autres.
Pied de page :
Les accordéons présents dans le pied de page ne masquent pas leur contenu via les styles, ce qui entraîne une tabulation des sous-menus quel que soit l'état de l'accordéon correspondant.
Nos positions : Présidentielle 2022 / Nos chiffres clés : Données globales :
Les accordéons présents dans le pied de page interagissent mal avec le clavier.
Il faudrait que les titres soient idéalement placés dans des balises <button>.
Même problème pour l'accordéon "Affiner les résultats" dans la page "Exemple de recherche".
Figure n°147 : Mauvaise interaction avec le clavier d’un accordéon (Entête de page)Figure n°148 : Mauvaise interaction avec le clavier d’un accordéon (Entête de page) (Code)Figure n°149 : Mauvaise interaction avec le clavier d’un accordéon (Pied de page)Figure n°150 : Mauvaise interaction avec le clavier d’un accordéon (Pied de page) (Code)Figure n°151 : Mauvaise interaction avec le clavier d’un accordéon (Pied de page) (Code)Figure n°152 : Mauvaise interaction avec le clavier d’un accordéon (Nos positions : Présidentielle 2022)Figure n°153 : Mauvaise interaction avec le clavier d’un accordéon (Nos positions : Présidentielle 2022) (Code)Figure n°154 : Mauvaise interaction avec le clavier d’un accordéon (Nos chiffres clés : Données globales)Figure n°155 : Mauvaise interaction avec le clavier d’un accordéon (Nos chiffres clés : Données globales) (Code)Figure n°156 : Mauvaise interaction avec le clavier d’un accordéon (Exemple de recherche)Figure n°157 : Mauvaise interaction avec le clavier d’un accordéon (Exemple de recherche) (Code)
Repositionnement du focus non pertinent (Bonne pratique)
13/06/2025
KO Urbilog
Lorsqu’en actionnant un élément d’interface, on déclenche une action qui interagit sur la page, le focus doit être replacé de telle sorte que la continuité de la navigation clavier soit assurée.
Pied de page :
Dans le pied de page, lorsque le formulaire d'inscription à la newsletter n'est pas validé, le focus pourrait idéalement être replacé sur le premier champ en erreur, qui est l’emplacement le plus pertinent pour poursuivre la navigation clavier, et une bonne pratique plus consensuelle.
Même chose pour le formulaire de la page "Contact".
Figure n°158 : Repositionnement du focus non pertinent (Bonne pratique) (Pied de page)
Les champs de sélection des formations ne sont pas accessibles au clavier.
Il faudrait le remplacer par un élément natif <select>, doté d'une étiquette pertinente et correctement associée.
Sinon, il faudrait implémenter le motif de conception WAI-ARIA "Combobox", en s'appuyant sur cet exemple.
Figure n°159 : Champ de sélection non accessible au clavier (Assurance emploie : les formations)Figure n°160 : Champ de sélection non accessible au clavier (Assurance emploie : les formations) (Code)Figure n°161 : Champ de sélection non accessible au clavier (Assurance emploie : les formations) (Code)Figure n°162 : Champ de sélection non accessible au clavier (Assurance emploie : les formations) (Code)
Critère 7.4 - Pour chaque script qui initie un changement de contexte, l’utilisateur est-il averti ou en a-t-il le contrôle ?
Présence d’un script provoquant un changement de contexte à signaler
Lorsqu’un élément provoque dynamiquement une modification importante de la page, il est indispensable d’en informer à l’avance l’utilisateur de façon à ce qu’il ne soit pas surpris, ou à lui en laisser le contrôle de façon à ce qu’il déclenche cette action en toute connaissance de cause.
Cela peut être fait par du texte relié à l’élément déclencheur, inséré avant l’élément, ou par le contenu d’un aria-label posé sur ce déclencheur.
Pied de page :
Lorsque l’on valide le champ d'inscription à la newsletter, le message de statut présent n'est pas correctement vocalisé et les champs de formulaire ne sont plus présents, ce qui constitue un changement de contenu non signalé.
Même chose pour le formulaire de la page "Contact".
Accueil - Fil Twitter :
Les problèmes de vocalisation des liens dans le fil Twitter vu au critère 6.1, peuvent entraîner des changements d'espace de restitution (ou d'agent utilisateur sur mobile le cas échéant) qui ne sont pas explicites.
Article (une actualité) :
Les problèmes de vocalisation des liens vu au critère 6.1, peuvent entraîner des changements d'espace de restitution (ou d'agent utilisateur sur mobile le cas échéant) qui ne sont pas explicites.
De plus, le bouton permettant de copier le lien ne dispose pas d'un intitulé pertinent de base et modifié dynamiquement à l'action sur celui-ci, auquel il faut ajouter un changement de focus non explicite, qui replace celui-ci en début de page, alors qu'il devrait rester sur le bouton pour que l'action soit bien vocalisée notamment.
Figure n°163 : Changement de contenu non signalé (Pied de page)Figure n°164 : Changements d'espace de restitution (ou d'agent utilisateur sur mobile le cas échéant) non explicites (Accueil - Fil Twitter)Figure n°165 : Changements d'espace de restitution (ou d'agent utilisateur sur mobile le cas échéant) non explicites (Article (une actualité))Figure n°166 : Changement de focus non pertinent et non averti (Article (une actualité))Figure n°167 : Changement de focus non pertinent et non averti (Article (une actualité)) (Code)
Critère 7.5 - Dans chaque page web, les messages de statut sont-ils correctement restitués par les technologies d’assistance ?
Restitution du message d’erreur via une prise de focus au lieu d'un rôle "alert"
Chaque message d’erreur affiché dynamiquement doit avoir un attribut “role” avec la valeur ”alert” afin d’être transmis aux technologies d’assistance.
Pied de page :
Le message d'erreur présent à la non-validation du champ d'inscription à la newsletter n'est pas vocalisé via un rôle "alert".
Il est toutefois vocalisé par une prise de focus, qui est idéalement à revoir (critère 7.3).
Même chose pour le formulaire de la page "Contact".
Figure n°168 : Restitution du message d’erreur via une prise de focus au lieu d'un rôle "alert" (Pied de page)Figure n°169 : Restitution du message d’erreur via une prise de focus au lieu d'un rôle "alert" (Pied de page) (Code)
Chaque message de status (progression d’un processus, fin de processus d’un formulaire, mise d’un élément au panier, succès de la création d’un compte, etc.) doit avoir un attribut “role” avec la valeur ”status” afin d’être transmis aux technologies d’assistance.
Pied de page :
Le message de validation du champ d'inscription à la newsletter n'est pas vocalisé via un rôle "status".
Même chose pour le formulaire de la page "Contact".
Agenda / Exemple de recherche :
Les nombres de résultats de recherche devraient être vocalisés comme des messages de statut.
Figure n°170 : Non-restitution du message de statut (Pied de page)Figure n°171 : Non-restitution du message de statut (Pied de page) (Code)Figure n°172 : Non-restitution du message de statut (Agenda)Figure n°173 : Non-restitution du message de statut (Agenda) (Code)Figure n°174 : Non-restitution du message de statut (Exemple de recherche)Figure n°175 : Non-restitution du message de statut (Exemple de recherche) (Code)
8. Éléments obligatoires
Critère 8.1 - Chaque page web est-elle définie par un type de document ?
Conforme
Critère 8.2 - Pour chaque page web, le code source généré est-il valide selon le type de document spécifié ?
Les anomalies provenant d'un prestataire extérieur (ici, WordPress) ne bénéficient pas d'une dérogation. Si possible, cela est à corriger avec ledit prestataire. Dans le cas contraire, l'anomalie reste présente, donc l'état de non-conformité également.
Afin d'être en conformité vis-à-vis de l'accessibilité, le code HTML doit respecter les règles suivantes :
Les balises, valeurs et attributs respectent les règles d'écriture.
L'imbrication des balises est conforme.
L'ouverture et la fermeture des balises sont conformes.
Les valeurs d'attribut « id » sont uniques dans la page.
Les attributs ne sont pas doublés sur un même élément.
Le validateur W3C signale plusieurs erreurs de validation du code HTML.
Figure n°176 : Exemple d'erreur de validationFigure n°177 : Exemple d'erreur de validation
Critère 8.3 - Dans chaque page web, la langue par défaut est-elle présente ?
Conforme
Critère 8.4 - Pour chaque page web ayant une langue par défaut, le code de langue est-il pertinent ?
Conforme
Critère 8.5 - Chaque page web a-t-elle un titre de page ?
Conforme
Critère 8.6 - Pour chaque page web ayant un titre de page, ce titre est-il pertinent ?
Conforme
Critère 8.7 - Dans chaque page web, chaque changement de langue est-il indiqué dans le code source (hors cas particuliers) ?
L'anomamie n'est plus présente et, dans l'état actuel, la page concernée ne contient plus de changements de langue.
Le critère devient alors non applicable.
Le titre de la conférence « Insurance Europe : 14e conférence internationale, "Protect. Connect. Invest." » contient des passages en anglais (« Insurance Europe » et « Protect. Connect. Invest. ») qu'il faut signaler en les insérant au sein d'un élément <span> présentant un attribut « lang="en" ».
Figure n°178 : Exemple de changement de langue non signaléFigure n°179 : Exemple de changement de langue non signalé
Critère 8.8 - Dans chaque page web, le code de langue de chaque changement de langue est-il valide et pertinent ?
Non applicable
Critère 8.9 - 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 ?
À plusieurs reprises dans la page, des balises <p> vides sont utilisées pour créer des espaces vides, ce qui n'est pas une utilisation adaptée de cet élément.
Figure n°180 : Exemple d'élément utilisé à des fins de présentationFigure n°181 : Exemple d'élément utilisé à des fins de présentationFigure n°182 : Exemple d'élément utilisé à des fins de présentation
Le libellé « Pour une France assurable Conférence de presse 27 mars 2024 » est implémenté avec une balise de titre <h1> alors qu'il ne correspond pas à un titre de section : il faut remplacer cette balise <h1> par une simple balise <p> ou <span>.
Figure n°185 : Libellé identifié à tort comme un titre
Les différents liens vers les articles présents dans la page sont implémentés avec une balise de titre <h2> ou <h3> alors qu'ils ne correspondent pas à des titres de section : il faut remplacer ces balises par de simples balises <p> ou <span>.
Figure n°186 : Exemple de libellé identifié à tort comme un titreFigure n°187 : Exemple de libellé identifié à tort comme un titreFigure n°188 : Exemple de libellé identifié à tort comme un titreFigure n°189 : Exemple de libellé identifié à tort comme un titreFigure n°190 : Exemple de libellé identifié à tort comme un titreFigure n°191 : Exemple de libellé identifié à tort comme un titreFigure n°192 : Exemple de libellé identifié à tort comme un titreFigure n°193 : Exemple de libellé identifié à tort comme un titreFigure n°194 : Exemple de libellé identifié à tort comme un titreFigure n°195 : Exemple de libellé identifié à tort comme un titreFigure n°196 : Exemple de libellé identifié à tort comme un titreFigure n°197 : Exemple de libellé identifié à tort comme un titreFigure n°198 : Exemple de libellé identifié à tort comme un titreFigure n°199 : Exemple de libellé identifié à tort comme un titre
Les champs concernés n'existent plus et les champs non mentionnés précédemment mais existant sur certaines pages ne sont pas concernés par l'anomalie recensée. Cette dernière n'existe donc plus.
Lorsqu'une erreur de saisie se produit dans le champ de saisie du pied de page permettant de saisir une adresse e-mail afin de s'inscrire à la newsletter, le message d'erreur s'affichant au dessus du champ de saisie est implémenté avec une balise de titre <h2> alors qu'il ne correspond pas à un titre de section : il faut remplacer cette balise <h2> par une simple balise <p> ou <span>.
Figure n°200 : Libellé identifié à tort comme un titre
Les champs concernés n'existent plus. L'anomalie recensée n'existe donc plus.
Lorsqu'une erreur de saisie se produit dans le formulaire de contact, le message d'erreur global s'affichant au dessus du formulaire est implémenté avec une balise de titre <h2> alors qu'il ne correspond pas à un titre de section : il faut remplacer cette balise <h2> par une simple balise <p> ou <span>.
Figure n°201 : Libellé identifié à tort comme un titre
Le libellé « La Fédération réunit l’ensemble des entreprises d’assurance et de réassurance opérant en France, relevant du Code des assurances, soit 252 sociétés représentant plus de 99 % de ce marché. » est implémenté avec une balise de titre <h3> alors qu'il ne correspond pas à un titre de section : il faut remplacer cette balise <h3> par une simple balise <p> ou <span>.
Figure n°203 : Libellé identifié à tort comme un titre
Le libellé « Documents à télécharger » constitue un titre de section et doit être implémenté en tant que titre de niveau 2, à l'aide d'une balise <h2>.
Figure n°204 : Libellé à identifier comme un titre de niveau 2
La page ne contient plus les éléments ayant fait l'objet de la présente anomalie. Cette dernière n'existe alors plus.
Dans la section « Nos propositions », les titres « Santé » et « Divers » sont implémentés de niveau 2, alors qu'ils sont subordonnés au titre « Nos propositions » qui est également de niveau 2. Il faut changer le niveau des titres « Santé » et « Divers » afin qu'ils soient de niveau 3.
Figure n°205 : Titres de niveau 2 à changer en niveau 3
Les titres des différentes sous-sections de la section « Voir les autres chiffres clés » sont implémentés de niveau 2, alors qu'ils sont subordonnés au titre « Voir les autres chiffres clés » qui est également de niveau 2. Il faut changer le niveau des titres des sous-sections afin qu'ils soient de niveau 3.
Figure n°206 : Titres de niveau 2 à changer en niveau 3
Les libellés « Filtrer et trier dates » et « Contact Presse » constituent des titres de section et doivent être implémentés en tant que titres de niveau 2, à l'aide de balises <h2>.
Figure n°207 : Libellé à identifier comme un titre de niveau 2Figure n°208 : Libellé à identifier comme un titre de niveau 2
Les libellés « Documents à télécharger » et « À lire aussi » constituent des titres de section et doivent être implémentés en tant que titres de niveau 2, à l'aide de balises <h2>.
Figure n°209 : Libellé à identifier comme un titre de niveau 2Figure n°210 : Libellé à identifier comme un titre de niveau 2
Les boutons et éléments interactifs permettant d'afficher les informations sur les différents évènements sont implémentés avec une balise de titre <h3> alors qu'ils ne correspondent pas à des titres de section : il faut remplacer ces balises par de simples balises <p> ou <span>.
Figure n°211 : Exemple de libellé identifié à tort comme un titreFigure n°212 : Exemple de libellé identifié à tort comme un titre
Dans les fenêtres modales donnant les informations sur les différents évènements, les libellés présents en haut de la fenêtre et donnant le titre de l'évènement doivent être implémentés en tant que titres de niveau 2, à l'aide de balises <h2>.
Figure n°213 : Exemple de libellé à identifier comme un titre de niveau 2
Les libellés « Rechercher » et « Tous les résultats » constituent des titres de section et doivent être implémentés en tant que titres de niveau 2, à l'aide de balises <h2>.
Par ailleurs, les libellés donnant les mois correspondant aux différents évènements listés constituent des titres de sous-section de la section « Tous les résultats », et doivent être implémentés en tant que titres de niveau 3, à l'aide de balises <h3>.
Figure n°214 : Libellé à identifier comme un titre de niveau 2Figure n°215 : Libellé à identifier comme un titre de niveau 2Figure n°216 : Exemple de libellé à identifier comme un titre de niveau 3
Le libellé « Résultats de votre recherche (5) » constitue un titre de section et doit être implémenté en tant que titre de niveau 2, à l'aide d'une balise <h2>.
Figure n°217 : Libellé à identifier comme un titre de niveau 2
Critère 9.2 - Dans chaque page web, la structure du document est-elle cohérente (hors cas particuliers) ?
Les deux sections latérales de la page, correspondant respectivement aux dernières actualités et aux tweets, sont chacune implémentées avec une balise <ul> qui ne contient aucun élément <li>. Ce n'est pas une utilisation adaptée de ces balises qu'il faut remplacer par des balises plus appropriées, comme <div>.
Figure n°218 : Utilisation inadaptée d'élément de listeFigure n°219 : Utilisation inadaptée d'élément de liste
L'ensemble de la section latérale est implémenté avec une balise <ul> qui ne contient pas directement d'éléments de liste (la liste des articles étant implémentée avec une autre balise <ul>). Ce n'est pas une utilisation adaptée de cette balise qu'il faut remplacer par une balise plus appropriée, comme <div>.
Figure n°220 : Exemple d'utilisation inadaptée d'élément de liste
La section latérale « Contact Presse » est implémentée avec une balise <ul> qui ne contient aucun élément <li>. Ce n'est pas une utilisation adaptée de cette balise qu'il faut remplacer par une balise plus appropriée, comme <div>.
Figure n°221 : Utilisation inadaptée d'élément de liste
Dans les fenêtres modales donnant les informations sur les différents évènements, les liens dirigeant vers les pages correspondant aux évènements (qui ont des intitulés comme « En savoir plus », « Programme et inscription » ou « Informations et inscription ») sont implémentés au sein d'une balise <ul> contenant un seul élément <li>. Ces listes à un seul élément ne constituent pas une utilisation adaptée des éléments de liste : il faut retirer les balises <ul> et <li> correspondantes.
Figure n°222 : Exemple d'utilisation inadaptée d'éléments de listeFigure n°223 : Exemple d'utilisation inadaptée d'éléments de listeFigure n°224 : Exemple d'utilisation inadaptée d'éléments de liste
Critère 9.4 - Dans chaque page web, chaque citation est-elle correctement indiquée ?
Dans la fenêtre de paramétrage des cookies, les balises <span> contenant les pictogrammes correspondant aux croix et encoches présentent des attributs « color ». Ces attributs servant à la présentation ne doivent pas être utilisés dans le code source : il faut utiliser des feuilles de style.
Figure n°226 : Exemple d'attribut de présentationFigure n°227 : Exemple d'attribut de présentation
pour la page Accueil et la page Présidentielle 2022, le contenu concerné n'est plus présent.
Les éléments <iframe> utilisés pour implémenter les vidéos YouTube présentent des attributs « frameborder », « width » et « height ». Ces attributs servant à la présentation ne doivent pas être utilisés dans le code source : il faut utiliser des feuilles de style.
Figure n°228 : Exemple de présence d'attributs de présentation
L'élément <iframe> utilisé pour implémenter le Captcha présente des attributs « frameborder », « width » et « height ». Ces attributs servant à la présentation ne doivent pas être utilisés dans le code source : il faut utiliser des feuilles de style.
Figure n°229 : Présence d'attributs de présentation
Un élément <iframe> utilisé sur la page présente un attribut « frameborder ». Cet attribut servant à la présentation ne doit pas être utilisé dans le code source : il faut utiliser des feuilles de style.
Figure n°230 : Présence d'un attribut de présentation
L'élément <iframe> utilisé pour implémenter les podcasts SoundCloud présente des attributs « frameborder », « width » et « height ». Ces attributs servant à la présentation ne doivent pas être utilisés dans le code source : il faut utiliser des feuilles de style.
Figure n°231 : Présence d'attributs de présentation
Critère 10.2 - Dans chaque page web, le contenu visible porteur d’information reste-t-il présent lorsque les feuilles de styles sont désactivées ?
Conforme
Critère 10.3 - Dans chaque page web, l’information reste-t-elle compréhensible lorsque les feuilles de styles sont désactivées ?
Conforme
Critère 10.4 - 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) ?
Liens peu visibles par rapport au texte environnant
Plusieurs liens présents sur la page se trouvent au sein d'un paragraphe de texte et ne sont pas suffisamment visibles par rapport au texte environnant. Il faut que la couleur des liens ait un contraste d'au moins 3:1 avec la couleur du texte environnant, et qu'ils aient une indication visuelle au survol autre qu'un changement de couleur. Par exemple, un soulignement ou une mise en gras.
Figure n°233 : Exemple de lien peu visible par rapport au texte environnant (1,9:1)Figure n°234 : Exemple de lien peu visible par rapport au texte environnant (1,9:1)Figure n°235 : Exemple de lien peu visible par rapport au texte environnant (1,9:1)Figure n°236 : Exemple de lien peu visible par rapport au texte environnant (1,9:1)Figure n°237 : Exemple de lien peu visible par rapport au texte environnant (1,9:1)Figure n°238 : Exemple de lien peu visible par rapport au texte environnant (1,9:1)Figure n°239 : Exemple de liens peu visibles par rapport au texte environnant (1,9:1)Figure n°240 : Exemple de lien peu visible par rapport au texte environnant (1,9:1)Figure n°241 : Exemple de lien peu visible par rapport au texte environnant (1,9:1)Figure n°242 : Exemple de lien peu visible par rapport au texte environnant (1,9:1)
Critère 10.7 - Dans chaque page web, pour chaque élément recevant le focus, la prise de focus est-elle visible ?
Dans la fenêtre de paramétrage des cookies, la prise de focus sur les différents boutons switch correspondant aux différents cookies ainsi que sur le bouton permettant de tout accepter est matérialisée par l'apparition d'un contour qui n'est pas suffisamment contrasté avec l'arrière-plan : le taux de contraste doit être d'au moins 3:1.
Figure n°243 : Exemple de prise de focus pas assez perceptible (1,3:1)Figure n°244 : Exemple de prise de focus pas assez perceptible (1,3:1)Figure n°245 : Exemple de prise de focus pas assez perceptible (1,6:1)
Dans la fenêtre de gestion des cookies, la prise de focus sur les différents boutons permettant d'accéder au paramétrage des cookies, de revenir à la fenêtre initiale, de fermer la fenêtre et de terminer le paramétrage est matérialisée par un changement de couleur de fond qui n'est pas suffisamment contrasté avec la couleur d'origine : le taux de contraste doit être d'au moins 3:1.
Figure n°246 : Exemple de prise de focus pas assez perceptible (1,1:1)
Les images cliquables présentes dans le fil Twitter ainsi que le bouton « Voir plus sur Twitter » ne présentent aucune indication visuelle lorsqu'ils reçoivent le focus de la navigation clavier.
Figure n°247 : Exemple de prise de focus non perceptibleFigure n°248 : Exemple de prise de focus non perceptibleFigure n°249 : Exemple de prise de focus non perceptible
Dans la fenêtre de visualisation d'une image du fil Twitter, les flèches permettant de faire défiler les images ainsi que les différents liens permettant d'accéder aux comptes et statuts ne présentent aucune indication visuelle lorsqu'ils reçoivent le focus de la navigation clavier.
Figure n°250 : Exemple de prise de focus non perceptibleFigure n°251 : Exemple de prise de focus non perceptibleFigure n°252 : Exemple de prise de focus non perceptible
Dans la fenêtre de visualisation d'une image du fil Twitter, la prise de focus sur les deux liens accolés permettant de partager le statut et d'y accéder sur Twitter est matérialisée par un changement de couleur du texte qui n'est pas suffisamment contrasté avec la couleur d'origine : le taux de contraste doit être d'au moins 3:1.
Figure n°253 : Prise de focus pas assez perceptible (2,8:1)
Les boutons permettant de naviguer dans les différents carrousels ont leur prise de focus matérialisée par l'apparition d'un contour qui n'est pas suffisamment contrasté avec l'arrière-plan : le taux de contraste doit être d'au moins 3:1.
Figure n°254 : Exemple de prise de focus pas assez perceptible (1,8:1)Figure n°255 : Exemple de prise de focus pas assez perceptible (1,8:1)
Dans les fenêtres modales donnant les informations sur les différents évènements, la prise de focus sur le bouton permettant de fermer la fenêtre est matérialisée par un changement de couleur qui n'est pas suffisamment contrasté avec la couleur d'origine : le taux de contraste doit être d'au moins 3:1.
Figure n°256 : Exemple de prise de focus pas assez perceptible (2,9:1)
Critère 10.8 - Pour chaque page web, les contenus cachés ont-ils vocation à être ignorés par les technologies d’assistance ?
Conforme
Critère 10.9 - 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 ?
Conforme
Critère 10.10 - Dans chaque page web, l’information ne doit pas être donnée par la forme, taille ou position uniquement. Cette règle est-elle implémentée de façon pertinente ?
Mauvaise implémentation de la règle sur l'information transmise par la position
Dans la fenêtre de gestion des cookies, les instructions renvoient à « l'icône rouge en bas à gauche de chaque page du site ». Comme indiqué dans le critère 3.1, l'information est donnée par la position et la couleur, ce qui n'est pas suffisant : il faut identifier nommément le bouton concerné.
Figure n°257 : Mauvaise implémentation de la règle sur l'information transmise par la position
Critère 10.11 - 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) ?
Contenus tronqués en affichage en largeur de 320 pixels
Lorsque la page est affichée en largeur de 320 pixels, certains contenus ne sont plus entièrement visibles.
Figure n°258 : Exemple de contenu tronqué en affichage en largeur de 320 pixelsFigure n°259 : Exemple de contenu tronqué en affichage en largeur de 320 pixelsFigure n°260 : Exemple de contenu tronqué en affichage en largeur de 320 pixels
Critère 10.12 - 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) ?
Conforme
Critère 10.13 - Dans chaque page web, les contenus additionnels apparaissant à la prise de focus ou au survol d’un composant d’interface sont-ils contrôlables par l’utilisateur (hors cas particuliers) ?
Non applicable
Critère 10.14 - Dans chaque page web, les contenus additionnels apparaissant via les styles CSS uniquement peuvent-ils être rendus visibles au clavier et par tout dispositif de pointage ?
Non applicable
11. Formulaires
Critère 11.1 - Chaque champ de formulaire a-t-il une étiquette ?
Le champ de saisie permettant de saisir une date de fin a une étiquette qui ne lui est pas correctement reliée car l'attribut « for » de l'étiquette est différent de l'attribut « id » du champ de saisie : il faut corriger cette erreur.
Figure n°261 : Étiquette non reliée au champ de formulaire
Anomalie persistante. À savoir : Les placeholders ne sont pas des étiquettes valables s'ils ne se déplacent pas de façon à rester lisibles une fois que le champ qui les contient est sélectionné.
Le champ de saisie permettant de saisir une recherche ainsi que la liste déroulante des options de tri possèdent chacun une étiquette qui leur est reliée mais qui n'est pas visible. Ce n'est pas conforme car chaque champ de saisie doit avoir une étiquette visible qui lui est accolée.
Figure n°262 : Absence d'étiquettes visible aux champs de saisieFigure n°263 : Absence d'étiquettes visible aux champs de saisie
Anomalie persistante. À savoir : Les placeholders ne sont pas des étiquettes valables s'ils ne se déplacent pas de façon à rester lisibles une fois que le champ qui les contient est sélectionné.
Le champ de saisie permettant de rechercher un évènement ainsi que la liste déroulante permettant de sélectionner un type d'évènement possèdent chacun une étiquette qui leur est reliée mais qui n'est pas visible. Ce n'est pas conforme car chaque champ de saisie doit avoir une étiquette visible qui lui soit accolée.
Figure n°264 : Absence d'étiquettes visible aux champs de saisie
Critère 11.2 - Chaque étiquette associée à un champ de formulaire est-elle pertinente (hors cas particuliers) ?
Le contenu concerné n'est plus présent. Le critère passe donc en conforme.
Le champ de saisie du pied de page permettant de saisir une adresse e-mail afin de s'inscrire à la newsletter a une étiquette « EMAIL (Nécessaire) » qui est masquée visuellement, et cette étiquette ne correspond pas aux passages de texte accolés au champ de saisie. Il faut modifier cette étiquette masquée afin qu'elle reprenne l'information visuelle, comme par exemple « Saisir votre adresse e-mail pour s'inscrire à la newsletter (Nécessaire) ».
Figure n°265 : Étiquette de champ de saisie non pertinente
Critère 11.3 - Dans chaque formulaire, chaque étiquette associée à un champ de formulaire ayant la même fonction et répétée plusieurs fois dans une même page ou dans un ensemble de pages est-elle cohérente ?
Non applicable
Critère 11.4 - Dans chaque formulaire, chaque étiquette de champ et son champ associé sont-ils accolés (hors cas particuliers) ?
Anomalie persistante. À savoir : Les placeholders ne sont pas des étiquettes valables s'ils ne se déplacent pas de façon à rester lisibles une fois que le champ qui les contient est sélectionné.
Le champ de saisie permettant de rechercher un évènement ainsi que la liste déroulante permettant de sélectionner un type d'évènement possèdent chacun une étiquette qui leur est reliée mais qui n'est pas visible. Ce n'est pas conforme car chaque champ de saisie doit avoir une étiquette visible qui lui soit accolée.
Figure n°266 : Étiquettes non accolées aux champs de saisie
Anomalie persistante. À savoir : Les placeholders ne sont pas des étiquettes valables s'ils ne se déplacent pas de façon à rester lisibles une fois que le champ qui les contient est sélectionné.
Le champ de saisie permettant de saisir une recherche ainsi que la liste déroulante des options de tri possèdent chacun une étiquette qui leur est reliée mais qui n'est pas visible. Ce n'est pas conforme car chaque champ de saisie doit avoir une étiquette visible qui lui soit accolée.
Figure n°267 : Exemple d'étiquette non accolée au champ de saisieFigure n°268 : Exemple d'étiquette non accolée au champ de saisie
Critère 11.5 - Dans chaque formulaire, les champs de même nature sont-ils regroupés, si nécessaire ?
Conforme
Critère 11.6 - Dans chaque formulaire, chaque regroupement de champs de même nature a-t-il une légende ?
Conforme
Critère 11.7 - Dans chaque formulaire, chaque légende associée à un regroupement de champs de même nature est-elle pertinente ?
Conforme
Critère 11.8 - Dans chaque formulaire, les items de même nature d’une liste de choix sont-ils regroupés de manière pertinente ?
Non applicable
Critère 11.9 - Dans chaque formulaire, l’intitulé de chaque bouton est-il pertinent (hors cas particuliers) ?
Dans la fenêtre de gestion des cookies, les boutons permettant de fermer la fenêtre, accéder au paramétrage des cookies et terminer le paramétrage sont simplement intitulés « Fermer », « Paramétrer », et « Terminer ». Il faut leur donner des alternatives plus explicites sur leur fonction, comme par exemple « Fermer la fenêtre de gestion des cookies », « Paramétrer les cookies », « » ou « Terminer et accepter les cookies sélectionnés ».
Figure n°269 : Exemple d'intitulé de bouton non suffisamment expliciteFigure n°270 : Exemple d'intitulé de bouton non suffisamment expliciteFigure n°271 : Exemple d'intitulé de bouton non suffisamment explicite
Dans la fenêtre de paramétrage des cookies, le bouton permettant d'accepter tous les cookies a comme alternative « J'accepte les cookies de cette étape et veux parcourir l'étape suivante », ce qui n'est pas conforme car elle ne reprend pas l'intitulé visible du bouton. L'intitulé « Tout accepter » étant suffisant pour comprendre la fonction du bouton, cette alternative n'est pas nécessaire et il est préférable de la supprimer.
Figure n°272 : Alternative de bouton non pertinente
Le bouton permettant de continuer sur la page sans accepter les cookies possède deux alternatives différentes : « Continuer sans accepter » implémentée avec un attribut « title », et « Fermer le widget sans consentement » implémentée avec un attribut « aria-label ». Ce n'est pas une implémentation pertinente : ces deux attributs doivent avoir la même valeur (« Continuer sans accepter » étant la valeur la plus pertinente qu'il faudrait préférablement conserver).
Figure n°273 : Alternative de bouton non pertinente
Le bouton du menu permettant d'accéder au champ de recherche contient un pictogramme SVG qui n'est pas correctement masqué aux outils d'assistance : il faut donner à l'élément <svg> un attribut « aria-hidden="true" ».
Les boutons permettant d'afficher et de masquer un fil Twitter ont un intitulé en anglais. Il faut modifier ces intitulés afin qu'ils soient en français, comme par exemple « Afficher/Masquer le fil ».
Figure n°275 : Intitulé de bouton non pertinentFigure n°276 : Exemple d'intitulé de bouton non pertinent
Les boutons permettant de naviguer dans les différents carrousels ont un intitulé qui est en anglais : il faut modifier ces intitulés afin qu'ils soient en français, comme par exemple « Diapositive précédente/suivante » et « Aller à la diapositive 1 ».
Figure n°277 : Exemple d'intitulés de boutons non pertinentsFigure n°278 : Exemple d'intitulés de boutons non pertinents
Les boutons permettant d'obtenir le lien de la page et d'imprimer la page contiennent un pictogramme SVG qui n'est pas correctement masqué aux outils d'assistance : il faut donner à l'élément <svg> un attribut « aria-hidden="true" ».
Par ailleurs, le bouton permettant d'obtenir le lien de la page a un intitulé en anglais (« Link »). Il faut modifier cet intitulé afin qu'il soit en français, comme par exemple « Obtenir le lien ».
Les boutons permettant de fermer les fenêtres modales correspondant aux différents évènements ont une alternative en anglais (« Close (Esc) »). Il faut modifier cette alternative afin qu'elle soit en français et plus explicite sur la fonction des boutons, comme par exemple « Fermer la fenêtre de l'évènement (Échap) ». Par ailleurs, ces boutons contiennent un passage de texte « x » qu'il faut masquer aux technologies d'assistance en les insérant au sein d'une balise <span> présentant un attribut « aria-hidden="true" ».
Figure n°280 : Exemple d'intitulé de bouton non pertinent
Dans la section « Tous les évènements », les boutons permettant d'ouvrir les fenêtres modales correspondant aux différents évènements ont des intitulés qui ne spécifient pas l'évènement concerné. Il faut leur donner une alternative au moyen d'un attribut « aria-label » qui précise l'élément concerné, comme par exemple « En savoir plus sur <nom de l'évènement> », « Toutes les informations sur <nom de l'évènement> » et « Informations et inscription à <nom de l'évènement> ».
Figure n°281 : Exemple d'intitulé de bouton non suffisamment expliciteFigure n°282 : Exemple d'intitulé de bouton non suffisamment expliciteFigure n°283 : Exemple d'intitulé de bouton non suffisamment explicite
Critère 11.10 - Dans chaque formulaire, le contrôle de saisie est-il utilisé de manière pertinente (hors cas particuliers) ?
Conforme
Critère 11.11 - Dans chaque formulaire, le contrôle de saisie est-il accompagné, si nécessaire, de suggestions facilitant la correction des erreurs de saisie ?
Conforme
Critère 11.12 - 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 ou récupérées par l’utilisateur ?
Non applicable
Critère 11.13 - 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 ?
L'élément concerné n'est plus présent. L'anomalie non plus.
Le champ de saisie du pied de page permettant de saisir une adresse e-mail afin de s'inscrire à la newsletter est un champ qui se rapporte à une donnée concernant l'utilisateur, et doit par conséquent présenter un attribut « autocomplete » avec la valeur « email ».
Les différents champs de saisie du formulaire de contact se rapportant à des données concernant l'utilisateur (prénom, nom, e-mail) doivent présenter un attribut « autocomplete » dont la valeur correspond au type de donnée attendu (« given-name » pour le prénom, « family-name » pour le nom, « email » pour l'adresse e-mail).
Figure n°285 : Exemple d'absence d'attributs « autocomplete »Figure n°286 : Exemple d'absence d'attributs « autocomplete »
12. Navigation
Critère 12.1 - Chaque ensemble de pages dispose-t-il de deux systèmes de navigation différents, au moins (hors cas particuliers) ?
Conforme
Critère 12.2 - Dans chaque ensemble de pages, le menu et les barres de navigation sont-ils toujours à la même place (hors cas particuliers) ?
Conforme
Critère 12.3 - La page « plan du site » est-elle pertinente ?
Non applicable
Critère 12.4 - Dans chaque ensemble de pages, la page « plan du site » est-elle atteignable de manière identique ?
Non applicable
Critère 12.5 - Dans chaque ensemble de pages, le moteur de recherche est-il atteignable de manière identique ?
Conforme
Critère 12.6 - 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 ?
Absence de dispositif permettant d'atteindre ou d'éviter les zones de regroupement
13/06/2025
OK Urbilog
Afin de permettre un accès rapide aux différentes zones de la page pour les utilisateurs d'assistances technologiques, une solution est de donner des attributs landmark aux éléments contenant les différentes zones :
L'élément contenant l'en-tête (<header>) doit présenter un attribut « role="banner" ».
L'élément contenant la zone de navigation principale (<nav>) doit présenter un attribut « role="navigation" ».
L'élément contenant la zone de contenu principal (<main>) doit présenter un attribut « role="main" ».
L'élément contenant le pied de page (<footer>, implémenté suite à la recommandation du critère 9.2) doit présenter un attribut « role="contentinfo" ».
Critère 12.7 - Dans chaque page web, un lien d’évitement ou d’accès rapide à la zone de contenu principal est-il présent (hors cas particuliers) ?
Conforme
Critère 12.8 - Dans chaque page web, l’ordre de tabulation est-il cohérent ?
Dans le formulaire du pied de page permettant de saisir une adresse e-mail afin de s'inscrire à la newsletter, la navigation clavier parcourt la case à cocher et le lien vers la politique de confidentialité avant le bouton « S'inscrire », ce qui ne respecte pas l'ordre de navigation attendu du haut vers le bas.
Les quatre listes déroulantes permettant de choisir une formation ont chacune un attribut « tabindex="1" », ce qui a pour effet de faire de ces listes les premiers éléments de la page parcourus par la navigation au clavier. Ce n'est pas conforme car la navigation clavier doit parcourir la page du haut vers le bas : il faut supprimer ces attributs.
Figure n°288 : Ordre de tabulation non cohérent
Critère 12.9 - Dans chaque page web, la navigation ne doit pas contenir de piège au clavier. Cette règle est-elle respectée ?
Conforme
Critère 12.10 - Dans chaque page web, les raccourcis clavier n’utilisant qu’une seule touche (lettre minuscule ou majuscule, ponctuation, chiffre ou symbole) sont-ils contrôlables par l’utilisateur ?
Non applicable
Critère 12.11 - Dans chaque page web, les contenus additionnels apparaissant au survol, à la prise de focus ou à l’activation d’un composant d’interface sont-ils si nécessaire atteignables au clavier ?
Conforme
13. Consultation
Critère 13.1 - Pour chaque page web, l’utilisateur a-t-il le contrôle de chaque limite de temps modifiant le contenu (hors cas particuliers) ?
Non applicable
Critère 13.2 - Dans chaque page web, l’ouverture d’une nouvelle fenêtre ne doit pas être déclenchée sans action de l’utilisateur. Cette règle est-elle respectée ?
Conforme
Critère 13.3 - Dans chaque page web, chaque document bureautique en téléchargement possède-t-il, si nécessaire, une version accessible (hors cas particuliers) ?
Documents bureautiques téléchargeables non accessibles
Les documents PDF téléchargeables depuis la page ne répondent pas aux critères d'accessibilité : il faut proposer une version alternative accessible (en HTML ou .doc par exemple).
Figure n°289 : Exemple de document bureautique téléchargeable non accessibleFigure n°290 : Exemple de documents bureautiques téléchargeables non accessibles
Critère 13.4 - Pour chaque document bureautique ayant une version accessible, cette version offre-t-elle la même information ?
Non applicable
Critère 13.5 - Dans chaque page web, chaque contenu cryptique (art ASCII, émoticône, syntaxe cryptique) a-t-il une alternative ?
Non applicable
Critère 13.6 - Dans chaque page web, pour chaque contenu cryptique (art ASCII, émoticône, syntaxe cryptique) ayant une alternative, cette alternative est-elle pertinente ?
Non applicable
Critère 13.7 - Dans chaque page web, les changements brusques de luminosité ou les effets de flash sont-ils correctement utilisés ?
Non applicable
Critère 13.8 - Dans chaque page web, chaque contenu en mouvement ou clignotant est-il contrôlable par l’utilisateur ?
Non applicable
Critère 13.9 - Dans chaque page web, le contenu proposé est-il consultable quelle que soit l’orientation de l’écran (portrait ou paysage) (hors cas particuliers) ?
La section latérale « Contact Presse » n'est plus affichée lorsque la page est affichée en orientation portrait.
Figure n°291 : Contenu manquant en orientation portrait
Critère 13.10 - Dans chaque page web, les fonctionnalités utilisables ou disponibles au moyen d’un geste complexe peuvent-elles être également disponibles au moyen d’un geste simple (hors cas particuliers) ?
Non applicable
Critère 13.11 - Dans chaque page web, les actions déclenchées au moyen d’un dispositif de pointage sur un point unique de l’écran peuvent-elles faire l’objet d’une annulation (hors cas particuliers) ?
Conforme
Critère 13.12 - Dans chaque page web, les fonctionnalités qui impliquent un mouvement de l’appareil ou vers l’appareil peuvent-elles être satisfaites de manière alternative (hors cas particuliers) ?
, Contact
Image <img> porteuse d'information sans alternative textuelle
12/06/2025
KO Urbilog - Assurance emploie. Absence d'alternatives sur des images informatives.
Chaque image porteuse d’information doit avoir une alternative textuelle transmettant une information équivalente aux aides techniques telles que les synthèses vocales.
Assurance emploie : les formations :
L'image présente dans l'élément de fermeture des modales des formations doit avoir un attribut « alt » avec comme valeur « Fermer ». (voir thématique 7 pour les modales des formations)