Iniciativas de Acessibilidade do Banco Carrefour 🏆
Este artigo é uma versão simplificada do case de Acessibilidade do Banco Carrefour enviado para o Link Festival, e premiado na categoria: Melhores iniciativas de Acessibilidade Web — Organizações públicas e privadas. Link da publicação no Linkedin da Hand Talk.
O objetivo deste artigo é mostrar algumas iniciativas e processos de Acessibilidade que temos implementado no Banco Carrefour, com ênfase no produto Design System. A finalidade do trabalho é aumentar a acessibilidade e a qualidade de nossos produtos digitais, assim como fomentar e fortalecer a cultura de Acessibilidade dentro da empresa e também do Grupo Carrefour, que hoje conta com mais de 150.000 funcionários, impactando diretamente milhões de clientes todos os dias.
No ano de 2022 contratamos duas pessoas especialistas no tema para avançarmos ainda mais no aculturamento e evolução dos processos de desenvolvimento de produtos digitais. Além disso, aumentamos a diversidade do nosso time, pois ambas são pessoas com deficiência — auditiva e visual — que desde as suas respectivas chegadas têm agregado e muito com o Banco e o Grupo.
Antes de iniciarmos, gostaríamos de apresentar o vídeo que produzimos do Annecy Design System, utilizando recursos de acessibilidade, como legendas e intérpretes de Libras.
Acessibilidade aplicada no Design System e processos do time de Design e Tecnologia
Aqui no Banco Carrefour, a acessibilidade é um dos pilares, principalmente na gerência de Design, que hoje é o time com o maior número de especialistas e pessoas que fomentam o tema dentro da empresa, em trabalho conjunto com outras áreas.
No processo de criação do nosso Design System Mobile (iOS e Android), pessoas de Design, QAs, Desenvolvimento e Conteúdo atuam para garantir que os componentes reutilizáveis e processos estejam em conformidade com as Diretrizes de Acessibilidade de Conteúdo da Web (WCAG) e também que o fluxo seja entregue com a melhor experiência de usabilidade.
Para que isso ocorra, temos em nosso processo oficial do Design System etapas obrigatórias de testes de acessibilidade nos quesitos visual, interação, conteúdo e código, pois a responsabilidade de criar documentações e bibliotecas de componentes para a empresa inteira é alta, logo qualidade não é negociável.
Especificação de acessibilidade
A especificação de acessibilidade é uma etapa obrigatória para todas as pessoas Designers. Ela tem como objetivo detalhar pontos da experiência no código, seja a ordem de leitura, agrupamento de informações, leitura ou não das imagens e ícones, gestos, rótulos acessíveis, entre outras informações que possam aprimorar a experiência de quem está navegando pelo código, ou seja, via leitor de telas.
Leia este artigo completo sobre a nossa Especificação:
Documentação de acessibilidade
Depois da especificação e de muita discussão entre as áreas de Design e QA, foi criada essa documentação, que é bem técnica. Nela, escrevemos sobre comportamentos obrigatórios e incorporados, critérios de WCAG, semântica de código, gestos do leitor de tela, suporte de teclado, contraste, diretrizes de conteúdo etc. de cada componente do nosso Design System.
Ela traz também uma descrição de como o componente vai se comportar com as Tecnologias Assistivas, como por exemplo, um leitor de tela. Essa documentação é disponibilizada no Figma e no Zeroheight, tendo por objetivo orientar que os componentes sejam desenvolvidos e utilizados seguindo todas essas boas práticas.
Testes de acessibilidade
Na parte de testes de acessibilidade, na fase de planejamento, são escritos os casos de testes com base nos requisitos de acessibilidade, para que todas as pessoas entendam o que foi testado e quais os comportamentos esperados. Todos os casos de teste estão no Jira. Eles são estruturados seguindo a técnica BDD, através da linguagem Gherkin, usando 3 elementos, “Dado”, “Quando” e “Então”.
Ex.: Dado que estou navegando no componente Notification, quando as notificações de “Sucesso”, “Aviso”, “Erro” e “Informação” são exibidas, então cada ícone tem um rótulo acessível e o leitor de tela anuncia o tipo da notificação, juntamente com a mensagem.
Também é anexada uma evidência em vídeo para cada teste, objetivando demonstrar que o componente recebeu a cobertura de testes necessária.
Entendemos que ter um Design System acessível facilita e muito a entrega de um produto final padronizado e com acessibilidade, evitando um grande esforço de desenvolvimento e retrabalho.
Em breve escreveremos um artigo específico e completo sobre este tema, com detalhes e evidências, aguarde!
Treinamento e aculturamento do time
Além de garantir a acessibilidade dos nossos produtos, através da biblioteca de componentes e por meio de processos, promovemos diversas ações que fazem com que a acessibilidade seja desenvolvida e validada por todas as tribos e squads de maneira contínua. Para isso entendemos a importância de promover treinamentos, palestras, materiais educativos sobre o tema, que contribua no aculturamento dos times, além de materiais que facilitem a verificação das boas práticas, como um checklist para Designers, testes e guias de boas práticas para conteúdo.
Aqui listamos algumas destas iniciativas:
Semana da Acessibilidade
Em Outubro de 2022 a Guilda de Acessibilidade do Banco Carrefour promoveu a Semana da Acessibilidade, em comemoração ao Setembro Verde.
O evento contou com 7 lives (todas com intérprete de Libras), com temas sobre:
- Criando eventos acessíveis, com Leandro Pato (Produtor de Acessibilidade do Rock in Rio)
- Fundamentos de Programação Acessível, com Leo Spinola (Analista de Acessibilidade da Google)
- Comunicação Inclusiva, com Paula Völker (Content Ops Especialista do Banco Carrefour)
- Workshop: Do Design para o código, especificando produtos digitais, com Edilene Mendes (UX Designer do Banco Carrefour)
- UX e Acessibilidade, com Paulo Aguilera Filho (UX Manager do Banco Carrefour)
- Como ajudamos a quebrar barreiras digitais no Banco Carrefour, por Kênia Oliveira, Edilene Mendes, Maurício Sá, Ana Cuentro, Paula Völker e Paulo Aguilera Filho.
- Fluxo de Acessibilidade no Annecy, Design System do Banco Carrefour, com Ana Cuentro (Accessibility Product Designer) e Maurício Sá (QA de Acessibilidade).
Treinamento sobre Acessibilidade Digital
Já realizamos uma série de treinamentos sobre Acessibilidade Digital desde 2021, ano em que levantamos a bandeira de Acessibilidade em conjunto com a diretoria de Gestão Inclusiva, responsável pelas principais iniciativas de Diversidade e Inclusão do Grupo Carrefour. O objetivo é colocar todas as pessoas na mesma página e equiparar o conhecimento sobre o tema dentro da empresa.
Alguns públicos que já capacitamos:
- Agência de Publicidade do time de marketing e Assessoria de Imprensa (Hierarquia de informação, contraste de cores, descrição de imagens, e-mail marketing, consistência visual, elementos familiares etc).
- Designers, pessoas pesquisadoras e conteudistas (Handoff de acessibilidade, o que é acessibilidade digital, comunicação acessível, descrição de imagens, recrutamento de pessoas diversas para testes e pesquisa).
- Lideranças (Importância da diversidade dentro dos times, contratação de Pessoas com Deficiência, o que é acessibilidade digital etc).
Treinamento sobre Acessibilidade para QAs
Neste treinamento o foco foi explicar a importância do tema e como as pessoas analistas de qualidade são estratégicas para a implementação da acessibilidade. São elas que irão realizar testes via leitor de telas, navegação somente via teclado entre outros testes, além de conseguir analisar a especificação de acessibilidade dos designers e comparar com o código desenvolvido, apontando eventuais inconformidades para correção antes do lançamento oficial. O treinamento foi aplicado para todas as pessoas do Centro de Excelência de Qualidade, com teoria e prática.
Treinamento sobre Acessibilidade para time de desenvolvimento
Este treinamento está sendo desenvolvido neste exato momento em que escrevemos este artigo, e será realizado em 2 partes, um com foco na tecnologia Swift, para iOS, e outro em Kotlin, para Android.
Guilda de Acessibilidade
Esta é uma agenda em que reunimos pessoas que possuem conhecimentos e afinidades com um tema em específico, neste caso com o tema de Acessibilidade. Esta foi uma das nossas primeiras estratégias de fomento ao tema, iniciado dentro do time de UX em 2020 e depois expandindo para todas as áreas interessadas dentro do banco.
Atualmente temos a participação assídua de pessoas designers, pesquisadoras, profissionais de qualidade, diversidade e recursos humanos, além de pessoas que participam pontualmente para entender mais do tema ou trazer desafios que estejam enfrentando.
A guilda é o lugar onde trazemos pautas de acessibilidade para discutir e endereçar. Nela já realizamos a análise de acessibilidade de portais e programas internos, materiais do time de marketing, promovemos eventos, levantamos a necessidade da descrição de imagens nas redes sociais do banco entre outras oportunidades, sempre catalogadas em backlog para acompanhamento das evoluções e visibilidade das pendências.
Descrição de imagens das redes sociais
Logo no início da guilda de acessibilidade, levantamos uma série de oportunidades. Uma das primeiras foi a descrição de imagens das redes sociais do Banco Carrefour. Entramos em contato com o time de Marketing e assessoria de imprensa para comunicar e resolver o problema da falta dos textos alternativos.
Após a conversa, agendamos um treinamento e começamos a acompanhar as descrições, apoiando no início em um grupo próximo via whatsapp e depois de forma mais espaçada, para ver a evolução e continuidade do trabalho. Foi um sucesso!
Apoio com intérpretes de Libras em eventos de Design e tecnologia
Esta iniciativa tinha como missão extravasar a nossa visão e preocupação com o tema para o mercado, atuando na falta de acessibilidade em Libras nos eventos da comunidade.
Após realizarmos um planejamento, começamos a identificar eventos relevantes do mercado para apoiar, com o objetivo de aumentar o alcance destes conteúdos para um maior número de pessoas, pois sabemos da realidade do mercado em relação a isso.
Outro objetivo era a promoção do time de Design do Banco Carrefour, uma empresa que se preocupa de fato com o tema, para que as pessoas tenham vontade de trabalhar aqui. Ao fazermos isso, esperamos que outras empresas se espelhem e façam algo para promover ainda mais o alcance dos eventos, principalmente com mais recursos de acessibilidade.
Alguns eventos que apoiamos neste período:
Acessibilidade em Foco
Esta iniciativa teve como objetivo mostrar a realidade da qualidade, ou seja, da acessibilidade do código dos produtos digitais do Banco Carrefour. Nela testamos ao vivo via leitor de telas algum fluxo que esteja em produção e mostramos o relatório de acessibilidade do fluxo, gerando backlog de melhorias para o time do produto que estamos testando.
A primeira edição foi focada no aplicativo da Apag, o app da maquininha de pagamento da marca Atacadão. Na oportunidade, elogiamos os avanços e preocupações que este time vinha tendo no ponto de vista de design e desenvolvimento, também mostramos as oportunidades de melhorias que ainda estavam pendentes e atrapalhando a navegabilidade via o leitor.
O comunicado do evento foi feito para e empresa inteira, o que mostra a preocupação da instituição em divulgar as iniciativas sobre o tema.
A segunda edição aconteceu em julho e foi focada no fluxo de login nativo. E ela foi um sucesso! Tivemos a participação da nossa Diretora, a Vanessa Paulino, e do nosso Superintendente, o Andrey Varella, na abertura. Isso só mostra como evoluímos e o tanto que o tema tem escalado e crescido em importância aqui dentro.
Sala de Acessibilidade
A sala funciona como um horário semanal de consultoria ao time, banco ou grupo. As pessoas podem agendar um horário para conversar sobre o assunto, tirar dúvida sobre como especificar uma interface ou sobre código acessível. É mais um canal para facilitar a encontrabilidade de informações sobre o tema e nos aproximarmos das pessoas que estão tendo o desafio de implementar acessibilidade em seus entregáveis. Esta agenda é conduzida pelos nossos especialistas no tema, Ana Cuentro e Maurício Sá Peixoto.
Manual de Comunicação Inclusiva
É o nosso guia de como podemos nos comunicar de forma simples e efetiva com todas as pessoas. Nosso Manual de Comunicação Inclusiva foi lançado em abril de 2021 para o mercado e tem o objetivo de auxiliar as pessoas a escrever e se comunicar de forma mais acessível e inclusiva. Ele traz diversos conteúdos informativos, dicas e recomendações.
Alguns capítulos de destaque do manual:
- Conteúdo acessível
- Linguagem neutra
- Descrição de imagens
- Raças e etnias
- LGBTQIAPN+.
Considerações finais
Esperamos ter conseguido transmitir da melhor maneira as iniciativas e impacto que estamos conseguindo fazer aqui no Banco Carrefour e, consequentemente, no Grupo. Apesar do time pequeno de especialistas, temos o apoio da liderança, incluindo a Gerência de Design, Tecnologia e Diretoria de Gestão Inclusiva, o que expande o alcance de toda e qualquer iniciativa que fazemos, pois podemos contar com pessoas estratégicas dentro da empresa para fazer acontecer e mudar essa realidade da falta de acessibilidade e falta de diversidade dentro dos times e produtos.
Entendemos que por meio da capacitação, suporte e parceria no dia a dia conseguimos avançar com o tema de uma forma saudável, colocando aos poucos a acessibilidade como pré requisito dentro de nossos processos.
É legal perceber a evolução e o impacto do tema dentro da empresa, com as pessoas se auto descrevendo nos eventos presenciais e remotos, contratando intérpretes de Libras para os eventos e vídeos institucionais. Estamos caminhando bem rumo à uma cultura de Acessibilidade mais madura.
No final do dia Acessibilidade é sobre pessoas, e pessoas estão no centro da estratégia de qualquer negócio.
Agradecemos a atenção, time de Design do Banco Carrefour. 💙
Como comentado no início do artigo, esta é uma versão simplificada do case aplicado e premiado no Link Festival, e nosso objetivo é escrever sobre cada um dos tópicos aqui listados no decorrer dos próximos meses.
