display: none vs visibilidad: oculto vs texto-guión: 9999 ¿Cómo se comporta lector de pantalla con cada uno?

Question

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

Answer 1

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

display: none: No será visto ni oído. *
visibilidad: oculto: no se ve ni se oye. *
texto-guión: 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 leerá incluso éstos también.

Answer 2

Hay una buena explicación de esto 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 3

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á el texto de los lectores de pantalla al igual que lo hace desde otros. Todos los demás métodos serán 'visible' a un lector de pantalla.

Answer 4

para ocultar el contenido visualmente, sino tenerlo disponible para 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), campo de teléfono y contraseña fioeld estaban siendo autorrellenará con los datos almacenados en caché. Para deshacerse de esto, he creado dos campos ficticios y les dio una clase que hace que sean invisibles para el usuario. Una función jquery para mostrar y luego ocultar estos después de una fracción.

Función de jQuery para mostrar y 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"/>