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'alternative textuelle dépend du contexte dans lequel se trouve l'image. Nous détaillons quelques situations :
- L'image est décorative
- L'image est porteuse d'information
- L'image est cliquable
- L'image représente une information complexe qui ne peut pas être communiquée en quelques mots
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.
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.
Les pictogrammes accompagnés de texte sont généralement redondants, par exemple le pictogramme représentant un lecteur de carte, à côté du texte "Identification avec un lecteur de carte eId" :
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.
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'.
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.