web de leve

Trabalhando no redesign de um site tive a oportunidade de implantar um menu de atalhos no topo do mesmo com links como “Pular para o conteúdo”, “Ir para a busca” e outros.

Esse menu de atalhos se refere a uma questão de acessibilidade na web; depois ler alguns textos sobre o assunto chega o momento de colocá-lo em prática, nem que for aos poucos.

São poucos sites que possuem um menu de atalhos ou aos menos um link para o conteúdo.

Navegando um pouco encontrei 4 tipos de menu de atalhos:

1 - Visível e acessível para leitores de tela

Embora qualquer usuário, com ou sem deficiência, possa usar esse menu não são todos os usuários desprovidos de deficiências que irão entendê-lo.

Neste caso o menu de atalhos pode se tornar um elemento extra no site que pode tirar o usuário do foco para o qual o site foi desenvolvido - entenda que o elemento extra é desnecessário à tarefa que o usuário realiza.

A interface, o site, deve ser na medida do possível livre de “ruídos”… dê ao usuário somente o que ele precisa ( Krug e 37signals me vêem a cabeça agora ).

2 - Invisível ( oculto ) mas acessível para os leitores de tela

Usa-se regras CSS para ocultar o menu de atalhos.

O http://wenetus.com/pt do Walmar Andrade tem um link para pular o menu e ir para o conteúdo.

Carregue o site, navegue nele com a tecla tab e fique de olho na barra de status do browser pois você verá a informação sobre um link, oculto, para o conteúdo.

O site do Jornal Inverta, como outros sites feitos com o CMS Plone, possue um menu de atalhos com links para o menu secundário ( http://www.inverta.info/jornal#portlet-navigation-tree ) e para o conteúdo ( http://www.inverta.info/jornal#documentContent ).

Não sei como o Plone trabalha com esse links mas todos os sites feitos com ele, que visitei, possuem o mesmo menu de atalhos que o site do Jornal Inverta.

Algo que não gostei neste tipo de menu de atalhos é que o usuário que utiliza o tab para navegar e não usa um leitor de tela fica sem saber que está com o foco em um link. Quantos mais links existirem nesse menu oculto mais “tabs” serão necessários para que o usuário encontre o outline ( a linha tracejada que indica um elemento com foco ) na tela.

Tudo bem que a barra de status, se ativa, pode informar o usuário mas será que é o suficiente?

3 - Item do menu visível quando tem foco e acessível para leitores de tela

Esse terceiro tipo de menu de atalhos acredito ser uma segunda versão do anterior onde a única diferença prática é que os links ficam visíveis quando recebem o foco.

O único site no qual encontrei ele foi no site sobre acessibilidade do SERPRO: http://www.serpro.gov.br/acessibilidade

4 - Invisível (oculto) e inacessível para leitores de tela

Devo não ter entendido algo, o JAWS está com problemas ou é outra coisa mas há sites que utilizam “display:none” para ocultar esse menu ( e/ou seus itens ) deixando ele inacessível para leitores de tela.

Devo realmente não estar entendendo o propósito do desenvolvedor que tem tal prática.

Quem souber, por favor, me fale, explique. Quer um exemplo? Visite: http://papodehomem.com.br/

Bom, por enquanto vou usar o menu de atalhos número 1 mas gostei do 3.

E você?
“Menu de atalhos“… 1, 2 ou 3?