Acrescentando mais acessibilidade aos seus sites com CSS e XHTML.

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.

4 Comentários

Arquivado em css, Javascript, xhtml

4 Respostas para “Acrescentando mais acessibilidade aos seus sites com CSS e XHTML.

  1. A idéia de usar position é interessante, mas um leitor de tela num deve interpretar display:none, principalmente se a css for definida para media screen. Um leitor de tela deve interpretar somente folhas de estilo definidas com media aural ou speech. Entretanto, no momento não conheço nenhum leitor que faça isso. A maioria ignora qualquer folha de estilo existente. O navegador Opera já inclui um sintetizador de voz que lê as páginas e obedece ALGUMAS das regras de uma folha de estilo aural. Porém, o idioma da página tem que estar no mesmo idioma do sintetizador instalado. Isso eu ensinei no Curso de Desenvolvimento de Sites com Padrões Web da UTFPR! []s!

  2. Isso ae cara! Ja usei essa técnica antes em alguns sites pra esconder algo rs
    mas depois que descobri o display:none só usei ele.. mas para a questão de acessibilidade isso é uma boa!

    Valeww! t+

  3. Olá amigo,
    vejo que seu blog é muito interessante, deseja que eu coloque no meu blogroll?
    e vc faria o mesmo?
    o meu fala mais sobre tecnologia, asp.net c# nessa linha
    ta afim

    vlw

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s