IvoGomes.com

Voltar ao início

Saltar o menu: em nome da acessibilidade

Existem pessoas que têm necessidade de utilizar ajudas especiais para navegar pela Internet. Uma dessas ajudas é a utilização de um browser de texto com "screen reader", ou seja, um leitor de texto.

A cada página que abre, o browser lê os seus conteúdos do princípio ao fim (podendo ser interrompido pelo utilizador a qualquer instante).

Agora imaginem: um site com um menu grande no topo, aí com uns 9 ou 10 ítens... De cada vez que se abre uma página, o "screen reader" lê o menu outra e outra vez... Exemplo:

Logotipo - Menu1 - Menu2 - Menu3 - Menu4 - Secção 1 - Link1 - Link2 - Link3 - Secção 2 - Link4 - Link5 - Link6 - Créditos - Título - Sub-Título - Texto

Acreditem, isto pode ser muito stressante para quem está a ouvir!

Como ultrapassar? Simples! Basta incluir um link no topo da página para saltar por cima do menu e ir directamente para os conteúdos.

  1. <a class="esconder" href="#conteudos">Saltar o Menu</a>

E agora, esconde-se o link dos browsers normais usando CSS:

  1. .esconder {
  2. display: block;
  3. width: 1px;
  4. height: 1px;
  5. overflow: hidden;
  6. position: absolute;
  7. left: -999em;
  8. }

Basicamente, este CSS faz com que o texto permaneça na página, mas fora do ecrã (alguns pixels à esquerda). Desta forma, o texto mantém-se legível para um screen reader mas fica escondido dos utilizadores com browsers normais.

E já está! Os browsers normais (Internet Explorer, Netscape, Mozilla, Opera, etc...) não mostram esse link, mas num browser de texto ou num browser com "screen reader" este link é bastante útil.

Para testarem a leitura de um website com um "screen reader" sugiro o Window-Eyes que é um dos mais difundidos. Em português existe o AudioBrowser que também é muito bom. Experimentem! E depois tentem dar um pouco mais de acessibilidade aos vossos sites... para um mundo melhor!!


2 Comentários

Comente este artigo!

  1. MAQ

    Bem, o que eu posso comentar é que não se fazem mais links de saltos para a mesma página invisíveis, do jeito que o amigo sugere. Existem pessoas que enxergam e que não utilizam leitores de tela, mas que precisam de navegar por via do teclado. Alguns tetraplégicos que não se utilizam de mouses especiais, por exemplo. Assim, essas pessoas não tendo destreza manual suficiente para se utilizar do mouse, ou mesmo no uso de navegação por dispositivos móveis, como os celulares, toda a navegação é por via do teclado. Se os saltos ficarem invisíveis, só servirão para pessoas como eu, deficientes visuais que se utilizam de leitores de tela, para vocês écrã. Parabéns pelas dicas, a acessibilidade agradece! Ver algo em http://www.acessibilidadelegal.com/13-saltos.php
    MAQ.

  2. Ivo Gomes

    Realmente já costumo ver alguns sites com o link “saltar para os conteúdos” visível no topo. Pode ser uma medida de acessibilidade não só para os utilizadores de screen readers, mas também para todos os outros, tal como dizes.

    Vou ver se começo a aplicar isso nos próximos projectos :)

Comente!

* Campo obrigatório, de modo a aparecer o seu nome como autor do comentário

* Campo obrigatório, mas não será mostrado no site

* Campo obrigatório, convém escrever alguma coisa ;)

São permitidas algumas tags HTML, como
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>