CSS em ação: conteúdo invisível apenas para usuários de leitores de tela

Introdução

A mulher se esconde atrás das mãos Existem casos pontuais em que o conteúdo deve ser disponibilizado para usuários de leitor de tela, mas escondido de utilizadores normovisuais. Na maioria dos casos, se o conteúdo (principalmente conteúdo que fornece a funcionalidade e interatividade) é importante o suficiente para usuários de leitor de tela, ele provavelmente deve ser disponibilizado a todos os usuários. Casos em que sugestões são detalhadas ou instruções são fornecidas apenas para usuários de leitores de tela são, provavelmente, um reflexo da má concepção de design e acessibilidade. No entanto, existem alguns casos onde a informação é evidente visualmente, mas pode não ser clara para os usuários de leitores de tela. Nestes casos, pode ser conveniente marcação de conteúdo de uma forma que ele é lido por um leitor de tela, mas invisível para utilizadores normovisuais.

Técnicas para ocultar o texto

Existem diversos mecanismos que podem ser usados para esconder o conteúdo. É importante que a técnica a ser implementada resulte no objetivo desejado e em acessibilidade.

`visibility: hidden;` e/ou `display:none;`

Esses estilos vão ocultar o texto de todos os usuários. O texto é removido do fluxo visual da página e é ignorado pelos leitores de tela. Não use este CSS se quiser que o conteúdo seja lido por um leitor de tela. Mas USE isto para o conteúdo que você não quer que seja lido por leitores de tela.

`width:0px`, `height:0px` e outras técnicas de tamanho 0 pixel

Tal como referido acima, devido a um elemento sem nenhuma altura ou largura é removido do fluxo da página, a maioria dos leitores de tela irão ignorar este conteúdo. Largura e altura do HTML pode dar o mesmo resultado. Não redimensione o conteúdo a 0 pixels, se você deseja que o conteúdo seja lido por um leitor de tela. Conteúdos estilizados com font-size:0px ou line-height:0 podem funcionar, ainda que os elementos tomem espaço horizontal na tela. Todas estas técnicas podem implicar em penalizações de mecanismo de pesquisa já que podem ser interpretadas como maliciosas.

`text-indent: -10000px;`

Esta abordagem move o conteúdo para 10000 pixels para esquerda - portanto, fora da tela visível. O valor real tem pouca importância, desde que ele esteja posicionado fora da tela. Os leitores de tela ainda irão ler o texto com esse estilo. No entanto, se um link ou elemento de formulário recebe esse estilo, que pode resultar em um indicador de foco (as linhas pontilhadas ou “formigas em marcha” que cercam um link focalizado) que se estende a partir de onde o elemento deve ser localizado na página para o lugar é efectivamente localizado (para a esquerda). Isto não é muito bonito. Essa abordagem também causa problemas em idiomas da direita para a esquerda. Como tal, esta abordagem pode ser uma opção viável se o campo não contém elementos navegáveis, embora melhores técnicas estejam disponíveis.

CSS clip

position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);

Uma técnica bastante moderna de usar CSS para ocultar ou cortar conteúdo que não se encaixa em um 1 pixel de área visível vai, essencialmente, esconder o conteúdo de forma visível, mas ainda permitir que ele seja lido por leitores de tela modernos.

Posicionamento absoluto de conteúdo fora da tela

Usar CSS para mover elementos ocultos para uma posição fora da tela é geralmente aceito como o método mais útil e acessível de esconder o conteúdo visualmente.

Colocar conteúdo fora da tela

A seguir estão os estilos recomendados para esconder visualmente conteúdos que serão lidos por um leitor de tela.

.hidden {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}

A classe CSS .hidden deve ser referenciada no interior da tag do elemento a ser escondido, como mostrado:

<div class="hidden">Este texto está ocultado.</div>

Usuários normovisuais não verão este conteúdo ocultado. Ele vai estar fora de seu alcance de visão - bem escondida à esquerda da janela visível do navegador. Usuários de leitores de tela terão acesso ao conteúdo como se não estivesse escondido. Os leitores de tela podem ler o conteúdo normalmente, ignorando completamente os estilos usados nesta técnica.

Vamos analisar os estilos em detalhe.

position:absolute; diz ao navegador para remover o elemento do fluxo da página e começar a posicioná-lo. left:-10000px; move o conteúdo 10000 pixels para esquerda. top:auto; diz ao navegador para posicionar o conteúdo verticalmente no mesmo local em que estava originalmente. Omitir top pode resultar que o estilo left seja ignorado em alguns casos e navegadores. Em suma, esta parte do filme de código do elemento 10000 pixels em linha reta para a esquerda. Em suma, esta parte de código move o elemento 10000 pixels em linha reta para a esquerda.

width:1px; height:1px; overflow:hidden; informa ao navegador para fazer o elemento no tamanho 1px por 1px para esconder visualmente tudo o que não se encaixa nestas dimensões. Enquanto isto é provavelmente um exagero e provavelmente poderia ser omitido na maioria das vezes, tem alguns casos onde o posicionamento poderia estar desabilitado, enquanto todos os demais estilos estão habilitados. Neste caso, o elemento irá permanecer em sua posição original, mas vai tomar apenas 1 pixel de espaço.

Nota

Algumas vezes é recomendado posicionar elemento usando left:0px; top:-500px (ou simiar). Enquanto isso funciona através do posicionamento do conteúdo acima do topo da página, se o elemento oculto contém um link ou elemento de formulário, ao receber o foco do teclado, o navegador tenta rolar para o elemento - então rolando o navegador para o topo da página. Isso poderia resultar em confusão para os usuários de teclado normovisuais. Ao posicionar diretamente para a esquerda, o navegador não rolará para o início da página. Deve notar-se que, devido a links e os elementos de formulário proporcionar funcionalidade, eles raramente devem ser escondidos dos utilizadores normovisuais. Usuários com visão não serão capazes de ver que elemento atualmente tem o foco devido ele estar escondido fora da tela.

Exemplos

Importante!

Em geral, o conteúdo só deve ser escondido dos usuários com visão e disponibilizados para os usuários de leitores de tela quando o conteúdo é evidente visualmente, mas não aparente para os usuários de leitores de tela.

Sinais e indicadores de instrução

Em primeiro lugar, a caixa de texto de pesquisa na parte topo da página tem um rótulo oculto imediatamente antes dele. É evidente visualmente que a caixa de texto é para procurar devido à apresentação e no botão de pesquisa, mas um leitor de tela requer um rótulo para o campo de texto. Como tal, nós fornecemos um rótulo, mas o escondemos visualmente. Em segundo lugar, o caminho-de-pão (do inglês breadcumb) na parte superior da página é uma convenção de design comum. A maioria dos usuários da Internet compreendem a convenção e podem identificar o caminho-de-pão visualmente. Devido o leitor de tela acessar os links de navegação e conteúdo de forma linear, pode não ser evidente para eles que é caminho-de-pão antes de lerem uma parte dele. Como tal, nós adicionamos o texto oculto de “Você está aqui:” pouco antes do caminho-de-pão.

Você pode ver tudo isso de texto oculto, desativando estilos para esta página. Lembre-se, todo o conteúdo oculto visualmente com CSS ficará visível se estilos são desativados.

Links “Ir para o conteúdo principal”

Links “Ir para o conteúdo principal” são um dos poucos lugares onde acessibilidade tem um impacto direto e diferente do design visual. Para poder ser útil, o link de “pular” deve ser o primeiro da página. Designers podem não gostar da ideia de por um link como a primeira coisa na página - em especial se o link não será usado pela maioria dos visitantes do site. Porém, esconder o link o faz inusável para usuários que enxergam e usam teclado - um grupo de usuários que pode ter grande benefício com este link.

Uma forma de conciliar o impacto de que os links “que pulam” tem no design visual com as necessidades dos usuários normovisuais e usuários de leitores de de tela com dificuldades de mobilidade é a utilização de uma técnica que esconde o “pular para o conteúdo principal” até que o usuário pressione a tecla tab. Quando o link recebe o foco, a ligação torna-se visível para os utilizadores que enxergam. Isso permitiria que os usuários de teclado cegos ou normovisuais tirem proveito da funcionalidade do link.

Para conseguir isto, dois estilos são criados - um para o elemento <a> e outro para a pseudo-classe a:focus. O estilo criado para pseudo classe a:focus, será ativo apenas quando o usuário pressionar Tab para ver o link (i.e., ele tem foco), e o link irá voltar a ter seu estilo padrão (i.e., ele vai vai voltar a ser escondido fora da tela novamente) quando o usuário pressionar Tab novamente para sair do link.

#skip a {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}
#skip a:focus {
    position:static;
    width:auto;
    height:auto;
}

Os estilos devem ser aplicados a um link de “pular” (em inglês skip).

<div id="skip"><a href="#content">Pular para conteúdo principal</a></div>

Um ponto negativo desta abordagem, a nível conceitual, é que a subta aparição de um link que estava previamente invisível é inesperada, e poderia confundir o usuário de teclado que enxerga. O link também deve ser estilizado claramente para ficar aparente. Estes não são problemas para leitores os leitores de tela ou usuários que usam mouse porque eles nunca verão este link.

Outras implementações

Campos de formulário são algumas vezes apresentados visualmente de modo que o texto é geralmente associado como o etiqueta para vários campos. Considere a entrada de dados onde um texto “Nome” pode descrever a função de várias caixas de texto que aparecem abaixo dela. As vezes tabelas são usadas para essas apresentações. Alternativamente, as vezes um controle pode ser marcado por vários itens de texto, como um campo de senha que é precedida pela palavra “senha:” e seguido pela palavra “Obrigatório”. Usando a forma padrão de rotulagem de formulário, não há um modo de um item de texto a múltiplos campos ou múltiplos textos a um campo de formulário. Nestes casos, as etiquetas apropriadas podem ser fornecidas na marcação adjacente aos respectivos elementos de forma, mas escondida usando o CSS acima. Um exemplo comum é quando dois ou mais elementos de entrada de texto são usadas para números de telefone.

A maioria dos usuários visuais na América do Norte vão entender que o texto individual nas áreas de entrada correspondem as diferentes seções de números de telefone padrão. Usuários de leitores de tela, no entanto, podem tentar introduzir o número de telefone inteiro na primeira caixa. A provável confusão ocorre quando eles descobrem que a caixa limita-os a apenas 3 caracteres ou que existem caixas de texto sem etiquetas adicionais que se seguem.

A solução mais óbvia para este problema específico seria combinar todas as caixas de entrada de texto em uma única caixa de entrada de texto, e, em seguida, fornecer a etiqueta adequada. No entanto, as etiquetas não visíveis para cada caixa de texto distinta também irão garantir a acessibilidade.

 Phone number: (
   <label for="area" class="hidden">Area code</label>
   <input name="area" id="area" type="text" size="3" maxlength="3">
)…

As etiquetas não visiveis na tela poderiam, neste caso, fornecer uma descrição adequada para usuários de leitores de tela.

Nota

No exemplo acima, o atributo title também poderia ser utilizado para fornecer esta informação. Informações no atributo title será lido por leitores de tela quando uma etiqueta não está presente. Além disso, aria-labelledby poderia ser utilizado para fornecer vários marcadores por entrada ou entradas múltiplas por etiqueta.

Conclusão

Quando as técnicas CSS aqui apresentadas são usadas para ocultar o conteúdo, os usuários que enxergam nunca saberão que o conteúdo está ali (a menos que desativem estilos). Usuários de leitores de tela, por outro lado, nunca vai perceber que este conteúdo é invisível para os utilizadores invisuais. AAmbos os tipos de usuários serão capazes de usar o conteúdo de forma intuitiva, sem precisar ajustar nem muito nem pouco a marcação HTML. Isso pode fornecer indicações contextuais importantes que são impossíveis para os usuários de leitores de tela para compreender por causa da natureza visual destes sinais. Quando utilizado criteriosamente, esta técnica pode resolver um pouco da tensão entre as exigências de acessibilidade e as demandas de design visual. Não é a única técnica ou método de resolver este problema, mas é um que os desenvolvedores web podem adicionar à sua lista de soluções possíveis quando surge a necessidade.

Brito

Pesquisar este blog