Accessibilité : Non conforme (Déclaration d'accessibilité) / Accessibilité

Cette page est une déclaration de conformité au RGAA 4.0 qui vise à définir le niveau d’accessibilité général constaté sur le site conformément à la règlementation.

La déclaration de conformité du site pasdecalais.fr a été établie le 02 octobre 2020

Identité du déclarant

Conseil Départemental du Pas-de-Calais
Rue Ferdinand Buisson,
62 000 ARRAS

Résultats des tests

Le taux de conformité du site par critères respectés est de 48% et le taux moyen de conformité du service en ligne est de 79%.

Critères	Conformes	Non conformes	Total des critères applicables
Images	1	3	4
Cadres	1	1	2
Couleurs	0	3	3
Multimédia	4	2	6
Tableaux	1	5	6
Liens	0	2	2
Scripts	1	3	4
Éléments obligatoire	7	2	9
Structuration de l'information	0	3	3
Présentation de l'information	7	7	14
Formulaires	3	6	9
Navigation	9	2	11
Consultation	3	2	5
Total	37	41	78

On compte 81 critères applicables sur 106

Les tests ont été réalisés par la société Urbilog

Défauts d'accessibilité

Images (3 défauts)

Non conforme
- Sur les éléments communs, le logo miniature présent sur la barre de navigation dans version repliée n'a pas d'attribut alt.
- Dans la page d'accueil, l'image de la vignette vidéo ne possède pas d'attribut alt.
Non conforme
Sur la page "Audit d'accessibilité", une image correspondant à une affiche d'exposition donne des informations qui ne sont pas vocalisées. Voir critère 1.8.
Non conforme
Sur la page "Audit d'accessibilité", une image correspondant à une affiche d'exposition donne des informations qui ne sont pas vocalisées. Pour résoudre ce problème, il faudrait indiquer dans un <span> caché par masquage accessible le contenu textuel de l'affiche.

Cadres (1 défaut)

Couleurs (3 défauts)

Non conforme
Sur les pages contenant des formulaires, l'utilisateur est prévenu que "les champs erronés sont en rouge" et même si en réalité les champs en erreur sont bien accompagnés d'un message, ce point est à corriger. Le libellé devrait plutôt être "Des erreurs de saisie ont été détectées".
Non conforme
- Sur la page "SVE", des contrastes insuffisants sont présents au niveau des textes.
- Sur la page "Deuxième édition", des contrastes insuffisants sont présents au niveau des textes.
- Dans le site, on trouve des taux de contrastes de couleurs insuffisants. Le taux de contraste nécessaire est de 4.5 sur 1.
- On trouve des cas de photos utilisées en fond de texte. Cet usage peut provoquer des usages non homogènes d'un endroit à l'autre du texte. Aussi, il est recommandé d'intercaler un aplat uni, plus ou moins translucide derrière le texte via le CSS, dont on peut également changer l'opacité si besoin, afin d'améliorer le contraste. Par exemple "background-color:#000000BD;"
Non conforme
- Sur la page "Actualités", un élément ne satisfait pas au taux minimum de contraste demandé (ratio de 3:1).
- Sur la page "Saisine pour les administrations", un élément ne satisfait pas au taux minimum de contraste demandé (ratio de 3:1).
- Parmi les éléments communs, des contrastes insuffisants sont présent au niveau des composants d'interface ou des éléments graphiques porteurs d'informations.
- Sur la page "Glossaire", des contrastes insuffisants sont présent au niveau des composants d'interface ou des éléments graphiques porteurs d'informations.
- Sur la page "SVE", des contrastes insuffisants sont présent au niveau des composants d'interface ou des éléments graphiques porteurs d'informations.
- Sur la page "Deuxième édition", des contrastes insuffisants sont présent au niveau des composants d'interface ou des éléments graphiques porteurs d'informations.
- Certains éléments interactifs du site comportent des taux de contrastes insuffisants. Le taux de contraste nécessaire pour les éléments interactifs est de 3 sur 1.

Multimédia (2 défauts)

Non conforme
- Sur la page "Actualité (Vœux 2020)", la vidéo ne comporte pas d'information vocalisée. Dans la mesure où cette vidéo donne des informations visuelles sur l'action du Département, une transcription textuelle serait très utile pour un non-voyant.
- Sur la page "Audit accessibilité", la vidéo ne comporte pas d'information vocalisée. Dans la mesure où cette vidéo donne des informations visuelles sur l'action du Département dans la lutte contre les violences envers les femmes, une transcription textuelle serait très utile pour un non-voyant.
Non conforme
Sur la page "Actualité (Vœux 2020)", aucune information vocalisée n'indique que l'on rentre dans un cadre vidéo. Le titre "Vœux 2020" n'indique pas que l'on va ouvrir une vidéo sur les vœux 2020.

Tableaux (5 défauts)

Non conforme
Sur la page "SVE", on trouve 5 tableaux de présentation sans <role='presentation'>.
Non conforme
Sur la page "SVE", on trouve 4 tableaux de données dont le titre est dans une balise <h2> située hors du tableau et non dans une balise <caption> située dans le tableau.
Non conforme
Sur la page "SVE", on trouve 4 tableaux de données dont le titre est dans une balise <h2> située hors du tableau : certains titres ne sont pas pertinents. "Votre identité" sera préférable à "Vous" par exemple.
Non conforme
Sur la page "SVE", on trouve 4 tableaux de données qui utilisent des balises <th> de façon inappropriée, en l'occurrence les balises servent à définir des entêtes de colonnes non accessibles (display : 'none'), alors que le tableau ne devrait avoir que des entêtes de lignes comme 'Civilité', 'Nom'.
La ligne en display-none est à supprimer.
Non conforme
Sur la page "SVE", on trouve 4 tableaux de données simples dont les entêtes de lignes ne disposent pas d'attributs <scope> de valeur 'row'.

Liens (2 défauts)

Non conforme
- Au sein du widget de bas de page, 2 liens pourraient être plus explicites quant à leur fonction à l'aide d'un attribut 'title' ou 'aria-label'. "Contactez-nous pas téléphone au..." et "Sourd ou malentendant : contactez-nous via le système accéo" seraient plus pertinents.
- Dans la page "Glossaire", certains liens de la liste du haut de page vocalisent de façon non explicite. En l'occurrence, les lettres I, V et X sont vocalisées comme des chiffres romains, et le lien avec le point d'interrogation dans un carré ne vocalise rien.
- Dans la page "Deuxième édition", un lien pourrait être plus explicite quant à sa fonction et destination comme "En savoir plus sur nos recommandations".
- Sur la page "Accueil", le lien "Nous contacter - 03 21 216 216 et Formulaire de contact" ne sont pas pertinents. Ils vocalisent "+33 (0)3 21 216 216" et "Formulaire de contact". Il faudrait ajouter dans ces deux liens un attribut arial-label indiquant "Nous contacter - par téléphone au +33 (0)3 21 216 216" et "Nous contacter - via un formulaire de contact".
- Sur la page "Actualité (Vœux 2020)", les liens pour passer de la version française à la version anglaise ne sont pas explicites. Ils devraient vocaliser : "See the english version / Consultez la version française".
- Sur la page "Cartographie déviations", les liens en bas de page n'ont pas d'intitulé pertinent. Ils vocalisent seulement "Lire". Pour résoudre ce problème, chaque lien devrait inclure le contenu textuel au-dessus. Par exemple, le lien "déviations" devrait être codé ainsi : <a>Déviations<span>Lire</span></a>.
- Sur la page "Audits accessibilité", les liens pour télécharger un PDF ne sont pas pertinents. Ils devraient être complétés avec une version accessible du PDF car les PDF ne sont pas accessibles. De plus, les liens devraient être plus explicites et donner des informations sur les PDF :
- Ouvre-t-il une nouvelle fenêtre ?
- La taille du fichier et son format
- La langue du document
- Version accessible ou non
Non conforme
Les liens des réseaux sociaux dans la barre de navigation latérale n'ont pas d'intitulés. Il faudrait leur en mettre, par exemple 'Lien Twitter (Nouvelle Fenêtre)' (des attributs 'target' de valeur '_blank' étaient présents), on pourra utiliser un masquage accessible.

Scripts (3 défauts)

Non conforme
- Sur la page "Actualités", alors que la liste "Archive" semble correcte, la liste "Catégorie" pose problème : le <label> n'est pas vocalisé alors qu'il est bien lié à une <select> mais celle-ci est en <tabindex -1> et en <aria-hidden true>. L'utilisateur navigue bien au clavier dans la liste qui s'ouvre mais les choix ne sont pas vocalisés et le choix multiple n'est pas disponible.
- Le bouton ouvrant la recherche au sein de la barre latérale, est codé avec une simple <div>, il n'est donc pas accessible aux technologies d'assistance. Il devrait être codé comme un bouton ou posséder un rôle 'button' et un attribut 'tabindex' de valeur '0'. De plus, un attribut 'title' ou 'aria-label' devrait être présent afin d'expliciter la fonction du bouton.
- Le menu latéral est problématique, à la navigation au clavier, on parcourt les deux meus (plié/déplié), quel que soit le menu affiché, ce qui est dérangeant pour la visualisation du focus sur les éléments de ces menus, ainsi que pour la vocalisation.
De plus, le bouton d'ouverture du menu ne vocalise pas l'état plié/déplié de ce dernier. Quant à la fermeture du menu, il faut cliquer sur un élément hors du menu pour l'activer (en desktop, aucun bouton de fermeture n'est présent, et en responsive, le bouton présent n'est pas adressable au clavier).
Afin d'indiquer à l'utilisateur cette information, l'ajout d'un attribut 'aria-expanded' sur le bouton est nécessaire : celui-ci aura la valeur "false" lorsque l'élément est ouvert, et "true" lorsque l'élément est fermé. Il faut également qu'il soit relié à l'élément dont il pilote l'ouverture au moyen d'un attribut 'aria-controls' qui reprendra la valeur de l'attribut "id" de cet élément.
D'autre part, lors de l'ouverture du menu, le menu déplié ne prend pas le focus et il ne se ferme pas à la perte de focus.
Enfin, le menu des contenus est vocalisé, même lorsque celui-ci est replié : il est préconisé l'usage d'un 'display :none' pour le masquer.
En résumé, il faudrait que l'état du menu soit vocalisé, que le menu prenne le focus à l'ouverture et se ferme à la perte de focus, et surtout, que seul le menu affiché soit navigable à la tabulation et donc vocalisé. La prise de focus n'est pas visible sur le menu burger.
- De même que pour le menu latéral, le widget de bas de page est problématique : il est vocalisé quel que soit son état, état qui n'est par ailleurs pas vocalisé, ainsi que par son absence de gestion du focus.
- Sur la page "SVE", le fil d'Ariane des étapes pourrait vocaliser l'étape courante à l'aide de l'attribut 'aria-current' avec la valeur 'step'. Les images de éléments des steppers produisent des vocalisations parasites. Il faut mettre un attribut <aria-hidden> sur le span qui les supporte.
- Sur la page "SVE", les champs de formulaire de type 'radio' ne vocalisent pas leur état parce qu'ils sont masqués par un 'display-none' alors que cela devrait être un masquage accessible.
- Sur la page "SVE", le script commandant la prise de focus suivant le déclenchement des boutons 'étape suivante' et 'étape précédente', est améliorable, à savoir au déclenchement du bouton 'étape suivante', le focus est placé en haut du formulaire mais pas au déclenchement du bouton 'étape précédente'.
- Sur la page "SVE, la non validation du formulaire ne renvoie aucun message d'alerte à la synthèse vocale.
- Sur la page "Deuxième édition", la carte présente est de base difficilement compatible avec les technologies d'assistance. De plus, le focus n'est pas visible à l'intérieur, la navigation au clavier est fastidieuse, d'autant que l'overlay présent à l'ouverture de la page n'est désactivable qu'avec un bouton situé en fin de navigation dans le cadre, ce bouton ayant par ailleurs une vocalisation peu explicite comme d'autres éléments du cadre. Enfin, le lien "Télécharger le programme" est non valide. Pour conclure, il faudrait que la carte soit masquée aux technologies d'assistance avec un attribut 'aria-hidden' de valeur 'true', et une alternative accessible devrait être proposée, idéalement sous la forme d'une liste d'événements ou de lieux.
- Sur la page "Cartographie déviations", certains éléments de la carte ne sont pas accessibles au focus clavier. De plus, certains éléments ne sont même pas vocalisés.
- Sur la page "Audits accessibilité", on trouve plusieurs composants dont les vocalisations sont absentes ou non pertinentes :
- le widget Gallery ne vocalise rien
- le widget FAQ ne vocalise pas l'ouverture d'un layer et ne place pas le focus sur son contenu
- le widget Publication externe ne vocalise que les boutons d'interface
- Sur la page "Cartographie déviations", il y a une carte interactive inutilisable pour un non-voyant. Pour résoudre ce problème, il faudrait mettre les éléments du cadre en aria-hidden="true" et en tab-index="-1". En revanche, il semble que cette carte fournisse des informations qui pourraient être utiles à un non-voyant. Il serait donc judicieux de créer un script alternatif accessible à un non-voyant par l'intermédiaire d'une liste par exemple.
- Sur la page "Audits accessibilité", on trouve trois composants inutiles pour un non-voyant :
- un carrousel d'images purement décoratives qui ne vocalise rien
- une vidéo qui ne vocalise rien
- un visualiseur de journal qui ne vocalise rien de pertinent sauf des intitulés de boutons
Les solutions pourraient être les suivantes :
- pour chaque composant inutile, prévoir un lien en masquage accessible pour éviter ce composant
- placer des attributs aria-hidden="true" pour éviter les vocalisations inutiles
- chaque lien placera le focus sur le titre de la section suivante, situé après le composant
- dans le cas de la vidéo, le lien devra placer le focus dans une transcription textuelle de la vidéo
- dans le cas du visualiseur, le lien devra placer le focus dans un lien de téléchargement du journal qui se trouvera juste après le visualiseur
Non conforme
- Sur la page "Glossaire", les liens ancres du début de page posent problème car lorsqu'ils sont utilisés, le focus n'est pas déplacé vers le lien visé. Ainsi, au clavier, on ne peut les utiliser comme raccourcis pour naviguer dans la page.
- Comme indiqué dans le critère 7.1, le menu latéral n'est pas contrôlable au clavier.
- Sur la page "SVE", les champs de formulaire de type 'radio' ne sont pas utilisables au clavier, parce qu'ils sont masqués par un 'display-none' alors que cela devrait être un masquage accessible.
- Sur la page "Deuxième édition", les éléments de la carte semblent utilisables au clavier mais la navigation est rendue difficile par l'absence de focus visible.
Non conforme
Sur la page "SVE", les messages de statut ne sont pas restitués par les technologies d'assistance lors de la validation ou non-validation du formulaire.

Éléments obligatoires (2 défauts)

Non conforme
- Sur la page "Mentions légales", le validateur met en évidence 3 éléments problématiques pour l'accessibilité :
- l'usage des valeurs de viewport empêchant l'utilisateur de modifier la taille du document
- une image sans alternative
- des attributs non séparés par un espace
- On retrouve les mêmes erreurs sur la page "Glossaire".
- On retrouve les mêmes erreurs sur la page "SVE" avec en plus un attribut 'frameborder' sur le cadre présent.
- On retrouve les mêmes erreurs sur la page "Deuxième édition" que sur la page "SVE".
- Lorsque l'on soumet la page "Actualité (Vœux 2020)" au validateur html, une erreur est signalée concernant une balise mal fermée.
Non conforme
Sur la page "Résultats de recherches", l'attribut langue est vide alors qu'il devrait indiquer langue="fr". Cette indication aide la synthèse vocale à repérer la langue d'une page de site.

Structuration de l'information (3 défauts)

Non conforme
- Sur la page "Actualités", il manque un titre de niveau 1 avant le titre de niveau 2 "Vous êtes ici". Il serait préférable de transformer ce titre en texte simple sans niveau de titre.
- Sur la page "Saisine pour les administrations", il manque un titre de niveau 1 avant le titre de niveau 2 "Vous êtes ici". Il serait préférable de transformer ce titre en texte simple sans niveau de titre.
- Sur la page "Mentions légales", le plan de titrage est à revoir. En l'occurrence, le titre de niveau 2 "Vous êtes ici" peut être conservé mais sans supporter de niveau de titre et placer le titre de niveau 1 "Mentions légales" en tête de la hiérarchie de titres.
- Sur la page "Glossaire", on trouve un problème similaire.
- Même chose sur la page "SVE", ainsi que des titres de niveau 2 dans le cadre qui devraient être des balises <caption> (voir 5.4).
- Sur la page "Deuxième édition", le plan de titrage est à revoir. En l'occurrence, le titre de niveau 2 "Vous êtes ici" peut être conservé mais sans supporter de niveau de titre et placer le titre de niveau 1 "Deuxième édition du mois des sports de nature" en tête de la hiérarchie de titres.
- Dans le site, les niveaux de titres ne sont pas conformes car il manque un niveau de titre h1 explicite en début de page.
- Sur la page "Résultats de recherches", le nombre de pages de résultats devrait être un niveau de titre de manière à être facilement accessible.
Non conforme
- Sur les éléments communs, l'élément <nav> comprenant la recherche, facebook et twitter est superflu. Cette balise est réservée aux zones de navigation principales et secondaires.
- La zone d'en-tête de la page doit être structurée via une balise header.
- les zones de navigation principales et secondaires doivent être structurée via une balise <nav> (réservée à la structuration de ces zones.
- la zone de contenu principal doit être structurée via une balise main unique dans la page.
- la zone de pied de page doit être structurée via une balise footer.
- Sur la page "Accueil", on constate l'absence de balise <main>.
Non conforme
- Sur différentes pages du site, le stepper devrait être codé sous la forme de liste <ol/li>, et la phrase "en cours" avoir un attribut <aria-current> avec la valeur step.
Le tableau de la phase de prévisualisation devrait être basé sur une liste <ul/li> voire même une liste de description de type <dl, dt, dd>.
- Sur la page "Deuxième édition", une liste est codée comme 3 listes non ordonnées séparées.
- Sur la page "Audits accessibilité", certains éléments devraient être structurés sous forme de listes.

Présentation de l'information (8 défauts)

Non conforme
- Sur la page "SVE", le cadre présent utilise des attributs servant à la présentation.
- Même chose sur la page "Deuxième édition".
- Des attributs servant à la présentation sont présents dans le code source de certaines pages du site.
Non conforme
- Sur la page "Actualités", certains éléments du site se retrouvent décalés ou se chevauchent lors du zoom à 200 %.
- Le widget de bas de page pose des problèmes d'affichage au zoom texte à 200 %. En l'occurrence, celui-ci vient s'afficher automatiquement au zoom texte recouvrant le contenu de la page. De plus, il ne s'affiche pas entièrement.
- Sur la page "SVE", plusieurs contenus présents dans le cadre se chevauchent ou débordent de leur conteneur au zoom texte à 200 %.
- Sur la page "Deuxième édition", plusieurs contenus présents dans le cadre se chevauchent ou débordent de leur conteneur au zoom texte à 200 %.
- Sur la page "Accueil", on trouve des images contenant du texte qui sont coupées en zoom 200 %.
- Sur la page "Audits accessibilité", les textes qui s'affichent lors du survol souris ne s'affichent pas en grossissement 200 %. Cela entraîne une perte d'informations pour une personne qui a besoin de ce grossissement. Ce problème technique se retrouve aussi en mode responsive.
Non conforme
Pour chaque spécification de couleur d'arrière plan, il faut que l'on ait une spécification de couleur de texte (et réciproquement). Une façon simple de satisfaire à ce critère est de définir des couleurs de texte et d'arrière-plan par défaut sur un élément de haut niveau (<html> ou <body>).
Non conforme
- Sous Firefox, la prise de focus n'est pas visible sur le bouton du menu.
- Sur la page "Actualités", sur certains éléments du formulaire de recherche, le focus n'est pas visible (archives, catégorie et Rayon).
- Sur la page "SVE", les champs de formulaire de type 'radio' n'ont pas de focus visible.
- Sur la page "Deuxième édition", le focus n'est pas visible sur la plupart des éléments de la carte (voir 7.1).
-Sur les éléments communs, il n'y a pas de focus sur le menu burger.
- Sur la page "Audit accessibilité", le focus n'est pas visible dans certaines zones.
Non conforme
- Sur la page "Cartographie déviations", des balises du cadre de la carte sont vocalisées sans avertissement préalable. Ces éléments ne sont pas pertinents. Pour résoudre ce problème, il faudrait mettre les éléments du cadre en <aria-hidden="true"> et en <tabindex="-1">.
- Sur la page "Audits accessibilité", certains composants entraînent des vocalisations non pertinentes (voir le critère 7.2).
Non conforme
Sur la page "Actualités", lorsque l'on définit une fenêtre de hauteur 256 px et une largeur de 320 px, le champ de formulaire correspond au bouton "me localiser" est caché par le bouton. Il faudrait donc déplacer le bouton ou le réduire pour l'adapter à la taille de l'écran et ainsi rendre le champ de formulaire et le bouton visibles quelle que soit la taille de l'écran (Optimiser le responsive à la dimension 256x320 px).
Non conforme
Sur les éléments communs, l'augmentation de l'espacement entre paragraphes provoque un chevauchement de contenus en bas de page entre le widget et le pied de page.
Non conforme
- Les boutons ouvrant les tooltips doivent être adressables au clavier et il doit indiquer l'état de l'élément dont il pilote l'ouverture (ouvert/fermé) au moyen d'un attribut aria-expanded, qui aura la valeur "false" lorsque l'élément est ouvert et "true" lorsque l'élément est fermé. Il faudra également qu'il soit relié à l'élément dont il pilote l'ouverture au moyen d'un attribut "aria-controls" qui reprendra la valeur de l'attribut "id" de cet élément.
- Sur la page "Audits accessibilité", les textes liés aux images du widget masonry ne sont pas visibles au focus clavier.

Dérogations

Le site utilise un lecteur vidéo fourni par la plateforme de diffusion vidéo Youtube sur lequel nous n’avons pas le contrôle. Nous ne pouvons pas en garantir le niveau d’accessibilité.

Pages du site ayant fait l’objet de la vérification de conformité

L’audit a porté sur un échantillon de 13 pages représentatives du site.

Accueil
Recherche
SVE (Saisine par Voie Électronique)
SVE (Saisine par Voie Électronique) pour les administrations
Cartographie intéractive du Département du Pas-de-Calais
Plan du site
Politique sportive
Une page test regroupant les différents widget pour l'audit : Présentation des widgets utilisés sur pasdecalais.fr
Meilleurs vœux 2020 ! Le message du Président du Département du Pas-de-Calais
Deuxième édition du mois des sports de nature
Actualités
Glossaire
Mentions légales

Informations techniques concernant la réalisation du site et les tests de vérification d’accessibilité

Technologies utilisées pour la réalisation du site

HTML5
CSS 3
JavaScript
SVG
PDF
CMS eZpublish

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 du couple

Firefox 40 / NVDA 2019.3.1
Chrome / NVDA 2019.3.1

Les outils suivants ont été utilisés lors de l'évaluation :

Color Contrast Analyser

Amélioration et contact

Vous pouvez contribuer à améliorer l’accessibilité du site.

N’hésitez pas à nous signaler les problèmes éventuels que vous rencontrez et qui vous empêchent d’accéder à un contenu ou à une fonctionnalité du site.

Envoyez-nous un courriel à

Défenseur des droits

Si vous constatez un défaut d’accessibilité qui vous empêche d’accéder à un contenu ou une fonctionnalité du site, que vous nous en informez et que vous ne parvenez pas à obtenir une réponse rapide de notre part, vous êtes en droit de faire parvenir vos doléances ou demande de saisine au Défenseur des droits :

7 rue Saint-Florentin 75409 Paris cedex 08
Téléphone : 09 69 39 00 00

Contacter le Défenseur des droits avec le formulaire en ligne .