início da área de conteúdo

10. Teclas de atalho

Utilize o atributo ACCESSKEY em conjunto com o elemento <A> para gerar teclas de atalho para determinados pontos da página, assim como âncoras de salto ativados pelo elemento <a> e # em conjunto com os atributos name="..." e id.="..." Este procedimento facilita o posicionamento rápido em pontos específicos, como por exemplo, início do menu, etc.

Evite utilizar letras como tecla de atalho pois poderá conflitar com as teclas de atalho do navegador ou mesmo com as teclas do leitor de telas.

Evite utilizar atalhos em excesso pois é humanamente impossível para uma pessoa comum memorizar diversos atalhos. Utilize no máximo 4 (quatro) ou 5 (cinco).

10.1 Utilizando accesskey


Exemplo do código

Eu chego aqui teclando ALT 6

Eu chego aqui teclando ALT 7


<ul>
<li><a accesskey="6" href="#">Eu chego aqui teclando ALT 6</a></li>
<li><a accesskey="7" href="#">Eu chego aqui teclando ALT 7</a></li>
</ul>

Comentário do código

Ao pressionar as teclas ALT 6 ou ALT 7 (SHIFT ALT 6 ou SHIFT ALT 7 no navegador Firefox), em qualquer parte da página, o hiperlink contendo o atributo correspondente accesskey="6" ou accesskey="7" receberá o foco.

10.2 Utilizando ancoras (saltos)

Exemplo do código


Item 1 - Clicando aqui eu avanço para o hiperlink item 2

Item 2 - Clicando aqui eu avanço para o hiperlink item 3

Item 3 - Clicando aqui eu retorno para o hiperlink item 1



<ul>
<li><a name="Item1" href="#Item2">Clicando aqui eu avanço para o Item 2</a></li>
<li><a name="Item2" href="#Item3">Clicando aqui eu avanço para o Item 3</a></li>
<li><a name="Item3" href="#Item1">Clicando aqui eu retorno para o Item 1</a> </li>
</ul>


Comentário do código

Ao clicar no Item 1 o foco será posicionado no Item 2. Ao clicar no Item 2 o foco será posicionado no Item 3. Ao clicar no Item 3 o foco será posicionado no Item 1. Para confirmar o posicionamento do foco pressione a tecla TAB que você perceberá que o próximo link após ao que recebeu o foco pelo salto receberá o novo foco, o seja, clicando no Item 1 como o foco passa para o Item 2 se for pressionado TAB você perceberá que o Item 3 recebe o novo foco.

Você pode e deve utilizar o ACCESSKEY e o SALTO de forma redundante para um mesmo hiperlink, pois alguns leitores de tela interpretam o ACCESSKEY e outros só funcionam com a técnica de salto.

10.3 Atalho "ir para conteúdo"

É uma prática muito boa colocar um atalho no início do página que permita o acesso direto para área de conteúdo do página, evitando assim que pessoas que utilizam programas leitores de tela tenham que navegar por toda a ágina até chegar na área principal de informação da página.

Como o deficiênte visual normalmente utiliza o leitor de tela e navega com as teclas TAB e/ou setas, ao carregar uma nova página este atalho "ir para conteúdo" permitirá um posicionamento rápido sem ter que ler todo o cabeçalho, menus e qualquer outra informação menos relavante e que se normalmente se repete em várias páginas.

Veja no canto superior direito desta e de todas as outras páginas o atalho "ir para conteúdo". O mesmo pode ser acionado licando com o mouse sobre o mesmo, pressionando a tecla Enter quando o mesmo estiver com o foco ou através do acionamento conjunto da teclas ALT + 0 (no internet Explorer) ou ALT+SHIFT+0 ( no firefox).

Exemplo do código

<a class="irconteudo" href="#conteudo"> Ir para conteúdo</a>

Úma âncora para comando abaixo que está localizado no início da área de conteúdo da página.

<a id="conteudo" accesskey="1" href="#" name="conteudo"> <img class="imagemsemborda" 
alt="início da área de conteúdo" src="/lupadigital/templates/lupadigital/images/nulo.gif"/>