Acessibilidade na Web - Objetos Clicáveis e Programas Leitores de Tela

Para mim, uma deficiente visual que usa o computador apenas por meio do teclado e com ajuda de um programa leitor de tela , uma das coisas que mais atrapalham minha navegação por sites da Web é a grande quantidade de objetos clicáveis que não são acessíveis. Aqueles elementos com atributo "onclick" que dispara uma função em Javascript quando os elementos são clicados com o mouse. No meu post anterior, eu contei que estava tendo dificuldades para navegar no site do Steem Monsters, e era justamente esse caso dos objetos clicáveis. Na verdade, isso é bastante comum, e tem muitos outros sites com este problema. Acontece inclusive em alguns lugares do próprio Steemit, e no Busy tem uns objetos piores ainda (não consigo saber nem onde está o botão do upvote!). Enfim...

Fonte da imagem: Openclipart

O Problema

Normalmente, para navegar nas páginas com leitor de tela, as setas percorrem o texto, e elementos para interagir com o site como links, campos de formulário e botões são focados com a tecla "Tab" e ativados com "Enter" (e também a barra de espaço no caso de botões e caixas para marcar). Quando os sites só têm botões e links normais, não tem problema. Mas quando começam a usar spans ou divs com imagens e onclick com Javascript para criarem "botões" com aparência personalizada, aí é que o bicho pega. Esses objetos não podem ser focados com "Tab" nem ativados com "Enter". Geralmente só ativam com cliques de mouse mesmo, e não tem como os leitores de tela saberem que esses objetos são botões. Alguns leitores de tela podem até ter recursos para tentar dar um "jeitinho" de identificar objetos que tenham "onclick" e simular um clique de mouse neles, mas nem sempre isso funciona.

A Solução

Graças aos atributos ARIA (Accessible Rich Internet Applications), os desenvolvedores de sites podem programar os elementos HTML para "avisarem" aos programas leitores de tela que os objetos devem ser interpretados como se fossem links ou botões. Na página de recursos da Mozilla para desenvolvedores (MDN), tem uma explicação bem fácil de entender sobre o que é ARIA (em Inglês).

Na verdade, a solução nem é um bicho de sete cabeças, a não ser que o desenvolvedor tenha feito coisas muito malucas com Javascript e elementos incomuns. Para casos normais, se puder usar links e botões "de verdade" ('a href="#"', 'button', 'input type="button"', 'input type="submit"' etc.), melhor, porque já são acessíveis pelo teclado por padrão. Mas se não tiver outra opção e precisar mesmo usar divs ou spans ou qualquer outra coisa, o jeito é:

• Colocar 'tabindex="0"' para fazer com que o objeto possa ser focado usando a tecla "Tab".
• Adicionar 'role="link"' ou 'role="button"' para "avisar" aos leitores de tela que o objeto deve ser interpretado como link ou botão.
• Adicionar Javascript para fazer os objetos se comportarem como links ou botões nativos, e que além de cliques de mouse, também respondam ao pressionamento da tecla "Enter" (event.keyCode 13) para elementos com 'role="link"' e adicionalmente a barra de espaço (event.keyCode 32) para 'role="button"'.
• E se o objeto for um ícone com identificação puramente visual, precisa ter uma identificação textual para os leitores de tela. Isso pode ser resolvido com o atributo 'aria-label'.

Breves Exemplos

Exemplos básicos de spans com 'role="link"' e 'role="button"', com 'tabindex="0"' e Javascript para detectar a tecla "Enter" e a barra de espaços, onde "funcao_para_ativar" é a função a executar quando o objeto for ativado.

Span disfarçado de link que ativa com "Enter":

<span tabindex="0" role="link" onclick="funcao_para_ativar();" onkeydown="if(event.keyCode==13){funcao_para_ativar()}">Span disfarçado de link</span>

Span disfarçado de botão que ativa tanto com "Enter" quanto com barra de espaço:

<span tabindex="0" role="button" onclick="funcao_para_ativar();" onkeydown="if(event.keyCode==13 || event.keyCode==32){funcao_para_ativar()}">Span disfarçado de botão</span>

Abaixo deixo alguns links que encontrei (em Inglês) com explicações mais detalhadas de como criar botões personalizados acessíveis, com dicas e exemplos.

• Marco's Accessibility Blog : Easy ARIA Tip #6: Making clickables accessible
• Deque.com : Building Accessible Buttons with ARIA: A11y Support Series
• Mozilla MDN : Using the button role
• Font Awesome documentation : Accessibility

Este último link não fala especificamente de objetos clicáveis, mas é muito comum encontrar ícones clicáveis usando Font Awesome e sem nenhuma identificação textual, completamente invisíveis para programas leitores de tela.

E isso era o básico. Como tudo na vida, dá pra complicar (os casos dos sites fazendo coisas muito malucas). Mas acho que implementar apenas o básico para tornar os clicáveis acessíveis já facilitaria muito a vida de quem usa leitores de tela! Espero que este post possa ajudar a criar pelo menos alguns objetos clicáveis acessíveis.

---

PS: a versão em Inglês deste post está participando do concurso Toss Up Thursday do @qurator, cujo prêmio é um mês de upvotes maiores. Se você também for membro do @qurator, e se gostou do meu post e quiser me apoiar, por favor dê um upvote no comentário com minha participação (apenas upvotes de membros do Qurator contam). O valor do voto não importa (até pode ser um upvote de 1% com valor mínimo, desde que venha de um membro do Qurator). Obrigada!