Référentiel utilisé et domaine d'application
L'audit a été effectué sur la base du RGAA 4.0 , disponible à l’adresse :
https://www.numerique.gouv.fr/publications/rgaa-accessibilite/methode/criteres/#contenu .
Le référentiel est constitué de 106 critères et 256 tests unitaires.
L’analyse a été effectuée sur l’échantillon de pages suivant :
1. Page d’accueil ( https://www.calvados.fr/accueil.html )
2. Recherche et résultats ( https://www.calvados.fr/accueil/resultats-de-recherche.html )
3. Formulaire de contact ( https://www.calvados.fr/accueil/formulaire-de-contact-general.html )
4. Page qui deviendra la nouvelle page de contact (en recette)
5. Page « toute l’info » ( https://www.calvados.fr/accueil/toute-linfo.html )
6. Une actualité ( https://www.calvados.fr/actu/parents-confines-avec-des-enfants-conseils-activites )
7. Une page de contenu persistant ( https://www.calvados.fr/mdph )
8. La page FAQ ( https://www.calvados.fr/accueil/faq.html )
9. La page emplois ( https://www.calvados.fr/espace-emploi ) avec son formulaire de candidature
La déclaration de conformité du site calvados.fr a été établie le 30 Aout 2020
La version utilisée pour réaliser les tests est la version 4.0 du RGAA .
Identité du déclarant
Conseil départemental du Calvados
9 rue saint laurent
14000 Caen
Technologies utilisées sur le site
HTML5
CSS
JavaScript
SVG
Agents utilisateurs, technologies d'assistance et outils utilisés pour vérifier l'accessibilité
Les vérifications de restitution de contenus ont été réalisées sur la base de la combinaison fournie par la base de référence du RGAA 4, avec les versions suivantes :
Firefox 53 et NVDA 2018.14
Firefox 53 et JAWS 18
Safari et VoiceOver (dernière version disponible à date sur osX et iOS)
Conformité
Le taux de conformité au RGAA 4 2019 niveau A+AA mesuré sur l’échantillon détaillée ci-avant est de 30 %.
Dans le détail :
- 19 critères sont non conformes
- 44 critères sont conformes
- 43 critères ne sont pas applicables
Le pourcentage de 30 % est donc calculé sur 63 critères applicables.
Contrastes de texte insuffisant
Référence RGAA
● 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) ?
Problème
● Le taux de contraste entre les textes suivants et la/les couleur/s qui les entourent est
insuffisant.
Impact : Majeur
Éléments graphiques non textuels (pictogrammes, visuel, etc.) – outline de focus inclus s’il n’est
pas celui par défaut.
Référence RGAA
● 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) ?
Problème
● Le taux de contraste entre les éléments graphiques suivants et les couleurs qui les entourent
est insuffisant.
Impact : Majeur
Communication par la couleur
Référence RGAA
● 10.6. Dans chaque page web, chaque lien dont la nature n’est pas évidente est-il visible par
rapport au texte environnant ?
Problème
● Compte-tenu que la seule différenciation visuelle entre les liens et le texte qui les entoure
est un changement de couleur, le taux de contraste entre la couleur des liens et la couleur
du texte est insuffisant.
Impact : Majeur
Visibilité de l’état de focus (lors de la tabulation)
Référence RGAA
● 10.7. Dans chaque page web, pour chaque élément recevant le focus, la prise de focus
est-elle visible ?
Problème
● Sur certains éléments interactifs, le focus n’est pas visible ou à peine perceptible.
Impact : Bloquant
Contenu manquant en consultation « mobile »
Référence RGAA
● 10.11. Pour chaque page web, les contenus peuvent-ils être présentés sans avoir recours à la fois à un défilement vertical pour une fenêtre ayant une hauteur de 256px ou une largeur de 320px (hors cas particuliers) ?
Problème
- ● Une partie des contenus n’est pas présentée aux utilisateurs consultant le site sur appareils « mobiles » sans alternative (un autre moyen sur la même page d’accéder à cette fonction ou ressource), comme par exemple sur la page d’accueil :
- ○ Le bloc « Fil info »
- ○ Le composant (onglets) de filtres d’actualités
- ○ Le bloc « Les actions du département »
- ● À noter qu’à l’inverse, certains contenus sont présentés aux utilisateurs ayant une fenêtre de navigateur étroite et pas à ceux avec une fenêtre plus large mais qu’il existe une alternative :
- ○ Le bloc « FAQ Covid-19 » (un lien est déjà présent dans le carrousel en haut de page)
- ○ Le bloc « Démarches en ligne » (le lien « Voire l'ensemble des aides & services » qui pointe vers la même page est présent en mode large)
Impact : Bloquant
Grossissement du texte
Référence RGAA
● 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) ?
Problème
● Que le texte soit grossi à 200 % ou que l’utilisateur fasse un zoom graphique de 200 %, certains contenus sont rognés ou disparaissent (contenu des 2 e niveaux de navigation/mega dropdowns, blocs de textes, etc.)
● De plus, il n’est pas possible de zoomer dans la page sur certains écrans tactiles.
Impact : Bloquant
Structure globale (toutes les pages)
Référence RGAA
● 9.2. Dans chaque page web, la structure du document est-elle cohérente (hors cas
particuliers) ?
● 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 ?
Problème
● La zone de contenu principal n'est pas identifiée
● Les différentes régions de la page ne peuvent pas être directement atteintes ou évitées
Impact : Majeur
Pictogrammes/font-icons dans les liens et boutons
Référence RGAA
● 1.2. Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
Problème
● Les pictogrammes en font-icons qui illustrent du texte dans les liens et boutons sont exposés à certaines TA, le contenu injecté en CSS avec la propriété content étant parfois restitué aux TA.
Impact : Majeur
Bannière de cookies : ordre de focus incorrect
Référence RGAA
● 12.8. Dans chaque page web, l’ordre de tabulation est-il cohérent ?
Problème
● La bannière de cookies est visuellement positionnée « au-dessus » du contenu de la page et fonctionnellement, il est attendu qu’un utilisateur voyant pose ses yeux dessus en premier pour éventuellement faire son choix. Or elle est atteignable en tout dernier pour les
utilisateurs naviguant au clavier et n’est donc pas exposée aux utilisateurs aveugle avec le même degré d’importance.
Impact : Bloquant
Absence de lien d’évitement
Référence RGAA
● 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) ?
Problème
● Les pages ne contiennent pas de lien d'évitement qui pointe vers le contenu principal
Impact : Majeur
Fil d'Ariane (présent sur certaines pages du site)
Référence RGAA
● 9.3. Dans chaque page web, chaque liste est-elle correctement structurée ?
Problème
● Le fil d’Ariane n’est pas codé de façon à être restitué correctement aux utilisateurs de TA.
C’est une liste de liens qui permet à l’utilisateur de comprendre où il se trouve dans une partie de la hiérarchie du site autant qu’elle lui donne la possibilité de se rendre dans ces différents niveaux.
Impact : Mineur
Liens réseaux sociaux (2 occurrences)
Référence RGAA
● 6.1. Chaque lien est-il explicite (hors cas particuliers) ?
● 9.3. Dans chaque page web, chaque liste est-elle correctement structurée ?
Problème
● Les valeurs des attributs alt des images sont incorrects.
● Les liens ne sont pas contenus dans une liste
Impact : Mineur
(Desktop) barre de fonctions et liens secondaires <div class="cal_liens">
Référence RGAA
● 7.1. Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
● 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 ?
Problème
● Code des boutons incorrect. Ce sont des boutons et non des liens.
● Visuellement, la différence entre les deux boutons est uniquement la taille de la lettre.
Impact : Majeur
Bouton de menu déroulant « Tous nos sites web » (desktop et mobile)
Référence RGAA
● 7.1. Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
● 7.3. Chaque script est-il contrôlable par le clavier et par tout dispositif de pointage (hors cas particuliers) ?
Problème
● Code du bouton incorrect. C’est un bouton et non un lien et l’attribut aria-haspopup est incorrect et il ne prend pas le focus lors de la tabulation.
● La valeur de l’attribut title doit reprendre l’intitulé (ici le nom accessible) du bouton
● la valeur par défaut de l'attribut aria-expanded ("true") est incorrecte.
Impact : Bloquant
Lien « Près de chez vous »
Référence RGAA
● 1.2. Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
Problèmes
● Le pictogramme est exposé à certaines TA
Impact : Mineur
Bouton de gestion des cookies (ouverture d’une fenêtre modale) <div onclick="tarteaucitron…>
Référence RGAA
● 7.1. Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Problème
● Le code du bouton est incorrect.
Impact : Majeur
Bouton de gestion des cookies - Gestion du focus
Référence RGAA
● 7.1. Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Problème
● Quand l’utilisateur fait disparaître la fenêtre modale, le focus disparaît/revient en haut de la page.
Impact : Majeur
Bouton de menu déroulant de connexion
Référence RGAA
● 7.1. Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
● 7.3. Chaque script est-il contrôlable par le clavier et par tout dispositif de pointage (hors cas particuliers) ?
Problèmes
● Code du bouton incorrect. C’est un bouton et non un lien. Parce que c’est un élément <a> sans attribut href, il ne prend pas le focus lors de la tabulation
● La valeur par défaut de l'attribut aria-expanded ("true") est incorrecte
● La valeur de l’attribut title doit reprendre l’intitulé (ici le nom visible uniquement en mobile) du bouton « Menu de connexion »
Impact : Bloquant
Menu déroulant / lien « Se connecter »
Référence RGAA
● 1.2. Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
● 6.1. Chaque lien est-il explicite (hors cas particuliers) ?
Problèmes
● Le pictogramme est exposé à certaines TA
● La valeur de l’attribut title doit reprendre l’intitulé du lien
Impact : Majeur
Navigation secondaire (liens dans la barre supérieure)
Référence RGAA
● 9.2. Dans chaque page web, la structure du document est-elle cohérente (hors cas particuliers) ?
Problème
● Les liens contenus dans cette barre ne sont pas contenus dans une région qui informe les utilisateurs de TA que ce sont des liens de navigation secondaire.
Impact : Majeur
(Desktop) Menu de navigation principale
Référence RGAA
● 9.2. Dans chaque page web, la structure du document est-elle cohérente (hors cas particuliers) ?
Problème
● Le nom accessible de cette région de la page (via son attribut aria-label) est incorrect
Impact : Mineur
Structure de la liste de 1 er niveau <ul class="cal_liens">
Référence RGAA
● 9.3. Dans chaque page web, chaque liste est-elle correctement structurée ?
Problème
● Présence d’item de liste vide <li class="cal_lien couleur2"></li>
Impact : Mineur
Fonctionnel / implémentation incorrecte de l’apparition des menus de 2e niveau (mega dropdowns)
Référence RGAA
● 7.1. Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Problème
● Les liens de 1er niveau ont un comportement mixte : en plus d’être des liens, ils font apparaître des menus de 2e niveau au survol du curseur. Un utilisateur naviguant au clavier ne peut pas accéder à ces menus.
Impact : Bloquant
Menus de 2 e niveau – premier : « Le département »
Référence RGAA
● 1.2. Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
Problème
● Les images décoratives contenues dans les mega dropdowns de la navigation principale ne doivent pas avoir de texte alternatif.
Impact : Majeur
Structure du contenu
Référence RGAA
● 9.1. Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de
titres ?
Problème
● Les titres-liens de catégories qui précèdent les listes de liens (« Solidarité et famille », «Culture, sport… », etc.) n’ont aucune sémantique compréhensible pour un utilisateur de TA.
Leur traitement visuel suggère que ce sont des titres, il faut donc que le code reflète ce choix, comme c’est le cas dans la 2e mega-dropdown (par ex. <h3 class=" hover-couleur3 texte-couleur3"><a href="/accueil/aides--services.html" title="Aides &
services">Services en ligne</a></h3>).
Impact : Mineur
Régions ARIA vides
Référence RGAA
● 9.2. Dans chaque page web, la structure du document est-elle cohérente (hors cas particuliers) ?
Problème
● Deux éléments <section> vides sont restitués aux TA.
Impact : Majeur
Titres manquants (partie gauche de la dropdown )
Référence RGAA
● 9.1. Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres ?
Problème
● Le titre de la section <div class="cal_date-courante"> n’est pas codé correctement
Impact : Mineur
Bouton « loupe » de recherche – code incorrect
Référence RGAA
● 7.1. Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
● 9.2. Dans chaque page web, la structure du document est-elle cohérente (hors cas particuliers) ?
● 10.2. Dans chaque page web, le contenu visible reste-t-il présent lorsque les feuilles de styles sont désactivées ?
Problème
● Le bouton qui déclenche l’ouverture de la pop-in de recherche n’est pas codé correctement. C’est un bouton et non un lien.
● Il n’a pas de contenu
● De plus, il n'apparaît pas comme région (landmark) de recherche pour un utilisateur de TA.
Impact : Bloquant
Bouton « loupe » de recherche – nom/état incorrect
Référence RGAA
● 7.1. Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Problème
● Quand la pop-in de recherche est visible, le bouton d’ouverture (picto loupe) devient le bouton de fermeture (picto croix) : ce changement de fonction doit être reflété dans le nom du bouton. Or la valeur de l’attribut title reste tout le temps « Ouvrir la recherche »
Impact : Majeur
Boutons mots-clés (desktop et mobile) – code incorrect
Référence RGAA
● 7.1. Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
● 7.3. Chaque script est-il contrôlable par le clavier et par tout dispositif de pointage (hors cas particuliers) ?
Problème
● Ces boutons sont codés incorrectement. Ce sont des boutons de soumission de formulaire et non des liens hypertextes De plus, étant des éléments <a> sans href, ils ne prennent pas le focus.
Impact : Bloquant
(Mobile) Bouton de Menu <a class="cal_bouton-menu navbar-toggle">
Référence RGAA
● 7.1. Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
● 7.3. Chaque script est-il contrôlable par le clavier et par tout dispositif de pointage (hors cas particuliers) ?
Problème
● Le bouton de menu n’est pas codé correctement, c’est un bouton et non un lien. De plus, étant un élément <a> sans attribut href, il ne prend pas le focus clavier.
● Quand le menu est visible, ce bouton permet de le refermer. Son nom exposé aux TA ne signale pas cette fonctionnalité
Impact : Bloquant
Ordre de focus incorrect
Référence RGAA
● 12.8. Dans chaque page web, l’ordre de tabulation est-il cohérent ?
Problème
● Le code du panneau de navigation doit se trouver juste après le code du bouton « Menu » qui déclenche son apparition/disparition.
Impact : Bloquant
Identification de la région de menu principal
Référence RGAA
● 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 ?
Problème
● Un utilisateur de TA ne pourra pas identifier et aller à la navigation principale quand celle-ci est fermée.
Impact : Mineur
Bouton « croix » de fermeture du panneau latéral <div class="close-menu"> - code incorrect
Référence RGAA
● 7.1. Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
● 7.3. Chaque script est-il contrôlable par le clavier et par tout dispositif de pointage (hors cas particuliers) ?
Problèmes
● Le code du bouton est incorrect.
● Le bouton ne fonctionne pas.
● Il n’a pas de nom accessible.
Impact : Bloquant
Bouton « Recherche (+ loupe) » <a class="cal_title" data-toggle="collapse" …> - code incorrect
Référence RGAA
● 7.1. Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
● 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 ?
Problème
● Le bouton qui déplie le bloc de recherche n’est pas codé correctement. C’est un bouton et non un lien.
● De plus, il n'apparaît pas comme région (landmark) de recherche : un utilisateur de TA ne peut donc pas l’identifier et se rendre dessus.
Impact : Majeur
Boutons d’ouverture/fermeture des accordéons de 2 e et 3 e niveaux
Référence RGAA
● 7.1. Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
● 7.3. Chaque script est-il contrôlable par le clavier et par tout dispositif de pointage (hors cas particuliers) ?
● 10.2. Dans chaque page web, le contenu visible reste-t-il présent lorsque les feuilles de styles sont désactivées ?
Problème
● Ces boutons ne sont pas codés correctement et ne prennent pas le focus.
● Ils n’ont pas de contenu.
● Les attributs aria-expanded sur les <ul> enfants sont inutiles.
Impact : Bloquant
Focus qui disparaît sous le header sticky
Référence RGAA
● 10.7. Dans chaque page web, pour chaque élément recevant le focus, la prise de focus est-elle visible ?
Problème
● Par endroits, le focus disparaît sous le header sticky.
Par exemple :
○ aller sur la page https://www.calvados.fr/accueil/aides--services.html
○ tabuler en descendant (Tab) jusqu’à ce que le focus soit sur le 1er bloc de la section “Foire aux questions” : “Chantier de déploiement du réseau très haut débit”
○ tabuler en remontant (Maj + Tab) pour atteindre le lien “Découvrez La Carte Interactive”
○ le focus n’est plus visible
Impact : Majeur
Footer - Liens non regroupés dans des listes <div class="cal_liens"> et <div class="reseaux-sociaux">
Référence RGAA
● 9.3. Dans chaque page web, chaque liste est-elle correctement structurée ?
Problème
● Les liens contenus dans les éléments <div class="cal_liens"> ainsi que <div class="reseaux-sociaux"> sont présentés visuellement comme des listes d’items de même niveau et de même nature mais ne sont pas contenus dans des listes HTML.
Impact : Mineur
Image décorative avec alternative textuelle
Référence RGAA
● 1.2. Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
Problème
● L’image du logo du Département Calvados est une image décorative à cet endroit du site (un utilisateur aveugle peut tout à fait comprendre et utiliser les éléments du footer sans cette image), de plus sa valeur n’est d’aucune utilité (« reference-dimage-1 »).
Impact : Mineur
Carrousel – bouton pause manquant
Référence RGAA
● 13.8. Dans chaque page web, chaque contenu en mouvement ou clignotant est-il contrôlable par l’utilisateur ?
Problème
● Le carrousel est en lecture automatique et ne peut pas être arrêté ou mis en pause ou disparaître par une action de l’utilisateur.
Même si l’animation est mise en pause lors de son survol à la souris ou à la prise de focus de l’item visible, certains utilisateurs, sur des appareils tactiles par exemple, seront dans l’incapacité de le mettre en pause et de continuer à lire ou interagir avec le reste de la page.
Impact : Bloquant
Carrousel – boutons de navigation parmi les items
Référence RGAA
● 7.1. Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
● 7.3. Chaque script est-il contrôlable par le clavier et par tout dispositif de pointage (hors cas
particuliers) ?
● 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) ?
Problèmes
● Les boutons pour naviguer parmi les items du carrousel ne fonctionnent pas pour les utilisateurs naviguant au clavier et/ou utilisant certaines TA.
● En mode mobile, les boutons disparaissent, ne laissant plus à l’utilisateur la possibilité de naviguer dans le carrousel avec un « geste simple » (une pression du doigt par ex.)
Impact : Bloquant
Carrousel – alternative textuelle des images dans les items
Référence RGAA
● 1.3. Pour chaque image porteuse d’information ayant une alternative textuelle, cette
alternative est-elle pertinente (hors cas particuliers) ?
● 6.1. Chaque lien est-il explicite (hors cas particuliers) ?
Problème
● Les liens contenus dans les items du carrousel ont un attribut title dont la valeur est incorrecte par rapport au texte contenu dans le lien.
Impact : Mineur
Carrousel – contenu tronqué en mobile
Référence RGAA
● 10.11. Pour chaque page web, les contenus peuvent-ils être présentés sans avoir recours à la fois à un défilement vertical pour une fenêtre ayant une hauteur de 256px ou une largeur de 320px (hors cas particuliers) ?
Problème
● Certains textes contenus dans des images disparaissent lors d’une consultation de la page sur mobile.
Impact : Majeur
Bloc Fil info - contenu qui disparaît sans la possibilité de le mettre en pause
Référence RGAA
● 13.8. Dans chaque page web, chaque contenu en mouvement ou clignotant est-il contrôlable
par l’utilisateur ?
Problème
● Les actus défilent mais l’utilisateur n’a aucun moyen de contrôler le défilement (mettre en
pause/redémarrer ou faire disparaitre/réapparaitre le composant)
Impact : Majeur
Bloc Fil info - titre manquant
Référence RGAA
● 9.1. Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres ?
Problème
● Le texte « Fil info » est un titre qui annonce un contenu (en l’occurrence des titres d’actus avec un lien vers l’actu qui défilent) mais le code ne traduit pas cette sémantique.
Impact : Mineur
Bloc Fil info - liens
Référence RGAA
● 6.1. Chaque lien est-il explicite (hors cas particuliers) ?
Problème
● Les valeurs des attributs title des liens « En savoir + » sont incorrects. Leur valeur doit inclure le texte du lien.
Impact : Mineur
Bloc Fil info - bouton de fermeture codé incorrectement
Référence RGAA
● 7.1. Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
● 7.3. Chaque script est-il contrôlable par le clavier et par tout dispositif de pointage (hors cas particuliers) ?
Problème
● Le bouton n’a pas de contenu
● Le bouton ne prends pas le focus lors de la tabulation et ne fonctionne pas au clavier
Impact : Majeur
Système d’onglets/ tabpanel inutilisable au clavier
Référence RGAA
● 7.1. Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
● 7.3. Chaque script est-il contrôlable par le clavier et par tout dispositif de pointage (hors cas particuliers) ?
Problème
● Ces onglets ne sont pas utilisables au clavier.
Impact : Bloquant
Bloc “Château des enfants”
Référence RGAA
● 6.1. Chaque lien est-il explicite (hors cas particuliers) ?
Problème
● La valeur des attributs title des deux liens sont incorrects.
Impact : Mineur
Bloc Aides & services - menus déroulants de filtres
Référence RGAA
● 7.1. Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
● 10.7. Dans chaque page web, pour chaque élément recevant le focus, la prise de focus est-elle visible ?
Problème
● Les deux boutons ne sont pas codés correctement, ce sont des boutons de composant Disclosure et non des liens
● Le focus n’est pas visible
● la valeur par défaut de l'attribut aria-expanded ("true") est incorrecte.
Impact : Bloquant
Bloc Aides & services - liste de liens <div class="cal_liste-briques">
Référence RGAA
● 9.1. Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres ?
Problème
● La liste est composée de liens dans des titres <h4> or ils ne sont pas suivis de contenu : ce ne sont pas des titres.
Impact : Mineur
Contenu manquant en consultation « mobile »
Référence RGAA
● 10.11. Pour chaque page web, les contenus peuvent-ils être présentés sans avoir recours à la fois à un défilement vertical pour une fenêtre ayant une hauteur de 256px ou une largeur de 320px (hors cas particuliers) ?
Problème
● Ce contenu n’est pas présenté aux utilisateurs consultant le site sur appareils « mobiles »
Impact : Majeur
Alternative textuelle des images incorrectes
Référence RGAA
● 1.3. Pour chaque image porteuse d’information ayant une alternative textuelle, cette alternative est-elle pertinente (hors cas particuliers) ?
Problèmes
● Les alternatives textuelles des images sont incorrectes
● La valeur des attributs title des liens ne sont pas assez explicites.
Impact : Majeur
Bloc Les actions du département / Titre-lien de la section
Référence RGAA
● 6.1. Chaque lien est-il explicite (hors cas particuliers) ?
● 8.2. Pour chaque page web, le code source généré est-il valide selon le type de document spécifié (hors cas particuliers) ?
Problème
● La valeur de l’attribut title qui contient du code HTML n’est pas pertinent
● La présence d’un élément <p> dans un élément <hn> n’est pas valide
Impact : Mineur
Bloc Les actions du département /Titre-liens <h3> des blocs avec image de fond
Référence RGAA
● 1.2. Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
Problème
● Les images de fond (éléments <img>) ont un attribut alt avec une valeur renseignée alors que ce sont des images décoratives.
Impact : Majeur
Liste des blocs de posts
Référence RGAA
● 9.3. Dans chaque page web, chaque liste est-elle correctement structurée ?
Problème
● Code de la liste incorrect. Un élément <ul> ne peut avoir que des <li> comme enfants directs.
Impact : Majeur
Pertinence des alternatives textuelles des images
Référence RGAA
● 1.1. Chaque image porteuse d’information a-t-elle une alternative textuelle ?
● 1.2. Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
Problème
● Certaines alternatives textuelles d’images contenant du texte sont incorrectes
● Certaines images décoratives ont des alternatives textuelles alors qu’elles ne devraient pas en avoir
Impact : Majeur
Bouton « Voir plus »
Référence RGAA
● 7.1. Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
● 12.8. Dans chaque page web, l’ordre de tabulation est-il cohérent ?
Problème
● Code du bouton incorrect. C’est un bouton et non un lien.
● Il n’est pas explicite.
● Lorsqu’il est actionné, l’ordre de navigation n’est pas cohérent.
Impact : Majeur
Hiérarchie de titres incorrecte
Référence RGAA
● 9.1. Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres ?
Problème
● Le titre de section « Communiqués et dossiers de presse » n’est pas à un niveau logique par-rapport à la hiérarchie de la page
● Les titres des communiqués enfants ne sont pas à un niveau logique par-rapport à la hiérarchie de la page
Impact : Majeur
Code des blocs Communiqués incorrect
Référence RGAA
● 1.2. Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
● 6.1. Chaque lien est-il explicite (hors cas particuliers) ?
● 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 ?
Problèmes
● Le texte des liens n’est pas pertinent (tout le texte du bloc sera restitué avant même le mot « lien » par les lecteurs d’écran, puis l’attribut title).
● Les images décoratives sont codées comme des images porteuses de sens avec légende (type de communiqué + catégorie d’article dans figcaption)
● Certaines parties du texte ne sont pas contenues dans des éléments HTML sémantiques
Impact : Majeur
Titre de page (élément <title>) incorrect lors du chargement des résultats de recherche
Référence RGAA
● Critère 8.6. Pour chaque page web ayant un titre de page, ce titre est-il pertinent ?
Problème
● Quel que soit le résultat d’une recherche, l’élément <title> de la page reste le même.
Impact : Majeur
Structure de titres dans la page incorrecte
Référence RGAA
● Critère 9.1. Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres ?
Problème
● La hiérarchie des titres de la page n’est pas appropriée.
● Le titre “recherche” (<h2 class="titreRedactionnel texte-couleur1 ">recherche</h2> en bas de page) n’est pas pertinent. Est-il vraiment utile ?
Impact : Majeur
Titre des résultats de recherche
Référence RGAA
● Critère 1.1. Chaque image porteuse d’information a-t-elle une alternative textuelle ?
● Critère 6.1. Chaque lien est-il explicite (hors cas particuliers) ?
● Critère 10.2. Dans chaque page web, le contenu visible reste-t-il présent lorsque les feuilles de styles sont désactivées ?
Problème
● Les icônes utilisées pour distinguer les différents types de résultats de recherche n’ont pas de texte alternatif.
● Les liens des résultats de recherche ont un attribut title qui n’est pas complet car il ne contient pas l’intitulé du lien. De plus, les liens des résultats de recherche précédés par l’icône “@” ont un title qui n’a pas de valeur.
Impact : Majeur
Visibilité de la prise de focus
Référence RGAA
● Critère 10.7. Dans chaque page web, pour chaque élément recevant le focus, la prise de focus est-elle visible ?
Problème
● Quand les champs de formulaire “Date”, “de”, “à”, “Tri par :” et le bouton “Rechercher” prennent le focus, la prise de focus n’est pas visible.
Impact : Majeur
Formulaire
Référence RGAA
● Critère 11.1. Chaque champ de formulaire a-t-il une étiquette ?
● Critère 11.2. Chaque étiquette associée à un champ de formulaire est-elle pertinente (hors cas particuliers) ?
Problème
● Les champs de formulaire cachés par défaut, “de” et “à” n’ont pas d’étiquette.
● Les termes “de” et “à” ne sont pas pertinents en tant qu’étiquettes.
● Les datepicker ne sont pas manipulables au clavier
Impact : Bloquant
Contenu des résultats de recherche
Référence RGAA
● Critère 9.3. Dans chaque page web, chaque liste est-elle correctement structurée ?
● 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 ?
Problème
● Les mots clefs liés à chaque résultats de recherche sont dans des éléments <span title=”Mots-clefs”>
● Les extraits de contenu liés au résultat de recherche sont dans un élément <div>.
● La date de publication du contenu lié au résultat de recherche est dans un élément <div>.
● Les renvois à d’autres articles sont dans un élément <div>.
Impact : Majeur
Structure de la page incorrecte
Référence RGAA
● 9.1. Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres ?
Problème
● Le titre principal de la page “Comment pouvons-nous vous aider ?” est un titre de niveau 2
● Le titre secondaire (et différenciant par rapport à la page précédente) “Formulaire de contact général” n’est pas codé comme un titre
Impact : Majeur
Image-lien “Retour à l’écran précédent” sans alternative textuelle
Référence RGAA
● 1.1. Chaque image porteuse d’information a-t-elle une alternative textuelle ?
● 6.2. Dans chaque page web, chaque lien, à l’exception des ancres, a-t-il un intitulé ?
Problème
● L’image porteuse de sens n’a pas d’alternative textuelle
● Le lien n’a pas d’intitulé
Impact : Majeur
Bouton de composant Disclosure codé incorrectement
Référence RGAA
● 7.1. Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
● 7.3. Chaque script est-il contrôlable par le clavier et par tout dispositif de pointage (hors cas particuliers) ?
Problème
● Le bouton n’est pas codé comme un bouton
● Le bouton n’est pas actionnable au clavier
● L’état du composant n’est pas exposé aux TA
Impact : Majeur
Formulaire - champs sans étiquette
Référence RGAA
● Critère 11.1. Chaque champ de formulaire a-t-il une étiquette ?
Problème
● Les champs du formulaire ne sont pas rattachés à leurs étiquettes respectives.
Impact : Bloquant
Formulaire - indication du caractère obligatoire de certains champs et informations
complémentaires
Référence RGAA
● 10.2. Dans chaque page web, le contenu visible reste-t-il présent lorsque les feuilles de styles sont désactivées ?
● 11.10. Dans chaque formulaire, le contrôle de saisie est-il utilisé de manière pertinente (hors cas particuliers) ?
Problème
● Le caractère obligatoire de certains champs est représenté par un astérisque mais la signification de ce sigle n’est pas donnée aux utilisateurs
● Cette information n’est pas exposée à certains utilisateurs de TA car l'astérisque est insérée en CSS.
● Certaines informations complémentaires doivent rattachées à leur champ
Impact : Bloquant
Formulaire - aide à la saisie manquante
Référence RGAA
● 11.10. Dans chaque formulaire, le contrôle de saisie est-il utilisé de manière pertinente (hors cas particuliers) ?
Problème
● Quand un format spécifique est attendu pour une valeur, ce format doit être clairement communiqué avant que l’utilisateur puisse faire sa saisie. Le format de l’email doit être indiqué.
Impact : Bloquant
Formulaire - toggle/switch “Préférez-vous être appelé ?”
Référence RGAA
● 7.1. Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
● 7.3. Chaque script est-il contrôlable par le clavier et par tout dispositif de pointage (hors cas particuliers) ?
● 10.2. Dans chaque page web, le contenu visible reste-t-il présent lorsque les feuilles de styles sont désactivées ?
● 11.1. Chaque champ de formulaire a-t-il une étiquette ?
Problème
● Le toggle n’est pas activable au clavier.
● Il n’est pas codé correctement ; si les feuilles de styles sont désactivées c’est une case à cocher sans étiquette (qui de toute façon serait incompréhensible car contenant “Oui Non”)
Impact : Bloquant
Formulaire - code du message d’erreur incorrect
Référence RGAA
● 11.10. Dans chaque formulaire, le contrôle de saisie est-il utilisé de manière pertinente (hors cas particuliers) ?
● 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 ?
Problème
● Le message d’erreur du champ “Email” n’est pas codé de façon correcte.
● Le message d’erreur ne contient pas d’exemple du format attendu
Impact : Bloquant
Le message après la soumission du formulaire n’est pas exposé aux TA
Référence RGAA
● 7.4. Pour chaque script qui initie un changement de contexte, l’utilisateur est-il averti ou en a-t-il le contrôle ?
Problème
● Après soumission du formulaire, le formulaire disparaît et un message de confirmation ou d’erreur apparaît (“Merci, nous avons bien reçu votre formulaire.” ou “Désolé, nous n'avons pas pu traiter votre requête.” Ce message n’est pas exposé aux TA et le focus est perdu dans la page.
Impact : Majeur
Vidéo d'arrière-plan
Référence RGAA
● Critère 13.8. Dans chaque page web, chaque contenu en mouvement ou clignotant est-il contrôlable par l’utilisateur ?
Problème
● dans l'élément section.cal_video, une séquence vidéo est restitué automatiquement sans possibilité de contrôle
Impact : Bloquant
Déclenchement de la fenêtre modale
Référence RGAA
● Critère 7.1. Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
● Critère 7.3. Chaque script est-il contrôlable par le clavier et par tout dispositif de pointage (hors cas particuliers) ?
Problème
● L'élément pour déclencher la lecture de la vidéo dans la fenêtre modale ne possède pas de rôle et ne fonctionne pas au clavier
Impact : Bloquant
Fenêtre modale div#modal-video
Référence RGAA
● Critère 7.1. Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
● Critère 7.3. Chaque script est-il contrôlable par le clavier et par tout dispositif de pointage (hors cas particuliers) ?
Problème
● La fenêtre modale div#modal-video ne possède pas de titre pertinent :
○ l'attribut title est inadapté et son contenu est erronée
○ l'attribut aria-labelledby pourrait être adapté mais sa référence est erronée, il fait référence à lui même
● Le bouton de fermeture est un élément span (span#closeModalBtn). Cet élément :
○ ne transmet pas son rôle aux TA
○ ne reçoit pas le focus clavier
○ possède un attribut aria-label avec un contenu en anglais ("close")
○ ne possède pas de contenu textuel
Impact : Bloquant
Contenus vidéo
Référence RGAA
● Critère 4.5. Chaque média temporel pré-enregistré a-t-il, si nécessaire, une audio description synchronisée (hors cas particuliers) ?
Problème
● La vidéo "Liaison RD 403 - RD 402 Desserte portuaire - Travaux de réalisation des ouvrages d'art" véhicule des informations visuelles mais elle ne possède pas d'audio description
Impact : Bloquant
Bloc Fil info - vocalisation systématique des informations défilantes
En plus des problèmes relevés plus haut sur ce bloc Fil info, cette instance pose un problème supplémentaire.
Référence RGAA
● 7.1. Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Problème
● Pour un utilisateur de lecteur d’écran, les informations défilantes sont vocalisées en boucle.
Impact : Bloquant
Syntaxe incorrecte
Référence RGAA
● Critère 13.5. Dans chaque page web, chaque contenu cryptique (art ASCII, émoticon, syntaxe cryptique) a-t-il une alternative ?
Problème
● le terme "collégien·ne·s" constitue une syntaxe cryptique. Leur restitution dans les TA est aléatoire et le plus souvent incompréhensible
Impact : Majeur
Bloc actualité (a.cal_actualite)
Référence RGAA
● 1.2. Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
● 6.1. Chaque lien est-il explicite (hors cas particuliers) ?
● 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 ?
Problème
● Le texte des liens n’est pas pertinent (tout le texte du bloc sera restitué avant même le mot « lien » par les lecteurs d’écran, puis l’attribut title).
● Les images décoratives sont codées comme des images porteuses de sens
● Certaines parties du texte ne sont pas contenues dans des éléments HTML sémantiques
● Des éléments de type block sont présents dans des éléments de type inline
Impact : Majeur
Structuration des titres de section
Référence RGAA
● Critère 9.1. Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres ?
Problème
● L'utilisation des titres de section (élément <hx>) ne reflète pas l'organisation de la page
Impact : Mineur
Bloc "Collèges : rentrée scolaire 2020-2021"
Référence RGAA
● Critère 1.2. Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
● Critère 6.1. Chaque lien est-il explicite (hors cas particuliers) ?
Problème
● L'image qui illustre ce bloc est une image décorative mais elle possède une alternative textuelle
● le lien "voir le dossier" n'est pas explicite
Impact : Majeur
Blocs section multimédia
● Situation identique à "Code des blocs Communiqués incorrect" de la page d'accueil
Section Réseaux sociaux
● Voir page d'accueil
Blocs Agenda : a.cal_evenement
Référence RGAA
● Critère 6.1. Chaque lien est-il explicite (hors cas particuliers) ?
● Critère 8.2. Pour chaque page web, le code source généré est-il valide selon le type de
document spécifié (hors cas particuliers) ?
● 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 ?
Problème
● le lien a.cal_evenement n'est pas explicite sur sa destination, en particulier à cause de son attribut title
● des paragraphes de texte sont dans des éléments div (div.cal_lieu et div.cal_date)
● un élément form et un input de type submit sont utilisés de manière erroné dans div.cal_type : cela entraîne :
○ des information erronées sur la nature de cet élément sont transmises aux AT
○ il est interactif, reçoit le focus clavier, mais il ne fait que recharger la page en cours
● Des éléments de types block sont présents dans des éléments de type inline
Impact : Bloquant
Calendrier: navigation de mois en mois span.fc-button
Référence RGAA
● Critère 7.1. Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
● Critère 7.3. Chaque script est-il contrôlable par le clavier et par tout dispositif de pointage (hors cas particuliers) ?
Problème
● Les éléments pour afficher le mois précédent ou suivant dans le calendrier :
○ ne possèdent pas de rôle
○ ne fonctionnent pas au clavier
○ ne possèdent pas de contenu textuel
Impact : Bloquant
Calendrier: mois en cours
Référence RGAA
● Critère 5.4. Pour chaque tableau de données ayant un titre, le titre est-il correctement associé au tableau de données ?
● 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) ?
● Critère 10.1. Dans le site web, des feuilles de styles sont-elles utilisées pour contrôler la présentation de l’information ?
● 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 ?
● Critère 7.1. Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
● Critère 7.3. Chaque script est-il contrôlable par le clavier et par tout dispositif de pointage (hors cas particuliers) ?
Problème
● L'actuel <h2> sert de titre au tableau mais il n'est pas signalé comme tel
● les cellules ne sont pas reliés à leur entête de colonne
● Le tableau utilise un attribut de présentation : cellspacing
● Le jour en cour est indiqué par un changement formel (via la classe .fc-today) mais cette information n'est pas transmise aux TA
● Chaque jour est un élément interactif qui permet d'afficher les événement à partir de la date choisie mais :
○ aucun rôle n'est transmis aux TA
○ l'action n'est pas possible au clavier
○ le contenu textuel (la date) n'est pas explicite sur la destination du lien
Impact : Bloquant
Filtres "catégories" et "années"
Référence RGAA
● Critère 6.1. Chaque lien est-il explicite (hors cas particuliers) ?
Problème
● Les attributs title des liens "Escapades nature (6)" et "2020 (6)" sont incomplets. Il manque le nombre de résultats, qui est visible, mais qui n'est pas repris dans l'attribut title
Impact : Mineur
Filtre période
Référence RGAA
● 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 ?
● Critère 11.10. Dans chaque formulaire, le contrôle de saisie est-il utilisé de manière pertinente (hors cas particuliers) ?
Problème
● renseigner une date dans l'un des champs de période induit un changement automatique de page, sans validation explicite ni avertissement préalable
● Le format attendu pour les dates n'est pas indiqué
Impact : Bloquant
https://www.calvados.fr/actu/parents-confines-avec-des-enfants-conseils-activites
Note : ne seront pas audités ici les lecteurs tiers de vidéos (YouTube, Facebook, etc.), ni les contenus de ces vidéos qui ne sont produits par le département. le document au format PDF n'est pas produit par le département lui non plus.
Le département du Calvados est donc exempté de l'exigence d'accessibilité de ces contenus.
Hiérarchie de titres incorrecte
Référence RGAA
● 9.1. Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres ?
● 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 ?
Problème
● Certains titres ne sont pas à un niveau logique par-rapport à la hiérarchie de la page. Par ex. on passe de <h2> à <h6> etc.
● La phrase “Pour vous aider en période de confinement [...]” se trouve dans un élément <h2> mais n’est pas un titre de section. Ce choix d’élément est probablement fait à des fins de mise en forme.
● La phrase “Sommaire :” est un titre : sa place, son apparence et le contenu qui la suit justifie l’utilisation d’un élément <hn> mais elle n’est codée ainsi
● Présence de <p> vides (<p></p>) dans la page
● Certains textes ne sont pas contenus dans des éléments HTML sémantiques, comme par ex. <div class="cal_date">jeudi 26 mars 2020</div>
Impact : Majeur
Images décoratives qui ne sont pas ignorées par les TA
Référence RGAA
● Critère 1.2. Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
Problème
● Certaines images décoratives (image en début de page, images d’illustration des articles, etc.) ont une alternative textuelle et ne sont donc pas ignorées par les TA.
Impact : Mineur
Syntaxe incorrecte
Référence RGAA
● Critère 13.5. Dans chaque page web, chaque contenu cryptique (art ASCII, émoticon, syntaxe cryptique) a-t-il une alternative ?
Problème
● le terme "professionnel·le·s", “éducateur·rice·s ” etc. (plusieurs occurrences) constitue une syntaxe cryptique. Leur restitution dans les TA est aléatoire et le plus souvent incompréhensible
Impact : Majeur
Plusieurs listes (ancres “Sommaire”, liens “À lire également”, “Quelques idées de supports :”,
etc.) codées incorrectement
Référence RGAA
● 9.3. Dans chaque page web, chaque liste est-elle correctement structurée ?
Problème
● Certaines listes d’ancres et de liens ne sont pas codées comme une liste
Impact : Mineur
Boutons de mots-clés pas assez explicites
Référence RGAA
● 11.9. Dans chaque formulaire, l’intitulé de chaque bouton est-il pertinent (hors cas particuliers) ?
Problème
● Des boutons pour lancer une recherche par mots-clés parmi les articles et communiqués du site n’ont pas un contenu assez explicite.
Impact : Majeur
Tableau “Circonscription d'action sociale / Usda” non pertinent
Référence RGAA
● 9.3. Dans chaque page web, chaque liste est-elle correctement structurée ?
Problème
● Une liste est codée comme un tableau : ça n’est pas pertinent vu qu’il n’y a qu’une seule colonne.
Impact : Mineur
Cadres (<iframe>) sans attribut title explicite
Référence RGAA
● 2.1. Chaque cadre a-t-il un titre de cadre ?
Problème
● Certains éléments <iframes> dans la page n’ont pas d’attribut title qui leur donne un titre
Impact : Mineur
Liens insuffisamment explicites
Référence RGAA
● 6.1. Chaque lien est-il explicite (hors cas particuliers) ?
Problème
● Le contenu des liens et la valeur de leur attribut title sont différents
Impact : Mineur
https://www.calvados.fr/mdph
Voir les remarques Bloc Fil info dans les remarques de la page d’accueil.
Voir également les remarques Régions/landmarks ARIA et usages en fin de document, il y a 22 régions Landmarks dans cette page.
Alternatives textuelles des images incorrectes
Référence RGAA
● Critère 1.1. Chaque image porteuse d’information a-t-elle une alternative textuelle ?
● Critère 1.2. Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
● Critère 1.3. Pour chaque image porteuse d’information ayant une alternative textuelle, cette alternative est-elle pertinente (hors cas particuliers) ?
● 6.1. Chaque lien est-il explicite (hors cas particuliers) ?
Problème
● Dans la rubrique “Contact”, certaines icônes porteuses d’information n’ont pas d’alternative textuelle : “numéro de téléphone” et “numéro de FAX”
● Les images suivantes sont des images de décoration mais disposent d’un texte alternatif:
○ la photo utilisée comme bannière : alt="Personne de dos en situation de handicap dans un fauteuil roulant, poussée par une autre personne. / © Peter Atkins - Fotolia"
○ dans la rubrique “À lire également”, l’image de la Carte mobilité inclusion : alt="Carte mobilité inclusion"
● Section “Lancement de la plateforme « Mon Parcours Handicap »” : le contenu du lien et la valeur de l’attribut title sont incorrects
Impact : Majeur
Structure de la page incorrecte
Référence RGAA
● 9.1. Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres ?
Problème
● Le texte “Guide MDPH du Calvados index des fiches pratiques” est présenté comme un titre mais n’est pas contenu dans un élément <hn>
Impact : Majeur
Bloc “Partager cet article” (email et réseaux sociaux)
Référence RGAA
● 6.2. Dans chaque page web, chaque lien, à l’exception des ancres, a-t-il un intitulé ?
● 9.3. Dans chaque page web, chaque liste est-elle correctement structurée ?
Problème
● Les liens n’ont pas d’intitulé
● Ils ne sont pas codés comme une liste
Impact : Majeur
Tableaux des fiches pratiques non pertinents
Référence RGAA
● 5.4. Pour chaque tableau de données ayant un titre, le titre est-il correctement associé au tableau de données ?
● 5.6. Pour chaque tableau de données, chaque en-tête de colonnes et chaque en-tête de lignes sont-ils correctement déclarés ?
● 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 ?
Problème
Dans la section "GUIDE MDPH DU CALVADOS" les fiches pratiques sont présentées dans des tableaux ayant les caractéristiques de tableaux de données. Mais :
● Le code des tableaux est incorrect
● Globalement, structurer ces informations dans un tableau n’est pas pertinent.
Impact : Majeur
Blocs “Découvrir la MDPH” et “Téléchargement” - listes manquantes
Référence RGAA
● 9.3. Dans chaque page web, chaque liste est-elle correctement structurée ?
Problème
● certaines parties de texte sont présentées sous forme de listes mais ne sont pas codées correctement
Impact : Mineur
Bloc “Tags” / liste de mots-clés
Référence RGAA
● 8.7. Dans chaque page web, chaque changement de langue est-il indiqué dans le code source (hors cas particuliers) ?
● 9.3. Dans chaque page web, chaque liste est-elle correctement structurée ?
Problème
● Le mot “Tags” est en anglais dans la page en français, mais rien n’indique ce changement de langue dans le code
● Les mots-clés sont présentés sous forme de listes mais ne sont pas codés correctement
Impact : Mineur
https://www.calvados.fr/accueil/faq.html
Structure de la page incorrecte
Référence RGAA
● 9.1. Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres ?
Problème
● Le titre principal de la page “Foire aux questions” est un titre de niveau 2
● Le titre “Thématiques” est un titre de niveau 3
● Les questions de la FAQ sont des titres de niveau 4
Impact : Majeur
Bloc questions
Référence RGAA
● 8.2. Pour chaque page web, le code source généré est-il valide selon le type de document spécifié (hors cas particuliers) ?
● 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 ?
Problème
● Les éléments <a href> (de type inline) contiennent des éléments <div> et <p> (de type block)
● Des éléments titre <h4> sont utilisées à tort : ils sont encastrés et viennent créer des doublons dans la hiérarchie des titres de la page.
● Les éléments <div> sont utilisés pour structurer des paragraphes de texte.
Impact : Mineur
Régions ARIA vides
Référence RGAA
● 9.2. Dans chaque page web, la structure du document est-elle cohérente (hors cas particuliers) ?
Problème
● l'ensemble du contenu est dans un élément section qui contient un attribut aria-label erroné
Impact : Majeur
https://www.calvados.fr/espace-emploi
Images décoratives qui sont restituées aux TA
Référence RGAA
● 1.2. Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
Problème
● L’image de fond de la page est décorative mais elle est restituée aux utilisateurs de TA car un texte alternatif a été renseigné.
● Les pictogrammes de la catégorie “Emplois” ainsi que les sacoches avant chaque offre seront restitués à certaines utilisateurs de TA.
Impact : Majeur
Structure de titres incorrecte
Référence RGAA
● 9.1. Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres ?
Problème
● La structure de la page est incorrecte : juste en dessous du titre principale <h1>, l’utilisateur arrive sur une longue liste de titres de niveau 4 (<h4>).
Impact : Mineur
Code des listes de mots-clés incorrect
Référence RGAA
● 9.3. Dans chaque page web, chaque liste est-elle correctement structurée ?
Problème
● Les mots-clés qui accompagnent chaque offre ne sont pas codés comme des listes
Impact : Mineur
Texte contenu dans du code sans sémantique
Référence RGAA
● 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 ?
Problème
● Tout contenu textuel doit être contenu dans une élément HTML qui lui donne un sens (sémantique). Les éléments <div> et <span> n’ont aucune sémantique.
Impact : Mineur
Fenêtre modale “Pourquoi nous rejoindre”
Restitution aux TA et fonctionnement au clavier
Référence RGAA
● 7.1. Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
● 10.7. Dans chaque page web, pour chaque élément recevant le focus, la prise de focus est-elle visible ?
● 10.8. Pour chaque page web, les contenus cachés ont-ils vocation à être ignorés par les technologies d’assistance ?
Problème
● Le code de la fenêtre modale est incorrect,
○ le focus ne boucle pas à l’intérieur de la fenêtre lors de la tabulation et passe en dessous , dans le reste de la page lors de la tabulation inversée (Maj + Tab),
○ les utilisateurs de TA ne sont pas avertis de son ouverture et ne peuvent interagir avec son contenu. Un attribut aria-hidden="true" empêche la consultation de la fenêtre par les TA.
Impact : Bloquant
Texte en anglais
Référence RGAA
● 8.7. Dans chaque page web, chaque changement de langue est-il indiqué dans le code source (hors cas particuliers) ?
Problème
● L’intitulé des deux boutons de fermeture de la fenêtre sont en anglais alors que le contenu de la page est en français
Impact : Majeur
Titre redondant
Référence RGAA
● 9.1. Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres ?
Problème
● Le titre “Pourquoi nous rejoindre ?” est redondant
● Les niveaux de titres dans la fenêtres sont incorrects
Impact : Majeur
Région ( landmark ) inutile
Référence RGAA
● 9.2. Dans chaque page web, la structure du document est-elle cohérente (hors cas particuliers) ?
Problème
● Une région inutile contient le texte de la fenêtre, avec un nom accessible incompréhensible qui est vocalisé
Impact : Majeur
Liste codée de façon incorrecte
Référence RGAA
● 9.3. Dans chaque page web, chaque liste est-elle correctement structurée ?
Problème
● La liste des arguments (1er paragraphe) n’est pas codée comme une liste
Impact : Mineur
Code HTML incorrect
Référence RGAA
● 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 ?
Problème
● Du code HTML est utilisé à des fins de présentation (paragraphe contenant un point blanc sur fond blanc) et la présence d’une région ( landmark ) génère une vocalisation inutile.
Impact : Majeur
Titres de listes “Catégorie”, “Filière”, etc. incorrects
Référence RGAA
● 9.1. Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres ?
Problème
● Les titres de listes “Catégorie”, “Filière”, etc. ne sont pas codés comme tels
Impact : Majeur
Fenêtres modales “Candidature spontanée” et “Demande de stage”
Restitution aux TA et fonctionnement au clavier
Référence RGAA
● 7.1. Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
● 7.4. Pour chaque script qui initie un changement de contexte, l’utilisateur est-il averti ou en a-t-il le contrôle ?
Problème
- ● Le code de la fenêtre modale est incorrect,
- ○ le focus ne boucle pas à l’intérieur de la fenêtre lors de la tabulation,
- ○ les utilisateurs de TA ne sont pas avertis de son ouverture et ne peuvent interagir avec son contenu. Un attribut aria-hidden="true" empêche la consultation de la fenêtre par les TA.
- ○ Un attribut aria-hidden="true" placé sur le bouton de fermeture empêche qu’il soit exposé aux TA, de plus il n’a pas d’intitulé explicite qui puisse être exposé aux TA.
- ○ elle n'a pas de titre, la référence de son attribut aria-labelledby est erronée
- ○ Lorsque la fenêtre est visible et que l’utilisateur actionne la touche Echap,
- ■ le focus doit être déplacé sur le bouton qui a déclenché l’ouverture de la fenêtre
- ■ et celle-ci doit se refermer.
Impact : Bloquant
Formulaire - indication du caractère obligatoire de certains champs
Référence RGAA
● 10.2. Dans chaque page web, le contenu visible reste-t-il présent lorsque les feuilles de styles sont désactivées ?
● 11.10. Dans chaque formulaire, le contrôle de saisie est-il utilisé de manière pertinente (hors cas particuliers) ?
Problème
● Le caractère obligatoire de certains champs est représenté par un astérisque rouge mais la légende de ce sigle n’est donnée qu’après le formulaire
● Cette information n’est pas exposée à certains utilisateurs de TA car l'astérisque est insérée en CSS.
Impact : Bloquant
Formulaire - regroupement de champs de même nature (boutons radios, cases à cocher)
Référence RGAA
● 11.5. Dans chaque formulaire, les champs de même nature sont-ils regroupés, si nécessaire ?
Problème
● Certains champs de même nature (boutons radios, cases à cocher) ne sont pas regroupés et n’ont pas de légende correctement associée, cela rend leur compréhension et leur utilisation compliquées pour certains utilisateurs de lecteurs d’écran.
Impact : Mineur
Formulaire - étiquettes et champs trop éloignées
Référence RGAA
● 11.4. Dans chaque formulaire, chaque étiquette de champ et son champ associé sont-ils accolés (hors cas particuliers) ?
Problème
● Certaines étiquettes sont trop éloignées de leurs champs respectifs, parfois au point d’être plus proche d’un autre champ.
Impact : Majeur
Formulaire - aides à la saisie manquantes
Référence RGAA
● 11.10. Dans chaque formulaire, le contrôle de saisie est-il utilisé de manière pertinente (hors cas particuliers) ?
Problème
● Quand un format spécifique est attendu pour une valeur, ce format doit être clairement communiqué avant que l’utilisateur puisse faire sa saisie.
Ici, un utilisateur peut utiliser le datepicker ou saisir manuellement un date mais le format correct de la date n’est indiqué nulle part. Le format de l’email et du téléphone doivent être indiqués également.
Impact : Bloquant
Formulaire - code des messages d’erreur incorrect
Référence RGAA
● 11.10. Dans chaque formulaire, le contrôle de saisie est-il utilisé de manière pertinente (hors cas particuliers) ?
Problème
● Les messages d’erreur sont contenus dans des éléments <label>. Les champs ont donc 2 <label> qui leur sont rattachés.
Impact : Majeur
Formulaire - messages d’erreur insuffisamment explicites
Référence RGAA
● 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 ?
Problème
● Quand un format attendu pour une valeur n’a pas été respecté et qu’une erreur est déclenchée, ce format doit être repris dans le message d’erreur pour que l’utilisateur puisse corriger sa saisie. Un exemple peut alors être utilisé. Ici certains messages d’erreur ne sont pas assez explicites (date, email).
Impact : Majeur
Formulaire - auto complétion manquante sur les champs de données personnelles
Référence RGAA
● 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 ?
Problème
● Il n’est pas possible pour certains utilisateurs de remplir automatiquement certains champs de données personnelles
Impact : Majeur
Formulaire - boutons “Choisir un fichier ” pas assez explicites et codés incorrectement
Référence RGAA
● 7.1. Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Problème
● Les boutons ne sont pas codés correctement et ont le même intitulé : ils ne sont pas assez explicites pour les utilisateurs de TA
Impact : Bloquant
Formulaire - bouton “Annuler” inutilisable au clavier
Référence RGAA
● 7.1. Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
Problème
● Le bouton n’est pas codé correctement et n’est pas utilisable en naviguant avec le clavier
● C’est un bouton qui referme la fenêtre modale, son intitulé n’est pas assez explicite (on pourrait croire que c’est un bouton qui vide les champs du formulaire)
Impact : Bloquant
Formulaire - bouton “Envoyer” n’a pas de contenu
Référence RGAA
● 10.2. Dans chaque page web, le contenu visible reste-t-il présent lorsque les feuilles de styles sont désactivées ?
Problème
● Le bouton n’a pas de contenu (attribut value) : <input type="submit" class="fond-couleur2 validerCandidatureBtn" data-target="...">
Impact : Bloquant
Blocs liens “Autres actualités”
Référence RGAA
● 6.1. Chaque lien est-il explicite (hors cas particuliers) ?
● 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 ?
Problème
● Le texte des liens n’est pas pertinent : tout le texte du bloc sera restitué avant même le mot « lien » par les lecteurs d’écran, puis l’attribut title qui est par ailleurs redondant.
● L’attribut aria-label n’est pas nécessaire
● Certaines parties du texte ne sont pas contenues dans des éléments HTML sémantiques
Impact : Bloquant