Accessibilité des images avec le RGAA
Les critères du référentiel général d'amélioration de l'accessibilité
L’accessibilité d’un site web repose sur des dizaines de critères : le référentiel RGAA en recense par exemple 106, tandis que les ressources de la Web Accessibility Initiative (WAI) lancée par le World Wide Web Consortium comptabilisent des dizaines de milliers de pages web.
Heureusement, des outils gratuits ou freemium vous aident à gagner un temps précieux lors de la vérification de l’accessibilité de votre site web, en accord avec les bonnes pratiques de la WAI et les critères RGAA. Je vous propose ici une sélection de 4 outils qui vous seront bien utiles pour tester rapidement l’accessibilité de votre site. Ces solutions ne remplacent pas un audit complet réalisé par un professionnel.
1. Chaque image porteuse d’information a-t-elle une alternative textuelle ?
Une image qui apporte une information à l’utilisateur ou joue un rôle dans la navigation ou la compréhension de l’interface doit posséder une alternative textuelle. Celle-ci permet notamment aux personnes malvoyantes utilisant un lecteur d’écran d’accéder à l’information. Les solutions préconisées par le RGAA dépendent de la nature de l’image.
- Attribut
aria-labelledby(référence vers un texte présent ailleurs dans la page) - Attribut
aria-label(texte directement dans l’attribut) - Attribut
alt - Attribut
title(pour <img> uniquement)
Alternatives possibles :
- Attribut
aria-label - Attribut
alt
Alternatives possibles :
- Attribut
aria-labelledby - Attribut
aria-label - Attribut
alt - Attribut
title
Alternative possible :
- Fournir un mécanisme équivalent (ex. liens ou boutons permettant la même navigation que le clic sur l’image)
Conditions :
- Attribut
role="img"obligatoire
Alternative via :
- Élément
<title> - Attribut
aria-labelledby - Attribut
aria-label
Conditions
- Attribut
role="img"obligatoire
Alternative via :
aria-labelledbyaria-labeltitle
Ou contenu alternatif (ex. lien ou bouton adjacent, ou mécanisme pour remplacer l’objet)
Conditions :
- Attribut
role="img"obligatoire - Alternative via :
aria-labelledbyaria-labeltitle
- Ou contenu alternatif (lien ou bouton adjacent, ou mécanisme de remplacement)
Conditions :
- Attribut
role="img"obligatoire si utilisé comme image - Alternative via :
aria-labelledbyaria-label
- Ou :
- Contenu alternatif entre
<canvas>et</canvas> - Lien ou bouton adjacent
- Mécanisme de remplacement
- Contenu alternatif entre
2. Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
Si les images porteuses d’information doivent avoir une alternative textuelle accessible aux lecteurs d’écran, ce n’est pas le cas pour les images purement décoratives, qui alourdissent et complexifient le contenu restitué aux personnes malvoyantes.
Seules les images décoratives avec des légendes doivent avoir une alternative textuelle.
- Attribut
alt=""vide sans autre alternative textuelle - Ou attribut
aria-hidden="true" - Ou attribut
role="presentation"(ourole="none", bien que moins supporté).
Note : la solution aria-hidden="true" est la meilleure option pour un site conforme aux critères RGAA et SEO-friendly. Pensez à renseigner votre attribut alt="" !
- Attribut
alt=""vide sans autre alternative textuelle - Ou attribut
aria-hidden="true" - Ou attribut
role="presentation"(ourole="none", bien que moins supporté).
- Attribut
<aria-hidden="true> - Aucune alternative textuelle dans l’élément
- Aucun texte entre
<object>et /code></object>.
- Attribut
aria-hidden="true" - Aucun élément ou attribut fournissant une alternative textuelle
- Balises
<title> et <desc>absentes ou vides - Aucun attribut
titlesur<svg>ou ses enfants.
- Attribut
aria-hidden="true" - Aucun contenu alternatif dans ou entre les balises
<canvas> - Aucun élément enfant fournissant une alternative textuelle.
- Attribut
aria-hidden="true" - Aucun contenu alternatif ni texte enfant.
Astuces et tutoriels sur l'accessibilité Web
3. Pour chaque image porteuse d’information ayant une alternative textuelle, cette alternative est-elle pertinente ?
- La présence d’une alternative textuelle pour les images porteuses d’information est un critère d’accessibilité présent dans le RGAA. Mais la pertinence de ce texte est aussi importante que sa présence : celui-ci doit permettre aux utilisateurs de lecteurs d’écran d’avoir accès à une information similaire aux internautes utilisant un navigateur web classique.
Par exemple, pour une image servant de bouton de validation d’une action :
- Attribut alt=”Bouton” : non pertinent ;
- Attribut alt=”Valider le formulaire” : pertinent.
4. Pour chaque image utilisée comme CAPTCHA ou comme image-test, ayant une alternative textuelle, cette alternative permet-elle d’identifier la nature et la fonction de l’image ?
<img>,- zone
<aera>d’image réactive, - bouton image
<input type="image">, - image objet
<object>, - image embarquée
<embed;gt, - image vectorielle
- image bitmap
<canvas>
alttitlearia-label- Texte associé via
aria-labelledby - Et, le cas échéant, le contenu alternatif intégré (notamment pour <object>, <embed />, <canvas>).
5. Pour chaque image utilisée comme CAPTCHA, une solution d’accès alternatif au contenu ou à la fonction du CAPTCHA est-elle présente ?
Cette règle permet aux utilisateurs en situation de handicap de répondre aux conditions de réussite du CAPTCHA, qu’il s’agisse de l’image du CAPTCHA ou du bouton associé à celle-ci.
<img><area><object><embed><svg><canvas>- Attribut WAI-ARIA
<role="img">
- Au moins un CAPTCHA non graphique est également proposé (ex : CAPTCHA audio, envoi du code par SMS, etc.) ;
- Il existe une autre solution d’accès à la fonctionnalité qui est sécurisée par le CAPTCHA.
- Au moins une autre forme de CAPTCHA non graphique est également disponible(ex : CAPTCHA audio, envoi du code par SMS, etc.) ;
- L’utilisateur se voit proposer une autre solution d’accès à la fonctionnalité sécurisée par le CAPTCHA.
6. Chaque image porteuse d’information a-t-elle, si nécessaire, une description détaillée ?
La longue description apporte une information plus complète sur l’image. Par exemple, la longue description d’une infographie va détailler les données chiffrées présentées sur l’infographie.
Notez que l’élément longdesc est déprécié aujourd’hui.
Trois solutions vous permettent de répondre aux critères du RGAA :
- Attribut
longdescvers une page ou section contenant la description détaillée - Alternative textuelle mentionnant la description détaillée adjacente
- Lien ou bouton adjacent permettant d’accéder à la description détaillée
aria-labelcontenant l’alternative et la référence à la description ;aria-labelledbyassociant alternative et description ;- a
ria-describedbyassociant la description ; - Lien ou bouton adjacent vers la description.
- aria-label contenant l’alternative et référence à la description
- aria-labelledby associant alternative et description
- Contenu textuel entre <canvas> et </canvas> faisant référence ou servant de description détaillée
- Lien ou bouton adjacent vers la description
Balises concernées :
<img>,<input type="image">,<area>,<object>,<embed>,<svg>,<canvas>- élément avec
role="img"
aria-describedby pointe bien vers la description détailléearia-labelcontenant l’alternative et référence à la descriptionaria-labelledbyassociant alternative et descriptionaria-describedbyassociant la description- Lien ou bouton adjacent vers la description
7. Pour chaque image porteuse d’information ayant une description détaillée, cette description est-elle pertinente ?
Le contenu de la description longue doit être pertinent.
Dans le référentiel général d’amélioration de l’accessibilité, vous devez associer ce point avec les spécifications du point précédent “Chaque image porteuse d’information a-t-elle, si nécessaire, une description détaillée ?” :
- Vous avez contrôlé la présence d’une description détaillée ;
- Vous vérifiez la pertinence de celle-ci.
Une description détaillée pertinente, dans l’esprit du RGAA, doit reprendre les informations importantes communiquées par l’image afin de les rendre accessibles aux utilisateurs de lecteurs d’écran. Par exemple, pour une infographie qui présente une étude, la description détaillée affichera les résultats et les chiffres de l’étude.
8. Chaque image texte porteuse d’information, en l’absence d’un mécanisme de remplacement, doit si possible être remplacée par du texte stylé. Cette règle est-elle respectée ?
Le texte stylé est un texte mis en forme par une feuille de styles dans le vocabulaire utilisé par les rédacteurs du RGAA.
<img>- Elément avec
role="img" <inpu type="image"><object><embed><svg>
En l’absence de mécanisme de remplacement, un texte stylé peut être utilisé, à condition que l’image SVG ne présente pas de texte complètement structuré au moyen d’éléments <text>.
9. Chaque légende d’image est-elle, si nécessaire, correctement reliée à l’image correspondante ?
Ces spécifications vous permettent de vérifier que les lecteurs d’écrans et solutions d’accessibilité peuvent facilement associer une image à sa légende.
- Image et légende regroupées dans une balise <figure>
- <figure> avec role=”figure” ou role=”group”
- <figure> avec aria-label identique au contenu de la légende
- Légende placée dans <figcaption>