display: none vs visibility: hidden vs text-trattino: 9999 Come screen reader comportarsi con ciascuno di essi?

Question

Qual è la differenza tra questi tre per gli utenti di screen reader?

Answer 1

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

display: none: non sarà visto né sentito. *
visibility: hidden: non sarà visto né sentito. *
text-trattino: 9999:. non si vedrà, ma sarà udito

• La maggior parte del lettore di schermo non sarà 'parlare' display: none e visibility: hidden , ma ci sono pochi lettori di schermo come pwWebSpeak e HtReader che leggeranno anche queste troppo.

Answer 2

C'è una buona spiegazione di questo in A List Apart. http://www.alistapart.com/articles/fir/ Dipende prodotto.

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

Answer 3

C'è una buona sintesi di come lettori di schermo interpretano queste proprietà a WebAIM .

In poche parole, visibility: hidden e display:none sarà nascondere il testo da parte dei lettori di schermo, proprio come fa dagli altri. Tutti gli altri metodi saranno 'visibili' a uno screen reader.

Answer 4

Ci sono molte tecniche per nascondere il contenuto visivamente, ma averlo a disposizione per gli screen reader.

La tecnica H5BP lavora in FF, Webkit, Opera e IE6 +

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

Answer 5

answere completa è qui per assicurarsi che le caselle di input autoshow / riempimento automatico cromato doesnt. Sulla mia pagina web (Nuovo utente), campo di telefono e la password fioeld venivano autofilled con i dati memorizzati nella cache. Per sbarazzarsi di questo, ho creato due campi fittizi e ha dato loro una classe che li rende invisibile per l'utente. Una funzione jQuery per mostrare e poi nascondere questi dopo una frazione.

funzione di jQuery per mostrare e nascondere:

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

Campi di introduzione:

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