Tab Index: Navegação mais acessível no Flash

Já tentou navegar na internet sem usar mouse? Bem difícil, você diria. Mas é assim que um usuário com deficiência motora, por exemplo, navega, na base do Tab e Enter.

Agora imagine a dificuldade que este mesmo usuário teria tentando navegar em um site totalmente desenvolvido em Flash. A Macromedia/Adobe já dá uma ajuda ao indexar automaticamente os botões para ficarem acessíveis ao teclado com o Tab/Enter, mas cabe ao desenvolvedor organizar essa navegação. Isso, apesar de muito simples de fazer, praticamente ninguem faz.

Conheca o tabIndex

O tabIndex é uma propriedade do flash que define a quantidade de tabs que o usuário deve apertar até chegar em determinado botão e, consequentemente, permite organizar a navegação e deixá-la mais acessível.

A sintaxe do tabIndex é bem simples.

nome_do_botao.tabIndex = X;

No caso, nome_do_botao é um nome que você define e X é o índice, ou seja, quantos Tabs tem que apertar para chegar até o objeto.

Veja um exemplo de navegação sem tabIndex

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

Agora vamos aplicar o tabIndex aos ítens do menu:

item1.tabIndex = 1;
item2.tabIndex = 2;
item3.tabIndex = 3;
item4.tabIndex = 4;
item5.tabIndex = 5;
item6.tabIndex = 6;
item7.tabIndex = 7;

Veja como fica:

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

O resultado á bem melhor para quem não pode usar um mouse, não é? Você pode baixar o FLA fonte clicando aqui e conhecer mais sobre acessibilidade no site AcessoDigital.net.


3 respostas »

  1. Rodrigo diz:
    16/09/2008 as 09:33

    Obrigado! A explicação é simples e objetiva.

    [Responder]

  2. CarlosGarcia diz:
    19/01/2009 as 09:51

    Perfeito!!!
    Valeu pelo post!!!

    [Responder]

  3. Fernando diz:
    07/06/2009 as 14:10

    Richard, obrigado pela explicação, porém estou com o seguinte problema: meu formulario carrega no nive3 e o tab busca nos niveis abaixa tambem, nos botoes. Como fazer pra funcionar somente no formulario no nivel dele?
    Agradeço

    [Responder]

URL para Trackback

Deixe um comentário