Est-ce détourner l'attribut title ?

[shangailily]

Bonjour à tous,

Je me demandais si le fait de créer un faux lien (c'est-à-dire un lien qui n'a aucune destination) dont la fonction est de faire apparaître l'info-bulle grâce au title est conforme et surtout accessible ?

Pour situer le contexte, imaginez dans un formulaire, un champ un peu complexe nécessite une explication, au lieu d'avoir un lien qui ouvre une pop-up d'dexplication, on a un point d'interrogation lequel est un faux lien qui ouvre l'info-bulle lorsque le curseur est sur celui-ci.

Je peux faire cela, qu'en pensez-vous ?

[Sebastien]

Pourquoi ne pas mettre plutot l'explication dans le champ texte du formulaire ?

[shangailily]

Ben, c'est mieux de laisser les champs vides dès qu'on arrive sur le site.

Ce n'est pas génial de laisser des valeurs par défaut, il faut alors mettre un focus pour enlever, ce n'est pas terrible pour les personnes ayant des problèmes moteurs, non ?

[Dadou]

Au lieu d'un lien, je met une petite image avec l'attribut alt, en plus c'est plus parlant a mon avis =>

Edit Monique :

Attention, cette solution n'est pas conforme (voir les messages 13 et 14) et ne "fonctionne" qu'avec IE

Modifié 9 Septembre 2005 par Monique

[Country]

Au lieu d'un lien, je met une petite image avec l'attribut alt, en plus c'est plus parlant a mon avis =>

<{POST_SNAPBACK}>

Une petite image avec l'attribut title tu veut dire

Modifié 8 Septembre 2005 par Country

[buzzistic]

La solution toute simple pour un formulaire :

<input name="Email" size="15" title="votre adresse e-mail" type="text">

L'attribut "title"

[minirop]

Une petite image avec l'attribut title tu veut dire 

<{POST_SNAPBACK}>

non non c'est ALT pour les images

[CarGoZ]

Heu c'est alt si l'image ne s'affiche pas mais title pour le texte au survol de la souris non ?

Cependant je croit que IE affiche alt comme commentaire si il n'y a pas de title ...

M'enfin je suis plus trop sur !

+++

[Dadou]

je confirme alt,

mais la solution de tribords est interessante, sauf que l'image, je pense qu'elle est un peu plus intuitive, c'est à dire que l'usager ira plus facile la survoler

[Country]

Heu c'est alt si l'image ne s'affiche pas mais title pour le texte au survol de la souris non  ?

Cependant je croit que IE affiche alt comme commentaire si il n'y a pas de title ...

M'enfin je suis plus trop sur ! 

+++

<{POST_SNAPBACK}>

C'est ça, donc si tu met ton commentaire dans le alt (qui n'est pas fait pour ça) seuls les utilisateurs de IE pourront voir le texte au survol de l'image (sachant que IE est en tord dans ce cas là !).

La solution est de mettre ton texte dans l'attribut title de l'image et tout le monde pourra le voir lors du survol de l'image.

Pour une image comme celle de Dadou le alt (qui est le texte alternaatif à l'image dans le cas où elle ne pourrait pas s'afficher) serai du genre '?'.

[shangailily]

La solution de mettre le title dans l'input est une bonne idée mais effectivement, cela risque de ne pas être assez intuitif.

Le mieux est peut-être de mettre un title sur un faux lien car je peux aller jusqu'à 80 caractères alors qu'avec le ALT sur l'image, il y a uniqument 60 caractères, je suis plus limitée.

Oui, je confirme que la valeur du ALT qui apparait au survol sous IE est une entorse aux standards. C'est pourquoi, on ne le voit pas sous Mozilla et autres navigateurs.

[MS-DOS_1991]

Une solution pourrait également etre de mettre l'attribut title sur la balise <label>qui englobe le formulaire:

<p>
<label for="prenom">Prénom
<input type="text" name="prenom" id="prenom" value="" />
</label>
</p>

[Xavier]

je confirme alt,

<{POST_SNAPBACK}>

J'infirme !

Peut-être est-il nécessaire de rappeler ce que dit la spécification HTML 4.01 à ce sujet ?

alt = texte [CS]

    Cet attribut spécifie un texte de remplacement pour les agents utilisateurs qui sont incapables d'afficher les images, les formulaires ou les applets.

Donc alt doit être affiché en cas d'impossibilité d'afficher l'image. Le alt doit donc être redondant avec l'image. Quel intérêt de l'afficher en infobulle ?

En l'occurence, le alt devrait être un simple "?"

IE, lui, ne semble pas connaître les normes et affiche le texte alt en infobulle, ce qui est très mal pour tout un tas de raisons (en) (et pose de gros problèmes d'accessibilité comme indiqué dans le lien)

Pour en revenir au sujet, pourquoi ne pas tout simplement faire quelque chose comme

<p>
<label for="prenom">Prénom
<input type="text" name="prenom" id="prenom" value="" />
<span>Explications détaillées sur comment remplir le champ</span>
</label>
</p>

? C'est le plus simple et le plus visible (l'utilisateur peut ne pas remarquer une minuscule infobulle )

Modifié 8 Septembre 2005 par Xavier

[Dudu]

Salut,

On en lit des belles par ici

non non c'est ALT pour les images

non non c'est title pour les info-bulles pour les images. Si ton navigateur obsolète affiche les alt en info-bulle, grand bien lui fasse mais ce n'est pas le comportement 'normal' d'un navigateur 'normal' donc merci de ne pas donner aux membres des conseils erronés.

je confirme alt

je confirme: title

alt est le texte de substitution qui s'affiche si l'image n'est pas accessible: quel est le rapport avec une info-bulle ? Merci de répondre à cette question, parce que là franchement je m'interroge

Le mieux est peut-être de mettre un title sur un faux lien car je peux aller jusqu'à 80 caractères alors qu'avec le ALT sur l'image, il y a uniqument 60 caractères, je suis plus limitée.

À mon avis (très personnel) il est meilleur d'un point de vue accessibilité de faire un faux <abbr> ou un faux <acronym> qu'un faux <a>.

Je ne suis ni handicapé (moteur ou mental) ni déficient (visuel, auditif ..) et pourtant je navigue principalement au clavier. Ma souris ne me sert que rarement, elle reste sagement posée sur son tapis: c'est comme çà, c'est une habitude que j'ai prise je navigue beaucoup plus vite ainsi.

Et bien dans mon cas précis, ton faux lien ne me servira à rien:

* je vais voir un lien, je vais arriver jusqu'à lui avec ma touche Tab, je vais "cliquer" en appuyant sur Entrée ... et puis rien.

* alors que je verrais un abbr ou un acronym (de part son soulignement pointillé qui est une sorte de convention tacite) je prendrais ma souris pour aller le survoler.

=> Dans le 1er cas, je n'ai pas ton info-bulle. Dans le 2ème je l'ai

[shangailily]

Mmh Dudu, c'est fou comme on croit maîtriser tous les problèmes d'accessibilité (bien sûr que c'est impossible), j'ai oublié la navigation par tabulation...je n'ai pas du tout pensé à ABBR.

Mais quelque chose cloche dans ton propos, dans le premier cas, tu me dis : si tu utilises les touches, l'info-bulle du faux lien ne fonctionnera pas. Dans le second cas, tu parles de la navigation avec la souris, l'info-bulle de ABBR apparaîtra, mais qu'en est-il de la navigation par tab ?

[Kennyad]

abbr n'est pas réservé aux abréviations, cela ne serait-pas utiliser une balise pour un usage qui n'est pas le sien.

pourquoi ne pas accorder le fait d'utiliser une image avec un alt="?" et un title="Mon information en infobulle"

Cela serait accessible non?

[shangailily]

Si, si, on peut mettre sur une image ALT et TITLE en même temps, c'est tout à fait accessible.

[Monique]

Bonjour,

L'élément abbr

Indique une forme abrégée (par exemple, « WWW », « HTTP », « i.e. », etc.).

L'utiliser pour autre chose qu'une abréviation donnerait donc une fausse information sur la nature du contenu concerné :

Le balisage de ces structures fournit une aide précieuse aux agents utilisateurs et aux outils tels que les vérificateurs d'orthographe, les synthétiseurs de parole, les systèmes de traduction automatique et les moteurs de recherche.

L'utiliser dans le cadre de la question soulevée par shangailily me semble donc à exlure.

L'attribut title peut s'utiliser avec tous les éléments, sauf base, basefont, head, html, meta, param, script, title

Cet attribut fournit des informations consultatives concernant l'élément sur lequel il se place.

Reste à attirer l'attention de l'internaute sur l'existence de ce texte explicatif. Dans le cas d'un navigateur graphique, la présence d'un élément abbr est signalée par un soulignement en pointillé.

Il serait possible d'attribuer un tel soulignement au texte concerné par un attribut title à l'aide d'une feuille de style.

Par contre pour la navigation au clavier, si le focus se place bien sur un lien ou un champ de formulaire, ce n'est pas le cas pour un titre, un paragraphe...

Et là, je ne sais pas trop comment faire sans passer par Javascript (onfocus)

[Monique]

Pourquoi ne pas mettre plutot l'explication dans le champ texte du formulaire ?

<{POST_SNAPBACK}>

Le problème dans ce cas, c'est que l'information disparaît après avoir cliqué dans le champ concerné.

On ne peut donc pas la relire si nécessaire

[Denis]

Si vous me le permettez, revenons un peu à l'essence de la question initiale...

Je me demandais si le fait de créer un faux lien (c'est-à-dire un lien qui n'a aucune destination) dont la fonction est de faire apparaître l'info-bulle grâce au title est conforme et surtout accessible ?

Ce sera effectivement conforme si ton utilisation de l'élément <a> est à la base syntaxiquement correcte. Conforme, mais pas bonne d'un point de vue utilisabilité. L'accessibilité, en soit, n'a rien à voir avec cette déviation d'une pratique. Point de vue utilisabilité, créer un lien qui ne sert à rien ou qui n'a aucun effet ne risque, à terme, que de laisser à penser qu'il y a une erreur de conception sur la page. Not good.

Dans un tel cas, il faut ajouter que par défaut, un synthétiseur vocal comme Jaws NE LIT PAS l'attribut title. On ne peut donc pas se fier à ce dernier si on souhaite appliquer une solution accessible car un lien vide sans attribut title ne dirait pas grand chose à l'utilisateur. De plus, si l'utilisateur est le moindrement impatient, sa souris aura quitté le lien avant que l'info-bulle n'apparaisse. Mauvais dans ce cas là aussi, considérant que si justement rien ne se passe, la patience de notre internaute sera déjà mise à l'épreuve.

Pour situer le contexte, imaginez dans un formulaire, un champ un peu complexe nécessite une explication, au lieu d'avoir un lien qui ouvre une pop-up d'dexplication, on a  un point d'interrogation lequel est un faux lien qui ouvre l'info-bulle lorsque le curseur est  sur celui-ci.

Je répondrai comme je ne sais plus qui, il faudrait mettre le lien sur une image, avec un beau petit alt sur l'image et un title complémentaire sur le lien. Tout le monde y gagne, et si c'est fait proprement ce sera à la fois conforme et accessible. À la rigueur tu pourrais carrément faire sauter l'élément <a> et te contenter d'un title sur une image de point d'interrogation par exemple. Si ça ne mène nulle part, détourner l'élément <a> sera conforme, mais ni sémantique, ni correct.

Quant à l'attribut abbr, s'il ne s'agit pas d'une abbréviation, cela me semble complètement sans intérêt. Ceci dit dans un cas comme dans l'autre, pour rendre l'attribut title visible sur la tabulation, il faudrait utiliser l'événement onfocus il me semble. Mais dans un tel cas, ça prendrait un lien et on retombe dans le détournement de la raison d'être initiale de l'élément <a>. C'est donc à mon avis à éviter.

Pourquoi ne pas faire une image avec une instance en mouseover/onfocus avec du texte qui apparaît dans la deuxième instance, et avoir ce texte là sur le alt ? Il me semble que ça règlerait tous les problèmes, surtout si on prend la peine de mettre une page explicative au bout de l'hyperlien...

[Monique]

Un exemple d'utilisation de onmouseover : Script Javascript : Tooltip

Si le JavaScript n'est pas activé (ou pas disponible), c'est l'attribut title qui prend la relève.

Et un exemple d'utilisation de onfocus (à adapter) dans le menu d'Openweb.

[Denis]

Pas bête du tout !

[Kennyad]

C'est vrai que c'est pas mal, mais on a toujours le pb de la navigation au clavier!

C'est quand même complexe de vouloir tout gérer

[shangailily]

Je répondrai comme je ne sais plus qui, il faudrait mettre le lien sur une image, avec un beau petit alt sur l'image et un title complémentaire sur le lien. Tout le monde y gagne, et si c'est fait proprement ce sera à la fois conforme et accessible. À la rigueur tu pourrais carrément faire sauter l'élément <a> et te contenter d'un title sur une image de point d'interrogation par exemple. Si ça ne mène nulle part, détourner l'élément <a> sera conforme, mais ni sémantique, ni correct.

Bon, je reprend la suggestion de Denis : se contenter d'une image ayant un ALT et un TITLE. Normalement, il faut que le ALT et le TITLE aient le même texte, vous me confirmez ?

Et une dernière question, je veux savoir le title d'une image peut aller jusqu''à combien de caractères ?

Merci d'avance.

[Monique]

Bonjour,

Bon, je reprend la suggestion de Denis : se contenter d'une image ayant un ALT et un TITLE. Normalement, il faut que le ALT et le TITLE  aient le même texte, vous me confirmez ?

<{POST_SNAPBACK}>

Non, le rôle de ces attributs étant différent, leur contenu doit l'être aussi (Attributs alt et title).

L'attribut alt

alt = texte

    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.

L'attribut title

title = texte

    Cet attribut fournit des informations consultatives concernant l'élément sur lequel il se place.

Les agents utilisateurs peuvent restituer les valeurs des attributs title de diverses façons. Les navigateurs visuels peuvent, par exemple, afficher leur valeur sous la forme d'une « infobulle » [ndt. tool tip] (un bref message qui apparaît quand le dispositif de pointage reste au-dessus d'un objet). Dans le même ordre d'idée, les agents utilisateurs sonores peuvent vocaliser les informations de titre. Par exemple, le placement de l'attribut sur un lien permet aux agents utilisateurs (visuels et non-visuels) d'indiquer à l'utilisateur la nature de la ressource reliée

Le problème c'est le comportement par défaut des synthèses vocales (parce qu'elles sont basées sur Internet Explorer) : lecture du contenu de l'attribut alt

Et une dernière question, je veux savoir le title d'une image peut aller jusqu''à combien de caractères ?

Les directives WCAG ne précisent rien à ce sujet (Directive 1 et Directive 13)

Dans les critères Accessiweb :

- alt => 60 caractères

- title => 80 caractères

Ce choix est basé sur le nombre de caractères des tablettes braille et sur l'usage des loupes d'écran.