2.3.1 Chaque image a un attribut alt

Tout élément graphique, sans exception, doit avoir un attribut alt placé dans sa balise. C'est une règle d'accessibilité mais également une condition pour satisfaire au standard HTML. Le contenu de l'attribut alt dépend du type d'image et du contexte.

Pourquoi?

Les éléments non textuels (graphiques, images, photos, logos, etc.) ne sont pas perceptibles par les aides techniques et donc ne le sont pas pour des visiteurs non-voyants. Mais les outils d'aide permettent d'associer à ces éléments des commentaires si ceux-ci ont été prévus dans l'attribut alt de l'image. D'un point de vue pratique, en l’absence d’attribut alt dans une balise img, les aides techniques comme les lecteurs d'écran signaleront la présence d’un élément graphique sans aucune autre information.

En pratique

Les éléments graphiques qui doivent avoir un attribut alt sont

  • les images (balise img)
  • les zones réactives des images cliquables (balise area)
  • les boutons de formulaire avec input type="image"

Conseils pour écrire des alternatives textuelles utiles

  • Il n'est pas nécessaire de faire des phrases complètes. Un mot suffit s'il est bien choisi. Limitez l'alternative textuelle à plus ou moins 80 caractères.
  • Ne commencez pas l'alternative textuelle par 'photo de', 'Ici vous voyez', etc. Les aides techniques reconnaissent la balise img et annoncent sa présence à l'utilisateur par le mot "graphique ".
  • Certains systèmes de gestion de contenu (CMS) utilisent le nom du fichier comme alternative textuelle. Nous déconseillons ceci étant donné que les noms de fichier manquent souvent de signification.
  • Si une grande image est composée de plusieurs petites images, associez la description à la première image et laissez vides les alternatives textuelles des autres images.
  • Le texte alt n'est pas le bon endroit pour donner l'information de copyright. Celle-ci se placera plutôt dans l'attribut title.
  • Sur des sites en plusieurs langues n'oubliez pas de traduire les alternatives textuelles.

Photos et illustrations

Pour des photos et illustrations informatives, chaque alternative textuelle contiendra une description sommaire de ce qui est représenté.

Exemples

Coucher de soleil sur la plage Elvis Presley
<img src="foto1.jpg" alt="Coucher de soleil sur la plage"/>
<img src="foto2.jpg" alt="Elvis Presley"/>

Texte graphique

Répétez littéralement le texte graphique dans l'alternative textuelle.

HTML5

W3C
<img src="logo_HTML5.jpg" alt="HTML5"/>
<img src="logo_W3C.png" alt="W3C"/>

Si le texte graphique fait plus de 3 lignes ou n'est pas linéaire (par exemple organigramme), alors l'alternative textuelle ne suffit pas. Dans ce cas il faut appliquer la directive au sujet des images complexes.

Note : Soyez avare en textes graphiques:

  • Les textes en format graphique causent de lourds préjudices aux utilisateurs de logiciels qui agrandissent le contenu des pages. Lorsqu’on navigue avec de tels outils, l’effet de pixellisation des graphiques est très désagréable, jusqu’à rendre les images indéchiffrables si on dépasse un facteur de grossissement de 5. Il est à noter que de tels logiciels offrent généralement une échelle de grossissement variant d’un facteur 1 à 16. L’utilisation du facteur 5 n’est pas exceptionnelle.
  • En utilisant des textes en format graphique, vous empêchez le visiteur d’en modifier la taille des caractères mais également la police ou le contraste des couleurs.

Liens graphiques

Si une image est utilisée comme hyperlien l'objectif du lien a priorité sur la description de l'image.

Flèche vers le haut Icone imprimante

Exemples de pratiques incorrectes


Exemples de pratiques correctes


<img src="pijl.gif" alt="Vers le haut de la page"/>
<img src="print.jpg" alt="Imprimer"/>
<input type="image" src="zoek.png" alt="Rechercher"/>

Exemples d'image cliquable (image map)

Chaque zone cliquable dans une image cliquable est également un lien graphique

Provincie Antwerpen Provincie Oost-Vlaanderen Provincie West-Vlaanderen Provincie Limburg Provincie Vlaams-Brabant

<img alt="" src="map_vlaanderen.png" usemap="#vlaanderen"/>
<map name="vlaanderen">
<area shape="circle" coords="287,56,51" href="http://www.provant.be/" alt="Provincie Antwerpen"/>
...
<area shape="rect" coords="217,111,328,167" href="http://www.vlaamsbrabant.be" alt="Provincie Vlaams-Brabant"/>
</map>

Exemple de bouton graphique avec texte alt

<input type="image" src="submit.png" alt="Verstuur"/>

Lien vers la home page par un logo

Sur la plupart des sites web, il est possible de cliquer sur le logo de l'organisation pour retourner vers la page d'accueil. Ce logo est également un lien graphique. Le texte alt doit alors indiquer qu'il s'agit d'un lien vers la page d'accueil plutôt que de dire qu'il s'agit d'un logo.

Exemple de logo qui est un lien vers la page d'accueil

Logo de la Région Wallonne

Images décoratives

Lorsqu'une image ne véhicule aucune information, elle sera considérée comme décorative. Il faut laisser son attribut alt vide afin de "prévenir" la synthèse vocale que l'image ne doit pas être signalée.

Des exemples d'images décoratives sont, entre autres,

  • des 'spacers' invisibles,
  • des coins arrondis et des bords,
  • des photos d'atmosphère,
  • des images qui sont redondantes par rapport au texte qui les accompagne.

Une image qui est un lien n'est jamais considérée comme décorative, sauf si elle est accompagnée de texte. Les deux exemples ci-dessous sont corrects. Dans le premier le pictogramme météo est un lien à lui tout seul. Son attribut alt est "météo". Dans le deuxième exemple, le pictogramme est accompagné du texte 'météo à l'intérieur du lien. Le pictogramme peut être considéré comme décoratif et son attribut alt est vide.


Exemples de pratiques incorrectes

Note : un attribut alt qui contient un espace n'est pas vide.

Exemples de pratiques correctes

<img src="spacer.gif" alt=""/>
<img src="blue_fade.jpg" alt=""/>
<img src="border.png" alt=""/>
<img src="top_left.gif" alt=""/>

Note: il vaut mieux ne pas inclure une image décorative comme image mais comme fond d'écran en CSS.

Galeries de photos

Une galerie de photos est une page qui contient au moins 5 photos se rapportant au même sujet. Dans un tel cas, rien ne vous empêche de compléter l'attribut alt de chaque photo par une description individualisée mais il ne s'agit ici pas d'un critère obligatoire.

Pourquoi ? Parce que les galeries de photos ont la particularité d'offrir une variation d'impressions visuelles d'un même événement, l'information qu'elles véhiculent peut être aisément résumée par une seule et unique description générale. Cette dernière sera placée en début de galerie, par exemple, et contiendra des informations telles que le moment et le lieu où les photos ont été prises. Les attributs alt des photos elles-mêmes seront vides (alt = "" ).

Attention cependant, si les photos sont cliquables, leur attribut alt ne peut en aucun cas rester vide. Il est question ici de la pertinence des intitulés de liens. Dans un tel cas, vous placerez un texte qui identifie clairement la fonction du lien placé sur la photo, comme par exemple alt= "Photo 1 (Agrandissement)", alt= "Photo 2 (Agrandissement)". Vous remarquez dans l'exemple que les photos sont distinguées par un chiffre, et c'est important. Les alt des photos cliquables ne peuvent être totalement identiques puisque les liens mènent vers des destinations différentes.

Captcha

Un captcha graphique est une technique de sécurité par laquelle un utilisateur doit recopier un code représenté dans une image. Cette pratique vise à s'assurer que c'est bien une personne et non une machine qui interagit avec le site. Un tel captcha est impossible à déchiffrer pour les personnes aveugles, mais aussi pour de très nombreuses personnes malvoyantes ou dyslexiques.

Utilisez de préférence une technique anti-spam sans captcha. Si ce n'est pas possible, choisissez une implémentation qui soit accessible à tous. Nous avons documenté quelques alternatives au captcha graphique dans l'article Eviter le spam sans captcha. N'oubliez pas, si vous conservez un captcha graphique de lui donner un attribut alt significatif tel que 'code à recopier' par exemple.

Captcha avec les mots very et goopme

Exceptions pour les tests

Dans un test ou un exercice, il n'est pas toujours possible de proposer une variante textuelle correcte. Cela pourrait invalider le test ou l'exercice. Cela produit parfois des situations problématiques.

Remarque

L'attribut title ne remplit pas de fonction d'accessibilité pour les images. Les lecteurs d'écran ne voient que l'attribut alt. Les utilisateurs qui naviguent au moyen du clavier ne voient pas non plus cette information. Utilisez l'attribut title seulement pour de l'information non essentielle qui apparaîtra uniquement lors du passage de la souris.

comment tester

  • Pour chaque image et pour chaque image cliquable, vérifiez s'il y a un attribut alt. Vérifiez également si son contenu est correct.
  • Vous pouvez faire cela en utilisant la barre d'outil Web Developer de Firefox: cliquez sur images > Afficher les attributs Alt. Les attributs alt seront affichés à côté des images correspondantes.