Rédigé par Élise ACBARD
Les images sont partout sur nos sites : seules en haut de page, dans des boutons ou dans des liens, dans un article… Elles peuvent illustrer un contenu, transmettre une information autrement, attirer l’attention ou simplement rendre une page plus agréable à regarder.
Mais que se passe-t-il lorsque l’on ne peut pas les voir ?
C’est l’un des premiers sujets traités dans le Référentiel général d’amélioration de l’accessibilité (RGAA) : les images et leur alternative textuelle. Une alternative qui passe notamment par un petit attribut bien connu du web, alt.
Et rassurez-vous, derrière ce terme un peu technique se cache quelque chose d’assez simple.
Et si on ne peut pas voir l’image ?
« Mais enfin, les gens voient bien l’image ! » Eh bien non, justement.
Une personne non-voyante ou malvoyante peut utiliser un lecteur d’écran, une technologie d’assistance, qui permet de restituer le contenu d’une page oralement. Voir l’écran n’est donc pas la seule modalité d’accès à l’information.
Prenons une image contenant du texte.
Visuellement, nous lisons par exemple :
« Portes ouvertes – samedi 12 septembre à 18 h »
Pour nous, c’est du texte. Pour un ordinateur et un lecteur d’écran, l’image est avant tout… une image : une suite de pixels.
C’est un peu comme une pancarte écrite à l’encre invisible : l’information est bien là, mais elle ne possède pas la caractéristique qui permette de la lire. Elle est donc inaccessible à beaucoup de personnes.
Et le problème fonctionne aussi dans l’autre sens : une image qui n’apporte aucune information peut être annoncée par un lecteur d’écran alors qu’elle ne présente aucun intérêt pour la personne qui navigue.
Alors, comment permettre au lecteur d’écran de faire la différence ? C’est justement le rôle de l’attribut alt.
alt, le petit texte qui change beaucoup de choses
L’attribut alt est ce qu’on appelle une alternative textuelle de l’image. Il s’agit d’un texte invisible qui permet de transmettre l’information apportée par une image aux personnes qui ne peuvent pas la percevoir.
Et oui, on parle bien de l’attribut alt, et non de la « balise alt ».
C’est un peu la fiche d’identité de notre balise image.
Une petite distinction technique qui peut faire grincer quelques dents chez les développeurs et développeuses, mais qui n’a pas besoin de vous empêcher de dormir.
Dans votre outil de gestion de contenu, vous trouverez généralement un champ « texte alternatif » ou « alternative textuelle » lorsque vous ajoutez une image.
Le plus important n’est donc pas de savoir coder mais de savoir quoi renseigner.
Et contrairement à ce que le terme « alternative textuelle » pourrait laisser penser, il ne s’agit pas nécessairement de décrire tout ce que l’on voit.
Prenons l’exemple d’un vêtement présenté comme respirant. Le texte indique qu’il favorise l’évacuation de l’humidité tandis que l’image montre les zones respirantes :
« Une femme courant et portant un t-shirt gris avec des zones colorées. » transmet ce que l’on voit sur l’image mais pas ce que l’image apporte.
« Les zones respirantes se situent sous les bras, au niveau du torse et sur les côtés. » transmet l’information apportée par l’image.
Le véritable objectif est de transmettre l’information utile.
Faut-il décrire toutes les images ?
Non, et c’est plutôt une bonne nouvelle : vous n’avez pas besoin de devenir le guide touristique de toutes les images de votre site.
Pour savoir quoi faire, il faut surtout se demander :
Est-ce que cette image apporte une information à l’utilisateur ?
Et attention : ce n’est pas l’image elle-même qui détermine son rôle, mais le contexte dans lequel elle se trouve.
Les images porteuses d’information
Une image est informative lorsqu’elle apporte une information nécessaire à la compréhension du contenu.
Prenons une affiche d’événement :
[Portes ouvertes Samedi 12 septembre À partir de 18 h – Entrée libre]
Si toutes ces informations sont uniquement présentes dans l’image et nulle part ailleurs sur la page, elles doivent pouvoir être récupérées autrement.
L’alternative textuelle doit donc permettre d’accéder à cette information.
Même principe pour une image qui montre une consigne sans texte. Si elle montre de ne surtout pas appuyer sur un bouton, il vaut mieux que tout le monde puisse le savoir.
Attention toutefois à ne pas tomber dans l’excès inverse, le but n’est pas de transformer chaque texte alternatif en roman.
Imaginez que l’image du bouton en question montre aussi une personne. Une description détaillant les vêtements de la personne ou la couleur des murs n’apportera probablement pas grand-chose.
Le bon réflexe est donc de se demander :
Si je retire l’image, qu’est-ce que les utilisateurs et utilisatrices doivent absolument savoir pour comprendre le contenu ?
Un bon texte alternatif ne décrit pas forcément tout ce que l’on voit.
Il restitue ce qu’il faut comprendre.
Les images décoratives
À l’inverse, une image est décorative lorsqu’elle n’apporte aucune information nécessaire à la compréhension du contenu.
Vous ajoutez par exemple à un article une photo d’une personne travaillant sur un ordinateur simplement pour illustrer la page. Si cette photographie ne nous apprend rien de plus, elle est décorative.
Dans ce cas, inutile de la décrire.
Son alternative textuelle doit être vide afin que le lecteur d’écran puisse simplement l’ignorer et poursuivre sa lecture. La navigation est ainsi plus fluide et l’utilisateur peut se concentrer sur ce qui est réellement important au lieu d’entendre « personne brune qui travaille sur un ordinateur gris graphique » ou « ordinateur et plante graphique. »
Attention : vide ne veut pas dire absent
L’alternative textuelle vide permet d’indiquer clairement au lecteur d’écran :
« Cette image n’apporte aucune information utile, tu peux continuer. »
En revanche, si l’attribut alt est complètement absent, le lecteur d’écran ne dispose pas de cette indication.
Il sait qu’il rencontre une image mais ne sait pas clairement s’il doit la considérer comme informative ou décorative. Il peut alors tenter de récupérer d’autres informations disponibles, comme le nom du fichier.
Et entendre :
« IMG_4837 point JPG »
n’est pas vraiment ce qu’on pourrait appeler une expérience utilisateur réussie.
L’information n’est pas forcément fausse.
Elle n’est simplement pas utile.
Une alternative vide indique que l’image est décorative. L’absence d’alternative ne donne aucune indication.
Cas pratique : les logos
Les logos sont un très bon exemple de l’importance du contexte.
Prenons le logo de LinkedIn.
S’il est affiché seul et qu’il permet d’identifier le service, l’information à transmettre est simplement :
« LinkedIn »
Et non :
« logo LinkedIn »
ou :
« logo représentant les lettres “in” dans un carré bleu ».
Pourquoi ? Parce que l’objectif n’est pas de décrire le logo : c’est de transmettre l’information qu’il permet d’identifier.
En revanche, si le nom LinkedIn est déjà écrit juste à côté du logo, le logo n’apporte plus cette information. Il peut alors être considéré comme décoratif.
Cet exemple illustre donc bien une règle essentielle :
Une image n’est pas informative ou décorative par nature. Tout dépend de ce qu’elle apporte dans son contexte.
Et le référencement dans tout ça ?
L’attribut alt fait également partie des recommandations que l’on peut rencontrer en matière de référencement naturel (SEO).
Il arrive donc qu’une image soit décorative pour l’utilisateur mais que l’on souhaite malgré tout lui associer un texte pour des raisons liées au référencement.
Dans ce cas, comment éviter que le lecteur d’écran n’annonce une information qui n’est pas utile ?
L’attribut WAI-ARIA aria-hidden= »true » permet d’indiquer aux technologies d’assistance que l’image doit être ignorée, tout en conservant son texte alternatif.
Et c’est ce qui permet de garder le meilleur des deux mondes : un référencement humain.
L’essentiel reste toutefois de garder en tête le rôle de l’image : si elle est décorative, elle ne doit pas devenir une information simplement parce qu’elle peut être utile au référencement.
Et si on commençait ?
Vous l’aurez compris, rendre les images accessibles ne signifie pas supprimer toutes les images de votre site.
Heureusement.
Les images peuvent être utiles pour illustrer un propos, attirer l’attention, faciliter la compréhension ou simplement rendre une page plus agréable.
L’objectif est simplement de faire en sorte que l’information importante ne soit pas réservée aux personnes qui peuvent voir l’image.
Et la bonne nouvelle, c’est qu’il n’est pas nécessaire de refaire tout son site pour ça.
Commencez par vous poser trois petites questions :
- Cette image apporte-t-elle une information ? Si non, elle peut probablement être décorative.
- Si oui, quelle est l’information importante à transmettre ? C’est cette information qu’il faudra restituer dans l’attribut alt.
- Cette information existe-t-elle déjà ailleurs sur la page ? Si oui, inutile de la répéter.
Un attribut alt correctement renseigné peut déjà permettre à une personne qui ne voit pas votre image d’accéder à l’information qu’elle contient.
Et si vous voulez vraiment comprendre ce que cela change, le meilleur moyen reste encore d’essayer ! Testez votre site avec un lecteur d’écran comme NVDA, disponible gratuitement sur Windows.
Vous découvrirez peut-être votre site sous un angle différent.
Et si vous proposez des portes ouvertes avec apéro-cocktail à 18 h…
