[resolu]Infobulle avec span: Justification sémantique

Bonjour bonjour,

Mon titre n'est pas terrible...Désolé.

L'utilisation d'un lien et d'un span pour créer une info-bulle est plutôt "sympathique"...
Pour ceux qui ne connaissent pas:

<a href="#">K<span>Lettre de l'alphabet</span></a>

Après il suffit de cacher le span puis de le faire apparaitre au survol.

Seulement je me pose cette question:
Sémantiquement est-ce que cela à un sens ??

Sans CSS on se retrouve avec un lien, un simple lien qui ne porte plus le sens de l'info-bulle. C''est tout le problème d'une info-bulle comme celle-ci: Même si je trouve que ce systeme est visuellement très interessant: Cela reste une bidouille.

Donc...

1) Puis-je faire une info-bulle qui puisse garder sons sens même sans style ??

J'avais bien pensé à des parenthèses mais cela ne règle pas le fait que mon info-bulle devient un simple lien sans CSS.

2) Qui plus est, si l'info-bulle est très longue on peut se retrouver avec un lien de 3 km: Je ne pense pas que cela soit conseillé ??

3) Si l'info est un lien est-ce que cela peut gêner quelqu'un avec jaws par exemple ?? Puisque l'utilisation de <a> "est perverti" ??

je me rends compte que mon post est très mal organisé...


Voilà voilà, j'espère que vous comprenez ce qui me gène...

L'idéal serait pour moi de pouvoir me passer de <a>.

Merci de vos éclaircissements
Modifié par Seb1952 (14 Jun 2006 - 18:31)

Seb1952 a écrit :
1) Puis-je faire une info-bulle qui puisse garder sons sens même sans style ??

L'info-bulle étant un ajout d'information, ça correspond tout à fait au rôle d'une parenthèse en mise en page « classique ». Ou bien à une note de bas de page.

Seb1952 a écrit :
2) Qui plus est, si l'info-bulle est très longue on peut se retrouver avec un lien de 3 km: Je ne pense pas que cela soit conseillé ??

C'est peut-être pas conseillé, mais ça n'est pas déconseillé non plus (il me semble).

Seb1952 a écrit :
3) Si l'info est un lien est-ce que cela peut gêner quelqu'un avec jaws par exemple ??

Ah ben voilà, là on a une vraie question qu'elle est bonne !
Effectivement l'utilisation de l'élément a n'est pas très logique, hors le simple fait d'avoir un :hover qui marche avec IE.

salut,

Et bien je ne sais pas trop comment interpreter ta réponse...un peu trop ironique peut être.

a écrit :
Ah ben voilà, là on a une vraie question qu'elle est bonne !

Si c'est de l'ironie c'est dommage. Le developemment web n'est pas mon domaine j'essaie pourtant de m'interesser un peu à l'accessibilité (plus que beaucoup de webmaster), et oui cela entraine des questions un peu...confuses, mais aucune question n'est vraiment bête si on éprouve le besoin de la poser. (dans une certaine mesure )

Si tu n'étais pas ironique...alors je suis désolé.

Sinon, puis-je faire un systeme d'info-bulle sans <a> ??

Je veux garder un système comme celui-ci: mais je voudrais trouver le moyen pour que son affichage sans style soit satisfaisant.

Mon souci est bien sûr IE.

Seb1952 a écrit :
Et bien je ne sais pas trop comment interpreter ta réponse...un peu trop ironique peut être.

Houlà oui, c'est vrai que ça m'arrive. Je fais pas trop attention à la manière dont je m'exprime, par moments.

En fait je soulignais juste le fait que les deux premières questions que tu posais étaient un peu du coupage de cheveu en quatre dans le sens de la longueur, tandis que la dernière (problématique d'accessibilité) est déjà bien plus importante. Qu'un lien soit un peu long, ça n'est pas bien grave. Mais que l'information que l'on fait passer visuellement soit aussi accessible (peut-être pas totalement de la même manière mais au moins sans perte excessive d'information), c'est déjà bien plus important.

Le problème de l'élément a, c'est qu'il peut laisser penser que l'on fait un lien vers une page ou un autre élément de la page, alors que ça n'est pas le cas. Mais, en l'absence d'attribut href, l'élément a sera peut-être considéré comme une ancre, et peut-être à ce titre ignoré par les lecteurs d'écran. J'avoue que je ne sais pas. Je viens de tester, et Lynx (navigateur en mode texte) les ignore, mais je n'ai pas de lecteur d'écran pour voir si Jaws ou un autre font de même.

Tu peux peut-être faire quelque chose comme ça :

[b]HTML[/b]
<a class="infobulle">lorem ipsum <span>(une déformation de « dolorem ipsum »)</span></a>

[b]CSS[/b]
a.infobulle {
	color: limegreen;
	cursor: help;
}
a.infobulle span {
	position: absolute;
	margin-left: -9000px;
}
a.infobulle:hover span {
	margin-left: -4em;
	margin-top: 1.4em;
	padding: 2px 4px;
	border: solid 1px black;
	color: black;
	background: white;
}

Je pense que ça peut tenir la route.
Modifié par mpop (13 Jun 2006 - 22:02)

Bonsoir,

Merci de ta réponse. Je vais regarder cela.

En fait tu as bien résumé ce qui me gènait dans cette phrase:

a écrit :
Le problème de l'élément a, c'est qu'il peut laisser penser que l'on fait un lien vers une page ou un autre élément de la page, alors que ça n'est pas le cas. Mais, en l'absence d'attribut href, l'élément a sera peut-être considéré comme une ancre, et peut-être à ce titre ignoré par les lecteurs d'écran. J'avoue que je ne sais pas. Je viens de tester, et Lynx (navigateur en mode texte) les ignore, mais je n'ai pas de lecteur d'écran pour voir si Jaws ou un autre font de même.

Je n'ai pas testé sans href, mais avec Jaws ne lit pas tout le lien si celui-ci est long. En même temps je viens de l'installer et je ne sais pas m'en servir !!!

Edition: Le code que tu m'as donné est à peu près ce que j'avais comme système: Seulement dans l'état il ne marche pas sous ie. Pour info il faut ajouter cela:

a.infobulle:hover{background: "la valeur importe  peu, d'ailleurs marche même sans"}

Et href dans a.

Je n'ai pas la moindre idée de pourquoi ce bout de code fait marcher l'infobulle avec ie, J'ai fait une recherche: Apparemment un bug.
Sinon, cela ne règle pas mon souci.

Serait-il possible de créer un système d'infobulle uniquement avec une imbrication de span sans a, en utilisant au passage un code CSS (html >body ou !important) inaccessible sous ie. Ainsi, si le hover marche sur toutes les balises avec un navigateur moderne l'infobulle devrait pouvoir fonctionner et je pourrais afficher un truc avec des parenthèses avec ie ??

Du style:

.infobulle {
	color: limegreen;
	cursor: help;
	position: relative;
}

 .infobulle span {
	display: none;
}

 .infobulle:hover span{
	display: inline;
	position: absolute;
	top: 10px; 
	left: 10px;
}

.hidden{display:none;}

<span class="infobulle>K<span><span class="hidden">(</span>Lettre<span class="hidden">)</span></span>

Mais comme cela ça ne marche pas. Je crois que je manque de connaissance pour arriver à faire cela .


help
Modifié par Seb1952 (14 Jun 2006 - 08:17)

Hélas seul du script (JS) peut parer au problème sur Ie (donc pas de "CSS only").

Snif snif. Merci quand même.

Donc cela veut dire qu'il n'y pas de solution.

Mets pourquoi je n'arrive pas à créer un système avec des span même pour ff en l'occurence ??

Qu'est-ce qui cloche dans le code ?

Seb1952 a écrit :

Qu'est-ce qui cloche dans le code ?

Salut,
Déjà il faudra que le premier <span> englobe tout, ensuite qu'un autre <span> englobe la bulle seulement.
par exemple :

<span class="infobulle">
	K
	<span class="bulle">
		<span class="hidden">(</span>
		Lettre
		<span class="hidden">)</span>
	</span>
</span>

et en CSS tu caches la .bulle et tu l'affiches si le .infobulle est survolé :

.bulle {display: none;}
.infobulle:hover .bulle {display: inline;}

Au fait, display:none; n'est pas lu par tous les lecteurs d'écran
Modifié par Alan (15 Jun 2006 - 08:58)

Alan a écrit :

Au fait, display:none; n'est pas lu par tous les lecteurs d'écran

Exact, d'ailleurs on en a parlé ici même