Inserindo tecla de atalho em link - Access Key

Você já deve ter reparado que o Arruma Blog se preocupa com a acessibilidade e pensando nisso cada passo que fazemos para ajudar o leitor é um grande passo para a melhor experiência. Depois que mudei o modelo do Arruma Blog, consegui colocar um prática um desejo antigo de conseguir usar atalhos no teclado para acessar links e páginas, também conhecido como ‘Teclas de acesso’ (ou access key em inglês).

Neste exato momento você pode apertar as teclas ALT + S para ir à página ‘Sobre’ do blog. Em outras palavras você vai manter pressionada a tecla Alt, do lado esquerdo do ‘espaço’ e apertar a tecla S do seu teclado e essa combinação aqui no Arruma Blog está associada a esta página. Você quer aprender a fazer isso no seu blog ou site também?

  Antes de continuar, vale lembrar que os links podem ser inseridos na coluna lateral do seu blog e será ativado em todas as páginas. Caso queira fazer com que os links personalizados fiquem no topo do seu blog como na imagem do topo, (no Blogger) insira um gadget de HTML/JavaScript e exclua se existir o gadget de página. Quando isso estiver feito, continue lendo o artigo.

Qualquer página web pode ter o recurso e você não precisa incluir nenhum código a mais do que HTML. O código habitual para um link é:


<a href='http://www.arrumablog.com' title='DESCRIÇÃO DO LINK' >Arruma Blog</a>

A diferença entre o link sem a ajuda do Alt e com a ajuda dele é uma tag apenas:

<a href='http://www.arrumablog.com' title=DESCRIÇÃO DO LINK' accesskey='L'>Arruma Blog</a>

A palavra ‘ACCESKEY’ seguinda de uma única letra como no exemplo a letra L (de letra mesmo).



CUIDADOS A TOMAR
Na mesma página não pode haver mais de uma letra apontando para links diferentes. Sempre que possível, ensine ou avise seus leitores sobre estes atalhos de alguma forma. Aqui no blog resolvi avisar pela tag TITLE que ativa ao passar o mouse sobre os principais links. Em sites como o Flickr do Yahoo! Há uma página de ajuda específica para falar sobre os atalhos das páginas e algumas dicas são mostradas em tela com a ajuda dinâmica (jayquery e javascript).

E OS COMANDOS DO WINDOWS E OUTROS SISTSMAS?
Pensou em utilizar a letra P e bateu aquele medo de fazer o leitor confundir a letra P com o PRINT de ‘impressão’? Muita calma. Quem tem ou teve Sistema Operacional (S.O.) Microsoft sabe que o comando ‘imprimir’ não é ALT+P e sim CTRL+P então você pode sim usar letras que são parecidas em outros aplicativos ou sistemas sem medo como o P e o M (Windows+M, sabe o que essas teclas fazem?)

QUAL O MELHOR LOCAL PRA INSERIR A TAG / CÓDIGO?
Vai depender da hierarquia do link. Lembra do Mapa do site? Se sim todo mapa de site tem que ter um fluxo de navegação: Página pai filhos e terceiros. Dependendo desta hierarquia você escolhe o melhor local.
No exemplo prático deste blog, resolvi colocar links pelo teclado apenas no menu principal pois como ele está presente em todas as páginas do blog, fica mais fácil para o leitor guardar na mente algumas letras que escrevi no TITLE ao passar o mouse. Os links que não tem a ajuda significam que não tem essa facilidade. O legal é associar uma letra que corresponda ao assunto do link e se você já a usou antes então ela já tem uma definição, como por exemplo: Media kit e Mobile: Ambos começam com M, mas qual é mais viável para ficar com a letra M na versão web? O link do Media Kit pois acessar a versão mobile pelo computador é apenas para tirar alguma dúvida ou por curiosidade e não uma necessidade.
Você pode usar a tag em página específica como nas páginas de contato, ajuda ou artigo especial para ajudar o leitor a sair dela de forma simples e prática (sair de uma página e clicar em um link e ver um novo conteúdo seja do mesmo blog ou novo).

Tenho uma ambição: fazer o blog mudar de página apertando apenas a tecla ‘seta para a esquerda/direita’ do teclado como hoje acontece no site Flickr e em alguns outros sites. Creio que esta ação é resultado de código incorporado, mas tudo bem. Fez um teste? Visite uma galeria de imagens no Flickr e aperte a seta para a direita por exemplo.

O que você achou desta dica? Seu blog já tem este recurso?