Remplir l’attribut  » alt »

Nous avions vu qu’il est important de renseigner les attributs  » alt » et « title » à l’attention des logiciels pour malvoyants mais aussi pour les moteurs de recherche.

J’ai constaté que pas mal d’entre vous ne savent pas trop quoi mettre et cherchent des informations à ce sujet.

Pour bien comprendre, nous allons reprendre les bases du html et voir ce que nous dit le W3C à ce sujet.

L’attribut title

Pour le W3C

cet attribut fournit des informations consultatives concernant l’élément sur lequel il se place.

et

qu’il s’applique à tous les éléments sauf  » Tous les éléments, sauf BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, TITLE « 

Franchement, je me vois mal l’utiliser avec certaines balises telles que  » td » ou  » ul » voire  » tr » …
mais il se peut que certains cas l’exigent.

Attribut  » alt »

Pour cet attribut, le W3C est beaucoup plus bavard

Cet attribut spécifie un texte de remplacement pour les agents utilisateurs qui sont incapables d’afficher les images, les formulaires ou les applets. La langue du texte de remplacement est spécifiée par l’attribut lang.

  • Ne pas spécifier un texte de remplacement dépourvu de signification (par exemple, « texte fictif »). Cela va non seulement frustrer l’utilisateur, mais aussi ralentir les agents utilisateurs qui doivent convertir le texte en parole ou en sortie Braille.

Plusieurs éléments non-textuels (IMG, AREA, APPLET et INPUT) laissent l’auteur spécifier un texte de remplacement qui sert de contenu quand l’élément ne peut pas être restitué normalement. La spécification d’un texte de remplacement représente une aide pour les utilisateurs ne disposant pas de terminaux d’affichage graphiques, pour les utilisateurs dont les navigateurs ne reconnaissent pas les formulaires, pour les utilisateurs avec des déficiences visuelles, pour ceux qui utilisent des synthétiseurs de parole, ceux qui ont désactivé l’affichage des images de leurs agents utilisateurs graphiques, etc.

On doit spécifier l’attribut alt sur les éléments IMG et AREA. Il est optionnel pour les éléments INPUT et APPLET.

Alors qu’un texte de remplacement peut être très utile, on doit l’employer à bon escient. Les auteurs devraient observer les principes directeurs suivants :

  • Ne pas spécifier un texte de remplacement non pertinent lors de l’inclusion d’images destinées à la mise en forme d’une page par exemple, la définition alt= »Puce rouge » serait inadéquate pour une image qui ajoute une puce rouge pour décorer un titre ou un paragraphe. Auquel cas, le texte de remplacement devrait être la chaîne vide («  »). De manière générale, on conseille aux auteurs d’éviter l’emploi d’images pour la mise en forme des pages ; les feuilles de style sont prévues à cet effet ;

On peut donc imaginer des balises avec à la fois l’attribut title et l’attribut alt. Doivent-ils avoir le même texte ?
Si  » title » reste un titre pour l’image,  » alt » est un texte alternatif qui doit expliquer le sens de l’image.
Si votre image est un pictogramme, une flèche de retour vers une page par exemple, il est quand même préférable de préciser  » retour vers la page…  » que  » flèche ».
J’ai lu quelque part sur le site Alsacréation qu’en fait le texte alternatif doit pouvoir se substituer à l’image sans rompre la logique de la page. Le test à faire est de lire le flux du texte inclus dans la page en supprimant l’image. Il me semble que lorsque le texte s’inscrit dans l’ensemble sans rupture du sens on a là une très bonne alternative à l’image. Mais je n’ai pas dit que c’est forcément simple à mettre en pratique ! :)

Cette entrée a été publiée dans Les bases, SEO, avec comme mot(s)-clef(s) , , , , , , , , . Vous pouvez la mettre en favoris avec ce permalien.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>