Renseigner le texte alternatif des images
Les
recommandations de la W3C sont très claires sur ce point: il faut
insérer l'attribut alt=".." de vos balises d'images sous peine de voir
votre validation refusée. Les insérer est une chose, nous allons voir
comment les remplir de façon efficace et utile.
1# A quoi ça sert ?
Le
texte alternatif permet d'afficher une alternative au contenu
non-textuel. En effet, nous allons nous pencher essentiellement sur les
images, mais vous retrouverez l'attibut alt=".." dans
une quantité de balises, notamment la balise object par exemple et
permet donc d'insérer du contenu média, des applets...etc.Le
rôle du texte alternatif va donc être de permettre aux personnes ou aux
navigateurs ne pouvant pas "voir" les images de savoir ce qu'elles
contiennent pour conserver la cohérence du contenu. En tant que
développeurs, nous devons indiquer aux utilisateurs le contenu et la fonction des images utilisées dans le contenu en ligne.
Les standards W3C vous obligent à insérer au moins un attribut alt vide : alt="" pour
permettre à certains logiciels spécialisés d'avoir accès à d'autres
informations comme la taille de l'image ou le nom du fichier, qui
peuvent parfois être significatifs. Si vous ne savez pas
comment remplir votre attribut alt, penser donc au moins à mettre des
noms d'image descriptifs (ecran_samsungBF640.jpg ou
dissection-grenouille.png). Ce qui nous amène au point suivant :
2# Comment remplir l'attribut alt ?
L'attribut alt devrait typiquement :au contenu et aux fonctions de l'image. - Décrivez avec précision le contenu et la fonction de l'image.
- Soyez bref :
Utilisez aussi peu de mots que possible. Pas plus d'une ou deux petites
phrases si c'est vraiment nécessaire. Si vous avez plus de choses à
dire, ajoutez-le dans le texte de la page, cela interressera surement
tous vous lecteurs.
- Ne vous répétez pas : Si
vous avez déjà donné une description suffisante dans le texte autour de
l'image, ne vous répétez pas et insérez un attribut alt vide.
- Ne donnez pas d'information évidente. Inutile de dire que c'est une image... d'indiquer les couleurs,
- Si votre image contient un lien, il faudra indiquer plutot une description de ce vers quoi le lien pointe associé à l'image.
3# Les cas particuliers
Les images décoratives Utilisez la balise alt vide
pour des images décoratives ou pour des espaceurs, des images de fond
qui n'apportent rien au contenu et sont purement décoratives
Quand
une image est utilisée de manière décorative, il est généralement
recommandé de l'appliquer en tant qu'arrière-plan via CSS. En procédant
ainsi, le choix du texte alternatif ne se pose plus et l'image
n'apparaît pas dans le corps sémantique et structurel de la page.
Les images réactives
Les
images réactives doivent avoir un attribut alt. Celui-ci doit présenter
le contenu de l'image, mais pas celui des zones cliquables. Par
exemple, pour une carte de l'État de New York dont chaque région serait
cliquable, l'image principale aurait pour texte alternatif « État de
New York ». En revanche, si l'image en soi ne sert qu'à contenir les
zones cliquables (par exemple pour une barre de navigation), le texte
alternatif vide alt="" est le plus adapté. Pour chaque zone de
l'image réactive (balise area), l'attribut alt est obligatoire. Chacune
de ces zones cliquables doit posséder un texte alternatif décrivant sa
fonction. Les images réactives côté serveur ne peuvent pas avoir
de texte alternatif, et ne peuvent pas non plus être utilisées avec un
clavier. Leur usage est à proscrire.
Les images d'arrière-plan
Les
images d'arrière-plan ne peuvent avoir de texte alternatif. Si le
contenu d'une image est important, l'image ne doit pas être appliquée
en arrière-plan d'une page ou d'un élément. En revanche, les
images d'arrière-plan conviennent particulièrement pour les images à
vocation décoratives, car elles n'apparaissent pas dans le flux du
document et n'ont donc pas besoin d'un attribut alt vide.
Les logos
Le
logo principal est souvent un lien vers la page d'accueil. Cette
pratique étant très répandue, il est généralement suffisant de mettre
en texte alternatif le nom de l'entreprise (alt="Société Acme" par
exemple). Préciser qu'il s'agit d'un logo n'est pas nécessaire en
général, car ce n'est ni le contenu ni la fonction du lien. Les
développeurs choisissent habituellement de préciser que ce lien amène à
la page d'accueil (alt="Société Acme - page d'accueil), mais si l'image
se trouve systématiquement au début de la page et que le contenu
alternatif est suffisamment explicite, ce ne devrait pas être utile.
Les images complexes
Lorsqu'une
image complexe telle qu'un tableau de données ou un graphique ne
peuvent être correctement résumés en une ou deux phrases courtes, ET
que ce contenu n'est pas présent dans le contexte de la page, il est
nécessaire de placer ce contenu alternatif à un autre endroit.
Habituellement, c'est le rôle de l'attribut longdesc de l'image, mais
celui-ci n'est pas encore parfaitement supporté (plus d'informations sur l'attribut longdesc).
Dans ce cas, le texte alternatif de l'image devrait néanmoins décrire
le contenu général de l'image. Si l'image en revanche est un lien vers
une description plus complète, c'est à préciser dans l'attribut alt de
cette image.
Ce texte
alternatif est un peu long peut-être, mais il présente à la fois le
contenu général de l'image et informe l'utilisateur qu'une description
est disponible.
Conclusion
Le texte
alternatif est l'un des problèmes d'accessibilité les plus courants,
mais il est très souvent implémenté de manière inappropriée ou non
standard. Les règles suivantes permettront aux développeurs de rendre
leur contenu plus accessible aux handicapés. - Le texte
alternatif est à la fois l'un des principes d'accessibilité les plus
simples à retenir, mais parmi les plus difficiles à maîtriser.
- Le contenu alternatif peut se présenter soit dans l'attribut alt soit dans le contexte de l'image.
- Toute image doit avoir un attribut alt.
- Le texte alternatif doit :
- Présenter et le contenu et la fonction de l'image.
- Être court.
- Le texte alternatif ne doit pas :
- Répéter un contenu disponible immédiatement avant ou après.
- Contenir les mots « image de... » ou « graphisme de... ».
- Le texte alternatif approprié se choisit en fonction du contexte.
- Le
texte alternatif d'une image fonctionnelle (contenue dans un lien, par
exemple) doit décrire sa fonction en plus de son contenu.
- Les images décoratives doivent avoir un attribut alt, mais il doit être vide (alt="").
Le web serait déjà bien plus accessible si le texte alternatif était mis en place correctement et de manière adéquate. | 
Esprit Créatif est une entreprise de créations graphiques à Strasbourg. Soutenue par le Conseil Régional d'Alsace,elle propose des sites internet sur mesure destinés aux professionnels comme aux particuliers. Elle s'est spécialisée dans le webmastering 2.0 en s'adaptant aux standards W3C, aux normes WAI et à l'utilisation de CSS.
