FICHE 1

LES IMAGES

1.Rappel de la recommandation 1 des WCAG 1.0 :

" Fournir du contenu qui, présenté à l'utilisateur, fournit essentiellement la même fonction ou raison d'être que le contenu auditif ou visuel ".

Point de contrôle : 1.1 (Priorité 1)

Raisons de cette recommandation :

En fonction du type d'afficheur, du système d'exploitation, des conditions d'utilisation ou des options choisies, les images peuvent ne pas apparaître. Il est donc important que tous les éléments graphiques (images, animations, images map) soient commentés, qu'ils soient des liens ou non. L'absence d'image ne doit pas entraver la compréhension générale de l'information.

Le visiteur handicapé visuel, qui navigue avec un dispositif de synthèse vocale et/ou un afficheur braille, peut s'appuyer sur l'alternative textuelle.

2. Ce qu'il faut faire

La règle générale

Le langage HTML 4.01 propose principalement l'attribut alt pour insérer un commentaire textuel indiquant la fonction de l'image de la manière la plus courte, précise et explicite possible. Le commentaire doit porter sur la fonction de l'image et non sur son aspect.

<IMG="fichier_image.jpg" alt="commentaire de l'image">

Images liens

Il s'agit d'images permettant d'activer un lien.

Remplir systématiquement l'attribut "alt" associé à la balise IMG.

Exemple :

<IMG="fleche.gif" alt="Page précédente">

Images à zones cliquables ou réactives (images map)

Une image map est une image qui possède des "zones cliquables".

Remplir systématiquement l'attribut " alt " associé à la balise qui contient l'attribut "usemap" (comme à chaque image). Chaque zone cliquable (attribut "area shape") doit être renseignée par l'attribut "alt"

Textes au format image

Il faut transcrire la totalité du texte inclus dans l'image. L'aspect visuel des caractères ou du fond ne doit pas apparaître dans le commentaire.

<IMG="logo.gif" alt="W3C-Web Accessibility Initiative">

Remarque : s'il s'agit d'un titre, utiliser l'élément H. Cette indication pourra ainsi être utilisée par un logiciel de navigation textuel : <h1><img src="..." alt="..."></h1>.

Images illustratives

Ces images ne sont qu'un complément d'information au texte. (Ex : la photo d'une personnalité illustrant un article)
Il faut les commenter explicitement grâce à l'attribut "alt".

Images à usage typographique

Souvent des images sont utilisées pour mettre le document en page (images transparentes) ou faire ressortir visuellement la structure du texte (bullets). Souvent il existe des balises HTML permettant d'obtenir le même effet. Dans ce cas elles correspondent à une utilisation erronée d'HTML.

Utiliser les balises HTML destinées à la mise en forme, plutôt que les images. Notamment UL, LI (Liste à puces) ; OL, LI (Liste numérotée) ; - grâce aux feuilles de style, il est possible d'associer une image appropriée à chaque type de puce et/ou numéro (voir fiche CSS) - HR (Barres horizontales)

Si malgré tout vous décidez d'utiliser des images pour la mise en forme du document :

• Pour les images transparentes utilisées pour décaler la position d'un bloc de texte ou d'une autre image, le commentaire sera un espace : alt=" ".
• Pour des images représentant les puces ou les numéros des listes, les commentaires doivent être du type :

500g de farine 6 œufs 250g de sucre Mélangez le sucre Battez jusqu'à ce que … Incorporez la farine

<IMG="puce.gif" alt="item:">500g de farine <IMG="puce.gif" alt="item:">6 œufs <IMG="puce.gif" alt="item:"> 250g de sucre <IMG="num1.gif" alt="item1:">Mélangez… <IMG="num2.gif" alt="item2:">Battez… <IMG="num3.gif" alt="item3:">Incorporez…

Les puces et les tirets peuvent aussi être commentés avec des caractères du type : "*", "-". Cette solution permet d'alléger la lecture de la page, avec un synthétiseur vocal notamment.

• Pour les barres de séparation commenter par des tirets
  Par exemple, l'image ci-dessous est en fait une barre de séparation : <img src="barre-arbres.gif" alt="--">

Images de fond

Ce sont des images servant de décoration qui ne doivent pas contenir d'information essentielle et ne doivent pas avoir pas de valeur informative.

Pour que le navigateur puisse les filtrer, utiliser l'implémentation de l'image de fond dans les feuilles de style (voir fiche CSS)

Images complexes

Ce sont des images nécessitant une plus longue description. Il peut s'agir par exemple d'un tableau, d'un graphique, d'un plan, d'un dessin d'humour ou de toute autre image qui ajoute de l'information au document.
Note : la recommandation WCAG 1.0 indique qu'il faut utiliser l'attribut "LONGDESC" mais à l'heure actuelle, les navigateurs ne le gèrent pas. Voir la page explicative sur www.cast.org (en anglais).

Cas des images générées par un programme CGI

Utiliser l'attribut "alt" comme pour toute autre image.

3. Applications à l'aide des éditeurs HTML

• avec FrontPage
  Le commentaire se place dans l'emplacement " Texte " de la boîte de dialogue " propriétés de l'image " (cliquer sur l'image avec le bouton droit pour la trouver).

• avec Dreamweaver (version 3)
  Dans le champ "sec" (comme "secondaire") dans "Insertion/image/fenêtre/propriété

• avec WebExpert
  Dans la boîte de dialogue " Insérer une image graphique ", placer le commentaire dans la case " Alternative ".

• avec HotMetal Pro
  Lors de l'insertion de l'image, placer le commentaire dans la case " Alternate Text " de la boîte de dialogue " Image Properties ". Cette boîte de dialogue peut être retrouvée par la suite en cliquant sur l'image avec le bouton droit (en mode " TagsOn " ou " WYSIWYG ").

4. Exemples rencontrés sur les sites évalués

· Au sein des sites de l'Académie de Strasbourg (www.ac-strasbourg.fr) et de la Cour d'Appel de Paris (www.ca-paris.justice.fr), il y a du texte sous forme d'image dont la taille ne peut être changée (voir plan du site, moteur de recherche et titres des chapitres).

· Au sein du site de la Direction Régionale de l'Industrie, de la Recherche et de l'Environnement de Picardie (www.picardie.drire.gouv.fr), par exemple, il y a des images de ce type dans le cadre principal.

· Commentaires peu appropriés : sur plusieurs sites, les éditeurs HTML utilisés ajoutent par défaut un commentaire aux images. Ce commentaire est peu approprié car il est de la forme : <IMG SRC="nom de l'image.gif" alt="nom image.gif (poids en octets)">.
Ce commentaire n'est pas explicite, il ne donne pas d'information sur la fonction de l'image.
Pour un exemple, voir le site www.legifrance.gouv.fr

Le commentaire alternatif de cette image n'est pas correct

retour aux fiches