Introduction
Ce rapport accompagne le relevé d'audit effectué sur le site « La fonction publique - Govjobs ».
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 14 pages :
| Nº page | Titre de la page | URL |
|---|---|---|
| P01 | Accueil | https://govjobs.public.lu/fr.html |
| P02 | Contact | https://govjobs.public.lu/fr/support/contact.html |
| P03 | Mention légales | https://govjobs.public.lu/fr/support/aspects-legaux.html |
| P04 | Accessibilité | https://govjobs.public.lu/fr/support/accessibilite.html |
| P05 | Plan du site | https://govjobs.public.lu/fr/support/plan.html |
| P06 | Résultats de recherche | https://govjobs.public.lu/fr/support/recherche.html?q= |
| P07 | FAQ | https://govjobs.public.lu/fr/examen-concours/faq.html |
| P08 | Inscription à la Newsletter | https://govjobs.public.lu/fr/support/newsletters/newsletter-postevacants.html |
| P09 | Une offre d’emploi | https://govjobs.public.lu/fr/postuler/postes-ouverts/postes-vacants/fonctionnaires/2024/A1/Juillet/20240725-gestionnaireetcontrleurdeproje-305107.html |
| P10 | Page de rubrique | https://govjobs.public.lu/fr/postuler/jobs-stages-etudiants/stages.html |
| P11 | Inscription aux examens | https://govjobs.public.lu/fr/examen-concours/administration/inscription.html |
| P12 | Administration de la nature et des forêts | https://govjobs.public.lu/fr/nous-decouvrir/ministeres-et-administrations/administrationdelanatureetdesforets.html |
| P13 | Découvrez nos métiers | https://govjobs.public.lu/fr/nous-decouvrir/decouvrez-nos-metiers/vous-ne-le-saviez-pas-profils-juniors.html |
| P14 | Découvrez notre brochure d'information | https://govjobs.public.lu/fr/nous-decouvrir/publications.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 |
| 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é moyen.
Le niveau de conformité relevé atteint 71,23% de conformité au RAWeb sur l'ensemble des pages auditées.
Le site es 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 | 81,63% |
| P02 | Contact | 85,71% |
| P03 | Mention légales | 93,75% |
| P04 | Accessibilité | 100,00% |
| P05 | Plan du site | 93,75% |
| P06 | Résultats de recherche | 90,24% |
| P07 | FAQ | 91,43% |
| P08 | Inscription à la Newsletter | 83,72% |
| P09 | Une offre d’emploi | 86,11% |
| P10 | Page de rubrique | 88,57% |
| P11 | Inscription aux examens | 87,10% |
| P12 | Administration de la nature et des forêts | 79,59% |
| P13 | Découvrez nos métiers | 79,55% |
| P14 | Découvrez notre brochure d'information | 80,56% |
Moyenne par thématiques
| Thématiques | C | NC |
|---|---|---|
| Images | 50,00% | 50,00% |
| Cadres | 50,00% | 50,00% |
| Couleurs | 100,00% | 0,00% |
| Multimédia | 88,89% | 11,11% |
| Tableaux | 0,00% | 0,00% |
| Liens | 50,00% | 50,00% |
| Script | 0,00% | 100,00% |
| Éléments obligatoires | 75,00% | 25,00% |
| Structuration | 25,00% | 75,00% |
| Présentation | 61,54% | 38,46% |
| Formulaires | 90,00% | 10,00% |
| Navigation | 80,00% | 20,00% |
| Consultation | 66,67% | 33,33% |
| Documentation | 100,00% | 0,00% |
| Outils d'édition | 0,00% | 0,00% |
| Assistance | 100,00% | 0,00% |
| Communication | 0,00% | 0,00% |
Impacts utilisateurs
Les principales personnes impactées sont les personnes aveugles et celles qui naviguent au clavier. Les problèmes liés aux scripts et aux formulaires 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.
- Le gestionnaire de cookie Orejime ;
- Les vidéos publiés avant le 23 septembre 2020 sur le site.
- Les documents en téléchargement fourni par des des administrations tiers.
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 :
- Les sous-titres de traduction qui ne sont pas vocalisés par les lecteurs d'écran sur les vidéos Youtube.
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 : la structure du document, le relevé mentionne quelques occurrences, mais ne les cite pas tous.
Avis
Les non-conformités les plus bloquantes pour les utilisateurs concernent :
- La définition des images informatives et légendées ;
- Les scripts (Utilisation des boutons) ;
- Les vidéos n'ont pas de transcription textuelle ;
- La hiérarchisation des titres n'est pas pertinente.
Ce sont donc ces points qui devront nécessiter une attention toute particulière et qui demanderont le plus d'efforts.
Annexe technique
Images
Recommandation
Donner à chaque image porteuse d'information une alternative textuelle pertinente et une description détaillée si nécessaire. Lier les légendes à leurs images. Remplacer les images textes par du texte stylé lorsque c'est possible.
Images porteuses d'information
Il est nécessaire de donner une alternative pertinente dans le cas où la suppression de l'image entraînerait un problème de compréhension des contenus.
Constats sur le site
Sur la page « Administration de la nature et des forêts », l'image « Gov Jobs » ne possède pas une alternative textuelle, il faut une alternative renseignée afin de pouvoir faire le lien entre la légende et l'image.
Images légendées
On trouve un certain nombre d'images avec des informations de copyright sur le site. Actuellement, une personne aveugle ne peut savoir à quel contenu s'applique le copyright.
Il va falloir relier l'image et l'information de copyright en utilisant l'implémentation suivante :
<figure role="group" aria-label="Document 1 - Le présent registre contenant six feuillets…">
<img src="path/to/img/jpg" alt="Document 1" />
<figcaption>
Document 1 — Le présent registre contenant six feuillets…</figcaption>
</figure>Le contenu de l'attribut alt de l'image sert ici à labelliser l'image pour la relier à sa
légende, permettant aux personnes aveugles utilisant un lecteur d'écran de faire le lien entre l'image
et le texte qui l'accompagne. La propriété aria-label doit reprendre le contenu exact
contenu dans l'élément figcaption.
Constats sur le site
Sur la page « Administration de la nature et des forêts », l'image légendée n'est pas correctement implémentée.
Cadres
L'absence d'identification des cadres peut poser un problème de repérage dans la structure de la page ou de compréhension des contenus pour les personnes aveugles.
Constats sur le site
Sur la page « Découvrez nos métiers », le cadre « DAT WOUSST ECH NET - La Fonction publique [...] » doit indiquer qu'il s'agit d'une vidéo YouTube.
Multimédia
Recommandation
Donner si nécessaire à chaque média temporel une transcription textuelle, des sous-titres synchronisés et une audiodescription synchronisée pertinents. Donner à chaque média non temporel une alternative textuelle pertinente. Rendre possible le contrôle de la consultation de chaque média temporel et non temporel au clavier et s'assurer de leur compatibilité avec les technologies d'assistance.
Transcription textuelle
Les vidéos présentes sur le site ne disposent pas de transcription textuelle. Il s'agit d'un impact majeur d'accessibilité. En effet, la transcription textuelle est utile pour différents types d'utilisateurs (aveugles, malvoyants, sourds, malentendants, handicapés moteurs, handicapés cognitifs).
Cette transcription doit être un fichier structuré (docx, HTML) qui reprend toutes les informations présentes (visuelles et sonores) dans la vidéo.
Cette transcription peut être située :
- soit sur la même page que la vidéo ;
- soit ailleurs sur le site. Dans ce cas, ajouter alors un lien vers la transcription sous la vidéo par exemple.
Vocalisation des sous-titres de traduction
Pour chaque média temporel qui présente des sous-titres de traduction non incrustés l’utilisateur doit pouvoir accéder à la vocalisation de l’ensemble des sous-titres de traduction grâce :
- à une piste sonore ou une version alternative du média ;
- ou une fonctionnalité qui permet de les vocaliser ;
- ou lecteur d’écran .
Constats sur le site
Sur la page « Découvrez nos métiers », la vidéo « DAT WOUSST ECH NET - La Fonction publique [...] » ne possède pas de transcription textuelle.
Liens
Recommandation :
Donner des intitulés de lien explicites, grâce à des informations de contexte notamment, utiliser le titre de lien le moins possible. S'assurer que le nom visible est contenu dans le nom accessible.
Liens-images
Un lien-image est un lien dont le contenu n'est composé que d'une ou plusieurs images (balises
<img>). Généralement, ces liens ne posent aucun problème aux utilisateurs voyants qui
parviennent à comprendre la destination du lien grâce à l'image et son contexte. En revanche, pour
une personne aveugle, ces liens doivent obligatoirement posséder un intitulé.
L'intitulé d'un lien-image est généré grâce à l'alternative de l'image contenue dans ce lien.
Constats sur le site
Sur la page « Une offre d’emploi », le nom accessible de lien ne reprend pas le nom visible « Postuler sur MyGuichet »
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 composants du menu de navigation principal déclenchent des événements JavaScript, mais sont implémentés dans des liens.
Éléments interactifs inaccessibles au clavier
Si un élément ne peut pas recevoir le focus ou n'est pas totalement utilisable au clavier, les utilisateurs pour lesquels le clavier est le seul moyen de naviguer seront bloqués.
Constats sur le site
En version mobile, le bouton de menu ne se déclenche pas avec la touche Espace.
É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.
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 « Inscription aux examens », des paragraphes (<p>) et des titres vides sont utilisés pour créer des espacements.
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
Sur la page « Stages pour élèves et étudiants », on trouve une hiérarchie de titres qui n'est pas cohérente. Par exemple : le texte « Quels types de stage propose la fonction publique? » doit être un titre.
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
Sur l'ensemble du site, la suite de liens d'accès rapide n'est pas structurée en tant que 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
En version mobile, le menu burger n'est pas identifié comme étant un élément de navigation.
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.
Utilisation de CSS exclusivement
Certains utilisateurs qui présentent des troubles de la lecture (personnes dyslexiques par exemple), vont avoir besoin d'adapter la présentation des pages avec leurs propres mises en forme. Cela est possible sans difficulté si le site web utilise exclusivement les feuilles de styles CSS pour réaliser les mises en forme. Cependant, l'utilisation d'attributs et balises HTML de mise en forme rend ces adaptations plus compliquées, sinon impossibles.
Le RAWeb donne la liste des attributs et balises qu'il est interdit d'utiliser.
Constats sur le site
Sur la page « Découvrez nos métiers », on trouve des attributs de présentation (width, height) sur le cadre YouTube « DAT WOUSST Wurst Ech net [...] ».
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
Sur la page « Contact », le paragraphe « Protection des données à caractère personnel » situé après le bouton de validation « Prévisualiser et puis envoyer » pourrait ne pas être perçu pas une personne aveugle qui pourrait en ignorer le contenu avant de soumettre le formulaire.
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
Sur la page « Résultats de recherche », la couleur grise (#CECECE) de la prise de focus sur l'élément « type(s) » qui déclenche l'ouverture de la zone des filtres a un rapport de contraste insuffisant avec un fond blanc.
Contenus additionnels au survol et au focus
Les contenus additionnels qui apparaissent au survol ou à la prise de focus (par exemple, un menu déroulant, une infobulle d'information), peuvent être contrôlés par l'utilisateur. Par exemple, les utilisateurs malvoyants utilisateurs de loupes d'écran peuvent déclencher l'affichage accidentel des contenus qui apparaissent au survol et ces affichages non désirés perturbent la consultation pour ces utilisateurs. L'utilisateur doit alors disposer d'un moyen simple pour les masquer et continuer sa consultation.
Également, en utilisant une loupe d'écran, il est probable que le contenu additionnel soit en fait apparu en dehors de la zone de zoom de la loupe, l'utilisateur doit pouvoir survoler le contenu additionnel à la souris.
Constats sur le site
Sur l'ensemble du site, le menu de navigation principal dont les sous-menus apparaissent uniquement au survol.
Formulaires
Recommandation :
Associer pour chaque formulaire chacun de ses champs à son étiquette, grouper les champs dans des blocs d'informations de même nature, regrouper les items de même nature dans les listes de choix, donner à chaque bouton un intitulé explicite. Vérifier la présence d'aide à la saisie, s'assurer que le contrôle de saisie est accessible et que l'utilisateur peut contrôler les données à caractère financier, juridique ou personnel.
Contrôle de saisie et aide à la saisie
Tous les champs obligatoires doivent être identifiés préalablement à toute validation de l’utilisateur.
Pour les champs qui attendent un format de saisie particulier pour être validés, ce format doit être spécifié à l’utilisateur par un passage de texte visible à proximité du champ. De plus, si l’utilisateur commet une erreur sur ce champ, alors le message d’erreur doit présenter un exemple réel de saisie.
Enfin, les messages d'erreur de saisie des champs de formulaire doivent être liés correctement aux champs en erreur.
Constats sur le site
Sur la page « Inscription à la Newsletter », le message du champ en erreur « Email » attend un format particulier n'est pas accompagné d'un exemple réel de saisie.
Navigation
Recommandation :
Faciliter la navigation dans un ensemble de pages par au moins deux systèmes de navigation différents (menu de navigation, plan du site ou moteur de recherche), un fil d'Ariane et l'indication de la page active dans le menu de navigation. Identifier les groupes de liens importants et la zone de contenu et donner la possibilité de les éviter par des liens de navigation interne. S'assurer que l'ordre de tabulation est cohérent et que la page ne comporte pas de piège au clavier. S'assurer que les raccourcis clavier qui utilisent une seule touche sont contrôlables par l'utilisateur.
Landmarks ARIA
Pour fournir des points de repère aux utilisateurs aveugles, il faudra également implémenter les landmarks ARIA sur les balises HTML 5 de la page.
Constats sur le site
Le fil d'Ariane ne possède pas le rôle WAI-ARIA navigation.
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
Sur la page « Découvrez notre brochure d'information », la brochure d'information n'est pas accessible : il n'est pas structuré correctement (pas de langue, contraste insuffisant,...) et n'a pas d'alternative.