1183 sujets

Accessibilité du Web

Text-indent:-5000px vs display:none

Pages :
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 Smiley cligne .
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é ! Smiley ravi
Administrateur
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 ? Smiley biggol
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)
Administrateur
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 ! Smiley smile
Administrateur
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é Smiley cligne
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 Smiley langue !
Modifié par Neovov (24 Nov 2006 - 10:00)
Administrateur
Neovov a écrit :


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

Parfois ça fait du bien. Parfois même, c'est justifié Smiley cligne
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 Smiley cligne .

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

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 Smiley cligne
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é Smiley murf .

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 Smiley lol ), et j'aimerai bien connaître la réponse Smiley langue .
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... Smiley confus
eric1725 a écrit :
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 ?


Houlà malheureux, surtout pas !
Le web n'est pas séparé entre valides voyants sans troubles moteurs ou cognitifs d'une part, et non voyants utilisateurs de lecteurs d'écran !

Les liens d'évitement sont utiles pour les non-voyants, mais pas indispensables, car ceux-ci disposent de moyens de navigation rapide plus élaborés : naviguer dans l'architecture des titres de la page (attention donc à ce qu'elle soit cohérente !), et naviguer de lien en lien, entre autres.

Par contre, un handicapé moteur dont la seule manière de naviguer est de sauter de lien en lien grâce à l'utilisation d'un dispositif de pointage adapté (plus ou moins) à son handicap... les liens d'évitement lui sont très utiles. OR, IL A BESOIN DE LES VOIR (et même de les voir clairement).


Après, à chacun de définir s'il compte mettre ce moyen en oeuvre, ou se contenter de liens d'évitement accessibles uniquement aux non-voyants, voire ne pas en mettre du tout. Mais on ne peut pas affirmer que ces liens devraient être cachés car uniquement destinés à un public de non-voyants.
Pages :
Sujet clos
Aller à