vous êtes ici

Pour qu'une image soit accessible, il faut lui donner un texte alternatif, aussi appelé texte de remplacement. Ce texte n'est pas visible quand l'image est affichée. Mais il est vu par les technologies d'assistance et les moteurs de recherche.

En fonction du type d'image (HTML, CSS, svg, police d'icône, PDF,...), on utilise différentes techniques pour donner un texte de remplacement à une image, la plus connue étant l'attribut alt.

Quelques principes généraux pour donner une bonne alternative textuelle :

  • Un texte alternatif doit pouvoir remplacer l'image et dépend du contexte. Le contenu de la page doit avoir du sens et être complet quand on remplace toutes les images par leur texte alternatif.
  • Le texte de remplacement fait partie du contenu et doit donc être dans la langue de la page et respecter les règles d'orthographe et de grammaire.
  • Généralement le texte de remplacement ne doit pas commencer par les mots 'logo', 'photo de', 'image représentant', etc
  • L'alternative textuelle doit être concise et contenir l'information essentielle.

Le contenu de l'atlternative textuelle dépend du contexte dans lequel se trouve l'image. Nous détaillons quelques situations :

Image décorative

Une image est décorative si elle n'a aucune fonction et qu'elle n'apporte aucune information. Elle doit être ignorée par les technologies d'assistance. Cela se fait généralement en donnant un texte alternatif vide.

L'exemple type d'image décorative est celle qui accompagne un article ou un thème. Dans l'exemple ci-dessous, l'image du boulanger au dessus du titre 'Indépendants' est décorative.

photo d'un boulanger suivi d'un titre et de texte au sujet d'incapacité de travail

Si l'image contient de l'information qui est redondante avec le texte, on peut aussi la considérer comme décorative.

  • Dans l'exemple ci-dessous , les types de déchets pour les sacs verts sont indiqués sous forme de textes (feuilles, branchages, etc) accompagnés de photos. Les photos peuvent être considérées comme décoratives parce que l'on pourrait les supprimer sans perdre d'information.

    4 types de déchets verts avec une photo illustrative

  • Les pictogrammes accompagnés de texte sont généralement redondants, comme par exemple le pictogramme représentant un lecteur de carte, à côté du texte 'Identification avec un lecteur de carte eId':

    capture d'écran pictogramme lecteur de carte

Attention, une image cliquable ne peut généralement pas être considérée comme décorative car elle a une fonction (lien ou bouton) .

Image porteuse d'information

Si l'image apporte une information, elle doit avoir un texte de remplacement pertinent.

Par exemple, si vous affichez la liste d'organisations partenaires sous forme de logos de ces organisations, l'alternative textuelle de chaque logo sera le nom de l'organisation.

Image cliquable

Si l'image est cliquable, il faut distinguer deux cas de figure.

Le plus simple est le cas où l'image se trouve toute seule dans un lien, sans être accompagnée de texte. Le texte de remplacement doit indiquer la destination ou la fonction du lien. Par exemple 'Facebook' pour une icône qui sert de lien vers Facebook, ou 'menu' pour une icône qui sert à afficher un menu.

icônes Twitter, Facebook, LinkedIn, YouTube

Quand l'image se trouve dans un lien avec du texte, souvent l'image est redondante, et alors on peut la considérer comme décorative. C'est le cas par exemple si vous avez une icône représentant une enveloppe dans un lien qui comporte aussi le texte 'messages'.

icône enveloppe, à côté du mot message

Image complexe

Par image complexe on entend graphiques, cartes, organigrammes, infographies, ou tout élément graphique pour lequel un texte de remplacement d'environ 80 caractères ne suffit pas.

Pour ce type d'images il faut d'une part fournir un texte de remplacement succinct qui indique de quoi il s'agit, par exemple 'organigramme du conseil d'administration' ou 'évolution de l'accessibilité des sites web de 2011 à 2016'.

D'autre part il faut fournir une version textuelle de l'image. Il peut s'agir d'une description sous forme de texte, ou d'un tableau de données. L'information contenue dans cette version textuelle doit être la même que celle qui est disponible dans l'image complexe. Elle doit être facile à trouver et il faut que ce soit clair à quelle image la description se rapporte. Il peut s'agir d'un texte sur la même page, ou d'un lien qui envoie vers une autre page.