de Mat Janson Blanchet

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 :

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

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

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

Documenter l’accessibilité en phase de design ! | Stéphanie Walter

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

Why Instagram Alt Text Matters (And How To Use It) | Hannah Macready – Hootsuite

Accessibilité

Understanding Success Criterion 1.1.1: Non-text Content (Level A) | WCAG 2.1 Understanding Docs – W3C

Understanding Success Criterion 1.4.5: Images of Text (Level AA) | WCAG 2.1 Understanding Docs – W3C

Understanding Success Criterion 1.4.9: Images of Text (No Exception) (Level AAA) | WCAG 2.1 Understanding Docs – W3C

Mis à jour le 29 janvier 2024


Laisser un commentaire

Votre adresse courriel ne sera pas publiée. Les champs obligatoires sont indiqués avec *