Introduction
Ce rapport accompagne le relevé d'audit effectué sur le site « Sécurité Alimentaire - Luxembourg ».
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 15 pages :
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 |
| JAWS 2023 | Firefox |
| VoiceOver (macOS Sequoia version 15.0.1) | Safari 18.0.1 |
Environnement de test — mobile
| Système d'exploitation | Technologie d'assistance | Navigateur |
|---|---|---|
| Android natif | TalkBack (dernière version) | Chrome |
Accessibilité des pages auditées
Le site présente un niveau général d'accessibilité bon.
Le niveau de conformité relevé atteint 74,68 % 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 | 88,24% |
| P02 | Contact | 90,91% |
| P03 | Aspects légaux | 86,54% |
| P04 | Accessibilité | 90,57% |
| P05 | Plan du site | 90,20% |
| P06 | Résultats de recherche | 91,07% |
| P07 | Alerte alimentaire | 80,77% |
| P08 | Actualité | 79,63% |
| P09 | Alertes alimentaires | 90,20% |
| P10 | Alerte | 92,98% |
| P11 | Notification obligatoire | 84,38% |
| P12 | Établissements agréés | 83,33% |
| P13 | Allergènes | 90,20% |
| P14 | Publications | 91,23% |
| P15 | Signalement d'un problème de sécurité alimentaire | 91,38% |
Moyenne par thématiques
| Thématiques | C | NC |
|---|---|---|
| Images | 0,00% | 100,00% |
| Cadres | 100,00% | 0,00% |
| Couleurs | 66,67% | 33,33% |
| Multimédia | 60,00% | 40,00% |
| Tableaux | 0,00% | 100,00% |
| Liens | 100,00% | 0,00% |
| Script | 66,67% | 33,33% |
| Éléments obligatoires | 66,67% | 33,33% |
| Structuration | 25,00% | 75,00% |
| Présentation | 91,67% | 8,33% |
| Formulaires | 100,00% | 0,00% |
| Navigation | 100,00% | 0,00% |
| Consultation | 75,00% | 25,00% |
| Documentation | 50,00% | 50,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, à l'API ARIA et aux tableaux 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 bureautiques en téléchargement fournis par des tiers et n’étant pas sous contrôle (article "Actualités>Événements>2024>Contaminants in the food chain - 10 October 2024", page "Professionnels>Denrées alimentaires>Établissements agréés");
- Les vidéos publiées avant le 23 septembre 2020 (page "Animations la sécurité dans mon assiette");
- Le gestionnaire de cookie Orejime (motif : service externe);
- Le lecteur vidéo YouTube (motif : service externe).
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 :
- L'implémentation des différentes balises et attributs (citations, attributs de langue, ...) dans les extraits de contenus affichés sur la page d'accueil, les résultats de recherche, la liste des actualités, ...
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 : les documents bureautiques non accessibles, le relevé mentionne quelques occurrences, mais ne les cite pas tous.
Avis
Le site repose sur de bonnes bases en matière d'accessibilité. L'amélioration générale de l'accessibilité du site semble relativement simple à corriger. Avec des ajustements ciblés, le site peut atteindre un niveau élevé de conformité et offrir une meilleure expérience à tous les utilisateurs.
Les non-conformités les plus bloquantes pour les utilisateurs concernent :
- le script de gestion des sous-menus;
- les scripts de fenêtres modales;
- la structure de la navigation (le bouton d'ouverture du menu mobile)
- les tableaux;
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 de décoration
Le site contient des images de décoration qui ne sont pas correctement identifiées, soit parce qu'elles ont une alternative renseignée, soit parce qu'il manque les attributs nécessaires pour qu'elles soient ignorées par les technologies d'assistance.
Ces images n'apportent aucune information et peuvent causer des problèmes de compréhension pour les aveugles et les grands malvoyants qui vont écouter les contenus avec un lecteur d'écran.
- Dans le cas d'une image insérée avec la balise
img, mettre unalt="". - Dans le cas d'une image insérée avec la balise
svg, mettre une propriété ARIAaria-hidden="true".
Constats sur le site
Sur la page "Alertes alimentaires > Rappel : Croûtons Rouille Soupe de la marque Palais des Mets", l'alternative de l'image "Pays voisins" est renseignée, mais n'apporte aucune information.
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 d'accueil, l'alternative de l'image "Lux Food Alerts - Alertes chaîne alimentaire" n'est pas renseignée alors qu'elle contient une information.
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
Sur la page "Contact", dans le pied de page, le lien actif "Contact" est de couleur #04273b sur fond #E21538 et présente un ratio de contraste insuffisant (3,2:1).
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.
Constats sur le site
La vidéo "Présentation du nouvel assistant - Notification obligatoire de retrait/rappel" ne dispose pas d'alternative textuelle.
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).
Constats sur le site
La vidéo "Présentation du nouvel assistant - Notification obligatoire de retrait/rappel" dispose de sous-titres automatiques qui contiennent de nombreuses erreurs. Ces sous-titres ne sont pas pertinents de ce fait.
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
La vidéo "Présentation du nouvel assistant - Notification obligatoire de retrait/rappel" ne dispose pas d'audiodescription synchronisée. Cela est nécessaire, car de nombreuses manipulations d'un site web sont expliquées en s'appuyant sur des références visuelles.
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
La vidéo "Présentation du nouvel assistant - Notification obligatoire de retrait/rappel" dispose de traductions automatiques qui ne peuvent être vocalisées.
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
Sur la page "Établissements agréés", le tableau a un titre qui ne lui est pas relié, et les en-têtes ne sont pas identifiés.
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 de la navigation principale s'ouvrent au survol d'éléments qui sont des liens à l'aide d'un script JavaScript. Avec un lecteur d'écran, il n'est pas possible d'accéder à ces sous-menus de façon cohérente selon le lecteur.
Utilisation inappropriée de propriétés ARIA
Les propriétés ARIA sont chargées de transmettre des informations indispensables à la restitution et l'utilisation des composants développés avec JavaScript aux technologies d'assistance. Une utilisation inappropriée peut poser des problèmes de restitution notamment.
Constats sur le site
Sur la page listant les "Alertes alimentaires", la fenêtre modale des filtres ne respecte pas le motif de conception ARIA Dialog. En effet, le bouton de fermeture de la modale est situé en dehors de cette modale dans le code.
É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
Dans l'article "Contaminants in the food chain - 10 October 2024", l'ensemble du contenu est en anglais mais n'est pas signalé. Le titre principal est signalé comme étant en français alors qu'il est en anglais.
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 l'article "Contaminants in the food chain - 10 October 2024", des paragraphes 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
Dans l'article "Contaminants in the food chain - 10 October 2024", le texte "Bio sketch" est un titre qui n'est pas identifié comme tel.
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 liste de liens d'accès rapides n'est pas structurée sous forme de 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 structurés dans 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
Dans les articles d'alertes alimentaires, le tableau décrivant le produit est structuré avec des attributs de mise en forme.
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
Le document "Charte des cookies" de la page "Aspects légaux" contient des erreurs de contraste. Les liens sont de couleur #40C3F7 sur fond de couleur #FFFFFF et présentent un ratio de contraste de 2:1.
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
Ce critère pourra être déclaré conforme quand les erreurs d'accessibilité de la page "Accessibilité" seront corrigées.