Magali Milbergue

Magali Milbergue

Créatrice web, accompagnatrice, formatrice et inclusion advocate.

header-corner

Les tips d'accessibilité 1

Le texte alternatif aux images

L’accessibilité est un sujet qui n’a pas encore tout à fait trouvé sa place dans la conception de sites web. Pourtant, 20% de la population a un handicap, ne pas faire en sorte que son site soit accessible à toutes ces personnes est une discrimination. Tous les mois, je partage avec vous des conseils d’accessibilité afin d’améliorer ensemble nos pratiques pour un web plus inclusif.

A quoi ça sert ?

On aime mettre des images pour accompagner nos contenus web. Ça décore, ça aère, voire ça ajoute du contenu en variant un peu les médias. Seulement, on oublie souvent qu’il y a toute une partie de la population qui ne peut pas voir ces images.

Les personnes qui ne peuvent pas, pour quelque type de handicap que ce soit, voir ce qui se trouve affiché à l’écran utilisent des lecteurs d’écran. Ces logiciels permettent de visiter une page web tout en ayant le contenu lu à haute voix au fil de la visite. Ce sont de super outils qui permettent à beaucoup de personnes qui n’auraient jamais pu avoir accès à internet d’y accéder.

Cependant, ces lecteurs d’écran ne savent pas lire les images. Donc quand on met une image dans notre article de blog par exemple, le lecteur d’écran ne peut pas la décrire automatiquement à la personne qui visite le site. C’est à nous de paramétrer nos images correctement pour que ce soit possible. Comment ? En utilisant l’alternative textuelle.

Il y a d’autres moyens de le faire mais en tant que grandes débutantes et débutants de l’accessibilité web, nous allons pour cela utiliser dans un premier temps l’attribut alt. Il se met dans la balise HTML image de cette façon :

<img src="lenomdemonimage.jpeg" alt="Ici la description de mon image">

Seulement, il y a des règles qui cadrent l’utilisation du texte alternatif en accessibilité web. Les voici.

La règle

Le RGAA (Référentiel Général d’Amélioration de l’Accessibilité) commence ses critères par les règles sur les images en général et le texte alternatif en particulier. De façon un peu simplifiée, la règle est la suivante :
  • Une image porteuse d’information doit contenir une alternative textuelle pertinente
  • Une image décorative doit conserver un attribut alt vide (alt="").
L’idée c’est d’éviter d’encombrer la navigation de descriptions d’images sans fin quand il n’y a pas d’intérêt. Si je mets une photo de ma chienne pour décorer mon article sur l’accessibilité, c’est très mignon, mais ça n’intéresse sûrement pas les personnes qui ne peuvent pas voir d’avoir une description d’un portrait de ma chienne au milieu d’un article sur l’accessibilité. Par contre, si mon image contient des informations, alors là il faut absolument la décrire… On fait alors une description concise et précise permettant aux personnes d’accéder aux informations.

Pour aller plus loin

Comme dit plus haut, il y a d’autres façons de faire des textes alternatifs à des images. Cet article est une toute première introduction mais la question est bien plus vaste. D’ailleurs, La Lutine du Web (une ressource incontournable de l’accessibilité) a fait tout un dossier sur la question.

Retenez aussi que les images ne sont pas les seuls éléments de votre site à devoir avoir des alternatives textuelles. Et qu’il n’y a pas que pour les lecteurs d’écran que c’est utile.

Vous pouvez aussi lire l’article d’Angi sur la question, elle y donne plein de conseils super intéressants !

Finalement, vous pouvez vous référer à la règle opquast sur la question (il y en a en fait deux : une pour les images décoratives, une pour les images porteuses d’informations) et finalement il y a bien sûr les règles du WCAG (Web Content Accessibility Guidelines) qui sont toujours intéressantes à consulter !

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *