Image Image Image Image Image
Scroll to Top

Topo

accesskey

25

jan
2012

Sem Comentários

Em Blog
HTML

Por Allison

HTML5 – Acessibilidade com o Atributo accesskey

Em 25, jan 2012 | Sem Comentários | Em Blog, HTML | Por Allison

Fonte: KaduNew

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…

O atributo accesskey é utilizado para criar uma tecla de atalho para dar foco em um elemento HTML, facilitando assim a navegação do usuário pelo teclado.

A especificação do 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>

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

Criei uma página com alguns links e campos de formulários que podem ser acessados através de atalhos via teclado. Todos os elementos fazem uso do atributo accesskey.

Veja a página de exemplos:

Exemplo atributo accesskey.

Tags | , , ,