Tutorial Avançado de HTML: Links Acessíveis

Essa página trata de várias maneiras de melhorar a acessibilidade dos links na sua página.

Navegação com o teclado

Usuários que não podem ou não querem usar dispositivos apontadores (mouses, por exemplo) podem usar o teclado pra percorrer os links, geralmente usando a tecla “tab”. Por isso, links devem estar numa ordem lógica de navegação. O atributo tabindex permite definir essa ordem ainda que, se o HTML estiver linear como ele deve, uma ordem lógica de navegação exista automaticamente.

Pra testar o efeito do tabindex, faça o seguinte:

Coloque três links numa página HTML:

<p><a href="#">Link 1</a></p>

<p><a href="#">Link 2</a></p>

<p><a href="#">Link 3</a></p>

Abra a página em seu navegador e tecle “tab” até chegar no último link. Você deve ter percebido que a ordem foi a mesmo em que eles foram definidos no documento.

Agora, mude o código para isso e teste novamente.

<p><a href="#" tabindex="3">Link 1</a></p>

<p><a href="#" tabindex="1">Link 2</a></p>

<p><a href="#" tabindex="2">Link 3</a></p>

Teclas de Atalho

Teclas de atalho (accesskeys) permitem uma navegação mais fácil, ao atribuir um atalho a um link (que geralmente vai ganhar foco quando o usuário pressionar ‘Alt’ ou ‘Shift’ + ‘Alt’ + a tecla de atalho, dependendo do navegador). Pra usuários que não usam dispositivos apontadores, esse é um modo muito mais fácil e rápido de navegar do que navegar pelos links usando ‘tab’.

Não é necessário usar teclas de atalho em todos os links, mas é uma boa idéia colocar nos links da navegação primária.

<a href="algumapagina.html" accesskey="a">Alguma Página</a>

O problema com teclas de atalho é que geralmente não existe nenhum jeito do usuário descobrir aonde elas estão (a não ser que ele olhe o código fonte). JAWS, o leitor de tela mais popular que existe, vai ler em voz alta essas teclas de atalho, mas para obter todas as vantagens delas você precisa deixá-las mais explícitas.

Você pode usar uma técnica similar ao link “Pular navegação” (veja abaixo), ou optar por uma página separada explicando as funcionalidades relacionadas à acessiblilidade, incluindo as teclas de atalho. Um método que está crescendo em popularidade é sublinhar a primeira letra do link, similar ao método usado nos menus da maioria dos programas Windows.

Títulos de Links

É uma boa idéia adicionar o atributo title, que vai mostrar uma descrição do lugar pra onde o link leva, melhorando a navegação.

Se o link é usado pra executar Javascript, também é bom explicar o que devia (mas não vai) acontecer pra usuários que não tem Javascript.

<a href="#" onclick="abrepopupdetestável()" onkeypress="abrepopupdetestável()" title="Abre uma janela pop-up detestável com Javascript">Monstro</a>

Popups

Por falar em popups Javascript, se você vai insistir em usá-los, ou se alguém te disse pra usá-los, você pode deixar as coisas mais acessíveis usando o evento onkeypress além de onclick. Além disso, se você incluir uma página normal no valor do atributo href do link e retornar false na função que abre o popup, se o usuário não tiver Javascript uma página normal vai abrir. Por exemplo:

<script type="text/javascript"> function abrepopupdetestável() { window.open("monstro.html", "", "toolbar=no,height=100,width=200"); return false; } </script> ... <a href="monstro.html" onclick="return abrepopupdetestável()" onkeypress="return abrepopupdetestável()">Monstro</a>

Links Adjacentes

Links adjacentes devem ser separador por mais que simples espaços, pra que eles possam ser compreendidos por leitores de tela.

Isso pode ser feito colocando caracteres entre os links (como uma barra vertical – ‘link | link‘) ou os cercando com caracteres (como colchetes – ‘[link] [link]‘). Também é uma boa idéia colocar os links de navegação dentro de listas. Essas listas podem ser estilizadas com CSS para serem mostradas do jeito que você quiser, até mesmo com os itens lado-a-lado (usando display: in-line).

Pular Navegação

Você deve dar a usuários de leitores de tela a oportunidade de pular a navegação e ir direto para o conteúdo. Isso porque se sua navegação for consistente (como ela deve ser), o usuário não precisa atravessar a mesma informação em todas as páginas, especialmente se sua navegação for muito longa. Você pode pular a navegação colocando um link antes dela que leve direto para o conteúdo.

Alguma coisa assim:

<div id="cabecalho"> <h1>O Cabeçalho</h1> <a href="#conteudo" accesskey="p">Pular navegação</a> </div> <div id="navegacao"> <!-- um monte de coisas de navegação --> </div> <div id="conteudo"> <!-- conteúdo adorável --> </div>

Obviamente você não quer que esse link apareça em navegadores visuais, por isso é melhor usar CSS pra torná-lo invisível.

Essa é uma dica de CSS, mas específica pra “pular navegação”.

O jeito mais óbvio de fazer isso é usar display: none, mas alguns leitores de tela vão levar isso a sério e não ler o link, como nós queremos. Ao invés de usar isso, você pode definir a largura e o comprimento do elemento como zero (width: 0; height: 0; overflow: hidden;), que tem o mesmo efeito visual mas ainda é lido por leitores de tela. 

Páginas Relacionadas

• Próxima Página: Dominando Texto
• Página Anterior: Recapitulada nos Padrões 
• Links – Introdução à links (Tutorial Iniciante de HTML) 
• A propriedade Display – Explicando display: none mais detalhadamente

Referência

• a
• Atributos Comuns (para o atributo title)

Esse material é uma adaptação do HTML Advanced Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.