1174 sujets

Accessibilité du Web

Bonjour à toutes et à tous,

j'aimerais faire une sorte d'affichage de la définition de mots via une bulle à la manière d'un title de <a>.

Pour le moment, je modifie le pointeur de la souris mais quelle est la meilleure manière d'afficher la définition ?

.lexique {
    cursor:help;
}


Merci d'avance
@+
Modifié par Tchupacabra (28 Jan 2008 - 10:19)
Salut,

Pourquoi ne pas utiliser l'attribut title d'une balise de définition ?

<p>Texte texte <dfn title="truc">définition</dfn> texte</p>
par exemple.

Du point de vue de la sémantique c'est l'approche la plus propre que j'ai trouvée.
Tu n'as plus qu'à styler la balise <dfn> avec un aspect visuel qui la différencie et un changement de curseur.

Bon courage
Modifié par papyjo (28 Jan 2008 - 11:02)
merci bien papyjo... je ne connaissais pas cette balise. Smiley biggrin

Aussi, je me trouve fasse une p'tite problématique...
Sachant que l'ajout de la balise et sa signification sont rajoutées dynamiquement avant affichage via PHP+BDD. Comment faire pour distinguer l'abréviation, de l'acronyme et de la définition. L'utilisation d'une seule balise pour tous les cas de figure n'est pas recommandé je suppose... Smiley ohwell

Smiley rolleyes
Modifié par Tchupacabra (29 Jan 2008 - 16:26)
Bonjour,

Je vois trois solutions:
- soit tu utilises un mécanisme existant dans HTML, et là sauf erreur de ma part il n'y a que l'attribut title (quant à l'utilisation de dfn, je ne suis pas sûr que cet usage soit prévu mais à la rigueur pourquoi pas... et pour rappel, dans l'élément dfn on doit placer les termes définis et pas la définition);
- soit tu utilises un mécanisme avec un balisage «neutre» (éléments span par exemple) et un script Javascript pour masquer le texte B et ne l'afficher qu'au survol du texte A;
- soit aucune de ces solutions ne convient, et on devra alors imaginer un moyen plus efficace et plus accessible de transmettre l'information.

La solution la plus accessible pour donner accès à la définition de termes me semble être le glossaire. C'est à dire qu'au lieu de donner la définition au survol, on place un lien sur les termes à définir, lien qui pointe vers un emplacement donné dans un glossaire.
par contre d'après cet article, l'utilisation de cette balise comme tu l'indique ne semble pas correcte... Smiley decu nan ?

désolé croisement... Smiley biggol
Modifié par Tchupacabra (29 Jan 2008 - 16:28)
Bonjour,

Attention: avec cette solution du title sur DFN, l'information n'est que très théoriquement accessible (accès clavier, rendu le plus fréquent dans un lecteur d'écran).

Si infobulle, il est préférable qu'elle soit en surcouche sur un lien classique vers un glossaire, par exemple.

<edit>Tiens, croisement aussi.

Sinon, le title sur dfn n'est pas du tout incompatible avec ce qu'en dit HTML (c'est à dire très très peu de choses Smiley cligne )
Modifié par Laurent Denis (29 Jan 2008 - 16:34)
donc d'après vous, la solution d'une page glossaire serait la plus appropriée... Smiley ohwell
cela m'embête un peu de lister les définitions mais pourquoi pas... Smiley rolleyes

et d'un autre coté l'info-bulle me plait beaucoup... Smiley biggrin

je suis face à un dilemme... Smiley confus
Tchupacabra a écrit :


et d'un autre coté l'info-bulle me plait beaucoup... Smiley biggrin

je suis face à un dilemme... Smiley confus


Tiens, dilemne pour dilemne: vais-je lire ou ne pas lire un site qui m'agace à me faire promener ma souris partout pour accéder fugitivement à l'information ? Smiley cligne

(Cela dit, plus sérieusement, il y a des solutions robustes à explorer via AJAX et un glossaire. Mais délicates pour l'accessibilité). Et dans tous les cas, indissociables du travail éditorial (autre danger des définitions en métadonnées: ne plus réfléchir au contenu nécessaire).
Modifié par Laurent Denis (29 Jan 2008 - 18:09)
moi j'opterais pour :
- sans javascript : mot + définition dans le contenu,
- avec javascript : le mot devient un lien vers un glossaire et la définition est positionnée en css pour être affichée dans une bulle au survol et au focus
Comme cela tout le monde est content est à accès à l'info
Modifié par goetsu (30 Jan 2008 - 19:37)
sachant que tout le contenu vient d'une BDD et qu'une table contient tout le glossaire... dans mon cas, l'utilisation du javascript est inutile car dans la conception je prévoyais à l'affichage de remplacer via PHP tous "terme" détectés par
<dfn title="definition">terme</dfn>
dans le contenu...

mais je pense plutot remplacer tous les "termes" par
<a href="glossaire.php#terme" title="voir la définition">terme</a>


d'ailleurs ne serait-il pas possible de combiner les 2 ?
<a href="glossaire.php#terme" title="voir la définition"><dfn title="definition">terme</dfn></a>
Smiley murf cela me parrait absurde mais n'y connaissant rien en accessibilité... j'émet des hypothèses... Smiley ravi
Ben pourquoi absurde? Ça me semble très bien, à deux problèmes près. Le premier est technique: tu as deux éléments imbriqués avec chacun un attribut title... ça fait un title de trop. J'opterais donc pour la solution suivante:
<a href="glossaire.php#terme"><dfn title="definition">terme</dfn></a>


L'autre est à la fois technique et rédactionnel: les title trop longs ne seront pas entièrement affichés avec la plupart des navigateurs. Il faut donc avoir une définition courte en quelques mots pour le title, et une définition complète pour la page de glossaire. Hmm... un peu excessif, non? Finalement, ne donner que le lien vers le glossaire rendra peut-être les choses plus claires pour le lecteur. On pourra alors faire des liens de ce type:
Une phrase avec des <a href="glossaire.php#termes_a_definir" title="termes à définir (voir la définition)">termes à définir</a>
(Nota: je tente, peut-être maladroitement, de tenir compte du fait qu'avec un lecteur d'écran le title d'un lien peut remplacer l'intitulé du lien.)

Sinon, la solution de goetsu est sympa, mais si les descriptions sont longues et que ton système les rajoute automatiquement partout dans tes contenus, ça risque d'être problématique.
Plus largement, tout système automatisé fait courir des risques quant au contenu généré. Personnellement, je verrais plutôt un système plus «neutre» qui, si les mots dont on a les définitions sont trouvés dans le contenu, rajoute un bloc qui propose de voir la définition des termes trouvés dans le contenu (bloc en encart avec liens vers le glossaire). Enfin, disons que c'est un système automatisé qui me semble intéressant.

Cf. la réponse de Laurent qui soulignait le fait que les solutions techniques en la matière sont indissociables du travail éditorial.