Muitos tutoriais de CSS e JavaScript sugestivamente usam display:none
para esconder elementos. Pode ser temporariamente, por exemplo, quando usamos
JavaScript para esconder ou para exibir partes da página dependendo das ações
do usuário, ou permanentemente, por exemplo nas técnicas de substituição de
imagens, redirecionamento de links ou cabeçalhos estruturais.

Em muitos casos, usar display:none
para esconder um elemento é uma má escolha, pois reduz a acessibilidade. Eu
pensei que isso fosse um fato bem conhecido, mas aparentemente existem muitas
pessoas que não reconhecem que isso é um problema. Por essa razão, aqui está
uma rápida explicação do problema e uma sugestão de técnica alternativa que
pode ser aplicada (esta eu também pensava que fosse bem conhecida). 

display:none, na verdade, quer dizer não exibir ou
expor.

O que muitos parecem não saber é que display:none realmente significa “finja que esse elemento não existe. Não
mostre, imprima ou exponha esses
conteúdos.” Talvez o mais óbvio exemplo de como isso pode causar problemas é
quando uma pessoa usando um Screen Reader (leitor de tela, auxilia deficientes visuais ao acessarem a internet)  visita um site que
usa display:none para esconder
algo de usuários com deficiência visual. Já que a maioria dos Screen Readers
ignoram qualquer coisa que seja
escondido com display:none,
usando display:none para
esconder coisas como redirecionamento de links, textos, links de navegação ou cabeçalhos estruturais
é uma idéia terrível.

Uma técnica alternativa, que seja muito menos provável que cause
problemas, é a técnica “off -left” (descrito no ScreenreaderVisibility no
css-discuss Wiki), que envolve o posicionamento absoluto do elemento escondido
para fora da viewport. Aqui está o CSS, eu normalmente uso este:

.structural {

position:absolute;

left:-9999px;

} 

O efeito visual é o mesmo que estar usando o display:none, mas agora o Screen Reader está apto para
falar o conteúdo dos elementos escondidos.

Escondendo
com CSS, exibindo com JavaScript

Outro caso em que você precisa pensar seriamente antes de usar CSS para
esconder algo é quando você pretende mostrar isso quando o usuário executa uma
determinada ação, por exemplo, menus dinâmicos ou textos de ajuda em formas. Se
você está usando JavaScript para mostrar algo, você deve também usar JavaScript
para ocultar isso. De outra maneira, pessoas com CSS habilitado e Javascript
desabilitado nunca serão capazes de ver o conteúdo oculto.

A solução é simples. Ao invés de usar uma id ou uma classe nome que
está na marcação para aplicar o CSS escondido, use JavaScript para adicionar
uma classe nome para os elementos que você quer esconder. Depois crie uma regra
CSS que esconda qualquer elemento com essa classe nome.

Uma opção alternativa é usar o JavaSript para dar ao elemento body uma classe tal como “js”, e usa
nos seus seletores do CSS.

Em ambos os casos, se CSS e JavaScript estão disponíveis e seus
scripts funcionam como esperado. Se o CSS está on, mas o JavaScript não, bem,
obviamente o script não vai funcionar, mas pelo menos o conteúdo estará
disponível a todos.

*

Publicado originalmente em http://www.456bereastreet.com/archive/200905/hiding_with_css_problems_and_solutions/