Teclas rápidas para os links

Utilizando o atributo accesskey se podem definir atalhos de teclado para acessar aos links diretamente com a pulsação de ALT e uma tecla que indicarmos no atributo.

As teclas rápidas são atalhos de teclado para realizar diversas ações de uma maneira mais direta. Implementam-se em todos os programas em geral e servem para melhorar a comodidade do usuário e a rapidez de uso do software, assim como aumentar a acessibilidade dos programas, a não ser necessário o uso do mouse para executar diversas ações.

Em uma página web também podemos utilizar teclas rápidas para acessar a certos links ou campos de formulário. Existe um atributo chamado accesskey que nos serve para indicar a tecla rápida ou atalho de teclado que associaremos ao elemento.

Por exemplo, em um link podemos definir uma tecla rápida desta maneira:

<a href="http://www.estiloymoda.com" accesskey="e">Estiloymoda.com</a>

Como se pode ver, simplesmente indicamos "e" como a tecla rápida para o link que nos levaria à página estiloymoda.com. Para colocar em funcionamento uma tecla rápida temos que combinar seu clique com a tecla ALT (alternativa).

Na prática a tecla rápida simplesmente nos levará o foco da aplicação para o link, de modo que não o executa. Para que o navegador mude a página e se mova para o link deveríamos clicar logo a tecla ENTER.

A compatibilidade com navegadores cada vez é maior para as teclas rápidas. Já é possível utilizá-las em todos os mais habituais, como Firefox, Internet Explorer ou Opera. (Está disponível a partir de Internet Explorer 4.0, com certas restrições e de Netscape 6). Não obstante, o W3C recomenda o uso de accesskey, por isso é normal que todos os navegadores vão se incorporando.

Como recomendação, devemos assinalar de alguma forma que existe uma tecla rápida para um link, possivelmente colocando em negrito no link a letra que implementa a tecla rápida, ou sublinhando-a. Este último caso (o sublinhado) é na minha opinião mais intuitivo, mas como os links já aparecem sublinhados, deveríamos fazer algo para tirá-lo afim de que se veja o sublinhado da tecla rápida. Vejamos como se pode fazer isto com um exemplo:

<html>
<head>
<title>Teclas rápidas para links</title>
<style type="text/css">
a {text-decoration:none}
</style>
</head>
<body>

Vamos fazer links com teclas rápidas

 
<a href="http://www.estiloymoda.com" accesskey="e">Estiloymoda.com</a>
 
<a href="http://www.desarrolloweb.com" accesskey="d">Desarrolloweb.com</a>
 
<a href="http://www.guiarte.com" accesskey="g">Guiarte.com</a>
</body>
</html>

Como vemos, se fez uso das folhas de estilo para tirar o sublinhado dos links. Logo, utilizamos a etiqueta para sublinhar a letra que tem a tecla rápida ou atalho de teclado. Não tem nenhuma complicação.

Podemos ver o exemplo em funcionamento em uma página a parte.