Ilustração com o fundo preto e três pessoas de pele amarela com cabelos pretos viradas para um smartphone. Da esquerda para a direita, respectivamente, um homem utilizando muleta e vestindo uma blusa azul, uma mulher de blusa verde utilizando aparelho auricular, segurando o smartphone com a mão direita e, com a mão esquerda, segurando a mão de outra mulher com óculos escuros e blusa amarela.
Ilustração por: Bernardo Abreu

Desafios e aprendizados de construir uma cultura de acessibilidade na empresa

pagseguro design
pagsegurodesign
Published in
10 min readApr 19, 2022

--

Segundo a pesquisa do Movimento Web Para Todos e BigData Corp, apenas 1% dos sites brasileiros é acessível para pessoas com deficiência. Além disso, para 89% dos consumidores com deficiência, a acessibilidade é um fator decisivo na compra, segundo a Sociedade Brasileira de Varejo e Consumo (SBVC).

Dentro do nosso contexto, nós da equipe de Design e Research Ops do PagBank PagSeguro sabíamos que existiam pontos de melhorias em relação à acessibilidade dentro do nosso aplicativo PagBank.

Alguns estudos e iniciativas dentro das squads de produtos já tinham sido realizados pelo time de Design, como a iniciativa "Os primeiros passos em direção ao design inclusivo ", porém ainda não tínhamos um estudo dedicado a acessibilidade de forma cross produtos.

Então em 2021, nós da equipe de Design e Research Ops colocamos esforços em ampliar os estudos de acessibilidade, visando melhorar a experiência dos usuários do nosso aplicativo.

Mas afinal, o que é acessibilidade?

A acessibilidade é um conjunto de práticas que visa quebrar as barreiras que dificultam o acesso das pessoas e tem o intuito de tornar o uso equitativo, levando em conta a diversidade.

No contexto digital, a acessibilidade é a prática de projetar sites e aplicativos que possibilitem a navegação, a compreensão e a interação de qualquer pessoa na internet, independente do suporte de outras pessoas. Já no design, a acessibilidade representa projetar produtos e serviços adequados para as diversas necessidades que as pessoas possam vivenciar.

Acessibilidade para quem?

Existem grupos de pessoas que são mais afetados pela falta de acessibilidade na web: as pessoas com deficiência física, intelectual, neurodivergentes, pessoas com daltonismo, terceira idade, entre outras.

No Brasil, segundo o Censo Demográfico do IBGE de 2010, 46 milhões de pessoas apresentam pelo menos uma das deficiências investigadas pelo Instituto, esse número representa 23,9% da população brasileira. Além disso, o Brasil possui:

Gráfico com dados do IBGE de 2010 sobre Deficiência no Brasil. No centro da imagem há um gráfico que mostra que 46 milhões de pessoas possuem algum tipo de deficiência: 35 milhões de brasileiros com deficiência visual; 13 milhões de brasileiros com deficiência motora; 10,7 milhões de brasileiros com deficiência auditiva, e 2,5 milhões de pessoas com deficiência mental.
Infográfico da quantidade de pessoas com cada tipo de deficiência no Brasil
  • 10,7 milhões de pessoas com deficiência auditiva (Instituto Locomotiva);
  • 13 milhões de pessoas com deficiência motora/física (IBGE);
  • 6,5 milhões de pessoas com deficiência visual severa (IBGE);
  • 2,5 milhões de pessoas com deficiência intelectual (IBGE);
  • 2 milhões de pessoas com TEA, transtorno do espectro autista (UOL);
  • 15 milhões de pessoas com dislexia (Correio Braziliense);
  • 8 milhões de pessoas com daltonismo (OMS).

Outros perfis que também abrangemos ao falarmos sobre acessibilidade são os de baixa escolaridade, TEA (Transtorno do Espectro Autista), TDAH (Transtorno de Déficit de Atenção com Hiperatividade), dislexia, daltonismo e pessoas da terceira idade.

Em relação à terceira idade, segundo o IBGE, em 2019, o número de idosos no Brasil chegou a 32,9 milhões. O número de pessoas com idade superior a 60 anos chegará a 2 bilhões de pessoas até 2050; isso representará um quinto da população mundial (OMS).

Além disso, o Brasil é um país com baixa escolaridade. Segundo o IBGE, 69,5 milhões de adultos (51,2%) não concluíram uma das etapas educacionais que compreendem o ensino Infantil, Fundamental e Médio. Já Ensino Superior completo, somente 17,4% concluíram em nosso país. Esses dados podem refletir na educação financeira e no conhecimento de inglês e impactam muito na experiência na web.

Termos bancários e financeiros, como as siglas CDI e CDB, são barreiras para o entendimento do usuário e a dificuldade é ainda maior para pessoas que tiveram pouco acesso à educação financeira. Já o conhecimento de inglês torna-se um obstáculo para o usuário, pois sites e aplicativos costumam ter muitos termos e siglas em inglês, como por exemplo QR Code e CashBack.

É preciso ter em mente que a acessibilidade é de suma importância para todas as pessoas, independente dos perfis de usuários.

Numa perspectiva mais ampla, é possível observar que vivenciamos situações que nos afetam em nosso cotidiano como, por exemplo, quando estamos em um lugar com muita luminosidade, em ambientes muito ruidosos, em lugares que não têm boa conexão com a internet, entre outras diversas circunstâncias. Nestes casos, a acessibilidade auxilia a entender as adversidades que os usuários possam enfrentar para projetarmos soluções à elas.

Importância da Acessibilidade no meio digital

Quando focamos em soluções de design que somente são visualmente bonitas, mas que não possuem uma base de acessibilidade e usabilidade tornando-as funcionais, criamos barreiras que dificultam e até impossibilitam o uso de produtos digitais para muitas pessoas. Por isso, abranger a acessibilidade é incluir digitalmente um público diverso e também permitir que tenham um boa experiência no uso de um aplicativo ou site.

E como podemos aplicar isso no dia a dia de produtos e de serviços que oferecemos no meio digital?

Para deixar mais palpável, trouxemos alguns exemplos de problemas comuns em aplicativos e sites para demonstrar o impacto que eles têm e quais as possíveis soluções que podemos aplicar para melhorar a experiência dos usuários.

Para entender melhor o cenário no meio digital e passar estas informações para profissionais que não estão familiarizados com acessibilidade em aplicativos, fizemos uma analogia com situações de acessibilidade no cotidiano.

Exemplo 01: Notificação com temporização

Notificações e mensagens que aparecem em aplicativos ou sites e que possuem um tempo estimado e predeterminado para leitura, desaparecendo após o término deste tempo, podem ser uma barreira para a acessibilidade.

Gif do aplicativo do PagSeguro PagBank com fundo verde e branco, com as informações de saldo na parte superior da tela e na parte inferior uma grade de produtos e serviços. Surgindo e desaparecendo na parte inferior da tela há um aviso com os dizeres: “Cashback não atualizado. Por favor, tente novamente”.
Representação um dos problemas que foram identificados dentro do aplicativo após a análise de acessibilidade e que foi reportado para o time responsável, o qual já está trabalhando em uma melhoria.

Será que todos os usuários leem a mesma mensagem no mesmo espaço de tempo? Trazendo para o contexto do nosso cotidiano, fizemos o questionamento: todas as pessoas atravessam uma faixa de pedestre no mesmo intervalo de tempo?

A resposta é não. Depende do perfil no qual a pessoa está inserida e suas necessidades específicas, além do tamanho da faixa a ser atravessada. Uma pessoa com mobilidade reduzida precisa de um período maior para poder atravessar a rua do que uma pessoa que não tem mobilidade reduzida, por exemplo.

Ilustração de uma rua com um ônibus e dois carros parados em frente a uma faixa de pedestre, na qual dois homens estão atravessando a rua, um deles utilizando uma muleta e o outro correndo.
Exemplo de "quanto tempo uma pessoa precisa para atravessar o semáforo?"

No caso das notificações com temporização existem vários fatores pelos quais usuários possam precisar de tempos diferentes para ler e compreender a mensagem. Alguns dos cenários são:

  • Se o usuário for neurodivergente (TEA, TDAH, dislexia) ou uma pessoa com deficiência intelectual pode demandar mais tempo do que o estipulado para ler e compreender a mensagem;
  • Se o usuário estiver em um contexto com distrações que tirem seu foco ou o distraia durante o aparecimento da notificação.

Nestes casos, algumas soluções possíveis são projetar mensagens fixas (que não possuem temporização e ficam expostas para o usuário na tela) ou um campo de mensagens e notificações que a pessoa possa acessar posteriormente.

Exemplo 02: Prevenção de erros

No cotidiano, deparamo-nos com diversas mensagens e sinalizações de “aviso”, “cuidado” e “atenção”. Em prédios que possuem elevadores, por exemplo, sempre encontramos uma mensagem de alerta com a seguinte frase: “Aviso aos passageiros: antes de entrar no elevador, verifique se o mesmo encontra-se parado neste andar. (Lei Estadual 9.502/97 e Lei Municipal 12.722 de São Paulo)”

Imagem do aviso em elevadores com os escritos: "Aviso aos passageiros: antes de entrar no elevador, verifique se o mesmo encontra-se parado neste andar. Lei Estadual 9.502/97"
Placa de aviso dos elevadores

Esta comunicação é realizada para prevenir erros e acidentes no meio físico. No meio digital, também podemos fornecer aos usuários alertas para prevenir a incidência de erros e as consequências adversas de ações involuntárias ou imprevistas:

  1. Mensagens para a confirmação e validação de transferências (com informações como os dados do destinatário, o valor, o horário, etc), por exemplo, diminuem a possibilidade e a incidência de transferências erradas;
  2. Mensagens de alerta ao preencher campos de entrada com dados como e-mail, CPF e datas erradas que não existam ou estejam incompletos;
  3. Notificações caso a página não esteja carregando devido à má conexão com a internet, por exemplo, passando a informação aos usuários que os dados daquela tela podem não estar atualizados.
Imagem de três telas do aplicativo PagBank representando os cenários de mensagens de alerta. Da esquerda para a direita a tela de confirmação, com os dados de uma transação e o botão de Confirmar Transferência; a tela de Criar Conta com um alerta no campo de entrada da confirmação de email, indicando que os e-mails informados estão diferentes e a home do aplicativo com o aviso escrito que "não foi possível carregar o saldo, por favor tente novamente".
Exemplo dos alertas para cada caso dentro do aplicativo PagBank

É importante, portanto, prever que estas situações possam ocorrer, notificar os usuários dos possíveis erros e possibilitar outros meios dos usuários acessarem as informações que estão no aplicativo.

Acessibilidade é responsabilidade de quem?

Um dos grandes desafios desse tema é o processo educacional do que se trata a acessibilidade, para quem é e quais áreas são responsáveis. Existe um senso comum que acessibilidade é responsabilidade de Design, porém, para que a acessibilidade seja de fato implementada em um produto digital é importante entendermos que todos temos responsabilidades fundamentais neste processo.

Promover a acessibilidade digital não é somente tarefa das equipes de design, a implementação da acessibilidade é um processo colaborativo e multidisciplinar.

Quando começamos o projeto dentro do PagBank percebemos que, para muitas pessoas, foi o primeiro contato com o assunto que elas tiveram e, para outras, foram momentos de descoberta da tamanha importância e complexidade desse tema.

Muitas vezes o tema era conhecido somente como problema de contraste das cores, o que realmente é importante, pois dificulta que diversos perfis de usuários consigam discernir e compreender as informações que estão apresentadas na tela. Porém, o tema acessibilidade vai muito além do visual presente no produto digital.

A acessibilidade deve ser considerada desde a conceituação de um produto digital até o final do desenvolvimento dele.

Então, as áreas fundamentais para aplicação da acessibilidade em um produto digital e suas devidas responsabilidades são:

  • UX Research: para entender os perfis de usuários, suas necessidades e especificidades e como melhorar sua experiência no aplicativo / site;
  • Product Design: para projetar os componentes, pensar na jornada, arquitetura de informação e tornar os conteúdos acessíveis;
  • Desenvolvimento Front-end: para desenvolver a infraestrutura necessária para suporte de leitores de tela e outras tecnologias assistivas;
  • Segurança: para desenvolver mecanismos que tornem a experiência segura e, ao mesmo tempo, acessível para diferentes perfis.

Desafios de começar

Por mais que o tema de acessibilidade seja razoavelmente difundido e abordado, houveram muitos desafios quando nos aprofundamos no assunto. No nosso caso, no time de Design e Research Ops, deparamo-nos com:

  • falta de dados atualizados do IBGE sobre pessoas PCDs e sobre a população brasileira;
  • a escassez de guias de acessibilidade direcionados para design;
  • falta de conhecimento aprofundado do time em relação a WCAG e o funcionamento de leitores de tela;
  • ausência de login de teste interno no aplicativo PagBank para análise do leitor de tela.

Não tínhamos uma receita, um caminho definido, nem conhecimento aprofundado no assunto, mas com dedicação, integração com outros times e colaboração, fomos construindo no decorrer do projeto.

Trazendo informação e fomentando a cultura dentro de casa

Pensando em todos os desafios que enfrentamos no início do projeto, construímos o que não encontramos livremente na comunidade de UX:

  1. Guia de como fazer a análise da WCAG, o qual descreve o passo a passo das análises e explica conceitos da WCAG;
  2. Guia de como fazer uma análise utilizando o leitor de tela;
  3. Guia de Acessibilidade, que engloba materiais sobre acessibilidade digital, no design, templates, estudos, dicas, etc.
Gif da tabela de lista de verificação de diretrizes da WCAG. São 7 colunas, da esquerda para a direita com os tópicos: princípio, conformidade, diretriz, descrição da diretriz, atendimento à diretriz, área responsável, responsável. Os princípios variam entre perceptível, operável, compreensível e robusto e a conformidade varia em iniciante, intermediário e avançado.
Guia da Análise WCAG

Um aprendizado importante foi que, apesar de acessibilidade ser tão mencionada, ainda é um tema com estudos pouco aprofundados dentro da área de tecnologia. Por isso, além dos estudos e das criações dos guias e templates, tivemos a missão de fomentar e espalhar as informações e a discussão sobre acessibilidade para os outros times do PagBank PagSeguro e, assim, iniciar a criação de uma cultura de acessibilidade dentro da empresa. Para isso, criamos:

  • Fórum de Acessibilidade: que visa dar o aparato para as outras equipes, além de treinamentos e troca de conhecimentos;
  • Guia de Acessibilidade: na ferramenta Notion, nós compartilhamos templates, diversas informações e boas práticas de acessibilidade digital;
  • Guia da WCAG: template para aplicar diretamente na análise do produto;
  • Apresentações para times multi-disciplinares (Design System, Produtos, Desenvolvimento): com a preocupação de levar sempre conteúdos introdutórios sobre o assunto para o resto da empresa.

Dessa forma, quando se trata de acessibilidade, percebemos que é necessário aprender, ensinar e evangelizar sobre este tema de suma importância, mas que é novo para muitos dos profissionais da empresa.

Compartilhar, aprender, melhorar e nos envolver

O começo do projeto foi um grande desafio de imersão sobre a acessibilidade, mas também foi um período de muitos aprendizados e trocas de conhecimentos valiosos com outras pessoas dentro e fora da empresa.

Depois que começamos a compartilhar nossos aprendizados sobre acessibilidade com outras áreas da empresa, percebemos que muitos outros profissionais se envolveram no processo. Assim, várias iniciativas foram surgindo, como grupos na plataforma de comunicação da empresa, que foram criados para compartilhar os conhecimentos sobre o tema.

Para fomentar os estudos sobre o tema, pensando em abrir espaços colaborativos e trocas de conhecimentos sobre acessibilidade, estamos abrindo para toda a comunidade o Guia de Acessibilidade que construímos internamente, com diversas informações sobre o tema.

E se você quiser saber mais sobre o projeto, apresentaremos ele no "8th International Forum of Design as a Process"! Acompanhem a gente e fiquem atentos as datas de apresentações através do link de datas do fórum.

Fotos das autoras. Da esquerda para a direita Flávia Whitney de Oliveira, Larissa Albano Lopes e Verônica Kawachi Brandt, pesquisadoras UX.

--

--

pagseguro design
pagsegurodesign

nosso dia-a-dia, processo de design, cocriações e cultura