Exibição: Nenhum vs Visibilidade: Oculto vs Indent: 9999 Como o leitor de tela se comporta com cada um?

Question

Qual é a diferença entre esses três para usuários de leitores de tela?

Answer 1

referir: http://css-discuss.incutio.com/?page=screenReaderVisibility

Mostrar nenhum: não será visto nem ouvido. *
Visibilidade: Hidden: não será visto nem ouvido. *
TEXT-INDENT: 9999: não será visto, mas será ouvido.

• A maioria do leitor de tela não vai 'falar' Mostrar nenhum e Visibilidade: escondida , mas existem poucos leitores de tela como pwwebspeak e Htreader, que também lê isso.

Answer 2

Há uma boa explicação sobre isso em uma lista à parte. http://www.alistapart.com/articles/fir/Depende do produto.

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

Há um resumo muito bom de como os leitores de tela interpretam essas propriedades em Webaim.

Em poucas palavras, visibility: hidden e display:none ocultará o texto dos leitores de tela como acontece com os outros. Todos os outros métodos serão 'visíveis' para um leitor de tela.

Answer 4

Há muitas técnicas Para ocultar o conteúdo visualmente, mas disponibilizá -lo para leitores de tela.

A técnica H5BP funciona em 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

A resposta completa está aqui para garantir que o Chrome não faça caixas de entrada automática/atendimento automático. Na minha página da web (novo usuário), o campo telefônico e a senha do Fioeld estavam sendo atendidos com dados em cache. Para me livrar disso, criei dois campos fictícios e dei a eles uma aula que os torna invisíveis para o usuário. Uma função jQuery para mostrar e depois esconder -os após uma fração.

JQuery Função para mostrar e esconder:

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

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"/>