display: none vs visibility: hidden vs text-indent: 9999 Comment se comporter lecteur d'écran à chacun?
-
20-09-2019 - |
Question
Quelle est la différence entre ces trois pour les utilisateurs de lecteurs d'écran?
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"/>