Accesskey

Atalhos de teclado

Há outras técnicas para pular links, mas que não são universais como, por exemplo, as chaves de acesso – ACCESSKEY. Elas funcionam para a maioria dos navegadores, mas não para os “somente texto”, como Lynx e Webvox. Utilizadas principalmente para se chegar diretamente à links importantes, como pular a navegação e ir para o conteúdo.

Exemplo de implementação:

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

É necessário ter cuidado na hora de escolher as teclas de atalho, pois elas podem representar conflitos com combinações já utilizadas pelos browsers ou sistemas operacionais. Na tentativa de minimizar esse conflito, pode-se optar por utilizar teclas numerais (1, 2, 3, etc). No entanto, como não há padrão de implementação a inexistência de conflito não é garantida e alguns usuários podem achar difícil associar números a determinadas funções.

Tanto não há padrão que as combinações de teclas para ativação do atalho variam de acordo com o browser e o sistema operacional.

OBS: Se deseja “esconder” o link de atalho na sua página, evite usar ‘display: none’ pois alguns leitores de tela levarão isso a sério e não vão ler o link.

Defina: position:absolute; left:-999em;
Assim o conteúdo será removido da sua posição, não ocupando espaço e movido para “fora da tela”, ficando oculto, porém os leitores de tela acessarão o conteúdo.

Referências:

https://developer.mozilla.org/pt-BR/docs/Web/HTML/Global_attributes/accesskey