28220 sujets

CSS et mise en forme, CSS3

Texte caché et image en background

Bonjour

Soit un <div id="logo"> avec un lien... dans la FAQ http://forum.alsacreations.com/faq/#item13
2 solutions sont proposées, l'une par clip et l'autre par text-indent.
Quel serait le problème avec le texte en span "display:none" qui me parait assez juste dans la mesure où ça décrit exactement ce que l'on veut : ne pas afficher le texte en mode graphique et avoir le lien visible en mode texte ou audio ? On pourrait aussi utiliser un "visibility:hidden" ? Quelles sont les contre-indications qui font que ces deux solutions n'ont pas été retenues ?
Le fait que ce beau comportement à base de display:none et de visibility:hidden ne marche concrètement pas dans les lecteurs d'écran actuels (pas de manière suffisamment fiable).

- display:none n'est pas une propriété screen, mais une propriété valable pour tous les medias. Il agit donc sur le rendu vocal lorsqu'il est dans une CSS de media all.
- Suffit-il de le mettre dans une CSS screen ? Non. Les lecteurs d'écran étant par ailleurs dépendant du navigateur graphique (IE le plus souvent) dont ils exploitent le moteur HTML-CSS, le display:none d'une CSS screen sera souvent pris en compte et cachera le contenu à la lecture. Et il n'est pas possible de rétablir un display:block en CSS aural ou speech, celles-ci n'étant pas implémentées par les lecteurs d'écran...
- visibility:hidden est en revanche une propriété screen qui ne devrait pas jouer sur le rendu d'un lecteur d'écran... Sauf qu'en raison de la dépendance ci-dessus, il est pris en compte par les lecteurs d'écran dans de nombreux cas.

Bref :
a écrit :
lorsqu'on cache du contenu dans le rendu graphique sur l'écran d'un PC, on le cache aussi presque toujours aux lecteurs d'écran


(Bob Easton, auteur d'une longue série de tests sur ce problème : http://css-discuss.incutio.com/?page=ScreenreaderVisibility )

les seuls outils vocaux dans lesquels on peut en fait tirer pleinement profit des medias CSS (screen, aural) ne sont pas des lecteurs d'écran : l'environnement Emacspeak (de manière limitée) et Opera 8 (conçu pour exploiter CSS speech et X-Voice)
Modifié par Laurent Denis (07 Jul 2005 - 16:51)
Voilà ce qui s'appelle une réponse rapide, claire, nette, précise et complète Smiley biggrin Merci pour ces éclaircissements...
Quel conseil alors : clip ou text-indent ?
Arsene a écrit :
Voilà ce qui s'appelle une réponse rapide, claire, nette, précise et complète Smiley biggrin Merci pour ces éclaircissements...
Quel conseil alors : clip ou text-indent ?


aucun des deux mon capitaine Smiley lol
- clip est tout à fait accessible dans certains cas (voir les liens aimablement rappelés par Raphael) et reste une solution sans détournement de propriété
- mais posera des difficultés sur les liens, si je me souviens bien d'un cas soulevé ici par... Dominique ? Stephan ? Quelqu'un d'autre ? (Je ne vexe personne ?)
- text-indent ne donnera pas le résultat attendu dans tous les navigateurs graphiques

La solution classique de Paul Bohman n'a pas encore été prise en défaut à ma connaissance :

.hidden
{
position:absolute;
 left:0px;
 top:-500px;
 width:1px;
 height:1px;
 overflow:hidden;
}


Mais le mieux est encore de mettre son logo en bonne vieille image HTML, parfaitement accessible, on ne peut plus valide, tout ce qu'il a de plus sémantique... bref, d'oublier un peu les excès CSSistes Smiley cligne
Pour Laurent :
C'est pas de l'ayatolisme cssiste c'est que ce logo-image doit changer d'aspect au survol, à partir de là c'est soit CSS soit JS...
Merdi Dominique Smiley smile

Cliper un lien pour le rendre invisible n'est en effet pas habile, puisque la propriété clip ne le retire pas des liens activés par tabindex : le visiteur utilisant la touche tabulation se retrouve donc avec un lien invisible dans sa séquence de tabulations.
Sujet clos
Aller à