retour vers le site AccessiWeb

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 ?

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

Valeur ajoutée pour le site

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

Une image lien mal commentée

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.

Une image lien correctement commentée

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

Autres ressources

revenir en haut de la page


Fiche précédente : fiche 1.11 Fiche suivante : fiche 1.13

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