S’assurer de fournir un texte alternatif pour les images
Publié le 10 janvier 2024
À retenir
- ⚠️ L’absence de texte alternatif est l’un des problèmes d’accessibilité les plus courants sur le web
- Le texte alternatif (« alt text ») est nécessaire pour les utilisateurs qui dépendent de lecteurs d’écran pour leur fournir une description de l’image
- La même image dans un contexte différent peut nécessiter un texte alternatif différent
- Certaines images peuvent être considérées comme des décorations et ne pas nécessiter de texte alternatif
- Les images publiées sur les médias sociaux doivent également inclure un texte alternatif
Cet article fait partie d’une série sur les micro-interactions avec les interfaces utilisateur et la manière dont elles affectent l’expérience utilisateur.
This article is also available in English.
Les utilisateurs malvoyants utilisent habituellement un lecteur d’écran pour décrire le contenu de leur écran alors qu’ils naviguent. Les images sont l’un des éléments qui requièrent une description. Les photos, les illustrations, les graphiques et toutes sortes d’images transmettent des informations aux utilisateurs voyants. Il est du devoir des créateurs de contenu numérique de fournir des alternatives aux utilisateurs malvoyants afin qu’ils puissent également obtenir les informations des images que les designers ou les créateurs de contenu ont placées dans un site web ou dans un autre produit numérique.
Heureusement, le langage HTML offre un moyen simple d’attribuer des descriptions aux images : le texte alternatif (alt text).
« alt text » est une abréviation de « alternative text » (texte alternatif). Il s’agit d’une courte description visuelle qui donne une idée générale du contenu d’une image. Elle est structurée comme un fragment de phrase qui indique le contenu le plus important de l’image […].
— Traduit de « Cooper Hewitt Guidelines for Image Description »
Cet article est une introduction destinée à attirer l’attention des créateurs de contenu — rédacteurs, concepteurs, développeurs et, également, gestionnaires de projets de toutes sortes — sur le fait qu’il est nécessaire de fournir un alt text (texte alternatif) pour des images.
Consultez la section « Références et lectures additionnelles » pour des liens vers des articles de fond sur le sujet.
Quand utiliser un texte alternatif
Sur les sites et les applications web
Il n’est pas nécessaire que chaque image d’un site web soit accompagnée d’une description pour que les lecteurs d’écran l’annoncent aux utilisateurs. Dans un premier temps, il est préférable de s’assurer de rédiger des descriptions pour chaque image, puis ensuite de choisir quelle image doit utiliser quelle description, et à quel moment.
À noter : une même image peut avoir besoin d’une description différente en fonction du contexte dans lequel elle est utilisée.
À retenir
Le W3C a créé un arbre de décision utile qui aide à choisir quand le texte alternatif doit être appliqué à une image publié sur un site ou une application web.
Sur les médias sociaux
Si les processus de production de sites et d’applications web oublient souvent de prendre en compte le texte alternatif nécessaire pour les images, les publications sur les médias sociaux l’omettent pratiquement tout le temps.
La rédaction d’un texte alternatif pour les images publiées sur les médias sociaux doit suivre les mêmes règles que celles définies pour les images publiées sur le web. Voici quelques points principaux à retenir :
- Le texte alternatif doit factuellement décrire l’image en contexte, ce n’est pas un texte de marketing.
- Le texte alternatif n’est pas un espace de texte supplémentaire ou de métahumour.
- Si l’image inclut du texte, c’est ce texte qui doit servir de texte alternatif.
À retenir
Une image intégrée dans une publication sur les médias sociaux doit inclure un texte alternatif.
Intervenants concernés
Chacun doit s’assurer que les images sont accompagnées d’un texte alternatif : toute personne qui téléverse une image destinée à être visible sur le web est tenue de s’assurer que l’image dispose d’un texte alternatif et que ce texte s’applique correctement à la situation dans laquelle l’image est présentée.
- Les designers UX devraient analyser le type d’image utilisé dans le contexte des interface créées pour mentionner si ces images ont besoin de texte alternatif.
- Les rédacteurs devraient s’assurer de jeter un oeil aux interfaces créées ou publiées pour rédiger ou traduire les textes alternatifs.
- Les développeurs devraient porter attention lorsqu’ils intègrent des images dans les produits numériques pour s’assurer qu’ils utilisent le bon code pour ajouter le texte alternatif.
Ces développeurs devraient également mentionner à leurs collègues (designers, rédacteurs, gestionnaires de projet) quand il leur manque un texte alternatif. - Les gestionnaires de projet devraient communiquer avec les intervenants mentionnés plus haut durant la phase de conception ou durant la production, pour s’assurer que les textes alternatifs n’ont pas été oubliés.
Cette responsabilité ne peut pas être simplement déléguée aux développeurs ; c’est un travail d’équipe de s’assurer que tout le monde sait quand le texte est nécessaire et qu’il que rien n’a été oublié.
Références et lectures additionnelles
Articles
En français
Documenter l’accessibilité en phase de design ! | Stéphanie Walter
En anglais
The WebAIM Million – The 2023 report on the accessibility of the top 1,000,000 home pages | WebAIM
Alt-texts: The Ultimate Guide | Daniel Göransson – Axess Lab
An alt Decision Tree – Tutorials | W3C
Best Practices for Image Text Alternatives | Knowbility
Cooper Hewitt Guidelines for Image Description | Cooper Hewitt
8 guidelines to make social media posts more accessible | Carly Hill – Sprout Social
Everything you need to know to write effective alt text | Microsoft
A guide to writing alt text and accessible image captions | Chase DiBenedetto – Mashable
How to Use Alt Text on Social Media (+ 5 Best Practices) | Alyssa Gagliardi – Later
How to write an image description | Alex Chen – UX Design
How to write good alt text for screen readers | Craig Abbott
Images Tutorial – Tutorials | W3C
Just How Long Should alt Text Be? | Geoff Graham – CSS Tricks
Thoughts on embedding alternative text metadata into images | Eric W. Bailey
Why Instagram Alt Text Matters (And How To Use It) | Hannah Macready – Hootsuite
Accessibilité
Understanding Success Criterion 1.4.5: Images of Text (Level AA) | WCAG 2.1 Understanding Docs – W3C
Mis à jour le 13 mars 2024