# Guide AccessiWeb

vous êtes ici : Accueil > Fiches AccessiWeb : Eléments graphiques > Fiche 1.12

## Fiche 1.12 : Pour chacune des images liens, le texte contenu dans l'attribut ALT donne-t-il la fonction du lien ?

Sommaire de la fiche :

- Carte d'identité
- Comprendre

- Comment évaluer
- Comment mettre en oeuvre

- Illustrations
- Références

### Carte d'identité

- Critère AccessiWeb : 1.12
- Niveau AccessiWeb : bronze
- Point(s) de contrôle WCAG 1.0 correspondants (Priorité 2 de WAI) : 13.1

revenir en haut de la page

### Comprendre

#### Bénéfices pour les utilisateurs

- Bénéfice 1:
  Les liens étant le moyen de navigation sur Internet, il est nécessaire que ceux-ci soient compréhensibles par tous. Si les liens sont des images et que le commentaire de l'image donne la fonction du lien, cela permettra aux utilisateurs qui ne voient pas les images ou dont les images sont désactivées dans le navigateur, d'accéder aux mêmes informations que les autres internautes. Dans le cas contraire, un mauvais commentaire à une image lien, ou l'absence de ce commentaire, ne permettra pas aux utilisateurs qui n'ont pas accès aux images de savoir à quoi sert le lien. Cela leur causera une perte de temps puisqu'ils seront obligés de cliquer sur le lien pour savoir ce qui se cache derrière. Cela peut également avoir pour conséquence que l'utilisateur ne souhaite plus visiter le site puisqu'il ne sait pas à quoi correspondent les liens.

#### Valeur ajoutée pour le site

- Bénéfice 1 :
  La maintenance du site est plus aisée car il est possible de savoir à quoi correspond chaque image lien et quelle est l'intention du concepteur pour l'utilisation de ces images liens.
- Bénéfice 2 :
  De plus, des images liens bien commentées amélioreront le référencement par les moteurs de recherche.

revenir en haut de la page

### Comment évaluer

#### Par le code source

1. Dans un éditeur de texte, vérifier pour chaque image lien si l'alternative textuelle contenue dans l'attribut `alt` est en accord avec la fonction du lien.
   Note : Un éditeur HTML est préférable pour permettre la bascule du mode graphique en mode code plus efficacement.

#### Par l'utilisation d'outils

Pour une liste complète des outils utilisés pour évaluer l'accessibilité des pages web, et un résumé de leurs principales fonctionnalités, reportez-vous à la page Outils d'aide à l'évaluation.

##### Evaluer avec la barre AccessiWeb (version 1.0) :

1. Sous Internet Explorer, ouvrir la page à analyser.
2. Dans le menu "1. Eléments graphiques" de la Barre AccessiWeb, activer le critère 1.12.
3. La liste des liens s'affiche dans une nouvelle fenêtre sous forme d'un tableau contenant le numéro du lien, son intitulé, son adresse Internet et le cas échéant, le contenu de l'attribut title. Les images cliquables (images qui sont en même temps des liens) sont aussi affichées avec le contenu de leur alternative textuelle.
4. Pour chaque image cliquable, vérifier que l'alternative textuelle (contenu de l'attribut alt) qui lui est associée en donne bien la fonction.

##### Evaluer avec la barre d'accessibilité AIS pour Internet Explorer (version 1.2 en français) :

1. Cliquer sur l'option "Liste des liens [Nouvelle fenêtre]" du menu "Infos Doc".
2. Une nouvelle fenêtre apparaît et présente, sous forme de tableau, le numéro du lien, son intitulé, son adresse Internet et, le cas échéant, le contenu de l'attribut `title`.
3. Les images cliquables (images qui sont en même temps des liens) sont aussi affichées mais pas le contenu de leur alternative textuelle. Pour connaître le contenu des alternatives textuelles des images cliquables, cliquer ensuite (à partir de la fenêtre présentant le tableau des liens) dans le menu "Images" sur l'option "Liste des images [Nouvelle fenêtre]". Le code source des images cliquables sera alors affiché.
4. Pour chaque élément graphique servant de lien, vérifier que l'alternative textuelle qui lui est associée en donne bien la fonction.

##### Evaluer avec la Barre d'Outils Web Developper pour Firefox (version 1.0.2 en français) :

1. Activer l'option "Voir Source" du menu "Voir Source".
2. Une nouvelle fenêtre apparaît et affiche le code source.
3. Vérifier pour chaque image lien si l'alternative textuelle contenue dans l'attribut `alt` est en accord avec la fonction du lien.
   Note : Un éditeur HTML est préférable pour permettre la bascule du mode graphique en mode code plus efficacement.

##### Evaluer avec le lecteur d'écran Jaws (version 5 et 6.2 en français) :

1. Afficher la page à évaluer et passer sur chaque élément graphique ayant une alternative textuelle, en tapant sur la touche G.
2. Le contenu de l'alternative textuelle s'affiche alors dans la fenêtre représentant l'afficheur Braille et est également lu par Jaws. Jaws annonce chaque image lien en disant "lien graphique" puis l'intitulé de ce lien. Par exemple, si une image lien a pour commentaire "retourner à l'accueil", Jaws dira: "lien graphique retourner à l'accueil".
3. Vérifier que ce contenu donne bien la fonction du lien.

revenir en haut de la page

### Comment mettre en oeuvre

#### Qui est concerné ?

Ce critère est implémenté par le rédacteur et l'intégrateur HTML.

#### Implémentation

Dans une balise `IMG` en html, l'attribut `alt` permet de décrire la fonction de l'image. Une même image peut cependant avoir plusieurs fonctions selon le contexte dans lequel elle se trouve :

1. Un lien sur un logo permettant de revenir à la page d'accueil d'un site ne devra pas avoir pour commentaire "logo du site xxxx" mais "retour à l'accueil du site".

   <a href="accueil.html">
   <img src="logo.jpg" alt="retour à la page d'accueil" />
   </a>

2. Sur un site où l'on peut télécharger différents types d'images de décoration le commentaire d'une puce jaune ne pourra pas être vide, comme c'est le cas habituellement pour des images de décoration, mais il pourra s'intituler "télécharger la puce jaune".

   <a href="file:puce_jaune.gif">
   <img src="deco/puce_jaune.gif" alt="télécharger la puce jaune" />
   </a>

3. Il est important de ne pas donner d'alternative vide à une image lien, à moins que ce même lien soit disponible en mode textuel à côté de l'image.
   Cas particulier où l'intitulé du lien apparaît à côté de l'image :

   <a href="mon_lien.html>
   <img src="photo_automobile.jpg" alt="" />
   location de voiture
   </a>

#### Exemple de mauvaise pratique

Sur un site de journal, il faut cliquer sur un lien image pour lire la suite des articles (par exemple : une flèche ou une double flèche).

<a href='#'>
<img src="arrow_mark.gif" alt="double-flèche" />
</a>

Un navigateur vocal ou un lecteur d'écran va lire "double flèche", ce qui n'est pas explicite.
ou

<a href='#'>
<img src="arrow_mark.gif" alt=" " />
</a>

un navigateur vocal ou un lecteur d'écran va lire le nom du fichier image ou lire l'adresse Internet du lien.

#### Exemple de bonne pratique

revenir en haut de la page

### Illustrations

Cette capture d'écran représente une image lien dont l'alternative textuelle décrit l'image au lieu d'indiquer vers où pointe le lien.

Cette capture d'écran montre une image lien dont l'alternative textuelle indique bien vers où pointe le lien.

revenir en haut de la page

### Références

#### Autres fiches à consulter

- Fiche 1.1 : Chaque élément graphique possède-t-il une alternative textuelle ?
- Fiche 1.2 : Pour chacune des images de la page ayant une alternative, les textes dans l'attribut ALT sont-ils appropriés par rapport au contexte dans lequel l'image se trouve ?
- Fiche 1.3 : Les éléments graphiques destinés à la décoration sont-ils commentés par ALT="" ?
- Fiche 1.4 : Pour chacune des images de la page, les textes dans l'attribut ALT font-ils moins de 60 caractères ?
- Fiche 6.1 : L'intitulé des liens fait-il moins de 80 caractères ?
- Fiche 6.2 : Les liens sont-ils explicites ?

#### Autres ressources

- html techniques (section 6.1.1) : Text for images used as links
- acces-pour-tous : Les images
- Plongez dans l'accessibilité (jour 23) : Fournir des équivalents texte pour les images

revenir au sommaire de la fiche

revenir en haut de la page

Guide AccessiWeb (version 2.1, 30 août 2006) | Conditions d'utilisation | Contact