Alternatives à display:none
La propriété CSS display:none, permet de cacher un élément et son contenu dans un document HTML.
Avec le temps, on réalise rapidement que display: none; pourrait être très utile pour développer des sites web ayant une sémantique irréprochable tout en respectant une charte graphique qui ne le permet pas.
Malheureusement, les lecteurs d'écrans modernes supportent le CSS, et cacheront donc autant qu'un navigateur graphique, le contenu que vous souhaitez cacher.
Il existe donc des solutions à ce problème, la plus connue dans sa plus simple forme est :
position:absolute;
left:-9999%;
qui aura pour effet de déplacer le contenu "dans le décor" vers la gauche sur un navigateur graphique.
Il existe d'autres techniques, qui jouent sur le texte et la police du contenu :
position:absolute;
text-indent:-9999%;
ou encore ..
position:absolute;
font-size:0;
etc ... les deux dernières sont mauvaises !
Pourquoi ?
- Dans le premier exemple, nous gardons la forme du texte et assurons ainsi l'accessibilité au contenu, les lecteurs d'écrans risquent de ne pas lire font-size:0; et text-indent:-9999%
Pourquoi left ? Ne peut-on pas déplacer le text vers un autre côté ?
- Non, avant tout il s'agit d'appliquer un style "logique", le déplacer vers la gauche, n'altérera pas son emplacement "physique" dans le contenu (sauf si la direction d'écriture est différente).
- Windows-Eyes duplique les liens qui se trouvent à une valeur négatives sur top.
- Certains navigateurs rencontre des bugs de navigation clavier en déplaçant le texte à une position top ou bottom.
Notez que la question n'est pas simple, et qu'on est des fois mené à faire des compromis, par exemple l'élément <legend> ne disparaîtra pas grâce à la technique évoqué ci-dessus sur Firefox.
Il en va de même pour IE sur certains éléments, vous pouvez y arriver en couplant des text-indent et line-height ... Malheureusement je n'ai pas pu observer des résultats sur des lecteurs d'écrans.
Si vous pouvez tester ces problématiques et faire des retours d'expérience, n'hésitez pas :)
3 commentaires:
J'ai un petit commentaire dans l'utilisation de la position absolute avec un top / left négatif. Je trouve plus efficace d'utiliser ces alternatives que d'utiliser le display ou visibilty. Par contre, cela peut ammener certaines complications.
J'utilise cette méthode en ce moment pour un menu CSS html vertical qui comporte 3 niveaux et jai un problème avec le niveau 2 et 3. J'ai créé cette classe pour "cacher" les niveaux inférieurs d'un lien. Cependant, dans mon niveau 2, sous ie6 (avec firefox,aucun problème), il garde une zone vide de l'emplacement du menu de niveau 3 en dessous du lien.
Bien que je trouve cette technique plus efficace pour les lecteurs d'écran que l'utilisation du display ou visibility, je demeure avec ce problème que je n'arrive pas a résoudre. Avec cette classe, il garde une zone pour la position de la boite tandis qu'en utilisant un display none, il l'enlève complètement..
J'ai tout essayé, line-height, font-size, text-indent, dans le négatif ou a 0, et rien ne se passe...
avez-vous une solution pour ce problème?
voici le lien du menu en question pour mieux visualiser le problème
http://i90.photobucket.com/albums/k261/onlyge007/testmenu.jpg
Je vais avoir du mal à diagnostiquer un bug à partir d'une image :P
Si tu pouvais nous proposer un lien vers une page, se serait vachement plus simple ;)
Sinon je dirais que tu as définis un height à tes niveaux et que tu n'appliques pas la technique à ce même élément.
merci de ta tentative, j'ai trouvé mon erreur, un simple padding quil aimait pas... ;o)
Enregistrer un commentaire