Introduction
Ce rapport accompagne le relevé d'audit effectué sur le site « accessibilité infrastructure ».
La méthodologie d'audit employée repose sur le référentiel RAWeb 1, consultable à l'adresse suivante : https://accessibilite.public.lu/fr/raweb1/index.html
L'audit a été réalisé au moyen de l'utilisation de navigateurs web et d'outils spécialisés. Des tests de restitution ont également été effectués conformément à la base de référence définie par le RAWeb 1.
Échantillon
L'audit a porté sur un échantillon de 12 pages :
| Nº page | Titre de la page | URL |
|---|---|---|
| P01 | Accueil | https://accessibilite-infrastructure.public.lu/fr.html |
| P02 | Contact | https://accessibilite-infrastructure.public.lu/fr/support/contact.html |
| P03 | Aspects légaux | https://accessibilite-infrastructure.public.lu/fr/support/aspects-legaux.html |
| P04 | Accessibilité | https://accessibilite-infrastructure.public.lu/fr/support/accessibilite.html |
| P05 | Plan du site | https://accessibilite-infrastructure.public.lu/fr/support/plan-site.html |
| P06 | Résultat de recherche (accessibilité) | https://accessibilite-infrastructure.public.lu/fr/support/recherche.html?q=accessibilit%C3%A9&oQ= |
| P07 | Contrôleurs techniques en accessibilité | https://accessibilite-infrastructure.public.lu/fr/demarches-ligne/demande-agrement.html |
| P08 | Liste des contrôleurs techniques en accessibilité | https://accessibilite-infrastructure.public.lu/fr/liste/controleurs-techniques.html |
| P09 | législation | https://accessibilite-infrastructure.public.lu/fr/boite-outils/legislation.html |
| P10 | Publications | https://accessibilite-infrastructure.public.lu/fr/boite-outils/publications.html |
| P11 | FAQ | https://accessibilite-infrastructure.public.lu/fr/boite-outils/faq.html |
| P12 | Vos interlocuteurs accessibilité | https://accessibilite-infrastructure.public.lu/fr/support/vos-interlocuteurs.html |
Environnement de test (base de référence)
Quelques critères RAWeb, notamment ceux de la thématique JavaScript, incluent des tests de restitution à effectuer sur des technologies d'assistance associées à des navigateurs et des systèmes d'exploitation. Pour qu'un dispositif HTML / WAI-ARIA ou son alternative soit considéré comme compatible avec l'accessibilité, il faut qu'il soit pleinement fonctionnel, en termes de restitution et de fonctionnalités sur certaines combinaisons. Vous trouverez une explication détaillée de cet environnement de tests dans le document du RAWeb 1.
Nous détaillons ci-dessous la base de référence utilisée pour réaliser les tests de restitution des composants du site.
Environnement de test – ordinateur
| Technologie d'assistance | Navigateur |
|---|---|
| NVDA 2024.4.2 | Firefox 136.0.4 |
| JAWS 2024 | Chrome 134.0 |
| VoiceOver (macOS Sonoma version 14.6) | Safari 17.6 |
Environnement de test — mobile
| Système d'exploitation | Technologie d'assistance | Navigateur |
|---|---|---|
| Android natif | TalkBack (dernière version) | Chrome |
| iPhone | VoiceOver (dernière version) | Safari |
Accessibilité des pages auditées
Le site présente un niveau général d'accessibilité excellent.
Le niveau de conformité relevé atteint 85,71 % de conformité au RAWeb sur l'ensemble des pages auditées.
Le site est partiellement conforme.
Note sur le calcul de conformité
La conformité globale (Tableau « Conformité RAWeb 1 ») est calculée de la manière suivante : C / (C+NC). C'est le nombre de critères conformes et NC le nombre de critères non conformes.
C'est ce nombre qui constitue la référence légale. Il représente le taux de conformité de l'échantillon.
Il est normal que le taux de conformité global diffère sensiblement du taux de conformité par page. En effet, un critère NC (non conforme) sur une page rend le critère non conforme sur l'ensemble de l'échantillon.
Pour qu'un site soit conforme (100 % des critères applicables sont conformes), il est nécessaire que le taux de conformité par page équivaille à 100 %.
Moyenne par pages
| Nº page | Titre de la page | % |
|---|---|---|
| P01 | Accueil | 89,90% |
| P02 | Contact | 88,37% |
| P03 | Aspects légaux | 89,19% |
| P04 | Accessibilité | 88,89% |
| P05 | Plan du site | 89,19% |
| P06 | Résultat de recherche (accessibilité) | 90,24% |
| P07 | Contrôleurs techniques en accessibilité | 86,84% |
| P08 | Liste des contrôleurs techniques en accessibilité | 89,13% |
| P09 | Législation | 88,89% |
| P10 | Publications | 89,74% |
| P11 | FAQ | 89,74% |
| P12 | Vos interlocuteurs accessibilité | 89,19% |
Moyenne par thématiques
| Thématiques | C | NC |
|---|---|---|
| Images | 100% | 0% |
| Cadres | 0% | 0% |
| Couleurs | 100% | 0% |
| Multimédia | 0% | 0% |
| Tableaux | 0% | 0% |
| Liens | 100% | 0% |
| Script | 0% | 100% |
| Éléments obligatoires | 85,71% | 14,29% |
| Structuration | 0% | 100% |
| Présentation | 81,82% | 18,18% |
| Formulaires | 100% | 0% |
| Navigation | 100% | 0% |
| Consultation | 100% | 0% |
| Documentation | 66,67% | 33,33% |
| Outils d'édition | 0% | 0% |
| Assistance | 100% | 0% |
| Communication | 0% | 0% |
Impacts utilisateurs
Les principales personnes impactées sont les personnes aveugles et celles qui naviguent au clavier. Les problèmes liés aux scripts (utilisation de liens à la place de boutons, tabulation impossible dans le menu...), aux visibilités de focus, et à la structuration du document sont les plus impactantes.
Exemptions
Sont listés ci-dessous les contenus exemptés de l’obligation d’accessibilité. Ils n’entrent pas dans le calcul de la conformité et ne sont pas audités.
- Gestionnaire de cookies
- Documents en téléchargement fournis par des administrations tierces
Droit à la compensation
Les dérogations émises notamment pour charge disproportionnée demandent en contrepartie la mise en place d'un moyen de compensation pour les utilisateurs. Pour les documents bureautiques par exemple, vous devez fournir un moyen à l'utilisateur de demander une version accessible d'un document s'il en a besoin. Cela peut être un mail ou un formulaire de contact.
Note sur le relevé des non-conformités
Ne sont cités dans ce rapport que quelques exemples issus du relevé des non-conformités.
De plus, toutes les occurrences d'une non-conformité ne sont pas listées dans le relevé. Par exemple : en page d'accueil il y a des prises de focus qui ne sont pas visibles sur certains éléments, le relevé mentionne quelques occurrences, mais ne les cite pas tous.
Avis
Le site a un très bon niveau d'accessibilité et la plupart des non-conformités sont isolées et ne devraient pas être problématiques à la correction.
Les non-conformités les plus bloquantes pour les utilisateurs concernent :
- Les scripts (tabulation dans le menu impossible, utilisation de liens au lieu de boutons, tabulation dans un élément de filtres impossible)
- Les focus non visibles dans les versions contrastées (renforcée et inversée) du site
- La structuration des documents
Ce sont donc ces points qui devront nécessiter une attention toute particulière et qui demanderont le plus d'efforts.
Annexe technique
Scripts
Recommandation :
Donner si nécessaire à chaque script une alternative pertinente. Rendre possible le contrôle de chaque code script au moins par le clavier et la souris et s'assurer de leur compatibilité avec les technologies d'assistance. Identifier les messages de statut lorsque c'est nécessaire.
Utilisation des boutons et des liens
Pour les aveugles et les grands malvoyants qui utilisent un lecteur d'écran, ce manque de distinction claire entre les liens et les boutons peut poser de graves problèmes.
Ainsi, un bouton implémenté sous la forme d'un lien qui déclenche une action de la page, risque de perturber l'utilisateur qui s'attendra au chargement d'une nouvelle page.
De manière générale, les liens devraient être réservés à l'affichage d'une nouvelle page ou la création de liens d'accès rapide dans le contenu. Dans tous les autres cas, l'emploi d'un bouton d'action est plus pertinent.
Enfin, chaque bouton doit avoir un nom accessible défini, soit par l'intermédiaire d'un texte (visible ou
positionné hors écran) ou d'une propriété title, aria-label ou
aria-labelledby.
Constats sur le site
Les sous-menus sont déclenchés par des éléments liens, ils devraient être déclenchés par des boutons et implémenter le motif Disclosure.
Si vous souhaitez garder les liens de premier niveau dans le menu, ajoutez des boutons à droite de chaque lien avec une icône de chevron par exemple, pour déclencher les sous-menus. Définir un nom accessible à ces boutons en ajoutant par exemple une propriété aria-label, sur le modèle : "Sous-menu Formations".
Fenêtres modales
Constats sur le site
En version mobile la modale du menu n'a pas de nom accessible, rajouter un aria-label="menu" par exemple
Éléments obligatoires
Recommandation
Vérifier que chaque page web a un code valide selon le type de document, un titre pertinent et une indication de langue par défaut. Vérifier que les balises ne sont pas utilisées uniquement à des fins de présentation, que les changements de langues et de direction de sens de lecture sont indiqués.
Titre de la page
Le titre de la page (visible dans l'onglet du navigateur) est un élément de repère dans le site web. Pour les utilisateurs de lecteurs d'écran (utilisateurs aveugles ou grands malvoyants), c'est le premier élément restitué par le lecteur d'écran au chargement de la page. Cela permet de donner du contexte aux utilisateurs qui n'ont pas une vision globale de la page. C'est l'information à laquelle les utilisateurs avec des troubles de la mémoire accèdent lorsqu'ils naviguent avec l'historique de navigation du navigateur. Il est donc essentiel d'avoir des titres de pages pertinents, concis et très souvent uniques dans le site, et qui reflètent de la position de l'utilisateur dans le site web.
Il est des cas particuliers, comme les pages dont le contenu est une liste de résultats paginés (ex. : les résultats de recherche), pour lesquels le titre doit refléter la nature de la recherche ainsi que le numéro de page en cours de consultation.
Constats sur le site
En page "Liste des contrôleurs techniques en accessibilité", le titre de page n'est pas pertinent, il ne contient pas la pagination.
Structuration de l'information
Recommandation
Utiliser des titres, des listes, des abréviations et des citations pour structurer l'information. S'assurer que la structure du document est cohérente.
Titres
Le titrage des contenus est une étape importante dans la structuration des contenus. Cela répond à deux besoins :
- identifier rapidement un contenu recherché ;
- naviguer rapidement dans le contenu en se déplaçant de titre en titre.
Un titrage correct fournit à l'utilisateur d'un lecteur d'écran un plan du document et lui permet de naviguer de titre en titre pour se déplacer plus rapidement dans le contenu de la page.
Pour valider la structure de votre page, vous pouvez utiliser l'extension Firefox HeadingsMap ou Chrome HeadingsMap. Lorsque l'extension est active, sélectionnez l'onglet « Headings » et vérifiez la cohérence et l'imbrication des titres.
Constats sur le site
Dans la page "Contrôleurs techniques en accessibilité", dans les accordéons les titres sont de niveau h3, le même niveau que le titre parent, les modifier en h4.
Listes
La structuration en listes permet aux utilisateurs de lecteurs d'écran de consulter plus rapidement le contenu, grâce à des raccourcis spécifiques, et d'accéder directement à une liste ou de la passer sans avoir à en parcourir tous les items.
Constats sur le site
Les liens d'accès rapide ne sont pas dans une liste.
Structure du document
L'utilisation correcte des balises HTML5 et des landmarks ARIA va permettre d'enrichir la restitution pour les utilisateurs aveugles qui ne perçoivent pas les mises en forme : la navigation principale ne sera plus perçue simplement comme une liste de liens, elle sera restituée à l'utilisateur comme un élément de navigation, par l'intermédiaire du lecteur d'écran qui annoncera « région » ou « repère ».
De plus, ces marqueurs sémantiques vont également constituer des éléments de navigation rapide dans la page. Grâce à un raccourci clavier, certains utilisateurs vont pouvoir naviguer plus rapidement entre les régions qui auront été ainsi identifiées.
Constats sur le site
Les liens d'accès rapide ne sont pas dans une <nav role="navigation"></nav>
Présentation de l'information
Recommandation
Utiliser des feuilles de styles pour contrôler la présentation de l'information. Vérifier l'effet de l'agrandissement des tailles des caractères sur la lisibilité. S'assurer que les liens sont correctement identifiables, que la prise de focus est signalée, que l'interlignage est suffisant et donner la possibilité à l'utilisateur de contrôler la justification des textes. S'assurer que les textes cachés sont correctement restitués et que l'information n'est pas donnée uniquement par la forme ou la position d'un élément. S'assurer que les contenus sont lisibles et utilisables dans une fenêtre de largeur réduite. Veiller à ce que l'application de paramètres typographiques n'entraîne pas la perte de contenu ou de fonctionnalité. S'assurer que les contenus qui apparaissent au survol et à la prise de focus puissent être contrôlés par l'utilisateur.
Contenu compréhensible sans les styles : ordre visible vs ordre réel
Un utilisateur aveugle n'a pas accès à la mise en forme qui parfois est porteuse d'informations importantes, notamment des relations entre les éléments.
Il est important de ne pas implémenter les textes dans l'ordre visuel, mais bien dans l'ordre logique de dépendance et hiérarchie des éléments.
Le contenu doit rester compréhensible sans les feuilles de styles (vous pouvez tester vos contenus en désactivant les feuilles de styles).
Constats sur le site
L'information sur la protection des données est après le bouton d'envoi du formulaire. Mettre avant le bouton "prévisualiser puis envoyer" un lien "Consulter notre déclaration de protection des données" vers la section "Protection des données".
Visibilité de la prise de focus
Les personnes avec un handicap moteur qui naviguent au clavier peuvent rencontrer des difficultés considérables à utiliser du contenu si elles ne sont pas en mesure de repérer l'indication visuelle du focus et ses déplacements.
Constats sur le site
En version contrastes renforcés il y a un nombre important de non-conformités sur la prise de focus avec des ratios de 1,5:1 pour l'icône de recherche ou les liens vers les pdf par exemple, ou 2:1 pour le bouton de la modale accessibilité ou les liens du plan du site par exemple, voire des focus absents.
Documentation et fonctionnalités d’accessibilité
Recommandation
Lorsque l’application fournit une documentation, la documentation décrit les fonctionnalités d’accessibilité disponible et elle est accessible. L’application ne perturbe pas les fonctionnalités d’accessibilité de la plateforme.
Documentation des fonctionnalités d’accessibilité de la plateforme
La documentation de l’application peut être une page d’aide, une déclaration d’accessibilité ou encore un document PDF en téléchargement depuis l’application. Cette documentation, si elle est mise à disposition des utilisateurs, doit comporter une description des fonctionnalités d’accessibilité qu’elle met à disposition (si elle en possède).
Enfin, quel que soit son format, elle doit être accessible, c’est-à-dire conforme aux règles d’accessibilité qui s’applique au format dans lequel elle est diffusée.
Constats sur le site
Les non-conformités de la page, y compris les non-conformités récurrentes héritées des éléments de gabarits rendent ce critère non-conforme.