4. Utiliser les images de manière accessible

Lors de l’insertion d’images dans les contenus, il peut être nécessaire de leur associer un texte de remplacement.

Ce texte est primordial car c’est lui qui sera lu par les lecteurs d’écran (synthèses vocales et/ou plages brailles). Ce texte s’affiche également lorsque les images ne se chargent pas.

Le texte de remplacement sera à renseigner différemment selon le contexte d’utilisation de l’image. C’est-à-dire selon que l’image est décorative, informative, ou encore une image-lien.

Lors de l’insertion d’une image, le champ « Texte alternatif » permet de renseigner le texte de remplacement de cette image.

À personnaliser

Préciser ci-dessus où renseigner le texte de remplacement d’une image insérée via l’outil de publication utilisé.

Astuce

Afin de savoir à coup sûr si oui ou non un texte de remplacement doit être renseigné pour une image, se demander si l’absence de celle-ci altèrerait la compréhension du contenu.

  • Si oui : renseigner le texte de remplacement.
  • Si non : laisser le texte de remplacement vide.

La manière de renseigner ce texte selon les types d’images est décrite ci-après :


4.1. Images décoratives/illustratives : ne pas rédiger de texte de remplacement

Cette image est située à côté d’un texte. Toute l’information présente dans l’image l’est également dans le texte à côté. Si cette image était absente, aucune information ne serait perdue.

Dans ce contexte, il ne faut rédiger aucun texte de remplacement.

Le champ est donc à laisser vide.

4.2. Images informatives : rédiger un texte de remplacement

La même image est située à côté d’un texte. Cependant, les informations « Parc de La Villette » et « 11 – 22 avril 2012 » ne sont pas présentes dans le texte. L’image est donc porteuse d’informations.

Dans ce contexte, il faut rédiger un texte de remplacement.

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.

Dans le cas de l’image ci-dessus, un texte de remplacement adapté serait « Hautes Tensions, Parc de la Villette, du 11 au 22 avril 2012. ».

4.3. Images-liens : rédiger un texte de remplacement qui décrit la fonction du lien

Cette même image est désormais seule et cliquable. Elle permet d’accéder à la billetterie de l’événement.

Dans ce contexte, il faut rédiger un texte de remplacement.

Ce texte doit permettre à l’internaute de connaître la destination du lien.

Dans le cas de l’image-lien ci-dessus, un texte de remplacement adapté serait « Réserver un billet pour le festival Hautes Tensions (du 11 au 22 avril 2012 au Parc de la Villette) ».

Une image et du texte dans un même lien

Dans le cas où une image et du texte sont présents dans un même lien, le texte de remplacement de l’image ne doit pas rappeler les informations déjà précisées dans l’intitulé du lien.

Dans le cas de l’image ci-dessus, un texte de remplacement vide sera adapté.

Attention

Il est contreproductif de commencer le texte de remplacement par des expressions du type « Ouvrir la page des actualités ».

Un texte de remplacement du type « Actualités » suffit.

4.4. Images informatives complexes : rédiger un court texte de remplacement ainsi qu’une description détaillée

Ce calendrier est une image porteuse d’informations complexes. Un bouton « Le calendrier au format texte » permet à l’utilisateur d’afficher une description détaillée de cette image.

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

  1. Un court texte de remplacement.
  2. Une description détaillée disponible sous l’image ou sur une autre page.

Le court texte de remplacement doit :

  1. Décrire brièvement la fonction de l’image.
  2. Indiquer où se trouve la description détaillée.

Dans le cas de l’image complexe ci-dessus, un court texte de remplacement adapté serait « Calendrier global du projet Roissy-Picardie (description détaillée ci-après). ».

Quant à la description détaillée, elle doit véhiculer une information identique ou équivalente à celle véhiculée par l’image. Elle doit être disponible soit depuis la même page, soit sur une autre page grâce à un lien disponible à proximité de l’image.

Aller plus loin

Commentaires

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Haut de page