O seu produto não é acessível para pessoas não visuais (Case prático)
1. Colocando os pingos nos “is”
Olá comunidade de Produto, me chamo Gustavo Barbosa e atualmente sou Product Designer dos apps ConectaBild e VittaFácil, ambos produtos oriundos do time de Inovação do grupo Bild&Vitta, time o qual é responsável pela digitalização de processos e geração de oportunidades para o mercado de construção civil e incorporação imobiliária.
E aproveitando para fazer uma breve autodescrição, sou um homem branco, de 24 anos com 1,70 de altura, tenho descendência japonesa e portuguesa, uso óculos pretos com a armação bem fininha e neste momento estou com uma camisa verde, do Palmeiras. (ok, ainda sem mundial ☹️)
1.1 Conhecendo a Inovação do grupo Bild&Vitta
Os produtos ConectaBild e VittaFácil tem como objetivo empoderar nossos clientes durante sua jornada na Bild e Vitta, expondo as informações que ele precisa de forma clara, com uma experiência intuitiva e autonomia de ações, entregando autosserviço através de solicitações de assistência técnica para seu empreendimento, agendamento de vistoria, entre outros serviços. Bem como também sendo a principal fonte de informação exibindo uma galeria com a evolução do empreendimento, extratos financeiros, 2ª via de boleto, entre outras informações.
As soluções da Inovação do grupo Bild&Vitta têm como legado a escalabilidade de produtos digitais, ou seja, a capacidade de expandir produtos atendendo demandas sem perder qualidade e que entregam valor, validando as regras de negócio do grupo Bild&Vitta e demais construtoras e incorporadoras, olhando para mercado.
A falta de validação sobre a acessibilidade dos produtos do Portal de Relacionamento era uma preocupação para a entrega de valor às pessoas usuárias não videntes, podendo impactar na experiência de uso de nossos clientes.
1.2 E o seu produto, é acessível?
Segundo o Censo IBGE DE 2010, 24% da população brasileira (~50 milhões) possui algum tipo de deficiência, onde 15,31% tem alguma dificuldade visual , 3,18% tem grande dificuldade e 0,27% não consegue de modo algum realizar tarefas que envolvam a percepção visual.
Além destes dados, atualmente o Código de Defesa do Consumidor e a Lei Federal 13.146/2015 (Lei Brasileira de Inclusão da Pessoa com Deficiência) e Lei Federal 7.853/1989, asseguram às pessoa com deficiência o pleno exercício de seus direitos básicos e isto inclui o consumo de produtos e serviços no ambiente digital.
Quando discutimos sobre a deficiência visual, também abordamos pessoas com daltonismo, baixa visão, miopia, entre outros, que podem ter dificuldade com:
- Baixos contrastes;
- Informações ocultas em links;
- Cores como única identificação de ação;
- Layout complexo e conteúdo desorganizado;
- Separação entre a ação e seu contexto (como botões e campos de formulário);
(Evelyn Matos e Karoline Benatti, 2021)
2. Objetivo e metodologias
Neste caso prático nosso principal objetivo foi realizar experimentos e validações sobre acessibilidade dos produtos do Portal de Relacionamento, considerando diferentes cenários e ferramentas de auxílio à pessoas com deficiência visual, sendo abordados testes automatizados e testes humanos. Os experimentos realizados foram:
2.1 Condução de testes automatizados com ferramentas gratuitas
- Verificação de taxa de contraste com plugin Adee no Figma;
- Avaliação da ferramenta “Verificador de contraste” — Adobe Colors;
- Simulação de diferentes tipos de daltonismo com o plugin Able no Figma;
- Avaliação da ferramenta “Apropriado para daltônicos” — Adobe Colors.
2.2 Condução de testes humanos, com pessoas usuárias reais
- Testes com leitor de Tela — NVDA (Desktop)
- Testes com leitor de Tela para Android— TalkBack (Mobile)
- Testes com leitor de Tela para iOS — VoiceOver (Mobile)
- Realização de testes de usabilidade com pessoas com deficiência visual
2.3 Handoff para o time de desenvolvimento/front-end
- Documentação e apresentação para time de desenvolvimento sobre principais anomalias e possíveis soluções de acessibilidade.
Vamos ver na prática os resultados e discussões destes experimentos?
2.1 Condução de testes automatizados com ferramentas gratuitas
Em nossos processos, quando falamos de testes automatizados, consideramos ferramentas que são capazes de validar requisitos mínimos de taxa de contraste e daltonismo (incluindo suas diversas variações).
A taxa de contraste faz uma relação entre os valores de HEX do background com a cor do título/label utilizado em uma tela, como cita o próprio WCAG cita:
WCAG 2.0 nível AA requer uma taxa de contraste de pelo menos 4,5:1 para texto normal e 3:1 para texto grande. As WCAG 2.1 requerem uma taxa de contraste de pelo menos 3:1 para componentes gráficos e de interface da pessoa usuária (como bordas de entrada de formulário).
WCAG Nível AAA requer uma taxa de contraste de pelo menos 7:1 para texto normal e 4,5:1 para texto grande.
Considerando este requisito de mínimo de contraste , executamos testes de taxa de contraste tanto pelo plugin Able do Figma, bem como pela plataforma Adobe Colors.
E na prática, como fica? Começando pelo Able, fizemos alguns testes com as principais telas da solução estudada, começando pela “Tela Inicial”, onde avaliamos o componente de Cards destacados na imagem abaixo.
Ao aplicar o Able, temos a taxa de contraste em 15.06:1 o que indica excelentes padrões de diferenciação entre background dos cards e seus respectivos títulos.
Olhando para outro cenário, temos a tela de Financeiro, qual possui o título em azul escuro, e seu background amarelo também em uma tonalidade escura.
Como podemos visualizar no resultado abaixo, neste exemplo, temos uma taxa de contraste de apenas 2.07:1, onde podemos identificar uma primeira anomalia de acessibilidade visual. Neste caso, durante o handoff, mapeamos e levantamos a hipótese de criar uma variável no front-end para padronizar os títulos de tela para a cor branco (#FFFFFF) para o aumento de contraste seguindo o guia WGAC.
Além do plugin Able, também utilizamos a ferramenta “Verificador de contraste” da Adobe Colors, a qual trás validações baseadas no guia WCAG 2.1, como na imagem à seguir.
Já quando o assunto é apropriação para daltonismo, utilizamos duas outras ferramentas também gratuitas para a validação e compreensão deste cenário.
Começando pelo plugin Adee, também do Figma (❤) o qual é responsável pela simulação de diferentes visualizações dos 3 principais tipos de daltonismo e suas variações, como:
- Acromatopsia: Falta de diferenciação de cores, predominando apenas preto e branco.
- Protanopia: Onde há dificuldades na diferenciação de vermelho e verde.
- Deuteranopia: Também há dificuldades na diferenciação de vermelho e verde.
- Tritanopia: Falta de diferenciação entre azul e amarelo.
Por meio do Able e da ferramenta “Apropriado para daltônicos” da Adobe Colors conseguimos analisar estas diferentes simulações de daltonismo, e por meio disto, revalidar as taxas de contraste como fizemos nos passos anteriores, como por exemplo:
2.2 Condução de testes humanos, com pessoas usuárias reais
Após as validações com testes automatizados, chegamos na cereja do bolo, os testes humanos com pessoas usuárias reais, etapa em que particularmente, eu pude errar e aprender bastante.
Em uma conversa com uma pessoa usuária não vidente, ouvi a seguinte frase “[…] diga aos seus desenvolvedores que apenas testar com leitores de tela não é o suficiente, isso não é ser acessível.” Confesso que refleti essa frase por alguns dias. Atualmente as ferramentas de leitura de tela desktop e mobile de fato auxiliam bastante no diagnóstico de falta de descrição/etiquetas em componentes e imagens, porém apenas este método de validação pode deixar passar uma série de falhas de usabilidade para pessoas não videntes.
Em outubro de 2019 a Everis Brasil realizou uma pesquisa com 427 respostas válidas no contexto de ferramentas auxiliares no ambiente digital. A pesquisa validou que o leitor de tela NVDA é a principal ferramenta no contexto desktop com 76,6% de pessoas usuárias ativas.
Outro dado extremamente interessante é relacionado aos métodos/atalhos de navegação utilizados pelas pessoas usuárias no contexto desktop, onde temos os seguintes dados.
Já no contexto mobile, foi validado que as ferramentas Talkback para Android (50,1%) e Voiceover para iOS (32,8%) são os principais leitores atualmente utilizados.
Recomendo fortemente esta pesquisa, além de dados de ferramentas são indicados principais componentes que mais geram dificuldade de uso para pessoas não videntes, como validações com Captcha e imagens sem descrição, entre outros excelentes dados.
Com base nestes dados, foram conduzidos testes de usabilidade com:
- 4 designers da Inovação Bild&Vitta.
- 2 desenvolvedores front-end também da Inovação.
- 2 pessoas usuárias não videntes do app ConectaBild.
Em primeiro momento, a decisão foi conduzir testes de usabilidade com colaboradores do grupo, sendo os designers e desenvolvedores, onde tomamos os seguintes cuidados:
- Reservamos uma sala silenciosa para que não houvesse qualquer tipo de interferência durante o teste;
- Vendamos as pessoas usuárias de forma que eles não pudessem utilizar nenhum recurso visual para a condução das tarefas do teste;
- Preparamos um roteiro trazendo um cenário hipotético e tarefas subdivididas afim de entender cada passo da pessoa usuária;
- Gravamos os testes afim de analisar todas as percepções e aprendizados.
Quais foram os principais aprendizados do teste adaptado?
- Conseguimos encontrar falhas de acessibilidade como falta de descrição/ etiqueta em alguns componentes, como ícones, ações de botões e afins. Porém nós precisávamos testar com pessoas não videntes, afim de entender seu real contexto de uso.
- Durante os testes, nossos colaboradores estavam numa curva de aprendizado sobre como utilizar os leitores de tela, então isto só reforçou a hipótese anterior.
Para isto, fomos para o próximo passo, que foi um dos mais delicados durante todo o processo, que foi a fase de recrutamento de pessoas com deficiência visual, como primeiro passo, entrei em contato com o time de Inteligência de Clientes para ter uma relação de clientes com deficiência visual. Durante algumas boas tentativas, consegui o contato de um casal de clientes Bild&Vitta que se apresentaram de forma muito receptiva e dispostos a participar dos testes, porém mais um desafio os testes teriam que ser remotos dado que na época ainda tínhamos baixos índices de vacinação contra a COVID-19, desta forma, preparei o que eu chamei de “pré triagem para teste de usabilidade” onde fiz uma pequena entrevista com as pessoas usuárias levantando questões como:
- Qual é a plataforma de videoconferência mais acessível para você?
- Qual é a marca e o modelo do seu smartphone?
- Qual leitor de tela você utiliza em seu celular?
- Bem como explicações sobre como um teste de usabilidade funciona.
#FicaDica
Geralmente em testes de usabilidade, como bem sabemos, as pessoas usuárias normalmente se subestimam durante a execução de algumas tarefas, citando que não estão conseguindo finalizar determinada tarefa, desta forma, as pessoas usuárias não videntes tendem a partilhar deste sentimento por não visualizarem uma tela. Então durante o teste, mantenha sua postura como pessoa condutora para não sair do figurino e dar qualquer “spoiler” para a pessoa usuária, para que assim, você não comprometa seu teste.
Vamos para os testes finais
Afim de amadurecer a cultura de acessibilidade, convidei um de nossos desenvolvedores front-end para atuar como observador dos testes de usabilidade com o casal não vidente que recrutamos na etapa anterior.
Para a criação do roteiro do teste de usabilidade, levantei 4 diferentes tarefas, explorando as funcionalidades mais requisitadas pelas pessoas usuárias ativas através do Google Analytics, e quebrei em subtarefas, focando em componentes que haviam comportamentos anormais como:
- Feedbacks de campos de inserção de texto;
- Selects/listagens;
- Ícones;
- Ilustrações;
- Cards;
- Entre outros componentes.
Além disso, documentei todos os resultados de cada tarefa no Notion, como na imagem abaixo.
Contextualização da tarefa A: Considere que você está em seu trabalho, e deseja consultar a jornada atual do seu empreendimento, afim de obter maiores informações sobre o mesmo e na sequência solicite um atendimento para o SAC.
Durante a tarefa A, percebemos que as pessoas usuárias tiveram dificuldade em visualizar as opções dentro de um Select à partir dos leitores de tela, bem como para compreender um ícone de “mais informações” que não tinha descrição/ etiqueta.
Já durante a tarefa D, identificamos a falta de descrição/etiqueta nos ícones do menu fixo do App. Uma pontuação extremamente grave para a usabilidade de nossos clientes.
Contextualização da tarefa D: Dado que você está em sua casa, e deseja informar que mudou o número de telefone, atualizando esta informação em seu Perfil.
Como “medir” o sucesso dos testes de usabilidade?
Além das análises de cada tarefa, ao final do teste, solicitamos para que as pessoas usuárias respondessem o questionário do SUS (System Usability Scale), métrica a qual se baseia em um formulário de perguntas quantitativas que se relacionam com as Heurísticas de Nielsen para a validação em números do sucesso ou não de um teste de usabilidade.
Em uma escala de 0 até 100, a pontuação mínima para a validação de um teste bem avaliado perante às heurísticas é 68, a nota média entre as 2 pessoas usuárias para o SUS foi de 90 pontos. Além de comentários qualitativos feitos ao final do teste.
2.3 Handoff para o time de desenvolvimento/front-end
Por fim, foram realizadas documentações e apresentações para o time de desenvolvimento, contando os principais resultados, aprendizados e oportunidades coletados durante todo o processo.
Um ponto extremamente importante foram os diferentes comportamentos dos leitores de tela Talkback (Android) e Voiceover (iOS). Alguns ajustes feitos em uma plataforma não necessariamente atendiam as demandas da outra plataforma, sendo assim, tabulamos as melhorias olhando para todos os cenários possíveis ordenando por criticidade.
Após as apresentações e estimativas de esforço/tempo com os desenvolvedores e Product Owner, finalizamos a lista de melhorias em duas sprints de 15 dias cada. Como próximos passos, estamos nos aproximando de ONGs voltadas para pessoas com deficiência visual na região de Ribeirão Preto-SP para o processo contínuo de validação de acessibilidade em todos os produtos da Inovação do grupo Bild&Vitta.
Concluindo…
Acessibilidade não se trata apenas de testes com leitores de tela, acessibilidade se trata de uma cultura que deve envolver Product Managers, Product Owners, desenvolvedores e todas as partes interessadas do produto. Cada vez mais vemos empresas e instituições trazendo esta cultura através de posições como “Acessibility Product Designer” onde a ideia não é apenas estar dentro de leis federais e sim entregar valor para qualquer pessoa que deseje consumir seu produto.
Na minha opinião, tornar seu produto acessível é executar uma validação contínua de acessibilidade, vai lançar uma nova feature com novos componentes? Separe uma base de pessoas usuárias não videntes para conduzir testes de usabilidade assistidos com eles!
Você esta na etapa de descoberta de algum produto? Levante hipóteses que possam impactar na jornada de uma pessoa não vidente. E muito além disso, inclua qualquer tipo de deficiência, desde visual, até motora, auditiva e assim por diante.
Vamos construir esta cultura de acessibilidade juntos? ❤
Meus agradecimentos especiais para todos que participaram deste processo direta ou indiretamente, às referências em acessibilidade Marcelo Sales e Talita Pagani. Ao meus queridos desenvolvedores Mônica Lança e Luis Felipe Colares Juzo e todo time de Design do grupo Bild&Vitta, como Cauê de Oliveira Buck pelo grande desafio, Lucas Thomazini, Lucas Canôas, Mariana Neri e todos os demais.
Referências
