Acessibilidade, parte 2

Continuando com a postagem anterior, a parte 1 sobre o tema "acessibilidade", e é claro que você já está por dentro do assunto após ter lido todo aquele texto, mas agora vou deixar um de lado a visualização, para falar um pouco sobre navegação, afinal, poder mexer é tão importante quanto poder ver.

Mas antes de tentar dar algumas dicas de navegação, temos que entender o que é a navegação, e qual a importância dela.

Pra começar, se você está vendo esse blog de programação, existe uma enorme possibilidade de você possuir um teclado e um mouse. O que? Está surpreso com essa frase? Estou falando sério, lembre-se de que nem todos os seus possíveis leitores/clientes possuem um teclado e um mouse! Mas voltando a você, provavelmente você está usando o mouse para navegar por esse site, mas vamos fazer um pequeno teste (primeiro leia esse parágrafo, depois faça o teste). Coloque o ponteiro do mouse sobre o relógio do sistema, feche os olhos, não vale roubar, feche os olhos totalmente e tente clicar no link “Início” que está lá em cima, no topo do meu blog, você consegue?

Acho que você não conseguiu, pois ainda está lendo essa postagem, o que podemos entender com esse exercício? O mouse foi criado para quem tem uma visão boa. Mas, vamos fazer outro teste. Fique com os olhos abertos, mas coloque os dois braços atrás da cabeça, como se estivesse sendo abordado pela polícia, agora sem usar as mãos, tente clicar no botão “Início” e depois voltar para essa postagem. Acho que dessa vez você consegue, mas vai ser muito incômodo não é mesmo? Não precisa dizer como você está controlando o mouse, isso não importa muito, apenas precisamos perceber que o mouse foi feito para quem, além de uma boa visão, possui ao menos um braço ou uma boa coordenação motora para poder controlá-lo com outra parte do corpo.

Agora vamos fazer um último teste, esconda seu mouse e tente navegar nesse site. Você consegue? Sim, claro que consegue, mas vai ser um pouco mais chato, nesse caso temos que utilizar a tecla “TAB” que é a tecla utilizada para navegar pelo site sem utilizar um mouse, essa tecla vai passando por cada elemento da página, veremos mais detalhes adiante.

Em suma, um site com uma navegação acessível, atende, diversos tipos de pessoas e equipamentos, não importa se o usuário possui deficiência visual, motora, se ele não possui um mouse ou qualquer que seja o motivo. Mas como fazer isso? Calma, agora que entendemos o problema, podemos pensar em possíveis soluções.

O primeiro passo é eliminar do seu site qualquer menu feito em flash ou similares, por que esses tipos de menus, só são acessados com o mouse, mesmo se você colocar um script para aceitar o teclado, ainda não vai funcionar por que o “componente” precisa estar ativo para que o teclado funcione. Difícil de entender essa parte? Eu explico, vá em algum site de jogos online, que geralmente são feitos em flash ou Java applet, escolha um jogo e deixe a página dele carregar mas assim que você escolher o jogo NÃO CLIQUE NO JOGO, apenas deixe a página dele carregar e tente jogar. Você não vai conseguir, é por que o applet ou flash não está “ativo”, se você pressionar as setinhas cima, baixo, esquerda e direita, você vai movimentar a página e não o personagem do jogo, se você quiser ativar o controle do jogo, vai ter que clicar no applet ou flash, para somente após isso, conseguir utilizar o teclado. Se você possui um menu feito em flash ou applet ou qualquer coisa do tipo, delete-o e crie um novo menu via HTML, pode utilizar imagens, muitas imagens, mas lembre-se do assunto anterior, não deixe seu site muito “pesado”. Além dessa dificuldade, seu leitor/cliente pode tentar acessar o site de um celular ou de um computador um pouco mais antigo que não possua suporte para a ferramenta que você está tentando disponibilizar, nesse caso também vai ficar muito difícil navegar pelo seu site.

Ainda nos menus, mas também no resto do site, se você está tratando algum tipo de evento do mouse via script, tipo  “onmouseover”, “onclick”, “onmouseout”, esse menu ou item só vai funcionar se seu leitor/cliente possuir e conseguir utilizar um mouse, mas se for um deficiente visual, ou alguém que não possua mouse, essa pessoa não conseguirá navegar pela página.

Duas alternativas plausíveis, a primeira é remover esses eventos e menus que capturam o evento do mouse, outra solução é adicionar eventos de teclado! Se você está capturando um “onclick” capture também quando a tecla “barra de espaço” for acionada, se está capturando o “onmouseover” adicione também um evento “onfocus”, se está utilizando o evento “onmouseout”, capture também o evento “onblur”, sempre procure similares para teclado, em todos os eventos de mouse que estiver utilizando.

Outro fator importante para a navegação é a ordem dos elementos, esqueçamos mais uma vez o mouse, desconecte ele e guarde em algum lugar, navegue pela sua página utilizando a tecla “TAB”, você consegue chegar ao conteúdo rapidamente ou tem que passar por milhares de botões e propagandas antes? Se você está demorando mais do que 5 “tabs” para chegar ao conteúdo, EU acho que já é muito, alguns acham até que o primeiro “tab” já deve cair no conteúdo, mas ai você tenta fazer isso nesse blog e vê que não consegue chegar no conteúdo da postagem antes de passar por todo tipo de link, correto? Realmente, mas esse blog não é meu, é do wordpress.com, eu não edito o código fonte do site, apenas o da minha postagem, infelizmente.

Mas como criar uma navegação? Utilizando um comando html simples, o “tabindex”.
Tabindex é um atributo que existe na maioria das tags html, e com ele é possível estabelecer uma ordem de navegação para os objetos, definindo com valores numéricos, de preferência positivos, alguns navegadores aceitam valores negativos, mas não são todos.

Exemplos:

<a href=”x.com.br” tabindex=”1”>aaa</a>
<a href=”x.com.br” tabindex=”2”>bbb</a>
<input type=”submit” value=”ccc” tabindex=”3”/>

No exemplo acima, o primeiro tab vai deixar o link “aaa” selecionado (não vai acionar o link, vai apenas dar o foco para ele), o segundo tab vai marcar o link “bbb”, o terceiro tab vai marcar o botão “ccc”.

Você pode deixar lacunas entre os tabindex, por exemplo, 1-2-3-6-7-9-15-29-30-100, neste caso os tabs vão acessar os objetos na ordem que for definida, se um número não for encontrado, então o próximo é procurado, e assim vai até encontrar um número.

Não é necessário inserir as tabulações na ordem que os objetos estiverem dispostos no código fonte, você pode colocar um tabindex=”1” para um objeto que está no final da página e um tabindex=”2” para um objeto que está no começo, isso não importa, se fizer isso o primeiro tab vai acessar o objeto que está com a tabulação “1” e o segundo tab vai acessar o objeto “2”.

Resumindo o capítulo, quando estiver criando ou editando o código fonte de uma página, invista alguns minutos tentando navegar pelo site sem o mouse e veja se é possível, se não conseguir então será necessário efetuar alguns ajustes.

Assim encerro esta postagem, e para a próxima prepararei uma matéria sobre leitores de tela e a utilidade (ou falta de utilidade) de tabelas em sites acessíveis.

Enjoy!