Text-indent:-5000px vs display:none

Bonjour à tous !

Une petite question pour éclairer mes lanternes :

Pour cacher un texte (pour le remplacer par une image par exemple), quelle technique est la plus propre :

- Un text-indent: -5000px pour "sortir" le texte de la page ?
- Un display: none via une balise span ?
- Une autre technique ?

Merci de me faire part de vos expériences et de nous rendre chaque jour un peu plus accessible ...

Salut
Pour moi c'est clairement le

display: none;

C'est le choix logique.
Modifié par Whisno (24 Nov 2006 - 08:09)

Personnellement j'utilise le text-indent, je n'avais pas pensé au span + display:none.
Je pense que tout dépend du nombre de texte qu'il y a à cacher. Si il faut surcharger le HTML juste pour cacher le texte je trouve que des text-indent c'est mieux..

Salut,

Pas de display : none pour des raisons d'accessibilité. Certains logiciels utilisés en particulier par les mal voyants ne tiennent pas compte des éléments masqués par cette technique. (Je n'ai plus les liens sous la main).

Donc plutôt text-indent ou mieux : clip (voir sur Blog and Blues).
Modifié par Jihel (24 Nov 2006 - 08:47)

Bonjour à tous !

Perso, j'utilise le display:none; car je ne trouve pas très esthétique le contour affiché par Firefox.
Mais un tout simple visibility:hidden ne conviendrait-t-il pas dans certains cas ?
Modifié par shepard-martin (24 Nov 2006 - 09:01)

shepard-martin : Si tu as des contours trop importants (du genre qui traversent tout l'écran), met un font-size: 0; et tu n'aura plus de problèmes .
Modifié par Neovov (24 Nov 2006 - 09:07)

Ah super l'astuce !
Je n'en avais pas entendu parler !
J'avais entendu une méthode un peu barbare en javascript pour le supprimer.

Merci beaucoup pour l'astuce ! Bien joué !

Bonjour à tous,

Une petite recherche dans la FAQ aurait éclairé la lanterne ...

barbe douce a écrit :
- Un display: none via une balise span ?

Y'a-t-il encore des gens qui lisent Alsacréations et qui utilisent display none pour ce genre de choses ?

Crévindiou, à quoi ça sert qu'on se décarcasse ?

Ah c'était ca le lien que je ne retrouvais plus ! Merci Raphael !

Ca va, j'suis pas trop has been alors...

On aurait pas ces problèmes si le CSS avait plus de possibilités, comme justement pouvoir supprimer le noeud texte...
Modifié par Neovov (24 Nov 2006 - 09:40)

Neovov a écrit :
On aurait pas ces problèmes si le CSS avait plus de possibilités, comme justement pouvoir supprimer le noeud texte...

On n'aurait pas de problème si tous les lecteurs d'écran s'entendaient sur une norme commune surtout !

barbe douce a écrit :
Merci de me faire part de vos expériences et de nous rendre chaque jour un peu plus accessible ...

En passant, vu l'objectif, je déplace dans le salon Accessibilité

Raphael a écrit :
On n'aurait pas de problème si tous les lecteurs d'écran s'entendaient sur une norme commune surtout !

J'avais juste envie de râler contre le CSS !
Modifié par Neovov (24 Nov 2006 - 10:00)

Neovov a écrit :


J'avais juste envie de râler contre le CSS !

Parfois ça fait du bien. Parfois même, c'est justifié

shepard-martin a écrit :
Bonjour à tous !

Perso, j'utilise le display:none; car je ne trouve pas très esthétique le contour affiché par Firefox.
Mais un tout simple visibility:hidden ne conviendrait-t-il pas dans certains cas ?

Neovov a écrit :
shepard-martin : Si tu as des contours trop importants (du genre qui traversent tout l'écran), met un font-size: 0; et tu n'aura plus de problèmes .

Je n'ai jamais essayé le font-size:0 , au début je faisais :

.lien:focus { outline:none; }

Problème : on n'a plus de contour sur ce lien lorsque qu'il a le focus

La meilleur méthode que je connais est de mettre un overflow:hidden; au lien :

.lien { 
overflow:hidden;
[...]
}

Ainsi le contour reste parfaitement autour des liens

Jihel a écrit :
Salut,

Pas de display : none pour des raisons d'accessibilité. Certains logiciels utilisés en particulier par les mal voyants ne tiennent pas compte des éléments masqués par cette technique. (Je n'ai plus les liens sous la main).

Donc plutôt text-indent ou mieux : clip (voir sur Blog and Blues).

Tiens, question idiote... et à l'inverse ????? Je veux dire, si vous souhaitez cacher des éléments de type "Aller au contenu" ou "...au menu" via accesskey aux personnes voyantes soit des éléments de navigation qui n'ont pas trop d'intérêt pour eux, ce n'est pas exploitable ?????

Merci, je suis curieux là !

Eric

Country a écrit :
Je n'ai jamais essayé le font-size:0 , au début je faisais :

.lien:focus { outline:none; }

Merci, tu viens de répondre à une question que je t'aurai surement posé .

eric1725 a écrit :
Si vous souhaitez cacher des éléments de type "Aller au contenu" ou "...au menu" aux personnes voyantes soit des éléments de navigation qui n'ont pas trop d'intérêt pour eux, ce n'est pas exploitable ?

Bonne question (un peu mal posée, j'ai eu du mal a comprendre ), et j'aimerai bien connaître la réponse .

On peut aussi rappeler en passant que ces techniques, bien utiles, ne sont pas exemptes de problèmes. Outre le display:none à proscrire, le fait de masquer via CSS un texte dont l'information est passée par une image de fond est problématique : cela suppose que l'on a deux contextes d'utilisation :
- navigateur graphique, application de tous les styles, et bien entendu affichage de l'image de fond ;
- navigateur non graphique, lecteur d'écran ou navigateur graphique avec styles complètement désactivés.

C'est un peu simpliste. Il nous reste encore :
- les problèmes de chargement d'image (inaccessible sur le serveur, trop lourde, trop lente à s'afficher sur une connection un peu poussive) ;
- les cas où un navigateur graphique désactive (sur demande de l'utilisateur, à priori) les images et/ou les couleurs de fond, mais garde les autres styles appliqués ;
- le cas des navigateurs pour terminaux mobiles (petits écrans), qui pourraient bien avoir des arbitrages à faire : désactivation des images de fond, application de certains styles et non application d'autres, etc.

Et peut-être d'autres cas...

Au final, et même si ça ne répond pas à tous les besoins (en particulier les roll-overs en CSS, ou tout simplement une meilleure indépendance du contenu HTML et du style graphique), la solution la plus accessible et la plus robuste est celle de l'image de contenu dans le HTML, avec attribut alt correctement renseigné.

Enfin il me semble...