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

L'image "Info-Zenter Demenz 26 47 00" est porteuse d'information mais elle n'a pas d'alternative textuelle et elle est cachée aux technologies d'assistance via l'utilisation de l'attribut aria-hidden="true".

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 le menu de navigation, les images vectorielles de décoration en forme d'hexagone ne sont pas correctement ignorées par les technologies d'assistance. Il est nécessaire de leur faire porter l'attribut aria-hidden="true".

Thématique "cadres"

Cas rencontré : titres de cadres

Les titres de cadres sont utiles à la compréhension de la structure de la page et des contenus pour les personnes aveugles. Tout cadre (élément <iframe> ou <frame>) doit avoir un titre fourni via son attribut title. Ce titre doit être pertinent, il doit représenter le contenu du cadre.

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

Les balises <iframe> des vidéos ne portent pas d'attribut title.

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, ...) ainsi que l'attribut aria-current="page".

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

Il n'y a pas de transcription textuelle ou une audiodescription aux vidéos - Famille

Cas rencontré : contrôle des lecteurs vidéo au clavier

La consultation de chaque vidéo doit être contrôlable par le clavier et tout dispositif de pointage. Cela permet aux personnes ayant un handicap moteur d’accéder à ces contenus. Si les vidéos présentes sur le site sont dérogées car publiées avant le 23 septembre 2020, cette dérogation ne s’applique pas au lecteur vidéo lui-même. Celui-ci se doit d’être accessible quelle que soit la date de publication de la vidéo.

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

Dans les lecteurs vidéos, le bouton de réglages n'est pas atteignable au clavier.

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

Certains liens n'ont pas d'intitulé pertinent, c'est le cas par exemple des liens-images dans les actualités. L'intitulé du lien doit désigner la destination du lien et non décrire le contenu de l'image (ex: "personnes devant scène avec instruments de musique" au lieu de "Artikel: Musik für mehr Lebensqualität bei Demenz") Dans le footer, les liens-images ont aussi des intitulés non pertinents, par exemple "logo, ministère de la famille".

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

Il n'est pas possible de naviguer au clavier dans le calendrier: les boutons permettant de changer de mois ne sont pas atteignables au clavier.

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érifiez que le code html de la page est valide

Documentation : https://validator.w3.org/nu/

Occurrences :

• L'élément "style" n'est pas autorisé comme enfant de l'élément "div" dans ce contexte. (Ex : senger"> <style>o)

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."Musik für mehr Lebensqualität bei Demenz")

Thématique "structuration de l'information"

Cas rencontré : structure du document HTML5

La structuration du document HTML5 permet aux aveugles, grands malvoyants et handicapés moteurs de naviguer très rapidement entre les zones principales de la page (header, footer, zone de contenu principale, navigation, …)

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

Le sélecteur de langue n'est pas un élément de navigation, il ne doit pas être structuré via une balise <nav>.

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

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 P01

Chez de nombreux éléments de cette page, le focus n’est pas visible.

Cas rencontré : contenus cachés

Tout contenu dans la page peut être ignoré par les technologies d’assistance (notamment en utilisant l’attribut aria-hidden="true"). Si un contenu est visible mais ignoré par les technologies d’assistance, les utilisateurs de ces technologies d’assistance ne pourront pas prendre connaissance du contenu ni interagir avec les éventuels éléments interactifs qu’ils pourraient contenir. La visibilité d’un contenu doit donc être cohérente pour tous les utilisateurs du site, qu’ils utilisent ou non une technologie d’assistance.

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

Le menu de navigation ainsi que le calendrier portent un attribut aria-hidden="true", ces éléments ne pourront donc pas être restitués par les technologies d'assistance.

Thématique "formulaires"

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é, ni dans l'étiquette, ni dans le message d'erreur. Il est ici nécessaire de donner un exemple.

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 rôle navigation est manquant sur le menu de navigation.

Cas rencontré : liens d’accès rapide

Les liens d’accès rapide sont des liens présents en début de page et permettent aux utilisateurs qui naviguent au clavier et aux utilisateurs malvoyants qui utilisent une loupe d’écran d’éviter des zones de contenus redondants comme l’entête et la navigation. Il est indispensable d’avoir au moins un lien d’accès rapide vers la zone de contenu principale (<main>). Ces liens peuvent être positionnés hors écran et apparaître à la prise de focus.

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

Pas de lien d'évitement présent.