Audit d'accessibilité simplifié - logement.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

Certaines images dans la section "news" sont porteuses d'information mais n'ont pas d'alternative textuelle. Par exemple l'image "louer un logement? On vous aide! Garantie locative, subvention de loyer". Les informations "garantie locative, subvention de loyer" ne sont pas fournies via le texte adjacent.

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 P01

Dans la section "dernières actualités" certaines images de décoration ont une alternative textuelle. Ex: L'image du lien "Inauguration Aal Paschtoueschhaus à Peppange" est décorative mais a une alternative textuelle non vide.

Cas rencontré : images porteuses d’information complexes

Certaines images porteuses d’informations sont particulièrement complexes, par exemple lorsqu’elles présentent des graphiques, schémas, cartes, etc. Dans ce cas, ces images nécessitent une description détaillée adjacente à l’image afin de permettre aux personnes aveugles et dyslexiques d’accéder à toutes les informations véhiculées par l’image. Pour mettre à disposition cette description détaillée, plusieurs solutions sont possibles. Le texte peut être adjacent à l’image dans la même page ou on peut placer un lien adjacent à l’image qui mène à une page où se trouve la description. Le texte peut aussi être inclus dans un composant permettant de le masquer et de l’afficher sur demande, au clic d’un bouton « afficher la description de l’image » (via le design pattern « disclosure »).

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

L'image "Le contingent horaire du conseiller logement pendant la CI" est une image porteuse d'information complexe, elle nécessite une description détaillée réalisée dans un texte adjacent à l'image.

Thématique "couleurs"

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 P03

Certains textes sur cette page n’ont pas un contraste suffisant (p.ex " Comment fonctionne le pacte logement 2.0?").

Thématique "multimédia"

Cas rencontré : transcription textuelle et audiodescription

Si une vidéo possède des textes incrustés ou des informations sonores (ex: personnes qui parlent sur la piste sonore) alors il est nécessaire de fournir une transcription textuelle. De même pour un média audio seulement qui est porteur d’information (ex: podcast), une transcription textuelle est nécessaire. L’absence de transcription textuelle sur de tels médias va empêcher l’accès à l’information à de nombreux utilisateurs comme les aveugles, les malvoyants, les sourds, les malentendants, les handicapés moteurs et cognitifs. Une transcription textuelle présente de manière structurée toutes les informations visuelles et sonores de la vidéo dans l’ordre chronologique de leur apparition. Celle-ci peut-être présente sur la même page que la vidéo en question ou derrière un lien adjacent à la vidéo.

Par ailleurs, si une vidéo possède des informations importantes véhiculées uniquement par l’image (ex: textes incrustés), il est nécessaire de fournir une audiodescription synchronisée. Il s’agit d’une piste sonore supplémentaire qui s’ajoute à la piste sonore principale et décrit les éléments visuels importants qui ne peuvent être compris à partir de la poste sonore principale. Ces descriptions sont réalisées dans les blancs de la piste sonore principale.

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

Les vidéos "Journée des bourgmestres 2021" et "Comment fonctionne le Pacte logement 2.0?" ne disposent pas d'une quelconque transcription textuelle ou d'une audiodescription.

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 P03

Les sous-titres générés par youtube ne sont ni corrects, ni synchronisés.

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 "logement.lu" est non explicite car il possède un attribut title dont la valeur "Ministère du logement - Luxembourg - Accueil" ne reprend pas l'intitulé visible du lien.

Thématique "éléments obligatoires"

Cas rencontré : validité du code source de la page

Les lecteurs d’écran s’appuient sur la sémantique des balises HTML pour restituer le contenu et naviguer, si la syntaxe HTML n’est pas respectée ou si les balises sont détournées, cela peut avoir un impact sur la navigation qui peut devenir inopérante et la restitution qui peut devenir incompréhensible. Pour vérifier la validité de la syntaxe HTML, on peut utiliser le validateur HTML du W3C avec le bookmarklet « WCAG 2.1 parsing error ». Ce bookmarklet filtre les résultats et ne montre que les erreurs ayant un impact sur l’accessibilité.

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

Vérifier que les éléments avec un rôle ARIA comportent aussi des rôles pour les descendants directs

Documentation : https://dequeuniversity.com/rules/axe/4.3/aria-required-children?application=webdriverjs&lang=fr

Occurrences :

• Corriger l’un des éléments suivants : Les descendants ARIA requis sont manquants : group, menuitemradio, menuitem, menuitemcheckbox (Ex : #a11ynav-0, #a11ynav-2, #a11ynav-4, #a11ynav-6)

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.

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

Cette page contient des textes en d’autres langues non marqués par un changement de langue (p.ex."Aal Paschtoueschhaus”).

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

Sur le champ email, une indication du type de données attendu n'est pas fournie avant la validation du formulaire. Celle-ci peut être fournie dans l'étiquette du champ.