web-dev-qa-db-fra.com

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

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

cssaccessibilityscreen-readers
43
Jitendra Vyas

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

affichage: aucun: ne sera ni vu ni entendu. *
visibilité: caché: ne sera ni vu ni entendu. *
retrait de texte: 9999: ne sera pas vu mais il sera entendu.

  • La plupart des lecteurs d'écran ne parleront pas afficher: aucun et visibilité: cachée, mais il y a peu de lecteurs d'écran comme pwWebSpeak = et HtReader qui lira même ces derniers aussi.
35
Rakesh Juyal

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

 AFFICHAGE DU PRODUIT: AUCUNE VISIBILITÉ: CACHÉE 
 Version Hal 5.20 Ne lit pas Lit 
 IBM Home Page Reader 3.02 Ne lit pas Ne lit pas 
 Mâchoires (4.02, 4.50 , 5.0 beta) Lit Lit 
 OutSpoken 9 Ne lit pas Ne lit pas 
 Window-Eyes 4.2 Ne lit pas Ne lit pas
16
Sanghyun Lee

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 masquera 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.

9
anschauung

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

La technique H5BP fonctionne dans 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;
}
3
Oriol

Complete Answere est là pour s'assurer que chrome ne montre pas/ne remplit pas automatiquement les zones de saisie. Sur ma page Web (nouvel utilisateur), le champ du téléphone et le mot de passe fioeld étaient remplis automatiquement avec les données mises en cache. Pour se débarrasser de cela , J'ai créé deux champs fictifs et leur ai donné une classe qui les rend invisibles à l'utilisateur. Une fonction jquery pour les afficher puis les masquer après une fraction.

Fonction Jquery pour afficher et masquer:

$().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; 
}

Champs de saisie:

<input style="display:none" type="text" class="fake-autofill-fields" name="fakeusernameremembered"/>
<input style="display:none" type="password" class="fake-autofill-fields" name="fakepasswordremembered"/>
0
Nitasha