Tutorial Avançado de HTML: Links Acessíveis

4 06 2008

Link "Pular para o conteúdo"

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

Referência

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

Anúncios

Ações

Information

8 responses

10 06 2008
Guido

Ótimo artigo, falou muito bem sobre todas as técnicas de acessibilidade nos links.

No caso dos links de pular “para a navegação”, se eu usar a regra visibility:hidden; não iria funcionar?

Abraços

10 06 2008
Elomar França

Olá, Guido

Assim como o ‘display:none’, o ‘visibility:hidden’ só iria funcionar em alguns leitores de tela, que não lêem o css da página. A maioria dos leitores de tela ignora links escondidos com essas duas técnicas. Por isso elas não são recomendadas.

Segue um ótimo artigo que complementa esse, comparando alguns métodos de criar essas barras de navegação:
http://webdeleve.net/acessibilidade/pular-para-o-conteudo-1-2-ou-3

10 06 2008
Tutorial Avançado de HTML: Recapitulada nos Padrões « Codando

[…] Próxima Página: Links Acessíveis […]

4 07 2008
Tutorial Avançado de HTML: Dominando Texto « Codando

[…] Página Anterior: Links Acessíveis […]

5 07 2008
Tutorial Avançado de HTML: Formulários Acessíveis « Codando

[…] Pra mais informações sobre isso, veja a página Links Acessíveis. […]

8 07 2008
Tutorial Avançado de HTML « Codando

[…] Links Acessíveis – Criando hipertexto mais acessível para pessoas com deficiências. […]

20 07 2008
Tutorial Avançado de CSS: A propriedade Display « Codando

[…] Pode soar meio inútil mas pode ser usado para bons efeitos relacionados à acessibilidade (veja Links Acessíveis), folhas de estilo alternativas ou efeitos avançados de hover ( = mouse sobre o […]

8 06 2017
Fabiano Alves

Se você quer que o leitor de tela não leia algo,
faça o seguinte

teste no seu projeto

Precisa necessariamente usar os dois, pois se usar
somente o tabindex=”-1″ com o uso das setas o usuário consegue
acessar a informação, e se usar somente o aria-hidden, com o tab
o usuário consegue acessar a informação.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s




%d blogueiros gostam disto: