HTML5 – Acessibilidade com o Atributo accesskey

A nova linguagem HTML5 prevê reformulação no atributo accesskey. Uma delas é: “todos os elementos HTML podem receber o atributo accesskey“. Apesar dos navegadores atuais não aplicarem tudo que a documentação do W3c sugere, ainda sim podemos usar para incrementar a acessibilidade das nossas páginas web.

Você já parou para pensar que seus visitantes podem ter algum tipo de deficiência ou mobilidade reduzida e podem ter dificuldades de controlar o mouse para clicar em links, campos de formulários, etc. E uma navegação utilizando a tecla tab pode acabar sendo um processo bem lento para dar foco em um link…

A especificação da HTML5 recomenda que a combinação de teclas para acionar o atributo accesskey seja ctrl + alt + tecla e que o valor do atributo accesskey seja case sensitive, ou seja, sensível ao tamanho da letra. Porém os navegadores não implementam essa recomendação, a maioria dos navegadores usam a tecla alt + tecla e/ou shift + alt + tecla

A maioria dos navegadores não suporta duplicar o atributo accesskey. Por exemplo, uma página não pode ter dois atalhos com accesskey = "N". A maioria dos irá ignorar um dos atalhos. Alguns navegadores vão ignorar a primeira accesskey, e outros navegadores ignoram a segunda instância. O navegador que aceita accesskey duplicado é o Internet Explorer.

Exemplo atributo accesskey

<nav>
    <p>
        <a href="http://www.google.com.br" accesskey="G">Google</a> 
        <a href="http://www.yahoo.com" accesskey="Y">Yahoo</a> 
        <a href="http://www.facebook.com" accesskey="F">Facebook</a>
    </p>
</nav>

Na HTML5 o atributo accesskey pode conter uma série de atalhos, separados por espaços. Uma finalidade para isso é de assegurar que um atalho de teclado esteja disponível para dispositivos moveis também, aqueles que só possuem teclado com números. Assim é possível acrescentar um valor numérico no atributo accesskey além da letra, bastando o usuário digitar esse número para dar o foco no elemento. Veja a seguir que definimos a letra “s”, e em seguida, separado por um espaço, o número “0”.

<form action="/search">
 <label>Search: <input type="search" name="q" accesskey="s 0"></label>
 <input type="submit">
</form>

Você deve estar se perguntando, mas como meus usuários vão saber que inseri teclas de atalhos para meus elementos HTML. Raramente um usuário saberá que você atribuiu teclas de atalhos para os elementos. Para minimizar essa dificuldade você pode colocar um texto informando seus visitantes ou exibir para o usuário ao lado do elemento a tecla de atalho. Abaixo um CSS que insere ao lado do elemento a tecla de atalho escolhida para o elemento.

a[accesskey]:after, button[accesskey]:after, input[accesskey]:after,
label[accesskey]:after, legend[accesskey]:after, textarea[accesskey]:after {
	margin-left: 0.3em;
	content: "[" attr(accesskey) "]";
	}

Um site que implementa o uso desse atributo é o Acesso Digital. Esse site foi desenvolvido para oferecer total acessibilidade aos seus visitantes. Excelente para um bom exemplo de acessibilidade na Web.

Compatibilidade entre navegadores

O atributo accesskey é suportado em todos os principais navegadores em suas últimas versões, com exceção do navegador Opera que ainda não implementa tal funcionalidade.

Firefox usa a combinação de teclas shift + alt + tecla, já o Chrome shift + alt + tecla ou apenas alt+tecla.

Me siga no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.