4. Rédaction des textes de remplacement

Généralités

Lors de l’insertion d’images dans les contenus, il est obligatoire de leur associer un texte de remplacement. Ce texte est primordial pour les personnes non voyantes ou malvoyantes, car il est lu à la place des images qui ne peuvent être vues. Ce texte s’affiche aussi lorsque les images ne se téléchargent pas. Il sert aussi comme texte de référencement de l'image dans les moteurs de recherche.

📝 Ressource

Vidéo du comportement du lecteur d'écran NVDA lors de la lecture d'un texte alternatif

4.1 Images informatives

Pour une image informative, on doit fournir un texte de remplacement qui sert à renseigner selon le contexte d’utilisation de l’image. Ce texte doit reprendre une information égale ou équivalente à celle véhiculée par l’image, sans perte ou déformation de la signification de l’image, afin de s’assurer que l’information soit bien lue par les lecteurs d’écran. Limitez le texte à 125 caractères.

Pour optimiser le référencement, il est préférable d’écrire toute information pertinente en HTML à même le texte de l’article.

📷 Captures d'écran

L’exemple de gauche présente de l’information pertinente, mais elle est inaccessible aux lecteurs d’écran, car elle est imbriquée uniquement dans l’image. Un texte alternatif seul serait trop long pour véhiculer 100 % de l'information. Il est préférable d’écrire toute information pertinente en HTML, comme dans l’exemple de droite.

4.2 Images informatives complexes (DataV), cartes interactives et contenus riches et multimédia

Pour ce type d’images, il faut rédiger :

  1. Un titre pour chacune des images ou chacun des tableaux.

  2. Un court texte de remplacement (60 caractères maximum) décrivant brièvement la fonction de l’image. Exemple : Le calendrier du maître d’ouvrage (description détaillée disponible via le lien ci-dessous)

  3. Une description détaillée et révisée doit véhiculer une information identique ou équivalente à celle véhiculée par l’image ou le contenu riche complexe. Cette description sera généralement remise au designer ou à l’intégrateur et sera mise en forme à l’aide d’un accordéon. La description se situe sous l’image, alignée à gauche, et le style appliqué devra être conforme au style appliqué au corps du texte.

💬 Remarque

Pour une carte interactive, tout comme un fil chronologique, inclure l’adresse postale de la carte ou la date d’un événement dans la description.

📷 Captures d'écran

Retranscription des données dans un lien « Consulter sous forme de texte » présenté en accordéon sous un graphique.