1178 sujets

Accessibilité du Web

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

Pages :
Administrateur
Il existe plusieurs techniques pour rendre des images de fond accessibles en masquant le texte alternatif aux navigateurs non graphiques.

La méthode de Douglas Bowman (display none), celle de Laurent Denis (clip) et quelques unes décrites par Dave Shea.

Parmis toutes ces méthodes, celle qui paraît la plus simple à mettre en oeuvre n'y apparaît pas : utiliser la règle :
a {
font-size : 0px;
}


Comme cela paraît presque trop simple de masquer le texte uniquement avec font-size, je suppose qu'il doit y avoir un problème avec cette règle, qu'elle ne fonctionne pas partout.

En fait, après tests, font-size:0 fonctionne sur gecko (rien n'apparaît), mais sur IE, il affiche une taille minimale égale à font-size:1px.

D'où la variante :
a {
font-size : 0px;
letter-spacing: -50px;
}

Du coup, en rajoutant un letter-spacing négatif, le texte devient invisible sous IE également.
J'ai testé également sous Opera et le texte apparaît de façon minuscule.

Que penser des différences de tailles de polices ? Est-ce que IE et Opera bugguent sur le size 0 ?
Que penser de cette méthode en général ?

A noter que pour finir avec un code qui fonctionne sur l'ensemble des navigateurs que je connais, j'applique la méthode suivant, qui m'évite de devoir rajouter un <span> :
a {
font-size:0px;
letter-spacing: -5px;
position: absolute;
top: -5000px;
}


J'aimerais vos avis svp...
Administrateur
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
personnellement j'utilise cela :


a {
text-indent:-5000px;
}


Ca marche sur IE , Mozilla et opera et surement d'autres, mais en y pensant je ne me suis jamais posé la question quel était le rendu sur des navigateurs non-graphique.... Donc je sais pas si c'est vraiment une méthode efficace et accessible..

Si quelqu'un a la réponse...
Modifié le 08 Jan 2005 - 00:32
Administrateur
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 Smiley cligne

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 Smiley cligne
Modifié le 08 Jan 2005 - 11:57
Administrateur
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é Smiley cligne

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 Smiley cligne

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 Smiley ohwell
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 Smiley cligne
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
Raphael a écrit :

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 ?


Elles fonctionnent. Mais chaque technique de remplacement "intitulé HTML"/"contenu CSS" posera un problème à une catégorie variable d'utilisateurs. A partir de là, c'est à chaque auteur de se déterminer sur la question Smiley cligne

a écrit :

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


Je n'ai pas testé clip de manière approfondie avec les liens. Le post auquel je renvoyais (Le lien est corrigé) montre bien qu'il y a des surprises à prévoir.

a écrit :

Dans ce cas, il suffit de faire :
a {
clip (1px 1px 1px 1px);
clip (1px, 1px, 1px, 1px);
}

?


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.

a écrit :

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


Dans ce cas, pourquoi ne pas en rester à la solution mixte classique:
- l'intitulé texte en HTML bien visible
- sur un arrière plan CSS

Tiens, la CSS du module d'administration de DotClear donne une très bel exemple d'onglets gérés de cette manière.
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 ! Smiley lol
Modifié le 08 Jan 2005 - 12:30
Administrateur
Laurent Denis a écrit :
Elles fonctionnent. Mais chaque technique de remplacement "intitulé HTML"/"contenu CSS" posera un problème à une catégorie variable d'utilisateurs. A partir de là, c'est à chaque auteur de se déterminer sur la question Smiley cligne

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

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 Smiley ohwell )

a écrit :
Dans ce cas, pourquoi ne pas en rester à la solution mixte classique:

- l'intitulé texte en HTML bien visible
- sur un arrière plan CSS

Parce qu'il y'a certains cas où le texte "bien lisible" n'est pas ce que l'on peut obtenir.

Si l'on en arrive à formatter à l'identique tous les sites en appliquant à 100% toutes les règles établies d'ergonomie et d'accessibilité, on en vient à restreindre les possibilités.
Ici le but est de réaliser un bouton réactif graphique (et le texte "bien lisible" n'y a pas sa place).
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 Smiley ohwell )


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 Smiley cligne
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. Smiley edit Modifié le 08 Jan 2005 - 16:10
Administrateur
Merci Laurent pour ces précisions supplémentaires.
Chaque nouvelle version d'Opera confirme en effet son intérêt pour la conformité et l'accessibilité.

Pour ce qui est de l'utilisation pratique de clip : cela implique une lourde armada de CSS et de positionnements, malheureusement.

Bref, toute tentative ne saura que partiellement répondre à la question, à moins de cumuler de multiples propriétés... qui au final auront sans-doute d'autres répercutions malheureuses.

Bref, comme tu l'as dit, le choix est dans les mains de chaque auteur, selon le degré d'accessibilité à atteindre et les contraintes.

Merci encore.

Je vais pour l'instant faire un choix entre tout ça et privilégier une version de ce genre :
.inagalaxyfaraway { 
display: none;
position: absolute; 
left: -9999px; 
top: -9999px; 
text-indent: -5000px;
}


J'espère que le rapport "qualité / prix" sera suffisant... même si, j'en suis conscient, cela ne sera pas parfait (d'ailleurs, ça veut dire quoi "suffisant "?) Smiley murf
Lut la foule Smiley cligne

Je débute mais dans la série experimentation j'ai essayé de mon coté de travailler sur le position absolute et le z-index aparement j'arrive a quelquechose de bien sous IE6, Firefox, Mozilla, Opéra et sous lynx je vois bien mon lien et le texte situé en dessous.


Ca as peut être été déjà fait (j'ai pas cherché) c'est peut être complétement n'importe quoi,mais si vous voulez jeter un coup d'oeil c'est ici
Modifié le 08 Jan 2005 - 18:16
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 Smiley cligne
knarf a écrit :
Ca as peut être été déjà fait (j'ai pas cherché) c'est peut être complétement n'importe quoi,mais si vous voulez jeter un coup d'oeil c'est ici


Disons que le but du jeu serait d'éviter justement les structures HTML superflues (et discutables) destinées uniquement à un effet de présentation :
<a class="acces" href="tata.html" accesskey="1">Accessibilité</a>
<a class="acces" href="tata.html" title="acces"></a>
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
Pages :
Sujet clos
Aller à