Usando CSS: para esconder um conteúdo necessário para os utilizadores de leitores de tela
  |  |
Imprimir  |
Enviar  |
Ação         |
Atenção: A versão original deste documento é CSS em Acção: Conteúdo Invisível apenas para Utilizadores de leitor de tela . Esta tradução francesa foi feita por Ideose como parte de um acordo entre WebAIM e Ideose .
Nota: Consulte a página documentos sobre acessibilidade web para uma lista de todos os documentos traduzidos. Outros recursos de acessibilidade web estão listados no portal digitais acessíveis .
Resumo
Introdução
Às vezes, há casos em que o conteúdo deve ser disponibilizado aos usuários do leitor de tela, mas escondido de pessoas que enxergam. Na maioria dos casos, se o conteúdo (especialmente o conteúdo que fornece a funcionalidade ou interatividade) é grande o suficiente para os usuários do leitor de tela, que provavelmente deve ser disponibilizado a todos os usuários. Caso as informações ou instruções são fornecidas apenas para usuários de leitores de tela são mais um reflexo da má concepção e má acessibilidade. No entanto, existem poucos casos onde a informação é visualmente óbvio, mas pode não ser para os utilizadores de leitores de tela. Nestes casos, é adequada para codificar uma declaração sobre esta informação, para que seja lido por um leitor de tela, mas invisível para os usuários que enxergam.
Técnicas para esconder texto
Existem vários mecanismos para ocultar o conteúdo. É importante que a implementação técnica dá o resultado desejado e é acessível.
visibility: hidden; e / ou display:none;
Esses estilos de ocultar o texto a todos os usuários. O texto é retirado do fluxo visual da página e é ignorado por leitores de tela. Não utilize este CSS se quiser que o conteúdo a ser lido por um leitor de tela. Mas usá-lo se você deseja que o conteúdo não é lido por leitores de tela.
width:0px;height:0px
Como acima, porque um elemento sem altura ou a largura é removido do fluxo da página, a maioria dos leitores de tela irá ignorar este conteúdo.
HTML atributos width e height com valor zero poderia, portanto, dar o mesmo resultado. Esta não é uma abordagem correta para esconder o conteúdo visual, mas permite que o conteúdo seja lido por um leitor de tela.
text-indent: -1000px;
Esta abordagem se move o conteúdo de 1000 pixels para a esquerda - para fora da tela visível. Os leitores de tela ler o texto sempre com esse estilo. No entanto, se um link ou elemento de formulário tem esse estilo, que pode resultar em uma indicação de foco (linhas pontilhadas ou as "formigas marchando" em torno de um link para o foco) que se estendem desde a onde o elemento deve ser localizado na página onde ele é, na verdade, na verdade localizado (extrema esquerda). Não é muito bonita. Como tal, é uma opção correta, se o item não contém elementos de navegação.
Conteúdo posicionamento fora da tela em absoluta
Use CSS para mover o conteúdo oculto para uma posição fora da tela ao vivo é geralmente considerado como o mais útil e acessível para esconder visualmente o conteúdo.
Conteúdo posicionamento fora da tela
Os seguintes estilos são recomendados para esconder visualmente o conteúdo para ser lido por um leitor de tela.
{Position: absolute;
esquerda:-10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;}
. A classe CSS Escondido deve ser indicado no código do item que deve ser escondido da seguinte forma:
<div class="hidden">Ce texte et caché.</div> Usuários com visão não vai ver a todo o conteúdo oculto. Na verdade, é exibida fora do seu alcance - bem escondida para a esquerda da janela visível do navegador. Usuários de leitores de tela têm acesso a conteúdos como se não estivesse escondido. Os leitores de tela ler o conteúdo normalmente, ignorando completamente os estilos utilizados nesta técnica.
Analisar o código em detalhe.
position:absolute; diz ao navegador para excluir o item do fluxo da página e começar a posicioná-lo. left:-10000px; . move o conteúdo de 10.000 pixels para a esquerda top:auto; diz ao navegador para verticalmente posicionar o conteúdo na mesma posição em que foi originalmente.
A falha de top pode resultar em que o estilo left é ignorado em alguns casos e em alguns navegadores.
Em suma, este pedaço de código move os 10000 pixels para a esquerda.
width:1px; height:1px; overflow:hidden; diz ao navegador para 1px pelo tamanho de 1px para o elemento e visualmente esconder tudo o que não se encaixam nessas dimensões.
Há alguns casos onde a posição (esquerda) não podem trabalhar enquanto todos os outros estilos estão habilitados.
Neste caso, o elemento permanece na sua posição inicial e tomar um tamanho de 1 pixel.
Observação
Uma versão anterior deste artigo recomenda o uso de left:0px; top:-500px .
Embora este posicionamento opera para armazenar o conteúdo acima do topo, descobrimos que se o elemento contém um link escondido ou forma, quando se tira o foco do teclado, o navegador tenta ir ao elemento - para rolar a página para cima.
Isso pode ser confuso para usuários com visão usando o teclado.
Ao posicionar diretamente sobre a esquerda, o navegador não vai rolar a página. Deve-se notar que, porque os links e elementos de formulário fornecer recursos interativos, que raramente deve ser escondido de pessoas que enxergam.
Usuários com visão não irá ser capaz de ver o que tem o foco elemento, uma vez que está fora da tela.
Metas e indicadores
Importante!
Geralmente, uma instrução sobre as informações devem ser escondidos usuários com visão e disponíveis para os utilizadores de leitores de tela somente se a informação é visualmente óbvio, mas desconhecido para os utilizadores de leitores de tela.
Esta técnica pode ser usada para fornecer padrões e indicadores para os utilizadores de leitores de tela. Deverá ser aplicada com critério e somente quando necessário. A página WebAIM mostra um bom uso desta técnica em três lugares.
Primeiro, o campo de busca no topo da página tem um título (tag label) imediatamente antes dele. É visualmente claro que o campo é um campo de pesquisa, mas um leitor de tela precisa de um rótulo para dar esta informação. Para fazer isso, nós fornecemos um título através de uma tag label, mas visualmente escondido.
Em segundo lugar, a trilha na parte superior da página é um elemento comum em sites. A maioria dos usuários de Internet compreender como ele funciona e pode identificá-la visualmente. Mas porque um leitor de tela acessa a lista de links de uma forma linear, pode não ser óbvio para os usuários de leitor de tela que este é o breadcrumb até que eles têm desempenhado um papel. Portanto, dizer-lhes. Para fazer isso, um texto escondido "Você está aqui:" foi adicionado um pouco antes do pão.
Finalmente, nós identificamos o início da publicidade na parte inferior de cada página com texto oculto. Tal como acontece com a farinha de rosca, é visualmente óbvio que este é um anúncio, mas não para um usuário de leitor de tela, como não começar a ler o conteúdo.
Você pode ver todo o texto oculto, desativando estilos WebAIM página. Lembre-se, visualmente todo o conteúdo escondido com CSS será visível se os estilos são desativados.
Outras implementações
Para um utilizador visual, um células do cabeçalho pode executar a função dupla de organizar o conteúdo da tabela e também proporcionar etiquetas (rótulo) para formar elementos dentro desta tabela, como pode ser visto na imagem abaixo de um formulário em um tabela de dados.
A linha de cabeçalho e coluna da tabela são de pouco valor em termos de compreensão do layout da tabela, mas os cabeçalhos não são os campos do formulário. Quando os utilizadores de leitores de tela para tabular um campo de formulário para outro campo, eles não vão ouvir os cabeçalhos da tabela. Na verdade, eles não ouvem qualquer rótulo. Os leitores de tela exigem rótulos para campos de formulário texto. Mas adicionar rótulos de texto para cada campo de formulário seria certamente redundante, desnecessário e, provavelmente, seria confuso para usuários com visão. Neste caso, os rótulos podem ser fornecidos no código adjacente aos seus campos de forma correspondente, mas escondido usando o CSS acima e implementado como segue ...
<label for= »amembers "class= »hidden »> Número de membros na equipe A </ label>
...
Outro exemplo de aparente incompatibilidade entre as necessidades dos usuários de leitores de tela e os usuários com visão ocorre quando muitos desenvolvedores criar campos de formulário que parecem pertencer a mesma etiqueta. Um exemplo comum disso é quando dois ou mais campos de entrada de texto são usados para números de telefone.
A maioria dos usuários que enxergam na América do Norte incluem as áreas de entrada de texto correspondem a diferentes partes de um número de telefone. Usuários de leitores de tela, no entanto, pode querer introduzir o número de telefone completo na primeira caixa. Eles certamente será um pouco surpreso quando eles descobrem que o campo é limitado a apenas três dígitos, ou que existem outros campos que não são denominados em que segui-lo.
A solução mais óbvia para este problema seria a de combinar todas as caixas de entrada de texto em um, e então fornecer o rótulo adequado. No entanto, a técnica de CSS pode também ser aplicado a esta situação para adicionar rótulos escondidos em cada caixa de texto separada.
Telefone <p>:
(
<label for= »area "class= »hidden »> Código de Área </ label>
<input name= »area "id= »area" type= »text "size= »3" maxlength= »3"/>
)
...
Conclusão
Quando as técnicas apresentadas aqui são usadas CSS para ocultar o conteúdo, os usuários com visão nunca vai saber que o conteúdo está presente (a menos que desativar estilos). Usuários de leitores de tela, por outro lado, nunca vai perceber que este conteúdo é invisível para os usuários que enxergam. Ambos os tipos de utilizadores serão capazes de utilizar o conteúdo intuitivamente sem qualquer modificação do código é necessário. Isto pode fornecer informações contextuais importantes, senão impossível capturar para o leitor de tela por causa de sua natureza visual. Quando utilizado judiciosamente, esta técnica pode resolver alguns problemas entre os requisitos de acessibilidade e as exigências do layout visual de páginas da web. Isto não é a única maneira de técnica ou apenas para resolver este problema, mas é uma das soluções que os programadores de Web podem usar quando necessário.
Relações comerciais
WebAIM é uma iniciativa de:
Direitos Autorais 1999-2009 WebAIM
