Introduction
Ce rapport accompagne le relevé d'audit effectué sur le site « Trésorerie de l'état ».
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 17 pages :
| Nº page | Titre de la page | URL |
|---|---|---|
| P01 | Accueil | https://tresorerie.public.lu/fr.html |
| P02 | Contact | https://tresorerie.public.lu/fr/support/contact.html |
| P03 | Mentions légales | https://tresorerie.public.lu/fr/support/aspects-legaux.html |
| P04 | Accessibilité | https://tresorerie.public.lu/fr/support/accessibilite.html |
| P05 | Plan du site | https://tresorerie.public.lu/fr/support/plan.html |
| P06 | Recherche | https://tresorerie.public.lu/fr/support/recherche.html?q=tr%C3%A9sorerie |
| P07 | Participations | https://tresorerie.public.lu/fr/participations.html |
| P08 | Théâtre national | https://tresorerie.public.lu/fr/participations/personne_morale_droit_public/19966100837.html |
| P09 | Représentation graphique | https://tresorerie.public.lu/fr/participations/tsvdr.html |
| P10 | Dette publique | https://tresorerie.public.lu/fr/dette-publique.html |
| P11 | Déficit et dettes | https://tresorerie.public.lu/fr/dette-publique/deficit-dette.html |
| P12 | Caractéristique dette | https://tresorerie.public.lu/fr/dette-publique/caracteristiques-dette-etat.html |
| P13 | Frais et produits | https://tresorerie.public.lu/fr/caisse-consignation/frais-consign.html |
| P14 | Comptes dormants | https://tresorerie.public.lu/fr/caisse-consignation/comptes-dormants.html |
| P15 | Finance durable | https://tresorerie.public.lu/fr/finance-durable.html |
| P16 | Publication | https://tresorerie.public.lu/fr/publications.html |
| P17 | Page document | https://tresorerie.public.lu/fr/publications/press-release-october-2024.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 (dernière version) | Firefox ou Chrome ou Edge |
| JAWS 2023 | Firefox ou Chrome ou Edge |
| VoiceOver (macOS Sonoma version 14.4) | Safari 17.4 |
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é correct.
Le niveau de conformité relevé atteint 76.81 % 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 | %C |
|---|---|---|
| P01 | Accueil | 89,83% |
| P02 | Contact | 93,55% |
| P03 | Mentions légales | 93,22% |
| P04 | Accessibilité | 96,55% |
| P05 | Plan du site | 94,74% |
| P06 | Recherche | 96,49% |
| P07 | Participations | 93,10% |
| P08 | Théâtre national | 94,83% |
| P09 | Représentation graphique | 93,22% |
| P10 | Dette publique | 96,49% |
| P11 | Déficit et dettes | 90,48% |
| P12 | Caractéristique dette | 93,44% |
| P13 | Frais et produits | 96,55% |
| P14 | Comptes dormants | 94,92% |
| P15 | Finance durable | 94,83% |
| P16 | Publication | 92,98% |
| P17 | Page document | 96,49% |
Moyenne par thématiques
| Thématiques | C | NC |
|---|---|---|
| Images | 100% | 0% |
| Couleurs | 0% | 100% |
| Tableaux | 40% | 60% |
| Liens | 100% | 0% |
| Script | 66% | 33% |
| Éléments obligatoires | 66% | 33% |
| Structuration | "33% | 66% |
| Présentation | 85% | 15% |
| Formulaires | 85% | 15% |
| Navigation | 100% | 0% |
| Consultation | 75% | 25% |
| Documentation | 100% | 0% |
| Assistance | 100% | 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, à l'API ARIA et à la visibilité du focus clavier rendent parfois difficile l'utilisation du site par ces utilisateurs.
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.
- Carte interactive de localisation sur la page d'accueil
Contenus dérogés
Lorsque l’organisme ne peut pas rendre un contenu ou une fonctionnalité accessible, le RAWeb prévoit sous certaines conditions la possibilité d’invoquer une dérogation pour charge disproportionnée. Cette dernière doit être dûment justifiée et compensée dans la mesure du possible avec la production d’une alternative accessible aux personnes handicapées.
Les contenus suivants n'entrent pas dans le calcul de la conformité ni dans le périmètre des éléments à rendre accessibles, ils sont dérogés :
- N/A
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 : pour l'indication de changement de langue, le relevé mentionne quelques occurrences, mais ne les cite pas tous.
Avis
Le site propose une bonne parcourabilité par les utilisateurs de technologies d'assistances. Néanmoins leur navigation au sein des contenus est négativement impactée par un menu à la structure non standardisée, et quelques erreurs d'accessibilité isolées.
Les non-conformités les plus bloquantes pour les utilisateurs concernent :
- le manque de compatibilité de certains composants interactifs avec les technologie d'assistance
- Le manque de visibilité du focus sur certains liens ou boutons
- la structure des tableaux de données
Ce sont donc ces points qui devront nécessiter une attention toute particulière et qui demanderont le plus d'efforts.
Annexe technique
Couleurs
Recommandation
Ne pas donner l'information uniquement par la couleur et utiliser des contrastes de couleurs suffisamment élevés pour les textes et les composants d'interface.
Contrastes des textes
Plusieurs couleurs présentent un rapport de contraste insuffisant, ce qui peut poser problème aux personnes déficientes visuelles qui ont des difficultés à percevoir les couleurs ou les contrastes.
Rapports de contrastes définis par le RAWeb
- Pour les textes qui ont une taille de police calculée inférieure à 24px sans effet de graisse ou une taille de police calculée inférieure à 18,5px avec effet de graisse, le rapport de contraste entre la couleur du texte (y compris le texte en image) et son arrière-plan doit être de 4.5:1, au moins.
- Pour les textes qui ont une taille de police calculée supérieure ou égale à 24px sans effet de graisse ou une taille de police calculée supérieure ou égale à 18,5px avec effet de graisse, le rapport de contraste entre la couleur du texte (y compris le texte en image) et son arrière-plan doit être de 3:1, au moins.
Vous pouvez foncer les couleurs pour obtenir le rapport de contraste exigé.
Si la charte graphique ne peut être modifiée, fournissez une méthode aux utilisateurs pour consulter le site avec des contrastes suffisants. Ceci peut être réalisé simplement avec une fonctionnalité JavaScript et une surcharge CSS des couleurs.
Vous pouvez voir un exemple de ce type de mécanisme sur le site sncf.com. Dans les réglages d'accessibilité, vous trouverez une option qui permet d'afficher le site avec des contrastes renforcés et inversés.
Constats sur le site
La couleur #032c39 sur le fond #157ea7 (ratio 3.21:1) du lien "formulaire de contact" sur la page d'accueil n'est pas suffisamment contrastée.
Contraste des composants d'interface
Les composants d'interface, les illustrations porteuses d'information ou encore les mises en couleurs porteuses d'information doivent être suffisamment contrastés pour être perçus par les utilisateurs ayant des troubles de perception des couleurs. Par exemple, une icône porteuse d'information devra avoir un rapport de contraste avec la couleur de fond de 3. De même, pour un champ de saisie de formulaire, dont la zone active est matérialisée par sa bordure, alors la couleur de cette bordure devra avoir un rapport de contraste de 3 avec la couleur de fond de la page.
Constats sur le site
Les éléments filtres, lorsqu'ils sont actifs #C8E6F1 sur fond #FFFFFF, ne présentent pas un contraste suffisant avec leur arrière-plan, ainsi qu'avec leur état désactivé. (ratio 1.31:1)
Information par la couleur
Lorsqu'une information est donnée par la couleur, il faut qu'elle soit également véhiculée par une autre méthode, par exemple par un texte qui donne la même information, pour être perçue par les utilisateurs aveugles.
Il faut également donner un indice visuel autre que la couleur, afin de répondre aux besoins des personnes déficientes visuelles (les daltoniens par exemple). Il peut s'agir d'un symbole, d'une texture, de chiffres.
Constats sur le site
L'indication des types de participations, sur la page de représentation graphique des participations, est uniquement fournie par la couleur.
Tableaux
Recommandation :
Donner un résumé à chaque tableau de données complexe, s'assurer que pour chaque tableau de données ayant un titre, ce titre est pertinent, identifier clairement les cellules d'en-tête, utiliser un mécanisme pertinent pour lier les cellules de données aux cellules d'en-tête. Pour chaque tableau de mise en forme, veiller à sa bonne linéarisation.
Tableaux de données
Un tableau de données doit répondre à certains enjeux pour être exploité correctement par les lecteurs d'écran. Les enjeux sont les suivants :
- Le tableau doit posséder un titre permettant de l'identifier (
<caption>) ; - Les en-têtes doivent être identifiés (balises
<th>) et doivent pouvoir être restitués lorsque l'utilisateur parcourt chaque cellule à l'aide de son lecteur d'écran (attributsscopesi nécessaire).
Constats sur le site
Les tableaux de données ne sont pas sémantiquement associés à leurs titres.
Pour certains tableaux de données, les cellules d'en tête des tableaux ne précisent pas leur portée. Il manque la présence des attributs scope.
Tableaux de données complexes
Les tableaux de données complexes ont généralement plus d'un en-tête pour une même ligne ou une même colonne, contrairement aux tableaux simples.
Pour les tableaux de données complexes, les enjeux sont les suivants :
- Le tableau doit posséder un titre permettant de l'identifier et un résumé de sa structure
(
<caption>) ; - Les en-têtes doivent être identifiés (balises
<th>) et doivent pouvoir être restitués lorsque l'utilisateur parcourt chaque cellule à l'aide de son lecteur d'écran (utilisation des attributsheadersetid).
Constats sur le site
Le tableau "General government consolidated gross debt level at nominal value oustanding at end of year (by category / in millions of EUR)" ne possède pas de résumé.
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.
Menubar
Constats sur le site
Le menu principal n'est pas compatible avec les lecteurs d'écrans. La double fonction des items de menus (à la fois liens et boutons) ne permet pas une bonne intéraction pour les technologies d'assistances.
La manière d'intéragir avvec les éléments de menu ne correspond pas à la méthode attendue, suggérée par l'utilisation du parttern ARIA "menubar".
Disclosure
Constats sur le site
Les composants permettant d'afficher/masquer les sections de filtres sur les pages disposant d'un système de tri de résultats ne respectent pas le modèle de conception ARIA disclosure.
Graphique intéractif
Constats sur le site
La représentation graphique de la page de participations n'est pas parcourable par les utilisateurs de technologies d'assistances. Elle n'est ni interprettable par les lecteurs d'écran, ni parcourable au clavier.
É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
Sur les pages de recherche et les pages disposant d'une pagination, le titre de la page n'indique ni le terme recherché, ni la position dans la pagination.
Indication de langue
Les lecteurs d'écran utilisent les indications de langue pour vocaliser le contenu dans la langue
définie. La page doit contenir une définition de langue principale (généralement sur l'élément
html).
Ensuite, les éléments de langue étrangère présents dans le contenu doivent être signalés. Si on trouve dans la page des termes absents du dictionnaire de la langue principale de la page, il faut les identifier afin que le lecteur d'écran les restitue dans la langue appropriée. En effet, une mauvaise prononciation pourrait mener à des incompréhensions pour les utilisateurs qui reposent uniquement sur des restitutions orales. Les noms propres sont exclus de cette obligation.
Constats sur le site
Certains tableaux ainsi que leurs titres sont en anglais, sans indication de changement de langue.
Certains liens ont un intitulé en anglais, sans indication de changement de langue.
Balises utilisées à des fins de présentation
Les éléments de structure HTML ont chacun une sémantique particulière (paragraphe, titre, image, lien, etc.). Si les éléments sont mal employés (détournés de leur utilité première), cela peut poser des problèmes aux utilisateurs qui naviguent à l'aide d'une technologie d'assistance (lecteur d'écran, plug-in…). En effet, les technologies d'assistance disposent de raccourcis permettant de naviguer rapidement entre certains types d'éléments (paragraphes, titres, listes, etc.). Si ces éléments sont mal employés, les utilisateurs ne peuvent pas utiliser ces fonctionnalités de repère et de navigation dans le contenu.
Constats sur le site
Sur la page d'accueil, le texte "L'entrée se trouve à droite du bâtiment. Vous nous trouvez sur le 3e étage." est uniquement structuré avec des div
Sur certaines pages, on trouve des paragraphes vides servant à créer des espacements. Par exemple dans la section "généralités" de la page informations légales
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.
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
La suite de liens du bloc de contact sur la page de contact n'est pas identifiée comme 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
Sur certaines pages, une deuxième balise main, vide, est présente en bas de page.
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.
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
Pour l'ensemble des liens de la page plan de site, l'indication visuelle de prise de focus est absente.
Paramètres typographiques
Les utilisateurs malvoyants et/ou dyslexiques ont souvent recours à des adaptations de la présentation des textes. Pour cela, on doit s'assurer que de tels paramètres ne viennent pas perturber leur lecture sur le site.
Les présentations doivent supporter l'application de paramètres typographiques visant à augmenter les interlignages, interlettrages, les espaces entre les mots et entre les paragraphes. L'application de ces paramètres ne doit pas entraîner la perte de contenus ou de fonctionnalités :
- L'interlignage augmenté de 1,5 fois la taille de la police ;
- L'espacement entre les paragraphes augmenté de 2 fois la taille de la police ;
- L'espacement des lettres augmenté de 0,12 fois la taille de la police ;
- L'espacement des mots augmenté jusqu'à 0,16 fois la taille de la police.
Constats sur le site
Avec l'augmentation de l'espacement des polices, le contenu du bloc "Chiffres clés" n'est plus lisible (les textes se chevauchent)
Consultation
Recommandation
Vérifier que l'utilisateur a le contrôle des procédés de rafraîchissement, des changements brusques de luminosité, des ouvertures de nouvelles fenêtres et des contenus en mouvement ou clignotants. Ne pas faire dépendre l'accomplissement d'une tâche d'une limite de temps sauf si elle est essentielle et s'assurer que les données saisies sont récupérées après une interruption de session authentifiée. Proposer des versions accessibles ou rendre accessibles les documents en téléchargement. S'assurer que la consultation n'est pas dépendante de l'orientation de l'écran. Toujours proposer un geste simple en alternative d'un geste complexe permettant de réaliser une action.
Documents en téléchargement
Assurez-vous que chaque document soit accessible (cf. les Guides de créations de documents bureautiques accessibles), ou qu'il dispose d'une alternative accessible proposant le même contenu (par exemple, une version HTML correctement structurée).
Constats sur le site
Dans le document PDF "Charte de protection des données de la Trésorerie de l’Etat" disponible depuis la page informations légales, il n'y a pas de titres, il manque une table des matières, des paragraphes sont utilisés pour générer des sauts de ligne.
Les documents pdf de demande d'informations présentent des défauts de contraste. De plus, ces documents PDF de demandes d'informations ne sont compatibles qu'avec certains logiciels de visionnage de pdf, ce qui rend leur consultation complexe pour les utilisateurs de lecteurs d'écrans.