Guia para tornar páginas web acessíveis
Links
Recomendações
- O texto do link deve ser significativo e claro.
- O texto do link deve fazer sentido se lido isoladamente. Os usuários de leitores de tela podem navegar em links de uma página utilizando a tecla "tab". Para cada "tab" é pronunciado um texto do link. Devido a isso, não utilizar texto do link generalizado como "Clique aqui".
- Para tornar ainda mais claro o destino do link, utilizar título de link informativo (elemento "title").
- Para navegação dos links via teclado, pode-se organizar a seqüência dos links e/ou determinar teclas de atalho para links iimportantes.
Html/Xhtml
- TITLE: Se há mais de um link na página com diferentes textos do links mas apontando para o mesmo endereço, diferenciar os links utilizando o atributo "title".
- TITLE: Se há mais de um link na página com o mesmo texto do link, todos estes links devem apontar para o mesmo endereço. Se não for possível devido ao contexto do texto, diferenciar os links utilizando o atributo "title".
- TABINDEX: para definir a ordem da navegação via tecla "tab", incluir o atributo "tabindex" com valores 1, 2, 3, etc no elemento do link. Além de link, o "tabindex" é válido para formulários e objetos. ("a", "area", "button", "input", "label", "legend", "textarea", "input", "object", "select", "textarea").
- ACCESSKEY: para definir quais as teclas de atalho dos links, incluir o atributo "accesskey" no elemento do link. Além de link, o "accesskey" é válido para formulários e objetos. ("a", "area", "button", "input", "label", "legend", "textarea", "input", "object", "select", "textarea").
Exemplo 1
- O exemplo incorreto possui texto do link "Clique aqui", o qual não faz sentido se lido fora do contexto. O usuário que utiliza leitor de tela, não saberá qual o destino do link.
- O exemplo correto possui texto do link significativo quando lido fora do contexto. O usuário que utiliza leitor de tela saberá que o link aponta para a Floricultura Rosas.
- Experimente navegar nesta página utilizando a tecla "tab". Os links serão focados.
INCORRETO: Floricultura Rosas. Clique aqui. CORRETO: Floricultura Rosas.
Exemplo 2
- Diferentes textos de links para o mesmo objetivo. Os dois links estão apontando para o sítio da Ferrari e possuem o atributo "title" descrevendo "Sítio da Ferrari" na marcação dos links. Deste modo, o usuário irá saber que os dois links "Ferrari" e "time italiano" apontam para o sítio da Ferrari.
O alemão Michael Schumacher, da Ferrari, venceu de ponta a ponta o Grande Prêmio de Europa, na Alemanha. O brasileiro Rubens Barrichello, também do time italiano, ficou com a segunda colocação, enquanto o inglês Jenson Button, completou o pódio. <a href="http://www.ferrari.com" title="Sítio da Ferrari">Ferrari</a> <a href="http://www.ferrari.com" title="Sítio da Ferrari">time italiano</a>
Exemplo 3
- Links utilizando "tabindex". Definir a ordem da navegação via tecla "tab". O primeiro link a receber o foco será o link "Ir para conteúdo" que contém "tabindex 1" , o segundo foco será para "Ir para menu" que contém "tabindex 2" e assim por diante.
Acessibilidade deste sítio.
Ir para conteúdo.
Ir para menu.
<a href="#" tabindex="3">Acessibilidade deste sítio.</a> <a href="#" tabindex="1">Ir para conteúdo. </a> <a href="#" tabindex="2">Ir para menu.</a>
Exemplo 4
- Links utilizando "accesskey". Definir quais as teclas de atalho dos links. No exemplo foram definidas as letras "a", "c" e "m". Ao teclar "alt"+"a" ou "a", dependendo do navegador, o link "Acessibilidade deste sítio" será focado.
- Evitar muitas teclas de atalho, além de o usuário ter que memorizar muitas teclas, pode haver tecla de atalho que coincida com a tecla de atalho do navegador.
Acessibilidade deste sítio.
Ir para conteúdo.
Ir para menu.
<a href="#" accesskey="a">Acessibilidade deste sítio.</a> <a href="#" accesskey="c">Ir para conteúdo. </a> <a href="#" accesskey="m">Ir para menu.</a>



