Introduction
Ce rapport accompagne le relevé d'audit effectué sur le site « L'Armée luxembourgeoise ».
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 13 pages :
| Nº page | Titre de la page | URL |
|---|---|---|
| P01 | Accueil | https://armee.public.lu/fr.html |
| P02 | Contact | https://armee.public.lu/fr/support/contact.html |
| P03 | Mention légales | https://armee.public.lu/fr/support/aspects-legaux.html |
| P04 | Accessibilité | https://armee.public.lu/fr/support/accessibilite.html |
| P05 | Plan du site | https://armee.public.lu/fr/support/plan-site.html |
| P06 | Recherche | https://armee.public.lu/fr/support/recherche.html?q=Luxembourg |
| P07 | A propos – Présentation générale | https://armee.public.lu/fr/armee-luxembourgeoise/a-propos.html |
| P08 | Nos opérations en cours – EUMAM UA | https://armee.public.lu/fr/missions/operations-en-cours/eumam-ua.html |
| P09 | Pourquoi s’engager dans l’armée | https://armee.public.lu/fr/engager/pourquoi-engager.html |
| P10 | S’engager – Poste Officier | https://armee.public.lu/fr/engager/offres-demploi/postes-militaires/officier.html |
| P11 | S’engager - Femme et militaire | https://armee.public.lu/fr/engager/etre-femme-et-militaire.html |
| P12 | Infos fournisseurs | https://armee.public.lu/fr/informations-utiles/infos-fournisseurs.html |
| P13 | Grades & carrières | https://armee.public.lu/fr/armee-luxembourgeoise/personnel/grades.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é bon.
Le niveau de conformité relevé atteint 70,51% 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 | 74,55% |
| P02 | Contact | 89,13% |
| P03 | Mention légales | 90,91% |
| P04 | Accessibilité | 91,18% |
| P05 | Plan du site | 88,24% |
| P06 | Recherche | 88,37% |
| P07 | A propos – Présentation générale | 85,00% |
| P08 | Nos opérations en cours – EUMAM UA | 77,27% |
| P09 | Pourquoi s’engager dans l’armée | 82,35% |
| P10 | S’engager – Poste Officier | 81,13% |
| P11 | S’engager - Femme et militaire | 84,91% |
| P12 | Infos fournisseurs | 87,18% |
| P13 | Grades & carrières | 86,84% |
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 | 66,67% | 33,33% |
| Tableaux | 100,00% | 0,00% |
| Liens | 50,00% | 50,00% |
| Script | 33,33% | 66,67% |
| Éléments obligatoires | 66,67% | 33,33% |
| Structuration | 0,00% | 100,00% |
| Présentation | 58,33% | 41,67% |
| Formulaires | 85,71% | 14,29% |
| Navigation | 90,00% | 10,00% |
| Consultation | 80,00% | 20,00% |
| Documentation | 100,00% | 0,00% |
| Outils d'édition | 0,00% | 0,00% |
| Assistance | 50,00% | 50,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, à l'API ARIA 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.
- Les documents en téléchargement fournis par des administrations tierces et n’étant pas sous notre contrôle ;
- Les vidéos publiés avant le 23 septembre 2020 sur le site ;
- Gestionnaire de cookie Orejime (motif : service externe) ;
- Le lecteur vidéo Youtube ;
- Plugin AccessConfig d’Access42 (motif : service externe) .
- Cartes interactives dans la mesure ou une alternative est présente dans la page pour récupérer l’information fournie par la carte (présence de l’adresse en toute lettres par exemple)
- Contenus présentés dans des éléments « Iframe » et fournis par des administrations tierces n’étant pas sous notre contrôle
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.
Bien que le site présente actuellement un bon taux de conformité, il repose sur des bases solides en matière d'accessibilité. L'amélioration générale de l'accessibilité du site est non seulement réalisable, mais également prometteuse. De nombreuses erreurs identifiées semblent relativement simples à corriger, et certaines ne se produisent que sur une seule page. Avec des ajustements ciblés, le site peut atteindre un niveau élevé de conformité et offrir une meilleure expérience à tous les utilisateurs.
Avis
Les non-conformités les plus bloquantes pour les utilisateurs concernent :
- La définition des images informatives et légendées ;
- Les scripts (carrousels, fenêtres modales) ;
- 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 « Pourquoi s'engager dans l'armée », les images du carrousel n'ont pas de texte alternatif, ce qui peut poser des problèmes d'accessibilité pour les utilisateurs de technologies d'assistance. Particulièrement, les aveugles ou malvoyants ne peuvent pas comprendre le contenu visuel du carrousel.
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 « Nos opérations en cours – EUMAM UA », les images légendées ne sont pas correctement implémentées.
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 « Officier », le cadre de la vidéo YouTube 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.
Sous-titres
Chaque vidéo doit disposer de sous-titres synchronisés pertinents, pour permettre aux utilisateurs sourds ou malentendants d'accéder au contenu oralisé de la vidéo.
L'utilisateur doit pouvoir activer ou désactiver les sous-titres depuis le lecteur vidéo. Si ce n'est pas possible, une solution consiste à fournir deux versions de la même vidéo : une version sans sous-titres et une version sous-titrée (On fera ensuite un lien réciproque de l'une vers l'autre).
Audiodescription
Chaque vidéo doit disposer d'une version audiodécrite, si nécessaire. En effet, des textes incrustés ou des actions d'intérêt dans une vidéo ne seront pas perçus par un utilisateur aveugle.
De plus, l'utilisateur doit pouvoir activer ou désactiver l'audiodescription depuis le lecteur vidéo.
Constats sur le site
Sur la page « Être femme et militaire », la vidéo « Fraen an der Lëtzebuerger Arméi » ne possède ni transcription textuelle, ni sous-titres synchronisés pertinents, ni audiodescription.
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 d'accueil, le nom accessible de lien-image ne reprend pas le nom de l'image « Lëtzebuerg Arméi »
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
Sur la page d'accueil, les composants du menu de navigation principal déclenchent des événements JavaScript, mais sont implémentés dans des liens.
Fenêtres modales
Constats sur le site
Sur la page d'accueil, la fenêtre de dialogue de menu ne respecte pas correctement les principes du motif de conception ARIA dialog.
Carrousels
Constats sur le site
Dans la page « Eumam Ua », le carrousel n'est pas accessible, il devrait implémenter les principes du motif de conception ARIA Carousel
Système d'onglets
Constats sur le site
Dans la page « Contact », le système d'onglets ne respecte pas correctement les principes du motif de conception ARIA Tabs
É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.
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
Sur la page d'accueil,« le texte Zesummen, am Déngscht vun eisem Land »est en luxembourgeois et nécessite une indication 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
Dans la page « Infos fournisseurs », on trouve un élément (<dl>) vide servant à créer des espacements. Par exemple dans le bloc « Contacts »
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 d'accueil, on trouve une hiérarchie de titres qui n'est pas cohérente, les termes (l'Armée luxembourgeoise, Nos missions, S'engager,...) doivent être des titres
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
Dans la page « Recherche », la suite de liens de résultat de recherche 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
Sur la page d'accueil, les liens d’évitement ne sont pas identifiés comme étant des éléments 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.
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 » 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
La couleur de la prise de focus orange (#F08700) sur le fond blanc a un rapport insuffisant (ratio: 2.6).
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
Sur la page d'accueil, le contenu « le texte Zesummen, am Déngscht vun eisem Land » n'est pas correctement lisible lorsque les paramètres de présentation des textes ont été modifiés.
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
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 « Contact », le champ de saisie « Email » attend un exemple réel de saisie, par exemple : (Email : john@access42.net).
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.
Contenus en mouvement ou clignotants
Les contenus en mouvement peuvent être problématiques pour les utilisateurs avec des difficultés de lecture, en effet un contenu qui défile trop rapidement empêche d'accéder de fait à l'information. De plus, pour les personnes avec un déficit de l'attention, le mouvement les empêche de lire le reste de la page.
Il faut alors permettre aux utilisateurs d'arrêter et de redémarrer le contenu en mouvement , ou d'afficher tout le contenu sans le mouvement ou de masquer le contenu en mouvement et de le réafficher.
Constats sur le site
Dans le cadre « Nos troupes sur le terrain », la carte interactive ne peut pas être contrôlée lorsque l'utilisateur tabule au carrousel.