Saltos: Facilidade de Navegação na Web.

Marco Antonio de Queiroz - MAQ.

Para além da acessibilidade que um navegador possa ter através de suas teclas de navegação originais, existem formas de se criar teclas de navegação e atalho pelo desenvolvedor nas páginas da web. Quando pensamos em fazer acessibilidade estamos querendo adaptar os sites para além das possibilidades já existentes nos navegadores comuns, como também superar barreiras de acesso criadas por funcionalidades programáveis que, estando fora dos padrões web, se tornem incompatíveis com tecnologias assistivas e o bom uso da navegação via teclado ou por voz. Por outro lado, algumas vezes, mesmo estando acessíveis as informações ou funcionalidades programadas pelo desenvolvedor, essas não possuem um acesso fácil, gastando-se tempo para entendê-las em sua utilização ou mesmo para se chegar a elas.

"Todas as páginas que possuem menus padronizados em um site, para serem além de acessíveis, terem uma boa usabilidade, têm de possuir teclas de atalho que permitam o salto para o conteúdo principal da página. Essas teclas de atalho podem ser colocadas pelo desenvolvedor sem prejuízo de qualquer outro conteúdo" *.

Sugestões e Fundamentos das Diretrizes Irlandesas de Acessibilidade Web.

"Organize listas de links de acordo com a estrutura lógica do site ou da página da internet. Atribua títulos ou subtítulos a cada lista de links e providencie um meio do usuário detectar e pular automaticamente longas listas de links indesejados."

"Os links de navegação, geralmente, são a primeira coisa que aparecem numa página. Os usuários de leitores de tela têm que escutar isto muitas vezes em cada página, até chegarem ao seu conteúdo específico. Proporcionar uma maneira de pular links repetitivos para permitir que os usuários comecem a ler facilmente o conteúdo principal da página desejada melhora a eficiência da página e de todo o site." **

Fundamentos.

Agentes do usuário são programas que as pessoas usam para acessar o conteúdo da Internet. Estes incluem navegadores gráficos, navegadores de texto, navegadores de voz, telefones celulares, tocadores multimídia, plug-ins e tecnologias assistivas, tais como leitores de tela, ampliadores de tela e programas de comandos de voz.

A opção de pular links é útil para as pessoas que navegam com o teclado, com ou sem a ajuda de leitores de tela, inclusive usuários de laptops, notebooks, celulares, bem como usuários com pouca destreza manual, que não conseguem usar o mouse. Proporcionar a opção de pular links poupa o trabalho de muitas pessoas terem que usar teclas nessas circunstâncias para trabalhar com longas listas de links.

Técnicas para se fazer saltos.

Sugestões Técnicas da WAI: Grouping and bypassing links. ***

Técnicas Utilizadas.

Quando no início de uma página encontramos um salto para o assunto principal , este foi feito da forma abaixo:

<a href="#1s">Salto para Conteúdo.</a>

Este é um link para a mesma página que faz o navegador pular, ou saltar, de onde é clicado até alguma marca. Esta marca pode ser feita assim:

<a name="1s">Título do Conteúdo Principal.</a>

Repare que estamos utilizando somente o name. Poderíamos criar a redundância do id. Isso aconteceu para atender os inúmeros leitores e navegadores utilizados por pessoas cegas. Alguns, os somente texto, só obedecem a marca name, os gráficos só obedeciam o id. Dessa forma redundante, estaríamos atendendo a todos. Atualmente, os saltos para a mesma página estão padronizados somente com o uso do "NAME". isso é apontado pelo validador do W3C.

Para quem não utiliza leitores de tela, celulares ou notebooks isso não tem a menor lógica. No entanto, os saltos para a mesma página são fundamentais para quem navega via teclado, pois faz a "rolagem" da tela, pulando inúmeros links que teriam de ser lidos, ou textos anteriores ao que se quer chegar.

Observações e Exemplo.

Qualquer pessoa pode, a fim de teste, ir ao topo dessa página por via do teclado, com ou sem leitores de tela, através do Internet Explorer, Firefox ou Webvox. Para os dois primeiros, basta pressionar a tecla Control e mantendo ela pressionada, teclar HOME. Chegaremos no topo desta página. Posteriormente, tecle "TAB" e, ao chegar ao "Salto para Conteúdo", primeiro link desta página, dê um enter. O cursor do PC (e do leitor de tela, se for o caso), saltará para o título do conteúdo principal "Saltos: Facilidade na Navegação Web". Se o navegador for o Webvox, tecle CONTROL + PAGE UP e o resto do caminho será o mesmo.

Se quiser averiguar quantos links e textos foram "pulados", basta novamente teclar CONTROL + HOME e posteriormente, ao invés de usar o "Salto para Conteúdo", ir teclando TAB ou seta para baixo e notando o tamanho do salto. Esse caminho lento teria de ser feito todas as vezes em cada página, caso tal salto não fosse criado em seu desenvolvimento. Caso o usuário já conhecesse a página, poderia fazer uma pesquisa por palavra ou texto dentro da mesma página, mas, mesmo assim, levaria mais tempo.

Outras Técnicas de Saltos.

Existem outras técnicas de Saltos, porém não são universais. A utilização de chaves de acesso, tecnicamente conhecidas por ACCESSKEY, são as mais conhecidas. Elas funcionam para a maioria dos navegadores, mas não para os "somente texto", como o Lynx e Webvox. São muito utilizadas para chegarmos diretamente a links específicos e importantes (como o que vai para a página principal) ou formulários. Veja o exemplo do existente nesta página:

<a href="index.php" title="Página principal - Tecla de atalho (1)." accesskey="1">Principal</a>

O ACCESSKEY foi associado ao número 1 (accesskey="1") e toda vez que teclarmos no Internet Explorer ALT + 1, haverá um salto, de qualquer lugar da tela, diretamente para o link da página principal. No Firefox a combinação de teclas é a ALT + SHIFT + 1. Entretanto, além do salto, no FF o link é executado de forma que acabamos por entrar diretamente na página principal. Neste caso específico, para pessoas com deficiência que só estejam interessadas no salto, as chaves de acesso não serão interessantes.

Para essas chaves de acesso, pode-se também utilizar letras. O perigo desse procedimento é o de se usar letras já existentes no navegador para suas chaves de acesso. No Internet Explorer, por exemplo, ALT+ F, muito utilizada em sites do governo para se ir para o fim da página, ou seja, F de fim, coincide com a tecla de F de favoritos do IE. Dessa forma, por serem prioritárias as chaves de acesso desenvolvidas no site, acaba-se por inibir a acessibilidade do atalho direto para o favoritos do Internet Explorer.

Aconselhamos, por essa e outras coincidências, a serem programadas chaves de acesso sempre numéricas, pois os navegadores só utilizam letras. Outra recomendação é a de não serem utilizadas muitas chaves de acesso, pois seus usuários terão dificuldade de ficar decorando para que serve cada uma. Em geral, é utilizado 1 para página principal (Home), 0 para busca interna e 2 para mapa do site.

Gostaria de destacar que atualmente, no WCAG 2.0, o accesskey não é nem mesmo mencionado e tem o salto para o conteúdo como principal salto, com o aconselhamento de que este seja o primeiro link ativo da página.

Saltos Específicos para Leitores de Tela.

Os leitores de tela que seguem as recomendações internacionais do W3C procuram aproveitar os padrões web para criarem acessibilidades extras para seus usuários. É o caso do Jaws for Windows, do Windows-Eyes e do software livre, o leitor NVDA. Eles se aproveitam do padrão web para cabeçalhos (headings), ou seja, das tags H1/H6 para dar saltos de cabeçalho em cabeçalho dentro dos textos, bastando pressionar a tecla H do teclado alfabético. Pode-se também voltar para o cabeçalho anterior, teclando-se SHIFT + H. Existem outros saltos desse tipo, como o "F", para formulários, o "T" para tabelas, "L" para listas, "I" para itens de lista etc.

Com essas teclas de "Teclagem Rápida" podemos perceber, entre outros exemplos, a importância dos padrões web para a acessibilidade. Em códigos que posicionam os elementos do conteúdo criando o layout da página web através de tabelas a tecla "T", utilizada para a procura e posicionamento do cursor dos leitores de tela em tabelas de dados, acaba por ser inutilizada por ser a página toda tabelada, ficando o cursor do leitor de tela perdido no layout e sem chegar ao seu objetivo, a tabela propriamente dita. Quando o elemento H (h1/h6) é utilizado fora de contexto, ou seja, é utilizado para dar destaque a uma palavra ou expressão em meio a um texto, devido a esse elemento HTML colocar negrito e poder alterar o tamanho da fonte, o cursor vai parar no meio de um texto e não em um título ou cabeçalho para os quais foi criado e o usuário de um leitor de tela espera encontrar. Dessa forma, recomendo que desenvolvedores web produzam códigos semânticos, ou seja, que cada elemento seja empregado para aquilo a que foi criado.

* - Adaptado do texto "Acessibilidade web: tudo tem sua primeira vez.", de Marco Antonio de Queiroz.
** - Do texto "Diretrizes Irlandesas de Acessibilidade Web"
*** - Técnicas de Acessibilidade WAI, ponto de verificação 13.6.

Disponibilizado em: 04/04/2008.
Atualizado em: 28/04/2009.