DéclarationdeconformitéRGAA

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 &amp; 
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