display: none vs visibility: oculto vs texto-sangrado: 9999 ¿Cómo se comporta el lector de pantalla con cada uno?

Question

¿Cuál es la diferencia entre estos tres usuarios de lectores de pantalla?

Answer 1

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

display: none: no será visto ni oído. *
visibility: oculto: no se verá ni se escuchará. *
texto-sangrado: 9999: no se verá pero se oirá.

• La mayor parte del lector de pantalla no 'hablar' display: none y visibilidad: oculto, pero hay pocos lectores de pantalla como pwWebSpeak y HtReader que será leído incluso éstos también.

Answer 2

Hay un muy buen resumen de cómo los lectores de pantalla interpretan estas propiedades en WebAIM.

En pocas palabras, visibility: hidden y display:none ocultarán el texto de los lectores de pantalla al igual que lo hace de los demás. Todos los otros métodos serán 'visibles' para un lector de pantalla.

Answer 3

Hay una buena explicación al respecto en A List Apart. http://www.alistapart.com/articles/fir/ Depende del producto.

 
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 4

Hay many techniques para ocultar el contenido visualmente, sino que esté disponible para los lectores de pantalla.

La técnica H5BP funciona en FF, Webkit, Opera y 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 completo está aquí para hacer cajas de entrada Autoshow/relleno automático de cromo doesnt seguro. En mi página web (Nuevo usuario), el campo de teléfono y el campo Contraseña se estaban cargando automáticamente con datos en caché. Para deshacerme de esto, creé dos campos ficticios y les di una clase que los hace invisibles para el usuario. Una función jquery para mostrar y luego ocultarlos después de una fracción.

función

jQuery para mostrar & ocultar:

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

Clase:

.fake-autofill-fields 
{ 

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

Los campos de entrada:

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