Du bon usage des attributs alt et title sur les images et les liens

Astuce par (Risk & Compliance Officer, Bruxelles)
Créé le , mis à jour le (183511 lectures)
Tags : lien, image, title, alt

Les attributs alt et title sur les images et les liens sont rarement utilisé à bon escient. Pourtant, leur usage est fortement recommandé, et leur compréhension essentielle.

alt

La théorie

L'attribut alt

alt doit être présent sur toutes les images, même s’il peut rester vide (pour les images purement décoratives). Il sert à apporter la même information que l’image (en général le texte qu’elle porte) dans le code de la page. Le but de ce report d’information est que celle-ci reste disponible lorsque l’image ne peut être chargée (à cause d’une surcharge de serveur ou d’un problème de connexion...) ou qu'elle ne peut être vue (par un robot de moteur de recherche ou un utilisateur de lecteur d’écran...).

L'attribut title

title, quant à lui, peut être utilisé sur les liens, pour apporter une information nécessaire à la bonne navigation du visiteur et supplémentaire à l'intitulé du lien. C'est un attribut facultatif, et très rarement nécessaire. Un title reprenant à l'identique l’intitulé du lien est totalement inutile et redondant. Il ne doit pas être utilisé sur les images (sauf cas extrêmement spécifiques).

La pratique

<a href="index.htm" title="Retour à l'accueil"><img src="accueil.gif" alt="Accueil"></a>

Incorrect : Le title n’apporte pas une information supplémentaire, il est redondant avec l’intitulé du lien.

<a href="index.htm"><img src="accueil.gif" alt="Image menu bouton accueil"></a>

Incorrect : L’alt contient bien plus d’information que l’image n’en porte. L’information ajoutée apporte une couche de « bruit » qui noie l’information importante.

<a href="index.htm"><img src="accueil.gif" alt="Puce décoration">Accueil</a>

Incorrect : Une puce personnalisée est une image purement décorative, le alt devrait être vide.

<a href="index.htm" alt="Accueil"><img src="accueil.gif" title="Accueil"></a>

Incorrect : Alt ne doit pas être placé sur <a>. Une image doit toujours avoir un attribut alt.

<a href="index.htm"><img src="accueil.gif" alt="Accueil"></a>

Correct : Nul besoin d’apporter plus d’information que nécessaire.

Ressources

Commentaires

Nico3333fr a dit le

Title : Il ne doit pas être utilisé sur les images (sauf cas extrêmement spécifiques).

Tu aurais un exemple de ces cas extrêmement spécifiques ?

jpvincent a dit le

à noter que HTML5 ne sais pas très bien si l‘attribut ALT est obligatoire sur les images ou non, en tout cas ils le recommandent
http://www.w3.org/TR/html5/embedded-content-1...
Ce qui à mon avis ne doit rien changer aux bonnes habitudes : alt si possible, alt vide pour signaler que l'image n'a pas d'importance sur la page.

pour écrire le contenu du ALT, ils disent bien que ce n'est pas une description de l'image, mais que le texte dépend du contenu de la page elle même. Ce contenu ne doit pas changer la compréhension du texte autour de l'image et doit même pouvoir se lire sans se faire remarquer au milieu du texte, comme le montre ton exemple.

Ca me semble dur à faire pour tous les cas, mais si l'image n'est effectivement pas visible (pas téléchargée, ou utilisateur aveugle / mal voyant) c'est logique

nell a dit le

A lire également, un article (qui commence à dater) très intéressant et plein d'exemples sur le texte alternatif : http://www.pompage.net/pompe/bien-utiliser-le...

sharky a dit le

J'aime tout de même laisser un 'title' sur un lien image quand celle-ci n'est pas explicite ... Par exemple, un retour à l'accueil sur un logo ...

Riku Asakura a dit le

Très bonne piqure de rappel :)
Merci

Tony Monast a dit le

@Nico3333fr : Un exemple où un title sur une image peut s'avérer pertinent serait dans le cas d'une application Web. Il y a parfois de grands tableaux de données où certaines informations sont représentées sous forme d'icône. L'icône en elle-même devrait être assez représentative, mais pour s'assurer que l'utilisateur la comprenne bien, on peut lui ajouter un title avec une courte explication. Ce qui permet à l'utilisateur de voir la définition de l'icône au passage de la souris.

Si on tient à ce que cette information soit aussi disposible en navigation clavier, une petite surcouche Javascript peut faire l'affaire.

Nissone a dit le

Je croyais que les lecteurs vocaux permettaient une navigation de "title" de lien en "title" de lien. Et même que certains lecteurs ne permettaient que la navigation par "title" et non par intitulé. Et donc que l'attribut devait reprendre a minima l'intitulé.

Quelqu'un peut m'éclairer ?

Si l'article ne parle que de la validité du code, cela ne change rien au caractère facultatif du "title". Mais il serait dommage de faire l'impasse dessus s'il est nécessaire à l'accessibilité.

goetsu a dit le

Pour info pour savoir comment écrire le contenu d'un alt :
http://dev.w3.org/html5/alt-techniques/

BeliG a dit le

"alt doit être présent sur toutes les images, même s’il peut rester vide (pour les images purement décoratives)"

Sauf cas rares et spécifiques (par exemple les puces ou... ou... ??), les images décoratives n'ont rien à faire dans le code HTML.

Victor BRITO a dit le

@BeliG : Sauf que l'attribut alt est obligatoire pour les éléments img et area (du moins en HTML 4 et XHTML 1). De plus, si tu ne renseignes pas l'attribut alt, fût-il vide, les lecteurs d'écran restitueront le nom de fichier de l'image appelé, alors qu'ils ignoreront toute image pourvu d'un attribut alt vide.

Laurie-Anne a dit le

@Nico3333fr : je pense que l'exemple donné par Tony est très bon.

@nell : le lien était déjà donné dans les ressources.

@Nissone : nope, il n'est pas nécessaire pour l'accessibilité, l'intitulé du lien étant suffisant pour naviguer par liens avec un lecteur d'écran.

@BeliG : euh... rien à voir avec l'article. Et même si la plupart des images décoratives sont effectivement mieux dans le CSS (même les puces) certaines images peuvent être placée dans le code HTML (illustration d'article, par exemple : l'image n'apporte rien en terme de contenu mais il serait idiot de la mettre dans le CSS).

JackNUMBER a dit le

Merci pour la mise au point :)

BeliG a dit le

@Laurie-Anne : Rien à voir avec l'article, alors pourquoi tu mets en ressource externe le lien vers l'article "Des images accessibles" d'Openweb ? ;)

Un débutant qui tombe sur l'article et qui va lire "l'attribut alt peut rester vide pour les images décoratives", il est quand même orienté vers une mauvaise piste...

BeliG a dit le

@Laurie-Anne : Rien à voir avec l'article, alors pourquoi tu mets en ressource externe le lien vers l'article "Des images accessibles" d'Openweb ? ;)

Un débutant qui tombe sur l'article et qui va lire "l'attribut alt peut rester vide pour les images décoratives", il est quand même orienté vers une mauvaise piste...

Hermann a dit le

Bonjour,
A propos du TITLE :
"Il ne doit pas être utilisé sur les images (sauf cas extrêmement spécifiques)."
C'est un peu excessif Laurie-Anne.
Le title sur l'image peut et devrait essentiellement servir à afficher des métadonnées (par exemple dans le cas d'une peinture > le format de la peinture, la technique employée, etc.).

Felipe a dit le

@sharky : dans le cas d'un logo qui est un lien 'Retour à l'accueil - nomdusite', l'attribut title se place sur l'élément a et pas sur l'élément img qu'il contient.

@Nissone : la navigation peut en effet se faire de lien en lien. Ce qui est perçu pour chacun peut être l'intitulé (par défaut) ou si l'utilisateur modifie ses réglages/préférences, le title uniquement (rare) ou le plus long entre l'intitulé et l'attribut title. Mais ça c'est uniquement s'il y a un title. Sans title pas de choix à faire et le lecteur d'écran lit évidemment l'intitulé.

Donc non il ne faut pas ajouter de title quand ce n'est pas nécessaire mais oui, si on doit ajouter un, il doit à la fois reprendre l'intitulé et y ajouter une ou plusieurs infos pertinentes.

Gili a dit le

Merci pour cette mise au point j'en avais bien besoin ! ^^

HS : wouéé je viens à la Kiwi !!

Laurie-Anne a dit le

@Belig : Je ne suis pas sûre que tu aies bien tout compris, nulle part je ne dis que les images décoratives ne doivent pas être placée dans le CSS, mais que quand elles sont dans le code HTML l'attribut alt doit être vide. Accessoirement, il n'y a aucune obligation à placer les images décoratives dans le CSS.

Prend par exemple : http://www.rue89.com/ les images d'illustration des articles sont décoratives (pas de alt nécessaire) et il serait pourtant idiot de les placer dans le CSS...

Pour ce qui est des ressources, ce sont des informations complémentaires qui peuvent être une piste de poursuite de recherche intéressante, elles sont dans le même thème que l'article, mais ne sont pas l'article ; il ne faut pas tout mélanger.

nhoizey a dit le

Voici les recommandations de Laurent Denis lors d'une discussion lancée sur la liste accesstech@, qui me semblent remettre en cause une partie des recommandations exprimées ici :

http://archives.rezo.net/archives/accesstech....

http://archives.rezo.net/archives/accesstech....

Constuview a dit le

Discutable donc mais ça fait longtemps qu'en SEO on se pose la question du bonus qu'apporterait le title sur une image, en spécifiant un contenu pertinent en rapport avec le sujet de la page que l'on veut optimiser. P'têt, p'têt pas, un peu convaincant quand on y pense le title ayant logiquement un certain poids parmi les attributs.

Mais la SEO trahit parfois la sémantique pure...

DvN a dit le

@nhoizey : c'est ce que je fais tout le temps, mettre l'ALT tout le temps et le TITLE la même chose que l'attribut ALT