Audit d'accessibilité simplifié - mediateursante.public.lu

Thématique "images"

Cas rencontré : images porteuses d’information

Les images porteuses d’information doivent avoir une alternative textuelle qui sera restituée aux personnes utilisant un lecteur d’écran, aveugles et grands malvoyants. Cette alternative textuelle doit fournir l’information véhiculée par l’image, il ne s’agit pas d’une description de l’image. Pour une image bitmap, son attribut alt doit contenir cette alternative textuelle. Pour une image vectorielle SVG, celle-ci doit avoir l’attribut role="img" et son alternative textuelle pourra être fournie via les attributs aria-label ou aria-labelledby.

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

L'image "Smart & Fair mediation in Luxembourg" n'a pas d'alternative textuelle.

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 bitmap, 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 P02

Les images des bulles colorées en fond ont une alternative textuelle "blueBubble", "greenBubble", "yellowBubble". Ces images ne sont pas porteuses d'information, elles doivent porter un attribut alt vide.

Thématique "couleurs"

Cas rencontré : informations données uniquement par la couleur

Ce type d’information est un problème pour les personnes déficientes visuelles, aveugles ou par exemple les personnes qui ne voient pas certaines couleurs ou ne perçoivent simplement pas les couleurs. Pour chaque information véhiculée par la couleur, il est nécessaire de mettre en place une alternative, comme par exemple un changement de style (graisse du texte, taille du texte, soulignement, etc.)

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

Dans le menu de navigation, l'information de l'élément actif est donnée uniquement par la couleur. Il est nécessaire de donner cette information par d'autres moyens, notamment via une modification du style (taille du texte, graisse, soulignement, bordure, ...)

Cas rencontré : contrastes des textes

Les contrastes de couleurs sont importants pour plusieurs types de déficiences visuelles comme celles des grands malvoyants ou des personnes ayant des problèmes de perception des couleurs. Les contrastes minimaux d’un texte sur le fond de page sont définis par le RGAA comme suit :

• Pour un texte sans effet de graisse
  • De taille inférieure à 24 px : le contraste minimum est de 4.5:1 ;
  • De taille supérieure ou égale à 24 px : le contraste minimum est de 3:1.
• Pour un texte en gras
  • De taille inférieure à 18.5 px : le contraste minimum est de 4.5:1 ;
  • De taille supérieure à 18.5 px : le contraste minimum est de 3:1.

Pour vérifier les contrastes, on peut utiliser un outil tel que « Colour Contrast Analyser ». Si les problèmes de contraste ne peuvent être résolus simplement, il est aussi possible d’utiliser un « style switcher ». C’est une fonctionnalité proposée par le site qui permet de renforcer les contrastes pour les personnes qui ont des problèmes avec les couleurs. Un exemple de « style switcher » est disponible sur le site sncf.com, dans son menu « Accessibilité ».

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

Certains textes sur cette page n’ont pas un contraste suffisant (p.ex "Nous vous aidons à résoudre....")

Thématique "liens"

Cas rencontré : pertinence des intitulés

Chacun doit pouvoir comprendre aisément la fonction et la destination de chaque lien. Les problèmes rencontrés ici le sont pour les aveugles, les malvoyants, les handicapés moteurs qui naviguent à la voix et les handicapés cognitifs.

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

Le lien "Plan d'accès" est non explicite car il possède un attribut title dont la valeur "Nous vous aidons à résoudre vos questions! - Nouvelle fenêtre" ne reprend pas l'intitulé visible du lien.

Thématique "scripts"

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 »). 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 P01

Le bouton de recherche a un role="button" mais n'est pas activable via la barre d'espace. Il ne respecte pas le design pattern "button" https://w3c.github.io/aria-practices/#button C'est aussi le cas du bouton du menu mobile. On ne peut atteindre les sous-menus du menu de navigation au clavier. Le menu ne respecte pas le design pattern "Disclosure" https://w3c.github.io/aria-practices/#disclosure https://w3c.github.io/aria-practices/examples/disclosure/disclosure-navigation-hybrid.html

Thématique "formulaires"

Cas rencontré : identification des champs, des contrôles et des regroupements de formulaires

L’identification de ces éléments fournit aux aveugles et grands malvoyants les informations nécessaires pour pouvoir remplir un formulaire. Les handicapés moteurs utilisant un système de reconnaissance vocale s’appuient aussi sur ces éléments pour se déplacer dans les différents champs et actionner les boutons. Pour associer une étiquette (<label>) à un champ de formulaire on peut utiliser l’attribut for de l’étiquette dont la valeur doit être identique à celle de l’attribut id du champ. Les champs de même nature doivent être regroupés, cela peut être réalisé via l’élément <fieldset> auquel on doit fournir une légende via l’élément <legend>.

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

L'étiquette du champ de recherche n'est pas visible. Un placeholder n'est ici pas suffisant, car il ne sera plus visible une fois que l'utilisateur aura commencé à remplir le champ. Une solution peut être de placer un attribut title sur le champ, qui contient le contenu de l'étiquette. Ce contenu sera visible au hover, même pendant la saisie.

Cas rencontré : contrôle et aide à la saisie

Que ce soit pour les handicapés cognitifs ou pour les aveugles et déficients visuels, il est nécessaire d’expliciter les formats de données attendus dans les consignes et les messages d’erreur, ainsi que le caractère obligatoire de la saisie de certains champs.

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

Le type de données attendu dans le champ e-mail n'est pas précisé dans le message d'erreur. Il est ici nécessaire de donner un exemple. Le type de données attendu dans le champ "Téléphone" n'est pas précisé, ni dans l'étiquette, ni dans le message d'erreur.

Thématique "navigation"

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 P01

Le formulaire de recherche possède un attribut role="search". Cependant ce moteur de recherche ne permet pas de rechercher dans toutes les pages du site (ex: aspects légaux), il n’est donc pas considéré comme un système de navigation. Le role="search" doit être ici supprimé.