Accueil | Accessibilité numérique | Déclaration de conformité RGAA

DéclarationdeconformitéRGAA

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 »

● 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

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

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

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

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

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

Services en ligne

Foire aux questions

DéclarationdeconformitéRGAA