Appréciation générale

Niveau d’accessibilité global pour les critères testés : bon.

(Échelle : très faible, faible, moyen, bon, très bon)

Avertissement

Il s’agit là d'un audit simplifié et non d’un audit de conformité (ou audit "complet"). Il a vocation à détecter une série de problèmes d’accessibilité mais n’est pas exhaustif. Le fait qu’aucun problème ne soit remonté pour un critère d’accessibilité donné ne signifie pas qu’il n’y a pas de problème d’accessibilité pour ce critère. De même, lorsque nous rapportons une occurrence d’un problème, ce problème peut avoir d’autres occurrences. Il est nécessaire de vérifier de manière exhaustive l’accessibilité de ce site conformément au référentiel RAWeb.

Échantillon de pages et référentiel

Voici les pages qui ont été évaluées lors de cet audit :

Méthode d’évaluation : Méthode de contrôle simplifiée de l’accessibilité pour le Luxembourg – v1.2.1

Référentiel : RAWeb v1

Déclaration sur l’accessibilité

La déclaration sur l’accessibilité est manquante. Celle-ci est obligatoire d’après l’article 5 de la loi du 28 mai 2019. Cette déclaration s’effectue après avoir réalisé un audit de conformité basé sur le RAWeb. Pour créer une déclaration sur base des résultats d’un audit de conformité, le formulaire disponible à cet effet sur accessibilite.public.lu peut être utilisé. Une fois la déclaration d’accessibilité publiée, l’éditeur du site a 30 jours pour en informer le SIP par e-mail à l’adresse accessibilite@sip.etat.lu.

 

Annexe technique

Thématique "images"

Images

Recommandations générales

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. Pour trouver la bonne alternative textuelle pour une image donnée, vous pouvez vous aider de l’arbre de décision proposé par la WAI.

Cas rencontré : images de décoration

Les images de décoration ne doivent pas avoir d’alternative textuelle et doivent être ignorées correctement par les technologies d’assistance. Dans le cas contraire, elles peuvent causer des problèmes de compréhension aux utilisateurs de lecteurs d’écran (aveugles et grands malvoyants). Pour une image matricielle, son attribut alt doit être vide. Pour une image vectorielle SVG, celle-ci doit avoir l’attribut aria-hidden="true".

Exemples de problèmes détectés sur la page 1

L’image "Illustration surdité" dispose d’un attribut alt renseigné alors qu’il devrait être vide.

Thématique "multimédia"

Multimédia

Recommandations générales

Donner à chaque média temporel audio et/ou vidéo une transcription textuelle, des sous-titres ou une audiodescription pertinents lorsque cela est nécessaire. Donner à chaque contenu graphique ou interactif (ou média non temporel) une alternative textuelle pertinente. Rendre possible le contrôle de leur consultation et leur manipulation au clavier et avec tout dispositif de pointage comme la souris. S’assurer de leur compatibilité avec les technologies d’assistance.

Cas rencontré : sous-titres

Les vidéos sur ce site doivent avoir des sous-titres. Il existe deux types de sous-titres : les sous-titres de traduction et les sous-titres pour sourds et malentendants. Il est nécessaire de fournir ici des sous-titres pour sourds et malentendants. Ceux-ci doivent notamment fournir en plus des dialogues toutes les informations sur les éléments sonores nécessaires pour comprendre l’action. Les sous-titres doivent être correctement synchronisés avec la vidéo.

Exemples de problèmes détectés sur la page 2

La vidéo ne dispose pas de sous-titres synchronisés dans la langue du locuteur.

Thématique "liens"

Liens

Recommandations générales

Utiliser des intitulés de liens explicites, grâce à des informations de contexte notamment.

Cas rencontré : présence d’intitulés

Un lien doit toujours avoir un intitulé. Celui-ci permet aux utilisateurs de comprendre la destination du lien. La présence d’intitulés sur tous les liens est particulièrement importante pour les aveugles et malvoyants. Si un lien n’a pas d’intitulé, les lecteurs d’écran vont lire simplement « lien » sans annoncer sa destination.

  • Pour un lien qui ne contient qu’une image, l’intitulé du lien est l’alternative de l’image. Pour une image matricielle, son attribut alt doit contenir l’intitulé du lien (ex : <a href="https://facebook.com"><img src="..." alt="facebook" /></a>). Pour une image vectorielle SVG, celle-ci doit avoir l’attribut role="img" et l’intitulé du lien pourra être fourni via les attributs aria-label ou aria-labelledby (ex : <a href="https://facebook.com"><svg role="img" aria-label="facebook">...</svg></a>).
  • Lorsqu’un lien contient du texte et des images, l’intitulé du lien correspond à la concaténation des intitulés de ces différents éléments contenus dans le lien (ex : pour <a href="https://facebook.com"><img src="..." alt="logo Facebook" /> Facebook</a> l’intitulé du lien est « logo facebook facebook ». Dans cet exemple, cet intitulé n’est pas pertinent et l’alternative de l’image doit être vide.)
Exemples de problèmes détectés sur la page 2

Les trois vidéos sont, dans un premier état, des liens qui ne disposent d'aucun intitulé accessible.

Thématique "scripts"

Scripts

Recommandations générales

Donner si nécessaire à chaque script une alternative pertinente. Avertir ou permettre le contrôle des scripts qui initient un changement de contexte. Rendre possible le contrôle de chaque code script au moins par le clavier et par tout dispositif de pointage et s’assurer de leur compatibilité avec les technologies d’assistance notamment pour les messages de statut.

Cas rencontré : éléments interactifs inaccessibles au clavier

Les composants riches développés en JavaScript doivent respecter des modèles de conception spécifiques pour pouvoir être considérés comme accessibles (modèles de conception décrits dans le document « WAI-ARIA Authoring practices guide »). Sans cela le composant ne sera pas correctement restitué aux utilisateurs de lecteurs d’écran qui ne sauront pas comment l’utiliser. Ces composants doivent notamment utiliser des interactions au clavier spécifiques, sans lesquelles ils seront inutilisables pour les utilisateurs de la navigation au clavier.

Exemples de problèmes détectés sur la page 1

Le menu burger doit pouvoir répondre au motif de conception ARIA Modal. En particulier, il doit pouvoir être masqué via la touche Echap et restreindre la tabulation à ses seuls éléments.

Thématique "éléments obligatoires"

Éléments obligatoires

Recommandations générales

Vérifier que dans chaque page Web, le titre est pertinent et la langue par défaut est indiquée. 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.

Cas rencontré : indication de langue

Les lecteurs d’écran utilisent les indications de langue pour vocaliser correctement le contenu. La langue principale de la page est spécifiée via l’attribut lang sur l’élément <html>. Lorsqu’un mot d’origine étrangère est inséré dans du contenu écrit dans la langue principale de la page, il doit posséder si nécessaire une indication de langue. L’indication de langue se fait par l’intermédiaire de l’attribut lang. Il existe néanmoins des exceptions :

  • Lorsqu’il s’agit d’un nom, l’indication de langue doit être faite uniquement quand le nom doit se prononcer dans sa langue d’origine ;
  • Lorsqu’il s’agit d’un mot d’origine étrangère, présent dans le dictionnaire de la langue principale de la page, l’indication de langue n’est pas nécessaire ;
  • Lorsqu’il s’agit d’un mot d’origine étrangère d’usage courant, mais absent du dictionnaire, l’indication de langue doit être faite uniquement si la prononciation dans la langue principale de la page est problématique.

Plus d’information sur le sujet dans notre article : L’attribut lang, pour rendre la page audible… et compréhensible

Exemples de problèmes détectés sur la page 1

Cette page contient des textes en d’autres langues non marqués par un changement de langue via l’attribut lang (par exemple « Wat ass normal ? »).

Thématique "structuration de l'information"

Structuration de l'information

Recommandations générales

Utiliser des titres, des listes, et des citations pour structurer l’information. S’assurer que la structure du document est cohérente.

Cas rencontré : titres

Les titres permettent aux utilisateurs de comprendre la structure du document. Ils permettent aussi aux utilisateurs aveugles, malvoyants et handicapés moteurs de naviguer de titre en titre dans la page. Il est donc important d’avoir une bonne hiérarchie de titres dans une page. Cette hiérarchie est similaire à un sommaire de document. La vérification de la hiérarchie de titres peut se faire via l’extension de navigateur HeadingsMap.

Exemples de problèmes détectés sur la page 2

Chacune des trois autres histoires sont situées au même niveau hiérarchique que le titre de section "Découvrez les autres histoires", elles devraient toutes être subordonnées à ce titre.

Thématique "présentation de l'information"

Présentation de l'information

Recommandations générales

Utiliser des feuilles de styles pour présenter de l’information. S’assurer que l’information reste compréhensible lorsque les feuilles de styles sont désactivées. Vérifier l’effet de l’agrandissement à 200 % de la taille des caractères et de la redéfinition des propriétés d’espacement sur la lisibilité. S’assurer que les liens sont correctement identifiables, que la prise de focus est signalée et que l’utilisateur a le contrôle des contenus additionnels qui deviennent visibles au survol ou au focus. S’assurer que les contenus cachés sont ignorés par les technologies d’assistance et que l’information n’est pas donnée uniquement par la forme, taille ou position d’un élément.

Cas rencontré : visibilité du focus

Les handicapés moteurs qui naviguent au clavier utilisent l’indicateur de focus fourni par le site sur les éléments interactifs pour savoir où ils se situent dans la page. L’indicateur de focus se déplace via les touches tab et shift-tab. L’indicateur de focus par défaut peut être désactivé via CSS, dans ce cas il est nécessaire de changer le style de l’élément interactif pour rendre l’indicateur de focus visible (sa couleur devra avoir un contraste minimum de 3:1 avec l’arrière-plan contigu).

Exemples de problèmes détectés sur la page 1

Dans au moins un élément de cette page (le lien "Le gouvernement" en pied de page), le focus n’est pas visible.

Cas rencontré : information donnée par la forme, la taille ou la position

Ce type d’information est un problème pour les personnes aveugles et grands malvoyants. Pour chaque information véhiculée par la forme, la taille ou la position, il est nécessaire de mettre en place une alternative.

Exemples de problèmes détectés sur la page 1

L'information de la langue active est donnée par une forme. Il est nécessaire de donner également cette information via l’attribut aria-selected="true". Ceci permettra aux personnes aveugles et malvoyantes de se mieux repérer dans le choix des langues.

Navigation

Recommandations générales

Proposer au moins deux systèmes de navigation différents dans un ensemble de pages (menu de navigation, plan du site ou moteur de recherche). Donner la possibilité d’éviter ou d’atteindre les principaux regroupements de contenus en particulier la zone de contenu principale via un lien d’évitement ou d’accès rapide. 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 n’utilisant qu’une seule touche sont contrôlables par l’utilisateur.

Cas rencontré : landmarks ARIA

Les utilisateurs aveugles utilisent pour naviguer rapidement dans une page des points de repères ou landmarks. Ceux-ci définissent les principales zones de la page comme l’entête, le menu de navigation, la zone de contenu principale, le pied de page, le moteur de recherche. Chacune de ces zones doit avoir un attribut role dont la valeur correspond au type de zone :

  • role=banner pour l’entête,
  • role=navigation pour le menu de navigation,
  • role=main pour la zone de contenu principale,
  • role=contentinfo pour le pied de page,
  • role=search pour le moteur de recherche.
Exemples de problèmes détectés sur la page 1

La zone de contenu principal ne peut être atteinte ou évitée. Il est nécessaire de mettre sur cette zone un attribut role, avec la valeur "main".