Bruno Torres ponto net

Quem disse que display:none esconde conteúdo do JAWS?

• Tweetar

Hoje me deparei com um problema que me remeteu há uma história antiga, da ascensão e queda do FIR como técnica eficiente de Image Replacement.

Na época, o FIR foi levado à fogueira e deixou de ser recomendado pelos especialistas no assunto, pois o artifício de se esconder o conteúdo de um SPAN usando display:none esconderia o conteúdo também de leitores de tela, notadamente do JAWS, um dos mais (talvez o mais) usados leitores de tela do mundo.

Como leitores de tela são extremamente difíceis de usar por pessoas que enxergam e como tinha gente importante dizendo que isso funcionava assim e ponto e que tinham testado e etcetera e tal, nunca me preocupei em verificar com minhas próprias mãos (e ouvidos) se isso era realmente verdade.

Acontece que estou desenvolvendo um site para um português, que é cego. Ele me pediu que, em algumas partes do site, usasse uma função em JavaScript para alternar um determinado conteúdo (estilo toggle). Como os conteúdos são pequenos, não precisei usar nada de AJAX, simplesmente deixá-los carregados (e escondidos) no HTML e, de acordo com a ação do usuário, esconder um elemento e mostrar outro. Simples assim.

Fui na onda de que o display:none iria esconder o conteúdo do JAWS…e me dei mal.

O cliente insistia em me dizer que o lance não funcionava e eu não entendia porque. Segundo ele, o leitor de tela (sim, o JAWS) estava lendo todo o conteúdo, mesmo o que deveria estar escondido.

Peguei um café e comecei a pensar. O que poderia estar errado?

Simples, o JAWS ignora, sim, um determinado conteúdo escondido via display:none, a não ser que você declare este display:none apenas para mídias visuais (screen, por exemplo).

Veja bem. Em geral, quando aplicamos uma folha de estilos CSS a um HTML, esquecemos de declarar a(s) mídia(s) (ou media type) a que este CSS deve ser aplicado. Exemplo: <link rel="stylesheet" type="text/css" href="/c/estilo.css">

Usando o código acima, o estilo será aplicado independente da mídia. Se ela tiver suporte a CSS, este será aplicado. Ponto.

O mesmo aconteceria caso usássemos: <style type="text/css">@import url(/c/estilo.css);</style>

O código acima costuma ser usado por aqueles que desejam que seu CSS seja ignorado por browsers antigos, como o Netscape 4, por exemplo.

Só que faz tempo que uso outro artifício para esconder meus CSS das velharias (já que o método acima pode causar o que chamamos de FOUC). Declaro dois media types, separados por uma vírgula e um espaço. Assim: <link rel="stylesheet" type="text/css" href="/c/estilo.css" media="screen, projection">

E era isso que eu estava usando no site a que fiz referência acima. Retirei os media types e, voilà, o JAWS passou a ignorar o conteúdo escondido pelo display:none.

Claro, não quero dizer que você não deva declarar media types ao aplicar um CSS a uma página. Longe disso. O lance é criar um outro CSS, apenas com os display:none que devam ser interpretados por leitores de tela e aplicar ao conteúdo sem declarar a mídia. (Preciso verificar se funcionaria usando a mídia aural).

Se alguém tiver disposição e condições de testar isso em outros leitores de tela, por favor, me conte os resultados para que eu publique aqui como referência.

Voltando ao FIR, acho que ele continua não sendo uma boa forma de image replacement. Não porque torne o conteúdo inacessível para leitores de tela, mas por outros motivos, como não funcionar em situações onde haja suporte a CSS e não haja suporte a imagens.

Moral da história: por mais que especialistas te digam que alguma coisa é assim e ponto final, é sempre bom dar uma olhadinha e fazer os testes você mesmo para verificar. Eles podem estar errados, mesmo que seja apenas em parte.