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

in #pt6 years ago (edited)

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

Figura de um mouse e um teclado

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.

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!

Sort:  

Parabéns, seu post foi selecionado para o BraZine! Obrigado pela sua contribuição!
BraZine.png

Aiyumi, é um prazer conhecê-la, ainda mais por este texto tão informativo. Foi uma surpresa maravilhosa a leitura. Ano passado foi a primeira vez que a Pós-Gradução de Antropologia da USP destinou uma vaga especifica para portadores de necessidades. Um dos companheiros que estava concorrendo para a vaga era deficiente visual e tinha um grande problema também com os textos. Apesar de ser uma vitória, como ele poderia concorrer para a vaga se não pudesse ler os textos que eram necessários para concorrer? Os textos que não estavam disponíveis na internet era um desafio óbvio, mas tinham também os textos na forma de imagem, que era outro problema. Infelizmente a antropologia costuma ser bem "quadrada" quanto o ponto é tecnologia. E como o interessado ainda não estava matriculado, ela não pode solicitar o "suporte" da Universidade. Na época eu tentei procurar algum programa que pudesse ajudá-lo com os textos em imagem. Mas só encontramos um programa que custava uns 300 doláres. Existe algum programa open source que eu possa indicar para ele?

Até hoje não tentei usar, mas acredito que o programa open source mais funcional para isso seja o Tesseract, programa para reconhecer caracteres em imagens e converter para texto, que inclusive é patrocinado pela Google. Suporta reconhecimento de textos em vários idiomas, incluindo Português. Tem para Windows, Mac e Linux, só que é um programa de linha de comando. Tem algumas interfaces gráficas pra ele que podem facilitar o uso para quem não está acostumado com linha de comando. Um que eu achei nesta lista, que é meio antigo mas que me pareceu ter bons recursos, é esse Ocrivist (para Windows e Linux). Teria que experimentar para ver se é acessível e se funciona como anunciado.

Ouvi que o Tesseract é um programa poderoso mas bem difícil de dominar, principalmente na parte de treinar a inteligência artificial dele pra melhorar o reconhecimento de caracteres quando os resultados não saem direito. Mas pela necessidade, talvez valha a pena tentar.

Congratulations @aiyumi! You have completed the following achievement on Steemit and have been rewarded with new badge(s) :

Award for the number of comments

Click on the badge to view your Board of Honor.
If you no longer want to receive notifications, reply to this comment with the word STOP

To support your work, I also upvoted your post!

Do not miss the last post from @steemitboard:
SteemitBoard World Cup Contest - The results, the winners and the prizes

Do you like SteemitBoard's project? Then Vote for its witness and get one more award!

Nossa Aiyumi, você mandou bem na pesquisa dessa vez em. É sempre bom saber dessas coisas para lembrar de aplicar esse tipo de acessibilidade quando eu for modelar uma página Web.

Abraço.


ptgram power | faça parte | grupo steemit brasil

Maravilha de texto!
Já virei teu fã!
Abraço. E Física na veia! ;)

Uau! Obrigada, professor!

Queria dar upvote no seu comentário, mas como meu voto vale muito pouco e posts/comentários não recebem nada se tiverem menos de $0.03, pra não desperdiçar resolvi votar no seu último post ('O "Ferrugem" e a Lua'). Aliás, muito bom! Deve ter sido uma emoção e tanto! E gostei do "alunissagem" :P .

Quanta gentileza! ;)
Sim, foi emocionante quando aquele velhinho entrou no palco e logo reconheci os traços do meu herói de tantos anos atrás! O coração acelerou! Foi um privilégio para o professor e para o "Ferrugem" que continua vivo em mim! :D
Abraço. E Física na veia!