Topo da página.
  • Ir para o conteúdo 1
  • Ir para o índice 2
  • Alto Contraste
Logotipo Lupadigital - Uma lupa sobre a palavra Lupa, com as letras up ampliadas.

Lupa digital

Cartilha de Acessibilidade

Menu Serviço

  • Início
  • Agradecimentos
  • Contato

Índice

  • 00. Nota do Autor
  • 01. Introdução
  • 02. Sobre a cartilha
  • 03. Diretriz WCAG
  • 04. Declaração de documento
  • 05. Estrutra de páginas
  • 06. Frames
  • 07. Imagens
  • 08. Textos e Links
  • 09. Tabelas
  • 10. Teclas de atalho
  • 11. Formulários
  • 12. Scripts e eventos
  • 13. Utilizando Cores
  • 14. Tecnologia Flash
  • 15. Avaliadores
  • 16. Leitor de tela / Tradutor de Libras
  • 17. Regras básicas
  • 18. Leis e decretos
  • 19. Testes
  • 20. Linguagem simples

Anexos

  • 21. NVDA
  • 22. Teclas do Windows
  • 23. Outras páginas
  • 24. Todos@Web
  • 25. VLIBRAS

10. Teclas de atalho

É através do uso de teclas de atalho foram criados os saltos "Ir para o conteúdo" e "Ir para o índice" contidos no iníco da página desta cartilha.

O WCGA indica que o salto para o contéudo deve ser o primeiro link de acesso na página, permitindo assim que para cada nova página carregada o utilizador de um leitor de telas possa se deslocar rapidamente para área principal de informações do site.

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) atalhos.

10.1 Utilizando accesskey

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 o atributo 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.

Exemplo

Eu chego aqui teclando ALT 6

Eu chego aqui teclando ALT 7

Exemplo do código

<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 tributo correspondente accesskey="6" ou accesskey="7"receberá o foco.

10.2 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.

Ao contrário do que muitos pensam o atalho de salto para o conteúdo não precisa necessariamente estar visível na página, mas tem que estar acessível para quem usa um leitor de telas, já que a maior necessidade de uso deste recurso será para quem está utilizando o leitor de telas.

Veja no canto superior direito desta e de todas as outras páginas o atalho "ir para conteúdo". O mesmo pode ser acionado clicando 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"/>

10.3 Utilizando ancoras (saltos)

Exemplo

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


Exemplo do código

<ul>
 <li><a  href="#Item2" id="Item1">Clicando aqui eu avanço para o Item 2</a></li>
 <li><a  href="#Item3" id="Item2">Clicando aqui eu avanço para o Item 3</a></li>
 <li><a  href="#Item1" id="Item3">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 atributoaccesskeye 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.

Mudança de páginas

  • 09. Tabelas
  • 11. Formulários

Compartilhe!

Todos@Web

Prêmio Nacional de Acessibilidade na Web - A Lupa Digital - Cartilha de Acessibilidade, recebeu o 3°  lugar no prêmio Todos@Web 2012 na categoria Projetos Web - Entretenimento / Cultura / Educação / Blogs.

© 2002 Lupa Digital

A primeira cartilha nacional sobre Acessibilidade - Publicada em 07/08/2002 - Fundação Biblioteca Nacional / Ministério Da Cultura / Escritório de Direitos Autorais, No. Registro: 265.225 Livro: 475 Folha: 385. Todos os direitos reservados ao autor (Fabio A. B. Gameleira)

TOPO