[résolu] Gérer les attributs alt et title sur IE

Hello,

J'ai cherché dans les astuces du site mais je n'ai pas trouvé la recommandation quand à la manière d'utiliser les propriétés alt et title sur IE7, celui-ci prenant en compte l'attribut de la propriété alt au lieu du title lors du survol d'un lien accessible via une image.

Pour ma part j'injecte le title directement dans les balises de l'image à côté du alt.

Mais je ne sais pas s'il vaut mieux tout laisser normalement et recopier de manière identique le contenu de ces 2 propriétés ?

Si un intégriste de l'accessibilité passe par là, j'écouterai ces conseils religieusement

Merci
Modifié par AspiGeek (12 Aug 2009 - 00:44)

Bonjour,

Pour moi :
* title c'est pour les liens
* alt pour les images

La plupart du temps le title est inutile (mal implémenté, redondance...). Alt doit être et rester une alternative à l'image.

Bonjour,

Ne pas se préoccuper du rendu de l'attribut alt par IE 6-7. Il n'est pas catastrophique, et n'appelle pas de correctif particulier (qui pourrait mettre à mal l'accessibilité si mal fichu). Je recommande l'un des deux états d'esprit suivant:

1. S'en ficher royalement.
2. Trouver ça dommage, mais se consoler en se disant qu'IE8 corrige heureusement ce problème, que l'avenir est radieux (le ciel sera bleu et les oiseaux chanteront).

PS: je précise tout de même que le rendu de l'attribut alt avec IE 6-7 via un lecteur d'écran ne pose pas de problème. Le seul problème constaté est, en mode graphique, l'affichage d'un tooltip avec le contenu de l'attribut lors du survol prolongé d'une image par le pointeur de la souris.

PPS: si tu penses avoir un problème d'ergonomie précis lié à ce rendu de l'attribut alt, merci de donner un code d'exemple, de préciser le rendu obtenu et ce que tu souhaiterais.
Modifié par Florent V. (11 Aug 2009 - 20:23)

Ok merci pour les réponses.

Sinon mon astuce de mettre le title et le alt dans la balise img pose un problème particulier pour les synthétiseurs vocaux ou pour l'accessibilité car j'ai mis ce "correctif" un peu partout...

et me réveille que maintenant

Edit: Merci Florent, non pas de problème d'ergonomie particulier mais je remettais en cause ma magouille pour IE
Modifié par AspiGeek (11 Aug 2009 - 20:29)

AspiGeek a écrit :
Sinon mon astuce de mettre le title et le alt dans la balise img pose un problème particulier pour les synthétiseurs vocaux ou pour l'accessibilité car j'ai mis ce "correctif" un peu partout...

Faut voir. Code HTML?

Ok, voici un bout de code tout chaud...

<a class="voirPlus" href="compteRendu.php">
<img src="commun/picture/detail.png" width="87" height="24" 
title="Lire le compte-rendu du stage..." alt="Aller vers l'espace compte-rendu...">
</a>

Modifié par AspiGeek (11 Aug 2009 - 20:32)

Ce code ne pose à priori pas de problème. Je placerais le title sur le lien plutôt que sur l'image, mais c'est un détail.

Je me demande par contre ce que cache l'image. Est-ce un texte en image, et si oui quel est le texte? Est-ce un pictogramme?

Pour obtenir une ergonomie équivalente en restitution visuelle ou audio, il faudrait que le texte alternatif de l'image corresponde au texte porté par l'image (sans différence sauf dans le cas d'une abréviation), ou à l'information facilement compréhensible en voyant le pictogramme.

En gros si l'image est un symbole qui s'interprète comme «télécharger», on peut avoir:

<a href="..." title="Télécharger le document «titre du document»"> 
  <img src="icons/document-download.png" alt="Télécharger le document" />
</a>

Ici le title sur le lien est une information facultative -- qui, concrètement, pourra être consultée volontairement par l'utilisateur que le mode de restitution soit visuel ou non... mais qui sera probablement ignorée par nombre d'utilisateurs. Cette information facultative est rédigée de manière à donner la même information que le contenu du lien, en ajoutant certaines précisions utiles.

Un autre cas de figure assez classique, toujours pour le téléchargement d'un document, c'est lorsque le titre du document sert d'intitulé à l'action. Ici, pas d'image, mais la logique pour l'emploi de title est la même:

<a href="..." title="Télécharger le document «Titre du document»"> 
  Titre du document
</a>

Déclinons encore: on peut avoir un titre de document accompagné par un pictogramme symbolisant le téléchargement. Ce qui nous donne:

<a href="...">
  <img src="icons/document-download.png" alt="Télécharger" />
  Titre du document
</a>

ou encore

<a href="...">
  Titre du document
  <img src="icons/document-download.png" alt="[téléchargement]" />
</a>

Comme on le voit, les possibilités sont variées. Ce qu'il faut retenir, c'est que dans de nombreux cas la réflexion doit se faire en amont, au niveau de l'ergonomie. Il s'agit juste d'inclure l'accessibilité dans l'ergonomie web: quel mécanisme présente une ergonomie satisfaisante dans les deux principaux modes de rendu (visuel et textuel)? Pour des applications web avec beaucoup d'actions et peu de contenus, ça peut être difficile à trouver, mais pour la plupart des sites on trouve facilement des solutions acceptables.

Dans le code que tu donnes, je m'interroge un peu sur ton title et ton alt qui semblent dire la même chose avec deux tournures de phrase différentes (la deuxième est d'ailleurs moins précise).
Modifié par Florent V. (11 Aug 2009 - 21:09)

En passant, titre du sujet modifié:

Gérer les propriétés <alt> et <title> sur IE -> Gérer les attributs alt et title sur IE

Parce que faut pas déconner quand même.
Modifié par Florent V. (11 Aug 2009 - 21:46)

Merci pour ces précisions Florent.

Mon exemple utilise une image "Détail" donc je me suis bien planté en effet....
Mais c'est aussi pour ça que j'ai percuté sur mon correctif car si je mets "détails" ou "en savoir plus" dans mon alt alors sur IE ça va être redondant avec le tooltip d'où l'inclusion supplémentaire du title qui corrige l'affaire.

Concernant mon exemple tu as raison mon alt n'est pas bon du tout, je devrais reporter le texte de l'image.

Par contre je pensais que le title sur un lien était vivement conseillé mais ça n'a pas l'air de t'avoir surpris le fait que je cumule les deux attributs sous la balise image car si ça ne pose pas plus de problème alors je pense que ce moyen est bon pour corriger la gestion du tooltip sour IE6 et IE7.

AspiGeek a écrit :
je pense que ce moyen est bon pour corriger la gestion du tooltip sour IE6 et IE7

Corriger la gestion du tooltip sous IE 6-7, cela signifie qu'on trouve un moyen d'inhiber l'affichage du contenu d'un attribut alt dans un tooltip au survol d'une image. Ça, ce serait une correction.

Autrement, non, ce n'est pas une correction. Ça s'appelle harmoniser le comportement des navigateurs en affichant un tooltip pour tous les navigateurs (via un title qui prend le pas, dans IE 6-7, sur le alt).

Mon approche est la suivante:
1. Si on ne souhaite pas de tooltip, on n'utilise pas title, et on ignore royalement le comportement d'IE 6-7 avec alt.
2. Si on souhaite un tooltip, alors on utilise title (sur l'image ou en amont), avec un contenu spécifique qui correspond à l'ergonomie souhaitée. Ça peut être une redite du alt dans certains cas, ou une information plus complète dans d'autres (le plus souvent).

Le reste ne me préoccupe pas. Si tu vois un exemple problématique avec cette approche, n'hésite pas à donner un exemple (code, comportement attendu, comportement problématique).

Florent a écrit :
Le reste ne me préoccupe pas. Si tu vois un exemple problématique avec cette approche, n'hésite pas à donner un exemple (code, comportement attendu, comportement problématique). cligne

Tu es train de demander un exemple problématique ah un mec qui voulait savoir s'il y en avait un

Merci pour tes précisions, c'est clair pour moi.