Alt title images et liens

Bonjour,

Pardonnez moi ces questions un peu basiques. J'ai beaucoup de difficulté à comprendre l'utilisation des balises alt et title pour les images et les liens.

Ce que j'ai compris c'est que la balise alt devait accompagner une image lorsque celle-ci est porteuse de sens. Donc elle ne serait pas nécessaire pour les images "décoratives" : par exemple une illustration d'un article avec une image un peu générique, genre poignée de mains quand on parle d'un contrat. Par contre, à quoi sert la balise title ?

Pour les liens, est-ce que la balise "title" est nécessaire ? Qu'apporte-t-elle ? Elle est visible au survol mais sinon a-t-elle un intérêt pour l'accessibilité d'un site ?

Merci beaucoup pour vos éclairages

L'attribut "alt" est obligatoire en XHTML et en accessibilité pour TOUTE balise <img>.
La distinction entre une image décorative et une image porteuse d'information tient au contenu de l'attribut "alt".

- Dans le cas d'une image de décoration (qui ne transmet aucune information), le "alt" doit être vide (<img src="monImageDeDecoration.gif" alt="">).

- Dans le cas d'une image porteuse d'information (comme un texte ou une image utilisée comme lien) il est nécessaire d'offrir une alternative qui restitue l'information à l'identique (<img src="monImageTexte" alt="Le texte de mon image">).

Pour l'attribut "title", il est utilisé pour apporter un complément d'information si nécessaire. Il est inutile d'ajouter un "title" sur un lien dont l'intitulé est clair et compréhensible. Il peut être utile pour ajouter un détail sur un élément dont le sens n'est pas évident (un lien "lire la suite" peut nécessiter l'emploi d'un title qui apportera le complément d'information manquant. Par exemple : "lire la suite de l'article - comprendre le fonctionnement des attributs alt et title" )
Modifié par Jordi (26 Oct 2010 - 14:37)

Bonjour,

Attention à utiliser les bons termes. Dans le contexte de ta question, alt et title sont des attributs, et non des balises. C'est qu'il faut noter qu'il existe aussi l'élément (ou la balise) title pour un document.

Pour le alt, tu sembles avoir bien compris son fonctionnement. S'il s'agit d'une image décorative, il faut mettre un alt vide.

Pour le title, cet attribut fait apparaître une infobulle au passage de la souris. Il peut aussi s'avérer utile pour les lecteurs d'écran. Il faut le mettre uniquement si cela apporte une information supplémentaire au lien. Un exemple simple où l'intitulé du lien doit être complété par l'attribut title :

<a href="plus.htm" title="En savoir plus sur les patates">En savoir plus...</a>

Tu peux en apprendre davantage sur l'attribut alt avec l'article Bien utiliser le texte alternatif.

thelma a écrit :
Bonjour,

Pardonnez moi ces questions un peu basiques. J'ai beaucoup de difficulté à comprendre l'utilisation des balises alt et title pour les images et les liens.

Ce que j'ai compris c'est que la balise alt devait accompagner une image lorsque celle-ci est porteuse de sens. Donc elle ne serait pas nécessaire pour les images &quot;décoratives&quot; : par exemple une illustration d'un article avec une image un peu générique, genre poignée de mains quand on parle d'un contrat. Par contre, à quoi sert la balise title ?

Pour les liens, est-ce que la balise &quot;title&quot; est nécessaire ? Qu'apporte-t-elle ? Elle est visible au survol mais sinon a-t-elle un intérêt pour l'accessibilité d'un site ?

Merci beaucoup pour vos éclairages

Bonjour,

L'attribut alt (une "balise" c'est <div> ou </p> ou <hr />, un "élément" c'est "a" (balise ouvrante <a href="">, contenu et balise fermante </a>, un "attribut" c'est class, id, href, alt, ... dans la balise ouvrante) est toujours nécessaire mais il doit être vide (alt="") pour les images de décoration.
title n'a rien à faire sur une image, mais suite à la confusion entretenue par IE et ses bugs ...
EDIT: http://www.pompage.net/pompe/bien-utiliser-le-texte-alternatif/


Pour les liens, l'attribut title sert à "compenser" un intitulé qui ne serait pas très explicite par lui-même (soit pas très clair, soit qui pourrait porter à confusion avec un autre lien de la page). Si tu peux rédiger un intitulé explicite, c'est le mieux et pas besoin de title dans ce cas. Ca permet à tout le monde (handicapés ou pas) d'avoir l'info à la simple lecture de la page sans avoir besoin de survoler le lien ou pour les non-voyants de demander à leur lecteur d'écran de lire le title (et il reste les utilisateurs du clavier qui n'ont pas accès au title de toute façon)

Si ton lien n'est pas très explicite (ex: "Lire la suite") et que tu souhaites apporter un complément d'information, ce sera donc via le contenu de title. Dans ce cas, il faut commencer par reprendre l'intitulé du lien (ex: "Lire la suite") ET rajouter l'information (title="Lire la suite du tutoriel HTML5 c'est pas pour 2022") mais pas title="tutoriel HTML5 c'est pas pour 2022" alors que l'intitulé est "Lire la suite".
Autre exemple, le téléchargement de fichiers bureautiques:
[code=html]<a href="compte-rendu_2009.pdf" title="Télécharger le compte-rendu de l'amicale But 2009, format PDF 345 ko">Compte-rendu 2009</a>[code]
Les designers et chefs de projet aiment pas lire un lien comme "Télécharger le compte-rendu de l'amicale But 2009, format PDF 345 ko" répété 10 fois sur une page (moi non plus à vrai dire), mais c'est important de préciser le format du document si c'est pas affichable dans le navigateur comme du HTML (j'ai pas de programme pour lire du .docx), le poids (5 Mo alors que j'ai un modem 56 ko ou téléphone hors zone 3G, je télécharge pas), ...
Modifié par Felipe (26 Oct 2010 - 15:12)

Felipe a écrit :
title n'a rien à faire sur une image

Je ne suis pas de ton avis (sauf si tu parles uniquement d'une "image lien" dans le contexte de ta phrase). Prenons l'exemple d'une image qui ne fait pas l'objet d'un lien et qui véhicule une information par elle-même. Doubler l'alternative textuelle de l'image par un title me semble assez logique et pertinent. Reste la problématique de transmettre cette information pour un utilisateur naviguant au clavier.

Re-bonjour et merci à tous pour les explications.

Je vois qu'il faut que je fasse encore quelques efforts pour utiliser le bon vocabulaire

J'ai lu l'article de pompage.net, ce qui m'a permis de cerner un peu mieux l'usage de alt pour les images. C'est au fond davantage title qui m'intrigue. Je précise que j'utilise un CMS qui systématiquement me propose l' attribut "title" pour les liens et propose les attributs "alt" et "title" pour les images... Je bloque souvent au moment du remplissage, ne sachant pas quoi y mettre.

En fait, je suis actuellement en train de remplir un site où il y a énormément de liens à faire avec différents types de document : lien externe vers des articles de sites publics, imprimé CERFA en PDF, liens internes... ça me paraît important d'informer les utilisateurs sur la nature du lien, et surtout d'avoir une méthode uniforme sur l'ensemble du site.

Je vous donne un exemple de ce que j'ai fait, mais avec vos remarques je crois que c'est à reprendre à zéro.

<p><a href="http://vosdroits.service-public.fr/particuliers/R149.xhtml" title="Accéder au formulaire de demande de logement social">Formulaire de demande de logement social</a> (sur le site service-public.fr - CERFA n°14069*01)</p>
<p><a href="http://www.caf.fr/wps/portal/!ut/p/c1/04_SB8K8xLLM9MSSzPy8xBz9CP0os3hLf2dfY0cn3xAPb1NXA6MAzyB3zxBHYwN_E6B8JJK8ZWiQqYGRqZerj4WHmbGBgQGKblRZd3cD_XCQffj1o8gHGLqaAeUtzXy9Qp2N4PIGOICjgb6fR35uqn5BboRBZkC6IgA5OeDM/dl2/d1/L2dJQSEvUUt3QS9ZQnB3LzZfOU9DTTNBQk1USEs1RTAyUElSR0lUQTMwTzQ!/" title="Simulation des aides au logement CAF">Simulation des Aides au logement CAF</a> (Lien vers la CAF)</p>
<p><a href="http://www.caf.fr/wps/portal/particuliers/formulaires/metropole/al" title="Formulaire d'aide au logement CAF">Formulaire de demande d'aide au logement CAF</a> (Lien vers la CAF)</p>

Suite à vos remarques est-ce que comme ça c'est mieux ?

<p><a href="http://www.###.cci.fr/fileadmin/user_files/Borderaux/Dossier_complet_LOCA-PASS.pdf" title="Fichier PDF - 97,50 Ko"><img src="/images/download.gif" border="0" width="24" height="24" style="vertical-align: middle;" /> Télécharger le dossier de demande de LOCA-PASS </a></p>

En tout cas merci, j'y vois un peu plus clair

EDIT : je viens de penser à ce que yodaswii a dit par rapport à la navigation au clavier. L'attribut "title" n'est pas retranscrit, donc on fait comment dans ce cas ?
Modifié par thelma (26 Oct 2010 - 18:20)

thelma a écrit :
Je précise que j'utilise un CMS qui systématiquement me propose l' attribut "title" pour les liens et propose les attributs "alt" et "title" pour les images... Je bloque souvent au moment du remplissage, ne sachant pas quoi y mettre.

Pour résumer, image véhiculant du sens :
- sans lien : attribut alt significatif (pouvant être doublé d'un attribut title si l'image en elle-même n'est pas significative) ;
- avec lien : attribut alt significatif (fonction du lien) et éventuellement un title sur le lien pour compléter l'attribut alt (le title doit contenir la "signification d'origine" en plus du complément).

Tes 3 premiers exemples n'ont pas besoin de ces attributs title : aucun complément.

Si je prend ton exemple (la logique est incomplète) :

<p><a href="..." title="Fichier PDF - 97,50 Ko"><img src="..." height="24" width="24" /> Télécharger le dossier de demande de LOCA-PASS</a></p> 

Il faut :
- indiquer une alternative textuelle vide pour l'image (lien composite) ;
- modifier le title du lien pour reprendre, en plus du complément, sa fonction.

Soit (par exemple) :

<p><a href="..." title="Télécharger le dossier de demande de LOCA-PASS - Fichier PDF - 97,50 kilo octets"><img src="..." alt="" height="24" width="24" /> Télécharger le dossier de demande de LOCA-PASS</a></p>

Ceci dit, il est plus pertinent d'inclure ces informations de format et de poids dans le lien (ou périphériquement) plutôt que dans l'attribut title .

thelma a écrit :
EDIT : je viens de penser à ce que yodaswii a dit par rapport à la navigation au clavier. L'attribut "title" n'est pas retranscrit, donc on fait comment dans ce cas ?

Je dirai essayé au maximum d'éviter d'avoir recours à title et adopter une approche comme celle indiquée dans mes propos précédents. C'est une vrai problématique (pas liée au concepteur à proprement parlé).

J'espère ne pas trop avoir embrouillé. Si certains de mes propos sont erronés / à côté de la plaque / incomplets, je ne doute pas que d'autres experts me corrigeront .
Modifié par yodaswii (27 Oct 2010 - 01:59)

Merci beaucoup yodaswii ! C'est vraiment très sympa.

yodaswii a écrit :
- avec lien : attribut alt significatif (fonction du lien) et éventuellement un title sur le lien pour compléter l'attribut alt (le title doit contenir la "signification d'origine" en plus du complément).

Qu'entends- tu par "signification d'origine" ? Je ne suis peut-être pas très réveillée mais ça ne me parle pas vraiment.

Je reprendre mon travail à partir de tes conseils sur les liens sans image.

Merci encore et bonne journée !
Modifié par thelma (27 Oct 2010 - 09:40)

De rien .

thelma a écrit :
Qu'entends-tu par "signification d'origine" ? Je ne suis peut-être pas très réveillée mais ça ne me parle pas vraiment.

J'aurai plutôt dû parler d'intitulé de lien . Si je reprend le lien vers ce PDF, tu avais :
- un titre de lien (title) : "Fichier PDF - 97,50 Ko" ;
- un intitulé de lien : "Télécharger le dossier de demande de LOCA-PASS".

Les assistances techniques proposent de lire soit le titre soit l'intitulé (à préciser / compléter par d'autres).

En lisant juste le titre, on perd l'information principale ; il faut donc associer les deux :
"Télécharger le dossier de demande de LOCA-PASS - Fichier PDF - 97,50 Ko".

Espérant avoir été plus clair .
Modifié par yodaswii (27 Oct 2010 - 10:17)

Ok ça va, c'est plus clair . Je devrais m'en sortir maintenant.
Merci.

yodaswii a écrit :


Je ne suis pas de ton avis (sauf si tu parles uniquement d'une &quot;image lien&quot; dans le contexte de ta phrase). Prenons l'exemple d'une image qui ne fait pas l'objet d'un lien et qui véhicule une information par elle-même. Doubler l'alternative textuelle de l'image par un title me semble assez logique et pertinent. Reste la problématique de transmettre cette information pour un utilisateur naviguant au clavier.

Tu as toute la place que tu veux dans le alt d'une image, personne ne s'en apercevra à part ceux qui lisent les alt et title c'est à dire les non-voyants (graphiquement aucune conséquence, un chef de projet ou un graphiste obtu pardon "peu sensibilisé à l'accessibilité" ne viendront pas râler sur ce coup-là).
Du coup pourquoi avoir recours à title si alt fait déjà l'affaire sans aspect négatif ?

Je ne suis pas d'accord : beaucoup de gens lisent les title Surtout sur les petits pictos incompréhensibles qui sont censés fournir une information importante de manière ultra condensée.
Les développeurs appellent ça "tooltip" : le petit texte qui apparait au-dessus de l'image pour en expliciter le sens.
Le alt n'est pas géré de la même façon par tous les navigateurs et seul le title permet l'affichage du "tooltip".

Jordi a écrit :
Je ne suis pas d'accord : beaucoup de gens lisent les title Surtout sur les petits pictos incompréhensibles qui sont censés fournir une information importante de manière ultra condensée.

Oui, mais là le problème est autre : l'image devrait être compréhensible.

Jordi souligne justement mon idée et répond par la même occasion à Felipe. Le title pour moi n'est pas uniquement destiné à une "restitution non graphique".

Laurie-Anne a écrit :
Oui, mais là le problème est autre : l'image devrait être compréhensible.

Cela peut être une problématique mais sur de l'applicatif Web très spécifique (et autres cas à réfléchir), certains pictogrammes peuvent être compréhensibles et nécessiter tout de même cette information (fameuse tooltip).

Plus je lis et participe à des discussions sur cet attribut title plus je me dis qu'il a un statut bâtard et qu'il y a vraiment besoin d'éclaircir l'utilité de celui-ci.

Bonsoir,

Laurie-Anne a écrit :
Oui, mais là le problème est autre : l'image devrait être compréhensible.

Il m'arrive assez souvent d'avoir à réaliser des pictogrammes. C'est un exercice que j'apprécie énormément car il s'agit en quelques traits de traduire une action parfois tordue. Pas évident non ?

Parfois, ton client te demande de réaliser un pictogramme 10x10 pixels qui doit déclencher une action bien spécifique d'une application bien spécifique d'un métier lui aussi bien spécifique.

bref : de quoi brainstormer jusqu'à pas d'heure pour un résultat pas toujours compréhensible sauf par moi bien entendu

C'est là que le "tooltip" dont parle Jordi entre en jeu et vient m'aider parce que je dois livrer mes maquettes fissa vu que j'ai perdu un temps fou à brainstormer et que j'ai mal au crane.

On est ici dans un cas ou l'attribut title va sortir un peu de son utilisation classique consistant à apporter un complément d'informations sur un intitulé de lien, puisqu'ici son intérêt consiste à déclencher l'affichage de notre fameux tooltip.

Cela peut s'avérer fort utile pour une personne qui présente des problèmes cognitifs.

Aujourd'hui, de plus en plus de webdesigner reproduisent cet effet de tooltip avec des solutions pas toujours accessibles, alors si on a la possibilité de venir en aide à l'utilisateur sans compromettre l'accessibilité déja effective par le biais de l'attribut alt, pourquoi s'en priver ?
Modifié par jeanmark (11 Nov 2010 - 01:49)

jeanmark a écrit :
Aujourd'hui, de plus en plus de webdesigner reproduisent cet effet de tooltip avec des solutions pas toujours accessibles, alors si on a la possibilité de venir en aide à l'utilisateur sans compromettre l'accessibilité pourquoi s'en priver ?

Ils reproduisent ces effets de tooltip pour arriver à des solutions plus ergonomiques qui augmentent les chances de faire passer l'information. Un tooltip réalisé avec title ça se zappe très facilement, pas d'accès possible sur écran tactile, c'est très rarement lu par un lecteur d'écran, etc.

Si la solution CSS/JavaScript utilisée est un peu bien fichue, ça peut au contraire être plus accessible que l'utilisation de title.

Et puis en plus dans le tooltip bien fichu on peut mettre tout plein plein de trucs.

Mais comme tu le souligne cela relève plus de l'ergonomie voire parfois du marketing (dans l'hypothèse ou tu profiterais de ton tooltip pour insérer des liens vers d'autres contenus, faire la promo d'autres produits, etc etc.)

Mais la c'est plus que renseigner efficacement sur la fonction de notre picto.

L'utilisation du title par un lecteur d'écran comme jaws n'est en effet pas paramétrée par defaut. Au final, De ce côté il faut mieux capitaliser sur alt on est bien daccord comme sur des intitulés de liens explicites.

Sans compter que tu n'as malheureusement pas toujours la possibilité d'implémenter facilement ce type de solution sur des applications web type progiciel et truffées de pictos tout petits petits. Par expèrience, c'est déjà pas évident d'intervenir sur l'habillage graphique de ces engins alors j'imagine même pas pour un tooltip un peu travaillé, et qui devra avoir une alternative ?


Le title je suis pas un super fan non plus, seulement utilisé dans le cas exposé ici, il ne nuit pas à l'accessibilité et permet je pense de valider les critères Accessiweb.
Modifié par jeanmark (11 Nov 2010 - 02:54)

Pour valider AccessiWeb sur un bouton-picto, il te suffit de faire:

<img src="button-nomdelaction.png"
     alt="Nom de l'action">

Si tu estimes que le pictogramme est peu claire, ce qui est un problème ergonomique et pas un problème d'accessibilité, tu peux tenter de l'expliciter pour certains utilisateurs avec un title:

<img src="button-nomdelaction.png"
     alt="Nom de l'action"
     title="Nom de l'action">

Ou avec un mécanisme plus poussé. Mais une fois encore ce n'est pas de l'accessibilité (sauf si le mécanisme de tooltip créé introduit des problèmes d'accessibilité...).

Bonjour à tous,

A aucun moment je n'ai laissé entendre que l'utilisation d'un title conditionne (encore une fois dans ce cas) la mise en accessibilité.

L'intérêt de la solution, dans le cas présenté ici, se situe bien au niveau de l’affichage du tooltip pour certains utilisateurs. ce qui relève plus du domaine de l'ergonomie.

Pour ma part je valide la solution.
Modifié par jeanmark (11 Nov 2010 - 12:53)

En fait, l'exemple de Florent doit bien être compris comme une image non cliquable et donc sans action possible (le terme bouton-picto peut être mal compris). Le title n'est alors plus dans un cadre ergonomique quand il se trouve sur un lien.

Dans un contexte d'image non cliquable, le title n'est qu'un plus ergonomique pour véhiculer un sens que l'image ne saurait transmettre par elle-même à tous les utilisateurs.

L'accessibilité n'est pas là pour faire comprendre mais pour que chaque utilisateur ait la même information. D'où la remarque pertinente de Florent qui ne remet nullement en cause la bonne démarche ergonomique de jeanmark .