Veillez à donner un équivalent textuel court aux images. Celui-ci peut être plus long dans certains cas (ex : décrire un graphique ou un diagramme). Ajoutez alors une description plus longue à côté du texte alt.
Une description détaillée permet aux personnes souffrant d’un handicap visuel d’avoir accès à des informations essentielles à la compréhension de ces éléments.
Ceci renforce également la visibilité de votre site dans les moteurs de recherche.
Comment vous y prendre ?
Dans le texte alt, décrivez brièvement le sujet de l’image. Ensuite, donnez-en une description plus longue, en dehors du texte alt. Vous avez plusieurs possibilités pour ajouter la description détaillée et le renvoi vers celle-ci.
Sur la même page, près de l’image
La description plus longue figure dans le corps du texte ou, par exemple, dans un cadre distinct sur la même page.
Veillez à préciser dans le texte alt l’endroit où se trouve la description détaillée.
À un autre endroit vers lequel vous renvoyez avec un lien
Cette option est comparable à la précédente, à la différence que vous renvoyez à la description détaillée à l’aide d’un lien.
Attention, le lien doit être placé directement avant ou après l’image. Pour ce faire, utilisez un texte avec lien ou une icône.
Avec une technique HTML ou ARIA
Outre les options mentionnées ci-dessus, vous pouvez utiliser des techniques HTML (l’attribut longdesc) et ARIA (l’attribut aria-describedby) pour ajouter une description détaillée. Demandez à votre fournisseur si ces techniques sont intégrées au système de gestion de contenu (CMS) et comment les utiliser.
Exemples
Description sur la même page, près de l’image
Une page web contient un histogramme indiquant les trois pages les plus visitées. Dans le texte alt de l’histogramme, on peut lire : ‘Les trois pages les plus visitées en décembre 2015. Vous trouverez tous les détails dans le texte sous l’histogramme.’
Dans le paragraphe en dessous de l’histogramme, on peut lire :
« Les chiffres de décembre montrent que la page Tax-on-Web est la page la plus visitée avec 1,2 million de visiteurs. La page MyMinfin arrive en deuxième position avec 1,1 million de visiteurs, et la page de déclaration électronique se classe troisième avec 980 000 visiteurs. »
Description à un autre endroit vers lequel vous renvoyez avec un lien
Tout de suite après l’histogramme dont il est question à l’exemple précédent, vous pouvez voir une icône pour la ‘description détaillée’. Celle-ci est un lien vers une autre page web sur laquelle se trouve la description détaillée. Le lien peut également mener à un autre endroit sur la même page, où l’on retrouve la description détaillée.
Comment cela contribue-t-il à un meilleur site web ?
Les personnes avec un handicap visuel ne peuvent pas voir l’image. Elles passent donc à côté d’informations essentielles, surtout lorsqu’il s’agit d’un diagramme important. Or, une description détaillée de l’image leur permet justement d’avoir accès à cette information. La description textuelle de l’image renforce également la visibilité de votre site web dans les moteurs de recherche.
Pour des rédacteurs
Certains CMS permettent d’inclure (un renvoi vers) une description détaillée. Cependant, le rédacteur devra souvent le faire lui-même, en insérant la description détaillée sur la page même ou sur une autre page, et en renvoyant à celle-ci de façon adéquate.
Pour des développeurs
Le développeur doit veiller à ce que le rédacteur ait la possibilité d’introduire une description détaillée.