28220 sujets

CSS et mise en forme, CSS3

A propos de text-indent pour cacher le texte, une solution ?

Bonjour à tous Smiley smile

je viens tester une solution que j'ai trouvé pour l'utilisation de text-indent pour cacher un texte.

Sachant que

1. L'utilisation de valeurs négatives n'est pas reconnue par IE5
2. l'utilisation de valeurs positives entraine un scroll
3. l'utilisation de ...

text-indent:15000px;
overflow:hidden;

... ne fonctionne pas avec tous les navigateurs.

Il se trouve que le stylage suivant fonctionne bien avec FF, IE6 et Opera.

div { /* un élément quelconque */
text-indent:15000px;
overflow:hidden;
width:95%; /* évidemment modulable */
}


Je n'est bien sur pas pu tester sur d'autre navigateurs que ceux pré cités.

Votre avis ?
Modifié par clb56 (05 Aug 2005 - 11:46)
text-indent me semblait très bien fonctionner avec IE, à condition de mettre une valeur suffisante. A vérifier.

Mais cela ne résoud pas le problème de focus du text-indent sur des liens.

Cette idée de vouloir cacher du contenu visuel en le réservant aux lecteurs d'écran m'échappe de plus en plus :
1. au bout du compte, le contenu en question s'avère très souvent:
* soit aussi utile dans le navigateur que dans le lecteur (et donc à afficher)
* soit aussi inutile dans le lecteur que dans le navigateur (et donc à supprimer)
2. Tant que les lecteurs n'implémenteront pas les CSS speech, ces techniques de masquages seront problématiques pour l'accessibilité des uns ou des autres.
Laurent Denis a écrit :
text-indent me semblait très bien fonctionner avec IE, à condition de mettre une valeur suffisante. A vérifier.


Pour ce que j'en ai compris :

text-indent:15000px;/* valeur positive */

ne fonctionne avec aucun navigateur, un scroll hrorizontal se crée.


text-indent:-15000px;/* valeur négative */


fonctionne avec mozilla, opera, IE6.
Mais pas avec les versions antérieures d'IE.


text-indent:15000px;/* valeur positive */
overflow:hidden;

fonctionne avec mozilla et opera.
Mais pas avec IE6


text-indent:15000px;/* valeur positive */
overflow:hidden;
width:valeur;

fonctionne avec mozilla, opera et IE6.
Mais je n'ai pas testé avec d'autre configuration. D'où ma question.



Laurent Denis a écrit :

Mais cela ne résoud pas le problème de focus du text-indent sur des liens.

g pas compris Smiley confused




Pour le reste :
A chaque fois que je code, la question que je me pose est jusqu'à quel point d'exhaustivité je pousse la structuration html d'un document.

Par exemple, si page html :

<body>
<h1>Titre</h1>
<p>blabla</p>
<div>
<h2>Annonce du contenu</h2>
... Ici le contenu spécifique à la page ...
</div>


<ul>
<li><a href="">lien 1-1</a></li>
<li><a href="">lien 1-2</a></li>
...
</ul>

<ul>
<li><a href="">lien 2-1</a></li>
<li><a href="">lien 2-2</a></li>
...
</ul>

etc...
</body>

alors je serai bien tenté de rendre ça un peu plus précis pour les menus.

soit :

<h2>Annonce des menus</h2>
<h3>Menu correspondant à ...</h3>
<ul>
<li><a href="">lien 1-1</a></li>
<li><a href="">lien 1-2</a></li>
...
</ul>
<h3>Menu correspondant à ...</h3>
<ul>
<li><a href="">lien 2-1</a></li>
<li><a href="">lien 2-2</a></li>
...
</ul>
<h2>Elements annexes</h2>
etc...


En procédant ainsi j'avais l'impression de faire du html comme il doit l'être.
Que par exemple la présence du titre h2 annonçant les menus puisse être en trop dans la page présentée par un écran, ça devient vite assez évident.

Mais justement il me semble bien que c'est principalement à ça que servent les css : travailler au mieux le document sans a priori de joliesse ou d'encombrement visuel et ensuite utiliser tout cela "à sa main" pour une présentation à l'écran (en l'occurence).

Je me trompe ?
En effet, après vérification (FAQ du forum, par exemple Smiley cligne ), text-indent ne donne le résultat espéré qu'avec IE6, mais pas avec ses versions antérieures.

Le problème est que, s'il s'agit d'un lien masqué par ce biais, il est toujours présent dans l'ordre de tabulation au clavier (navigation dans les liens à l'aide de la touche tabulation). Quand l'utilisateur arrive sur ce lien dont il ignore l'existence et qu'il ne peut pas voir, il perd le focus visuel, c'est à dire la mise en valeur du lien actif à la suite d'une pression sur la touche tabulation. Il le retrouve quand la tabulation passe, après une nouvelle pression, au lien suivant visible sur la page. Mais cette "disparition" du focus est très déroutante : on ne sait plus du tout où on en est dans la page...

Pour ce qui est de la structuration des menus, je sens que nous allons bien nous entendre Smiley cligne
http://blog-and-blues.org/weblog/2004/11/06/333

Cela dit, dans le cas de menus brefs, un seul titre signalant la présence d'une section "Menu" ou "Navigation" est suffisant à l'usage, pour l'utilisation qui en est faite dans un lecteur d'écran (navigation de titre en titre dans la page), ou dans un script exploitant les titres.
Sujet clos
Aller à