display: none vs visibility: hidden vs text-indent: 9999 Comment se comporter lecteur d'écran à chacun?

StackOverflow https://stackoverflow.com/questions/1755656

Question

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

Était-ce utile?

La solution

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

display: none: ne sera pas vu ni entendu. *
visibility: hidden: ne sera pas vu ni entendu. *
text-indent: 9999:. ne sera pas vu mais il sera entendu

  • La plupart du lecteur 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 même ceux-ci aussi.

Autres conseils

Il y a une bonne explication à ce sujet dans A List Apart. http://www.alistapart.com/articles/fir/ Cela dépend de produit. 

PRODUCT                         DISPLAY: NONE       VISIBILITY: HIDDEN
Hal version 5.20                Does not read       Reads
IBM Home Page Reader 3.02       Does not read       Does not read
Jaws (4.02, 4.50, 5.0 beta)     Reads               Reads
OutSpoken 9                     Does not read       Does not read
Window-Eyes 4.2                 Does not read       Does not read

Il y a un très bon résumé de la façon dont les lecteurs d'écran interprètent ces propriétés à WebAIM .

En un mot, visibility: hidden et display:none cachera texte de lecteurs d'écran comme il le fait des autres. Toutes les autres méthodes seront « visibles » à un lecteur d'écran.

Il y a de nombreuses techniques pour cacher visuellement le contenu mais qu'il soit disponible pour les lecteurs d'écran.

La technique de H5BP travaille 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;
}

answere complète est ici pour vous assurer que le chrome ne marche pas des boîtes d'entrée autoshow / autofill. Sur ma page web (Nouvel utilisateur), champ de téléphone et mot de passe fioeld étaient autofilled avec des données mises en cache. Pour se débarrasser de cela, je crée deux champs factices et leur a donné une classe qui les rend invisibles à l'utilisateur. Une fonction jquery pour montrer et cacher ces après une fraction.

fonction JQuery pour afficher et cacher: 

$().ready(function() {
    $(".fake-autofill-fields").show();
    // some DOM manipulation/ajax here
    window.setTimeout(function () {
        $(".fake-autofill-fields").hide();
    }, 1000);
});

Classe: 

.fake-autofill-fields
{ 

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

Les champs d'entrée: 

<input style="display:none" type="text" class="fake-autofill-fields" name="fakeusernameremembered"/>
<input style="display:none" type="password" class="fake-autofill-fields" name="fakepasswordremembered"/>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top