Olá amigos leitores, hoje, após uma rápida olhada nos meus feeds, um assunto interessante me chamou a atenção o assunto tratava sobre uma propriedade do CSS muito utilizada na técnica de Image Replacement a propriedade display:none o artigo real sobre o assunto tem o nome de “Hiding with CSS: Problems and Solutions” (tradução: Esconder com CSS: Problemas e Soluções). Não vou traduzir o artigo neste poste apenas vou fazer uma pequena reflexão sobre a solução e o problema que me chamou a atenção, então vamos ao que interessa.
O Problema em esconder elementos (X)HTML com a propriedade display:none da CSS.
No artigo o autor diz que o problema em esconder um elemento com CSS é diretamente ligado a acessibilidade que o site pode ter. Pois quando usamos a propriedade:
elemento {display:none}
Estamos dizendo ao navegador que ele não deve apresentar esse elemento ao usuário, o que de uma forma visual este é o objetivo da propriedade, porém, para pessoas com deficiência física e que precisam utilizar leitores de tela para acessarem o site pode ocorrer um problema, pois o leitor não irá ler nem falar a propriedade com display:none.
Ok até ai blz. Agora vou aprensentar uma coisa interessante sobre acessibilidade que costumo colocar em meus projetos. Trata-se de um menu escondido que fica disposto apenas para fins de acessibilidade. Eu crio um menu normalmente com as opções para que o usuário deficiente possa acessar as seções do site usando o teclado, ficando algo como:
<div id=”atalhosdeacessibilidade”>
<p>Menu, acesse o conteúdo do site utilizando o menu abaixo para facilitar sua navegação.</p>
<a href=”#conteudoPrincipal” accesskey=”1″ tabindex=”155″>ir para conteúdo</a>,
<a href=”#menu” accesskey=”2″ tabindex=”160″>ir para menu</a>,
<a href=”#conteudoInformativo” accesskey=”3″ tabindex=”165″>ir para conteúdo informativo</a>
</div>
E mando esconder com a propriedade display:none
#atalhosdeacessibilidade {display:none}
E voylá! Temos um menu especial para usuários deficientes, e consequêntemente um site mais acessível. Bom tenho que deixar claro que a idéia inicial deste menu não foi de minha autoria e sim andei copiando do meu Prof. e Chefe o Thiago TPC (Twitter – http://twitter.com/thiagotpc) 😛 .
Agora depois de ler o artigo sobre o problema de esconder o elemento com a regra CSS display:none é que o programa leitor de tela não irá pronunciar o paragrafo dentro da DIV #atalhosdeacessibilidade.
A solução para esconder um elemento na tela de forma que possa ser lido por um programa leitor de tela.
No artigo o autor detalhe que ao invés de usar a propriedade display:none para não apresentar um determinado elemento na tela sem deixar a acessibilidade de lado é usar a propriedade position:absolute e movimentar o elemento para fora da viewport do navegador. Ficando algo como:
#atalhosdeacessibilidade { position:absolute; left:-9999px; }
Assim desta forma o programa leitor de tela irá encontrar a DIV e irá ler o parágrafo dentro desta para o usuário e assim ele saberá sobre o recurso de acessibilidade disponível no site.
Bom é isso ai, galera, axo que isso sirva pra acrescentar conhecimento a vocês para que não esquecam dos usuários deficientes que também querem acessar o os sites por nós desenvolvidos.
Dica: para saber sempre sobre novos POSTS no meu blog me sigam no Twitter 🙂
http://twitter.com/anestesya
Té a próxima.