Será que dados são acessíveis?

Mayara Butti
Design RD
Published in
8 min readNov 17, 2020

Uma entrevista com Michelle Frasson

Photo by Stephen Dawson on Unsplash

Este ano eu tinha como objetivo ser mais data driven (um dos valores praticados aqui na Resultados Digitais) e poder relacionar essa habilidade com as experiências nas interfaces com as quais atuo. Com o tempo, os aprendizados, pesquisas e afins, eu encontrei um curso que me chamou a atenção: o bootcampo da UX4BI.

O bootcamp foi um momento bem enriquecedor não, só por ter um público diverso, mas também por abordar conceitos e técnicas sem deixar de ser mão na massa.

No decorrer do curso, foram levantadas várias questões de como contar uma história através dos dados e a maneira como estamos apresentando. Disso, surgiram alguns questionamentos sobre acessibilidade dos dados e gráficos.

Atualmente, tenho o privilégio de fazer parte de um time de design diversificado na Resultados Digitais, e uma das profissionais do time é deficiente visual, a Michelle Frasson, que foi super solícita e compartilhou conosco um pouco da sua experiência na área de design e suas experiências com dados e gráficos. Ah! E um detalhe: muito mais do que um bate-papo a Michelle também compartilhou exemplos, confira a seguir. 😉

Mi, você poderia contar para nós um pouco da sua história e também um pouco da sua experiência trabalhando com o time de design?

🎤 Michelle: Eu sou quase formada em sistema de informação, não me formei por conta de umas questões com a faculdade, fui desenvolvedora front-end por muito tempo e agora entrei para o time de design com o desafio de tornar os componentes mais acessíveis.

Quando entrei para a área de design, fiquei meio desesperada pois, não sabia como fazer as coisas ou por onde começar, porque design, imagem, é tudo muito visual.

Mas agora já está mais acertado, tive que alinhar alguns processos, como por exemplo o Figma, uma ferramenta que não é acessível e eu não consigo trabalhar, por isso realizo as minhas atividades no Trello. Para que eu realize minhas atividades as pessoas precisam descrever os componentes de forma bem detalhada nos cards do Trello, pois não enxergo os componentes dentro do Figma.

Devido a esse obstáculo, realizei uma espécie de treinamento com todo o time de design explicando um pouco sobre como fazer boas descrições para pessoas cegas.

Poderia nos contar como funciona o leitor de tela em gráficos? Qual é o leitor que você utiliza?

🎤 O leitor de tela nada mais é do que um robô que fica lendo os códigos existentes nas aplicações. Ele não lê ordenadamente, ele lê de cima para baixo da esquerda para direita, exceto quando você coloca referência, ou seja, coisas no código como foco ou ordem.

Quando se trata de gráficos, o que o leitor reconhecerá será uma imagem, por tanto a leitura seria algo semelhante como: imagem1, imagem2 e imagem 3 porque gráfico é uma imagem e ele não reconhece. Para eu conseguir “enxergar” um gráfico ele teria que estar corretamente descrito para que o leitor de tela possa traduzir para mim as suas informações.

Para trabalhar utilizo o leitor de tela da Apple Voice Over, já no meu computador pessoal uso o NVDA.

No geral, qualquer leitor de tela tem o mesmo funcionamento, não vejo diferença nenhuma.

Poderia nos contar como é sua experiência na leitura de um extrato bancário? Fatura de cartão? Nota Fiscal Eletrônica?

🎤 Hoje, os extratos bancários e as faturas de cartão são compostos por uma tabela dentro de um arquivo PDF e às vezes com gráficos, então a leitura fica muito ruim, no começo eu não conseguia ler.

Existe outra forma, que é um extrato bancário simplificado como o Nubank, passei todas as minhas coisas para lá.

Já os extratos e notas fiscais é muito ruim de ler por conta da quantidade de informação e pela falta de organização delas, além de disso me lembrei da dificuldade que já passei tentando entender a conta de água e luz.

Você já teve alguma experiência com algum produto ou serviço que apresenta ou apresentava dados? Se sim, poderia contar como foi essa experiencia?

🎤 Já trabalhei com banco de dados, e a minha experiência foi muito ruim. Para ser mais exata eu trabalhava com limpeza e qualidade de dados, mais conhecida como analista de qualidade de dados.

Para algumas coisas que eu poderia usar o banco SQL, um Solr, por exemplo, alguma coisa assim e olhar os gráficos e assim ver se essa tabela está preenchendo pouco ou nada, se não está atualizando, enfim, e eu tinha que utilizar o Postgres para fazer função na mão para retornar número.

É bem complicado trabalhar com gráficos, grafos, se não têm acessibilidade, nada de BI…

❓Existe algum tipo de gráfico que proporciona uma leitura melhor?

🎤Sim! Tabelas, desde que bem implementadas.

Uma tabela com cabeçalhos e colunas distintos fazendo referência com produto, unidade e valor, por exemplo, funciona.

Uma boa referência é essa: Tables Concepts

Questionada sobre outros tipos de gráficos, de linhas ou barra horizontais, por exemplo, a Michele explica que nunca conseguiu ler. Mencionou que é possível mas, na maioria das vezes, a informação fica confusa.

❓Mi, imagine que exista um programa que faz a leitura do gráfico em formato de áudio, qual seria sua opinião?

🎤 Não gosto muito da ideia. Isso pode até servir para gráficos pequenos, mas pensando em um gráfico grande no meio do conteúdo eu posso me perder e teria que voltar ou avançar o áudio todo. E outra coisa, esse áudio será feito por uma pessoa e quem garante que a análise que a pessoa está fazendo não é tendenciosa. Eu ficaria sem poder fazer a minha própria interpretação dos dados, caso eles não estejam completos no áudio.

Lembro quando eu fiz uma prova do vestibular eu não recebi os meus gráficos adaptados nas provas de matemática, química e física e eu dependi da análise de uma pessoa que os leu para mim. Eu errei uma questão por conta dessa análise, simplesmente porque quem estava me auxiliando não sabia descrever o gráfico.

O que você acha de utilizar o atributo “ALT” nos gráficos?

🎤 Continua sendo a mesma coisa, quem coloca o “ALT” é uma pessoa, não é uma coisa que sai do gráfico automaticamente e o “ALT” pode acabar ficando gigante.

Como você explicaria hoje um gráfico de BI, por exemplo, dentro de um “ALT”? Não vai deixar de ser uma análise tendenciosa.

Acredito que isso só daria mais trabalho na realidade, pois você teria que fazer o “ALT” do gráfico, depois simular cada período que a pessoa poderia requisitar, teria que ser um “ALT” dinâmico.

Talvez em um gráfico estático até funcionaria, apesar não gostar, mas em um gráfico dinâmico como é que você usaria o “ALT”?

Se hoje você fosse acompanhar a economia, os gráficos da B3. Eles são acessíveis?

🎤 Não, eles não são. Até gostaria de investir em ações que pagam dividendos, mas não faço isso porque não consigo ler os gráficos.

Eu teria que ler as análises das empresas, aqueles documento que as empresas emitem com centenas de páginas, todos os dias para saber se a minha ação está boa ou não e eu não tenho tempo para ler tudo isso, sendo que as pessoas que enxergam podem ver os gráficos e já têm as respostas.

Se você tivesse a oportunidade de participar da criação de uma ferramenta de dashboard de dados, quais aspectos você levaria em consideração?

🎤 Eu levaria em consideração a questão das cores dos gráficos, várias cores não são tão acessíveis para uma pessoa com daltonismo.

Se você deseja usar cores para destacar alguma informação lembre-se que isso não será visto por pessoas cegas ou com daltonismo. Não tem como saber que aquela informação está chamativa em uma cor vermelha, por exemplo. Então pensar em outras alternativas de chamar atenção, não apenas usando cor, é muito importante.

Pensando em acessibilidade, não adianta nada substituir o gráfico por uma tabela, mas continuar chamando a atenção para informações usando cores. Também, não adianta nada fazer essa substituição e não replicar para a tabela os mesmos recursos, como a possibilidade de ordenação. O que o gráfico tem, uma tabela também deveria ter.

Outros recursos como negrito ou moldura que usamos para destacar são bons? Os programas conseguem realizar a leitura ou não?

🎤 Para pessoas que enxergam sim, para gente que não enxerga não. Para pessoas cegas você deve fazer uma tag invisível dentro da tabela e aí colocar como legenda o que você quer destacar.

Não funciona destacar com negrito, moldura, cor, nem com rajados porque o leitor de tela não informa a fonte. Se eu souber que você destacou os dados, por exemplo, das linhas 1,2,3 e 4, eu consigo executar um atalho do leitor de telas para enxergar a cor que você colocou. Se eu não souber disso, não vou ficar procurando linha a linha para saber a cor.

Leitor de tela não lê cor, lê unicamente texto.

Tem alguma ferramenta que gera gráficos de forma acessível?

🎤 Eu consigo gerar gráficos no excel mas, muito provavelmente, não sairá acessível.

O Google Forms também gera gráficos e uma tabela.

Você sabia?

  • Geralmente, as bibliotecas que geram os gráficos também geram tabelas automaticamente, porém, elas ficam ocultas. Por exemplo, na análise de canais do RD Station Marketing, a biblioteca que utilizamos gera a tabela e o leitor de tela a reconhece.
  • O dado mais importante em uma tabela nunca é destacado, por isso, é preciso fazer um filtro conforme as referências.
  • Nem sempre é possível ordenar uma tabela, porque boa parte das vezes, os programas não a reconhecem.
  • Os leitores de tela indicam células mescladas no excel.

Experimentos

Depois do nosso bate-papo fiquei com algumas curiosidades e separei um svg e alguns links de dashboards para testar com a Mi e compartilhar com vocês.

🧪Será que os leitores de tela conseguem ler um arquivo SVG?

Compartilhei com a Mi, o gráfico abaixo e a conclusão foi…

“Não funcionaria”. Basicamente, o SVG é uma imagem e o leitor de telas não vai ler, a não ser que você coloque uma descrição. Contudo, a interpretação dependendo de outras pessoas.

Michelle acrescenta que para conseguir ler esse tipo de gráfico, ela teria que inseri-lo em uma página via código e utilizar uma descrição de imagem.

Referência: Creating Acessible SVGs

🧪Será que as ferramentas para construção de Dashboard geram Dashboards acessíveis?

Pedi para alguns colegas de curso compartilharem conosco alguns projetos feitos com diferentes ferramentas. Abaixo, segue a experiência da Michele navegando nestes Dashboards.

1- Dashboard feito na ferramenta QlikView

2- Dashboard feito na ferramenta Tableau

Talvez, agora você esteja como eu fiquei após essa conversa 🤯

Pode ser que você comece a questionar ainda mais sobre como contar uma história com números e dados, quais tipos de gráficos você irá utilizar, qual é a persona que você quer atingir e qual público você irá restringir, talvez você comece a questionar outros serviços como boletos, notas, investimentos, educação…

Compartilho esse conteúdo com o intuito de refletirmos para quem, como e se esse é o único caminho para compartilhar e trabalhar dados. Será que devemos continuar construindo gráficos ou dashboards sabendo que parte da população podem não acessá-los?

E já que estamos falando em dados, segundo levantamento do IBGE de 2010, no Brasil existem mais de 6,5 milhões de pessoas com alguma deficiência visual:

  • 528.624 pessoas são incapazes de enxergar (cegos);
  • 6.056.654 pessoas que possuem baixa visão ou visão subnormal (grande e permanente dificuldade de enxergar);
  • Outros 29 milhões de pessoas declararam possuir alguma dificuldade permanente de enxergar, ainda que usando óculos ou lentes.

Por fim, mas não menos importante: como nós podemos tornar os produtos e serviços mais acessíveis a fim de empoderar a cultura data driven em pessoas com deficiência visual?

--

--

Mayara Butti
Design RD

Creative and enthusiastic about projects and challenging opportunities.