Audit d'accessibilité simplifié - www.strassen.lu

Thématique "images"

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 carrousel du haut de page, les images de fond sont décoratives mais ont une alternative textuelle non-vide. Celle-ci doit être vide (ex: "Télévie blog post").

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 P01

Certains textes sur cette page n’ont pas un contraste suffisant (p.ex les textes du menu principal en gris clair sur fond blanc).

Thématique "tableaux"

Cas rencontré : déclaration des entêtes et liaison des cellules d’entêtes et de données

Les utilisateurs de lecteurs d’écran ou de loupe d’écran vocalisée ne peuvent percevoir un tableau dans son ensemble. Il est donc important de leur communiquer des informations de contexte sur chaque cellule, notamment à quelles entêtes chaque cellule est reliée. Ces informations peuvent être données via des structures HTML dédiées. Les entêtes de colonnes et de lignes doivent notamment être déclarées via la balise <th>.

Dans un tableau de données simple, où chaque entête est valable pour l’ensemble de la ligne ou de la colonne, la relation entre les cellules et les entêtes doit être définie en appliquant un attribut scope="col" à toutes les entêtes de colonnes et scope="row" à toutes les entêtes de lignes.

Dans un tableau de données complexe, chaque entête doit avoir un identifiant déclaré via l’attribut id et chaque cellule doit faire référence à ces entêtes via l’attribut headers (liste d’identifiants séparés par des espaces).

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

Dans les tableaux présents sur cette page, les entêtes de colonnes ne sont pas structurés via des balises <th>.

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 "Made by e-connect" est non explicite. En effet le logo e-connect n'a pas d'alternative textuelle, l'intitulé du lien est donc "made by".

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 le 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 bitmap, 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 P01

Les liens Facebook et Instagram dans le footer n'ont pas d'intitulé. (le contenu textuel non-vide du lien a la priorité sur l'attribut title).

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 menu de navigation n'est pas totalement accessible au clavier, en effet on accède aux éléments de chaque sous-menu au clavier même si le sous-menu est visuellement fermé. 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 La fenêtre modale de la recherche n'est pas accessible au clavier car le focus clavier n'est pas restreint à cette modale, elle ne respecte pas le design pattern "modal" https://w3c.github.io/aria-practices/#dialog_modal Le menu mobile n'est pas accessible 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é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 : Le descendant ARIA requis est manquant : tab (Ex : .nav-tabs)

  Vérifier que les éléments avec un rôle ARIA requérant des rôles parents y sont contenus

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

Occurrences :

• Corriger l’un des éléments suivants : Le rôle parent ARIA requis est manquant : tablist (Ex : a[href$="\#media-6"], a[href$="\#media-5"])

  Vérifier que les éléments avec un attribut role utilisent une valeur valide

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

Occurrences :

• Corriger tous les éléments suivants : Le rôle doit être un rôle ARIA valide : logo (Ex : img[role="logo"])

  Vérifier que chaque valeur d’attribut id utilisée avec ARIA et dans les étiquettes est unique

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

Occurrences :

• Corriger l’un des éléments suivants : Le document comporte un ou plusieurs éléments référencés par ARIA partageant la même valeur d’attribut id : heading-41, collapse-41, heading-42, collapse-42, heading-43, collapse-43, heading-44, collapse-44.

  Vérifier que les éléments <li> sont utilisés sémantiquement

Documentation : https://dequeuniversity.com/rules/axe/4.3/listitem?application=webdriverjs&lang=fr

Occurrences :

• Corriger l’un des éléments suivants : L’item de liste n’a pas d’élément <ul> ou <ol> parent sans un role ou un role="list" (Ex : .nav-tabs > .nav-item:nth-child(1))

  Vérifiez que le code html de la page est valide

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

Occurrences :

• L'élément "ul" n'est pas autorisé comme enfant de l'élément "button" dans ce contexte. (Ex : <ul class="burger-nav-bars">)

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

Vérifier que chaque document HTML a un attribut lang

Documentation : https://dequeuniversity.com/rules/axe/4.3/html-has-lang?application=webdriverjs&lang=fr

Occurrences :

• Corriger l’un des éléments suivants : L’attribut xml:lang n’est pas valide sur les pages HTML, utiliser l’attribut lang.

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é : intitulés de boutons pertinents

Les boutons doivent avoir des intitulés pertinents, qui communiquent l’action réalisée à l’activation. Ces informations sont particulièrement importantes pour les déficients visuels et cognitifs.

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

Le bouton permettant d'accéder à la recherche n'a pas d'intitulé.

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 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: contact), il n’est donc pas considéré comme un système de navigation. Le role="search" doit être ici supprimé.

Thématique "consultation"

Cas rencontré : contenus en mouvement ou clignotants

Ces contenus posent problème aux utilisateurs avec des difficultés de lecture ou des troubles de l’attention. Les utilisateurs doivent avoir la possibilité de mettre le mouvement en pause, ou de masquer le contenu en mouvement.

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

La page contient 2 carrousels (sliders) qui ne peuvent pas être arrêtés.