Audit d’accessibilité simplifié - www.zesumme-vereinfachen.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 matricielle, 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 1

L’image en pied de page "Le gouvernement" est porteuse d’information mais n’a pas d’alternative textuelle. Celle-ci doit être renseignée dans l’attribut alt de la balise <img>. (Ex: <img alt="" … />).

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 sélecteur de styles. 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 sélecteur de styles est disponible sur le site sncf.com, dans son menu « Accessibilité ».

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

Les mots-clés "Prise en considération" et "Acceptée" ne présentent pas un ratio de contraste suffisant (respectivement 3.26:1 et 2.17:1 contre 4.5:1 attendu au minimum).

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 2

La vidéo sous la rubrique "Qu'est-ce que la résilience?" ne dispose ni d'une transcription textuelle, ni 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 2

La vidéo sous la rubrique "Qu'est-ce que la résilience?" ne dispose pas de sous-titres synchronisés.

Thématique "liens"

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 1

Certains liens-images n’ont pas d’intitulé (ex: Citizenlab). Dans ce cas il est nécessaire de donner un intitulé au lien via l’attribut alt de l’image. Cet intitulé doit désigner la destination du lien et non décrire l’information contenue dans l’image.

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 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

La boîte de cookies est définie par un rôle "dialog" mais ne répond pas aux commandes clavier, en particulier la touche Esc devrait permettre de la cacher et les tabulations devraient se limiter aux éléments interactifs qu'elle renferme.

Thématique "éléments obligatoires"

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 1

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

Thématique "structuration de l'information"

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

Certains passages de texte sont visuellement des paragraphes mais cette information est codée sous forme de titre (ex : les deux paragraphes sous "A quoi ressemblera l'économie du Luxembourg en 2050 ?" sont des headings de niveau 3).

Par ailleurs, "Avant de répondre à l'enquête..." devrait aussi être un paragraphe, ce qui permettrait de ne pas faire de ce titre un enfant de "A propos", ce qui ne se reflète pas dans la mise en page.

Autre exemple : sous "Notions clés", les titres doivent bénéficier d'un niveau inférieur (H3).

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 1

Dans de nombreux éléments de cette page, le focus n’est pas visible. Exemple : les deux boutons "S'inscrire".

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 1

Les titres des onglets sont réécrits pour les technologies d'assistance, via un attribut aria-hidden="true" et un <span> dédié aux lecteurs d'écran. Cependant ces <span> ne reprennent pas les informations "actifs", "archivés", "tous".

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 1

Les zones d’entête, de navigation principale, de contenu principale, de pied de page et de moteur de recherche ne peuvent être atteintes ou évitées. Il est nécessaire de mettre sur ces zones un attribut role, avec la valeur appropriée correspondante : "banner", "main", "search", "contentinfo" ou "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 1

Aucun lien d’accès rapide n’est présent dans la page.

Cas rencontré : ordre de tabulation

L’ordre de tabulation, c’est-à-dire l’ordre dans lequel le focus se déplace lorsqu’on utilise les touches tab et shift-tab, doit être cohérent. Si l’ordre de tabulation est incohérent, les aveugles, les déficients visuels, les handicapés moteurs et handicapés cognitifs auront de grandes difficultés à naviguer dans la page.

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

En appuyant sur "Voir plus" ou "Lire moins", l'indication visuelle du focus est perdue. Il pourrait être pertinent de le repositionner sur le contenu à l'endroit où le texte était caché. De même, les paragraphes cachés doivent disposer d'un attribut aria-hidden="true", sinon le bouton "Voir plus" ne fait aucun sens pour les utilisateurs d'un lecteur d'écran.

Même constat pour le bouton "Afficher plus d'idées" : le focus devrait être repositionné sur le premier des nouveaux éléments apparus dynamiquement dans la liste.

Cas rencontré : contenus additionnels

Un exemple de contenu additionnel apparaissant au survol ou à la prise de focus est une infobulle personnalisée proposant dans son contenu un élément interactif (ex : un lien). Les utilisateurs aveugles et les personnes avec un handicap moteur doivent pouvoir accéder à ces contenus en navigant au clavier.

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

Impossible d'accéder au clavier aux liens de l'onglet "2 - Merci". Il est nécessaire de retirer l'attribut tabindex="-1" sur ces liens.