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.

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 endoit pour donner l'informations 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

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

Texte graphique

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

<p><img src="agenda.jpg" alt="Agenda" /></p>
<p><img src="logo.png" alt="W3C" /></p>

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 certainement pas exceptionnelle. Pensez-y.
• 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.

Exemples de pratiques incorrectes

<p><a href="#top">
<img src="pijl.gif" alt="Flèche vers le haut" /></a></p>

<p><a href="">
<img src="print.jpg" alt="Icone imprimante" /></a></p>

<p><input type="image" src="zoek.png" alt="Loupe" /></p>

Exemples de pratiques correctes

<p><a href="#top">
<img src="pijl.gif" alt="Vers le haut de la page" /></a></p>

<p><a href="">
<img src="print.jpg" alt="Imprimer" /></a></p>

<p><input type="image" src="zoek.png" alt="Rechercher" /></p>

Exemples d'image cliquable (image map)

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

<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="circle" coords="163,100,50" 
href="http://www.oost-vlaanderen.be" 
alt="Provincie Oost-Vlaanderen" />
<area shape="rect" coords="13,36,104,149" 
href="http://www.west-vlaanderen.be" 
alt="Provincie West-Vlaanderen" />
<area shape="rect" coords="358,48,443,167" 
href="http://www.limburg.be" alt="Provincie Limburg" />
<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

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

<a href="http://www.wallonie.be/"><img src="http://images.anysurfer.be/logo_RW.png" 
  alt="Page d'accueil du Portail de la région wallonne" /></a>

Images décoratives

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

• des 'spacers' invisibles,
• des coins arrondis et des bords,
• des photos d'atmosphère.

Ces images ne véhiculent aucune information. Il faut laisser leur attribut alt vide afin de "prévenir" la synthèse vocale que l'image ne doit pas être signalée.

Exemples de pratiques incorrectes

<p><img src="spacer.gif" /></p>
<p><img src="blue_fade.jpg" alt=" " /></p>
<p><img src="border.png" alt="décoration" /></p>
<p><img src="top_left.gif" alt="Coin supérieur gauche arrondi bleu" /></p>

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

Exemples de pratiques correctes

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

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 encoder un code représenté dans une image et qui vise à s'assurer que c'est bien une personne et non une machine qui interagit avec le site. Cette technique n'est pas accessible pour une personne aveugle ou malvoyante. Mentionnez dans la variante textuelle qu'il s'agit d'un captcha et prévoyez par exemple une solution audio.

Vous trouverez un exemple de combinaison de captcha graphique et audio lors de la création d'un nouveau compte google.

Dans l'exemple ci-dessus la variante textuelle "characters" serait appropriée parce que les instructions utilisent ce terme plutôt que "captcha".

Comme alternative au captcha graphique il est possible de proposer une vérification par email, par SMS ou une opération mathématique. Chaque technique a ses avantages et ses désavantages. N'oubliez pas de proposer également un numéro de téléphone et une adresse email du helpdesk auxquels les personnes peuvent s'adresser en cas de problème.

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, comme dans ce concours photo. Le texte alt de ce test devrait être quelque chose comme "Photo de 5 objets".

Remarque

L'attribut titlene 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.