affichage: aucun vs visibilité: masqué vs texte-indent: 9999 Comment le lecteur d'écran se comporte-t-il avec chacun?

Question

Quelle est la différence entre ces trois pour les utilisateurs de lecteur d'écran?

Answer 1

consulter: http://css-discuss.incutio.com/?page=ScreenreaderVisibility

display:none: n'être vu ni entendu. *
visibility: hidden: ne sera pas vu ni entendu. *
text-indent: 9999: ne sera pas vu, mais il sera entendu.

• La plupart des lecteurs d'écran ne sera pas "parler" display:none et visibility: hidden , mais il y a peu de lecteurs d'écran comme pwWebSpeak et HtReader qui va lire ces trop.

Answer 2

Il y a une bonne explication à ce sujet dans Une Liste à Part. http://www.alistapart.com/articles/fir/ Cela dépend du produit.

PRODUIT DISPLAY: NONE VISIBILITY: HIDDEN
Hal version 5.20 Ne pas lire Lit
IBM Home Page Reader 3.02 Ne pas le lire, Ne lisez pas
Mâchoires (4.02, 4.50, 5.0 beta) Lit Lit
Franc 9 Ne pas le lire, Ne lisez pas
Window-Eyes 4.2 Ne pas le lire, Ne lisez pas

Answer 3

Il existe un très bon résumé de la façon dont les lecteurs d’écran interprètent ces propriétés sur WebAIM .

En résumé, visibility: hidden et display:none masqueront le texte des lecteurs d'écran comme il le fait pour les autres. Toutes les autres méthodes seront "visibles" pour un lecteur d'écran.

Answer 4

Il existe de nombreuses techniques pour masquer le contenu visuellement, mais il est disponible pour les lecteurs d'écran.

La technique H5BP fonctionne en FF, Webkit, Opera et IE6 +

 .visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}