Guide pour la gestion des alternatives textuelles aux images

5 commentaires

Publié le 22 août 2016 par Johan Ramon

En accessibilité, il n’est pas toujours évident de savoir si une image doit posséder un texte de remplacement. Et si oui, quelles informations doivent y figurer.

C’est pourquoi nous vous proposons ce guide pour la gestion des attributs alt de vos balises <img />.

Ce guide se présente sous la forme d’un arbre de décision : si votre réponse à une question est « Non », alors passez à la suivante. Et ce jusqu’à ce que votre réponse soit « Oui ». De là, la manière de gérer l’attribut alt de votre image sera décrite.

À noter que ce guide est inspiré de la ressource « An alt Decision Tree » du W3C.

Est-ce que l’image sert de lien ou de bouton ?

Oui

  • Et ce lien ou ce bouton n’est composé que de cette image, alors renseigner son attribut alt en précisant la destination du lien ou la fonction du bouton.

    Plus d’infos

  • Et ce lien ou ce bouton est également composé de texte permettant à lui seul de comprendre sa destination ou sa fonction, alors laisser son attribut alt vide.

    Plus d’infos

  • Et ce lien ou ce bouton est également composé de texte ne permettant pas à lui seul de comprendre sa destination ou sa fonction, alors renseigner son attribut alt en reprenant l’information complémentaire véhiculée par l’image.

    Plus d’infos

Est-ce que l’image contient du texte ?

Oui

  • Et ce texte (ou information équivalente) est également présent en texte « pur » à proximité de celle-ci, alors laisser son attribut alt vide.

    Plus d’infos

  • Et ce texte est seulement un effet visuel (purement décoratif), alors laisser son attribut alt vide.

    Plus d’infos

  • Et ce texte (ou information équivalente) n’est pas présent à proximité de celle-ci, alors renseigner son attribut alt en reprenant l’information véhiculée par l’image et son texte.

    Plus d’infos

Est-ce que l’image est porteuse d’information ?

Oui

  • Et cette information est également présente en texte « pur » à proximité de celle-ci, alors laisser son attribut alt vide.

    Plus d’infos

  • Et l’information véhiculée peut être résumée en une courte phrase, alors renseigner son attribut alt en reprenant brièvement ces informations.

    Plus d’infos

  • Et cette image est porteuse de nombreuses informations (tel qu’un graphique complexe), alors renseigner son attribut alt en reprenant brièvement les informations véhiculée par celle-ci ainsi qu’une mention précisant où trouver sa description détaillée.

    Plus d’infos

Est-ce que l’image est purement décorative ?

Non

  • Soit le type d’image concernée n’est pas couvert par ce guide.
  • Soit une des précédentes questions n’a pas été répondue correctement.

Dans les deux cas de figure, n’hésitez surtout pas à nous l’exposer dans les commentaires de ce guide.

Oui

Alors laisser son attribut alt vide.

Plus d’infos

À noter que cette approche peut également être utilisée pour les images intégrées sous la forme d’Icon Fonts ou encore de SVG.

Si tel est le cas, nous vous invitons à vous référer aux recommandations des fiches suivantes :

Vos commentaires

  • Par Zougane HAFFEZ, le 30 août 2016 à 9h27.

    Bonjour,

    Super pense-bête pour les intégrateurs et rédacteurs.

    Répondre

  • Par Béatrice Blond, le 21 septembre 2016 à 10h15.

    Bonjour,
    Ces règles sont-elles applicables aux « image map » que l’on voit fleurir sur nos intranets ? Je ne sais pas comment aider les contributeurs sur ce type d’image… Merci.

    Répondre

    • Par Johan Ramon, le 21 septembre 2016 à 11h59.

      Bonjour Béatrice,

      Les images Map étant composées de zones cliquables, l’attribut alt doit être renseigné en précisant soit sa destination soit sa fonction.

      Par exemple, pour une carte de France où chaque zone cliquable est positionnée sur une région et permet d’afficher sa description :

      • L’attribut alt de l’image Map entière pourra être « Carte de France » (<img src="…" alt="Carte de France" usemap="#carte-france" />).
      • L’attribut alt de la zone cliquable « Hauts-de-France » pourra être « Hauts-de-France » (<area shape="poly" coords="…" href="…" alt="Hauts-de-France" />).

      Johan

      Répondre

  • Par Béatrice Blond, le 23 septembre 2016 à 14h52.

    Merci Johan, c’est très clair !

    Répondre

Ajouter un commentaire

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

Haut de page