Abordei recentemente em um artigo a tag label. Procurei apresentá-la a quem não a conhecia e expliquei como utilizá-la. Gostaria de fazer o mesmo para o atributo accesskey e posteriormente sobre o tabindex.

O accesskey tem uma grande potencialidade para acessar campos de formulários e/ou links sem o uso do mouse, por exemplo. Embora seja esquecido ou desconhecido por muitos desenvolvedores.

Começaremos analisando a formação do seu nome (accesskey). Se analisarmos a formação do nome do atributo, já teremos uma boa perspectiva sobre ele. Observe:

accesskey = access + key = ter acesso através de teclas (ter acesso a + tecla).

Agora veja um exemplo da sua aplicação em um campo de formulário e um link, respectivamente:

<input type=”text” name=”nome” id=”nome” accesskey=”n” />

<a href=”http://www.imasters.com.br” title=”iMasters” accesskey=”1”>iMasters</a>

Analisando a formação do atributo (accesskey) e seu modo de aplicação, concluímos que: teremos acesso ao campo intitulado como “nome” através da tecla “n” e ao link iMasters com a tecla 1. Ou seja, se o usuário teclar "Alt + n", terá acesso ao campo de formulário (nome) ou "Alt + 1" para acessar o link (iMasters). Este recurso é extremamente útil para os usuários que portam alguma dificuldade. Imagine como isto é bacana para os que não conseguem utilizar um mouse. Pense nisso!

Veja um exemplo da aplicação do atributo nesta página do W3C: http://www.w3.org/WAI/UA/TS/html401/cp0101/0101-ACCESSKEY-INPUT.html

É preciso estar ciente que somente o browser iCab para o Macintosh exibe visualmente as atribuições de caracteres do accesskey, segundo Jeffrey Zeldman, autor do livro "Projetando Websites compatíveis" (recomendo a leitura). Mas a porcentagem de uso deste navegador é mínima. Então precisamos indicar ao usuário qual o caractere atribuído ao accesskey.

Vou apresentar-lhes três alternativas. Se conhecerem outras, por favor, me apresente. Ficarei contente em conhecê-la.

Primeira.

Veja este exemplo:

<label for=”nome”><span>N</span>ome:</label>
<input type=”text” id=”nome” name=”nome” accesskey=”n” />

Observe que coloquei a letra N dentro da tag span, o que me permite personalizá-la através das CSS, como colocar um sublinhado na mesma para diferenciá-la.

Exemplo do código CSS para personalizar a tag span aninhada com a tag label.

label span {
text-decoration: underline;
}

Outra alternativa seria escrever um texto ao lado do campo e/ou link, contendo o caractere atribuído ao accesskey. Veja um exemplo:

<label for=”nome”>Nome: <small>(Alt + n)</small></label>
<input type=”text” id=”nome” name=”nome” accesskey=”n” />

Você pode também manter as duas técnicas juntas. Veja o exemplo mais uma vez:

<label for=”nome”><span>N</span>ome: <small>(Alt + n)</small></label>
<input type=”text” id=”nome” name=”nome” accesskey=”n” />

Agora veremos como o Dreamweaver, insere este atributo.

Se você habilitar a opção de inserir objetos de formulários acessíveis será fácil e prático. Esta opção é ativada no painel Preferences (Ctrl + U) na categoria Acessibility. Veja na imagem abaixo:

Agora, toda vez que for inserir algum objeto de formulário, terá a seguinte opção:

No caso dos links, basta ir até a opção Insert > Hiperlink. Com esta opção você pode configurar o accesskey. Veja o exemplo mais uma vez:

As opções acima mostradas são todas para o modo Design View. No modo Code View também é possível inserí-la, lembrando que o Dreamweaver também oferece um ótimo auxílio neste modo, ainda mais agora no Dreamweaver 8. Ficou ótimo. Veja o exemplo para este modo:

Bom, é isso aí. Espero que tenham gostado. Um abraço e boa semana a todos.