Cacher du texte avec font-size et letter-spacing ?

Kevin a écrit :
Mais pourquoi ne pas utiliser le display:none en fait ?

Laurent Denis l'explique dans le lien donné :

a écrit :
Tous les medias non graphiques devraient ignorer la feuille de style et restituer le contenu du span... Mais en réalité, la plupart des lecteurs d'écrans actuels ont un comportement non conforme qui leur fait tenir compte d'une feuille de style destinée à l'écran, et appliquer fréquemment les propriétés display: none aussi bien que visibility: hidden. Le procédé aboutit donc à l'inverse de l'effet recherché, puisque l'intitulé textuel du titre disparaît tout autant que l'image dans Jaws ou IBM Home Page Reader

Le text-indent est effectivement l'une des solutions proposées dans l'article de Dave Shea.
Mais il me semble qu'il pose également des problèmes. Il faut, par exemple donner une valeur tès grande pour qu'il soit compris par IE5 et IE5.5 (source Laurent Denis)... pour les autres navigateurs, je ne sais pas.

Heu... Mettez-vous dans la peau d'un utilisateur souffrant d'une mauvaise vue. Comme il y a souvent des textes affichés trop petits dans les pages Web, allez dans les options d'accessibilité d'IE et cochez les options :
- ignorer les tailles de polices spécifiées sur les pages web
- ignorer les styles de polices spécifiés sur les pages web

Résultat : votre contenu masqué avec "font-size" et/ou "text-indent" se surimpose avec votre image d'arrière-plan. N'oubliez pas que vous avez mauvaise vue et que ce genre de chose est d'autant plus gênant pour vous

Sur le fond: chaque technique de masquage de contenu HTML au profit d'un arrière-plan CSS pose un problème d'implémentation et/ou d'accessibilité (Voir http://forum.alsacreations.com/topic.php?fid=4&tid=426&s=clip#p8923 pour clip appliqué à des liens.).

La raison est qu'elles relèvent toutes du bricolage censé remplacer l'implémentation correcte des médias CSS.

Dans un monde idéal, on ferait en effet en CSS, quelque-chose comme:

/* Filtre des medias visés: */
@media screen, projection, tv {
a {
background: url(...)
}
a span {
display: none;
}
}

/* Pour être sûr d'être bien compris:*/
@media aural, braille {
a span {
display: inline;
}
}

Autre exemple , avec CSS3 (où ce sera encore plus simple):

/* medias visuels */
@media screen, tv, projection, print {
a {
content: url (...)
}
}
/* Autres medias, pour être sûr d'être bien compris */
@media speech, reader, braille, embossed {
a {
content: normal
}
}

Mais les descripteurs de medias auditifs (et braille) ne sont actuellement pas implémentés par les outils d'aides (lecteurs d'écran, Opera 8, etc). Donc pas de filtrage par media possible pour l'instant. En gros, les bidouilles de masquage de contenu tentent d'utiliser CSS avec des agents utilisateurs qui n'implémentent pas ou qui implémentent très mal CSS.

Sinon, pour être le moins inaccessible possible, le mieux reste un bon vieux <a ...><img src=...></a>.

Et ne me dites pas que l'image n'a pas sa place dans le contenu parce que c'est de la présentation : un bouton a tout à fait sa place dans la structure d'une application Web
Modifié le 08 Jan 2005 - 11:57

Laurent Denis a écrit :

Mais les descripteurs de medias auditifs (et braille) ne sont actuellement pas implémentés par les outils d'aides (lecteurs d'écran, Opera 8, etc). Donc pas de filtrage par media possible pour l'instant. En gros, les bidouilles de masquage de contenu tentent d'utiliser CSS avec des agents utilisateurs qui n'implémentent pas ou qui implémentent très mal CSS.

Merci pour cet avis ... avisé

Bref, selon toi, aucune technique CSS ne fonctionne actuellement en pratique, c'est bien ça ? Cela vaut-il la peine d'appliquer des techniques non fonctionnelles ?

A moins que l'alternative clip serait la seule solution possible ? (au fait, ton lien ne fonctionne pas)

Dans ce cas, il suffit de faire :

a {
clip (1px 1px 1px 1px);
clip (1px, 1px, 1px, 1px);
}

?

Laurent Denis a écrit :

Sinon, pour être le moins inaccessible possible, le mieux reste un bon vieux <a ...><img src=...></a>.

Et ne me dites pas que l'image n'a pas sa place dans le contenu parce que c'est de la présentation : un bouton a tout à fait sa place dans la structure d'une application Web

Oi mais l'objectif étant de réaliser une image réactive (qui change au survol), je ne vois pas comment le faire avec ta manière
Sauf en JavaScript évidemment, ce qui poserait d'autres problèmes.

Pour les images, je suis assez d'accord, mais pour les evolutions du graphisme de la page, c'est moyen et pour l'agrandissement du texte, n'en parlons pas.

-edit- @Raphaël, il manque le

 position: absolute ; 

dans ton truc
Modifié le 08 Jan 2005 - 11:51

@Laurent Denis

Tu pourrais corriger ton lien parce qu'il donne dans la fenêtre des posts...

Ahh oui aussi, le font-size: 0 ; il marche pas du tout sous Konqueror par exemple, je sais pas si font-size: 1px ; fonctionerai mais bon, j'ai plus accès à konqueror là.

J'utilise la technique du text-indent négatif citée par eman73, mais j'utilise également la technique suivante :

.inagalaxyfaraway { 
   position: absolute; 
   left: -9999px; 
   top: -9999px; 
}

En ce qui concerne le clip, j'ai expérimenté quelques problèmes sur IE5mac.

1-Certains liens adjacents au texte caché par clip devenaient inopérants.

2-Dans le contexte suivant, j'avais appliqué "clip" au <span> du <h4>, mais IE5mac agissait comme s'il n'y avait plus de <h4>, le <ul> recouvrant ce dernier. Faudrait encore bidouiller...

    <h4><span>Voir aussi...</span></h4>
    <ul>
     <li><a href="history.html">histoire</a></li>
     <li><a href="gallery.html">galerie</a></li>
     <li><a href="discography.html">discographie</a></li>
     <li><a href="manifesto.html">manifeste 2000</a></li>
     <li><a href="chorfestival2004/index.html">europe 2004</a></li>
    </ul>

Donc, pour le moment, je suis revenu à display: none; favorisant IE5mac au détriment de l'accessibilité.
Modifié le 08 Jan 2005 - 12:19

Laurent Denis a écrit :

Sinon, pour être le moins inaccessible possible, le mieux reste un bon vieux <a ...><img src=...></a>

C'est en effet ce qui nous réserve le moins de surprises !
Modifié le 08 Jan 2005 - 12:30

Raphael a écrit :

Oui c'est vraiment pas si facile, la question de l'Accessibilité.
Peut-être que le W3C ne s'y intéresse que depuis trop peu de temps (façon de parler) pour que les navigateurs se mettent d'accord

Disons plutôt que tout ce qui touche aux préférences utilisateurs est encore un domaine où les implémentations sont très incohérentes, et où CSS est remarquablement mal exploité.

D'ailleurs, permettre aux utilisateurs de bien exploiter le potentiel offert par les CSS user n'est apparemment pas une priorité, ni pour Microsoft, ni pour Mozilla, ni pour Safari... Opera est l'un des rares à s'y être aventuré, de manière encore partielle.

Raphael a écrit :

Non. De cette manière, tu masques entièrement le lien. Il faut juxtaposer l'image et le texte, puis ne clipper que la partie correspondant au texte.

OK, placer l'image en background de <a> et rajouter un <span> pour le "texte alternatif" règlerait ce problème ? (enfin plus ou moins, vu qu'apparemment clip ne résoud pas tout non plus )


Plus j'y réfléchis, et plus le cliping appliqué à une série de lien me semble aventureux. Ce n'est pas pour rien que je n'ai proposé cette technique que pour des titres
Mais pour la beauté du geste, une piste:

CSS pour des boutons de 88x31:

li {
float: left;
position: relative;
list-style-type: none;
}
a {
position: absolute;
top: 0;
display: block;
width: 88px;
height: 31px;
padding-top: 31px;
clip: rect(auto 88px 31px auto);
clip: rect(auto, 88px, 31px, auto);
}
#bouton1 a {
left: 0;
background: url(bouton.gif) top left no-repeat;
}
#bouton1 a:hover {
background: url(hover.gif) top left no-repeat;
}
#bouton2 a {
left: 98px;
background: url(bouton.gif) top left no-repeat;
}
#bouton2 a:hover {
background: url(hover.gif) top left no-repeat;
}
#bouton3 a {
left: 196px;
background: url(bouton.gif) top left no-repeat;
}
#bouton3 a:hover {
background: url(hover.gif) top left no-repeat;
}


et en HTML:

<ul>
<li id="bouton1"><a href="">Lorem Ipsum 1</a></li>
<li id="bouton2"><a href="">Lorem Ipsum 2</a></li>
<li id="bouton3"><a href="">Lorem Ipsum 3</a></li>
</ul>

IE5.0 fait des choses curieuses avec le :hover.


J'avais dis une grosse bêtise dans ma CSS avec un display:inline sur <li>. Il faut utiliser un flottant pour bénéficier de la position relative. Modifié le 08 Jan 2005 - 16:10

bon j'ai essayé de lire un peu avant de poster.

donc si j'ai bien compris il faudrait pour le cas du rollover trouver un solution pas trop lourde en matiére de rajout de balise,qui puisse être visible aussi bien en activant une feuille css qu'en la désactivant, qui permet d'avoir le texte néccéssaire pour un navigateur comme lynx, qui autorise le redimensionnement.....

est-ce que le fait de doubler la balise et de ne rien mettre dans la 2eme serait pour vous une solution viable.

le lien sur le post au dessus montre ce que cela donne et je n'ai rien ni sous OPéra7 ni sur IE6 au niveau texte

lynx vois bien des liens ,avec MAJ+f11 sur Opéra c'est bien reconnu aussi

mais je ne sais pas du tout comment cela peux se comporter sur d'utre support

j'attends votre avis

d'avance merci

Pour le "discutable je suppose que tu parle de la balise vide.

donc en schématisant un peu:

discutable et superflue et remplissant le rôle qu'on lui demande.

ou non discutable et non superflue mais ne remplissant pas le rôle exact qu'on lui demande.

En fait j'ai l'impression de voir un vaste hôpital avec des bandages dans tout les coins pour essayé de trouver la solution "la moins mauvaise"puisque il en existe pas de bonnes.


je persiste donc à dire que les standards, l'accessibilité et la sémantique à l'heure actuelle ne sont pas du tout fait pour des sites non pros.

Comment convaincre des personnes utilisant les tableaux et ou dreamweaver du bien fondé de l'utilisation de ces techniques si ceux qui les défendent et les maîtrisent n'arrivent pas à se mettre d'accord.

Combien vont prendre la peine d'approfondir la chôse.


En fait chacun utilise sa canne comme il peux et comme il veux il n'y as rien de concret , de figé.

Bien souvent c'est à l'appréciation du codeur d'appliquer telle ou telle technique.

Je trouve qu'ici il y as un non sens car qui dit un choix inclus obligatoirement qu'une partie ou une autre sera laisée.

le web standard, accessible, et sémantique je suis d'accord.

Mais sans les outils nécessaires et surtout compatibles entre eux cela risque de prendre beaucoup de temps pour changer les mentalités.
Modifié le 10 Jan 2005 - 14:45