Contexto
Durante 2024, o time CCAP trabalhou em melhorar o Amount Screen
Precisava gerar consistência cross entre os times que usavam essa capability
Isso incluiu, pela primeira vez de forma estruturada, o handoff de acessibilidade
Desafio
Não havia um guia claro de acessibilidade para essa tela
Diferentes times implementavam de formas distintas
Oportunidade: transformar o aprendizado isolado em conhecimento reutilizável
Processo de descoberta sobre A11Y
Muito se falava em A11Y, até que entendemos que da letra A até o Y, do termo em ingles acessibility, existem 11 letras, então adotamos o termo.
No Mercado Livre, tínhamos o costume de sinalizar no Figma quais e como seriam as leituras indicadas para acessibilidade — um padrão bem difundido entre design e desenvolvimento. Porém, durante as validações com os especialistas em acessibilidade, viramos várias chaves. Aprendemos que nem tudo precisa ser manualmente indicado (já que o Design System traz padrões nativos) e que não devemos inventar uma jornada diferente para quem usa leitor de tela. Foi um processo rico em descobertas que nos ajudou a evoluir nossa documentação.
Um pouco sobre o handoff:
Os 4 Pilares de Learnings
#1: Entender o leitor▾
A pontuação é lida de forma diferente de acordo com a velocidade e verbosidade do leitor
Cada pessoa pode ter configurada no celular uma velocidade de leitura e uma verbosidade diferentes, e isso muda a forma como os componentes são lidos e, em especial, a pontuação. Por exemplo, quando o leitor está em uma velocidade rápida, ele lê a “,” como “VÍRGULA”, enquanto um leitor configurado mais lento não lê a palavra “vírgula”, apenas faz uma pausa ao interpretar o texto.
Também existe a opção de baixar o app do Andes UI em dispositivos iOS e Android. Para acessar é necessário baixar o app MeliStore, fazer login e buscar por Andes UI na plataforma.
Probar componentes productivos
Se você está usando componentes que já existem no app ou estão contemplados no Andes, você pode testar como eles são lidos ativando o leitor de tela no seu celular ou entrando no Fury.
O que está “em foco” é lido primeiro
Quando você entra em uma tela com foco em um input (teclado aberto e cursor pronto para adicionar um dado), ele será lido primeiro, já que essa é a tarefa principal.
Usar o canal do Slack
Se temos dúvidas ou queremos pedir feedback, podemos consultar no canal #help-accessibility. Também podemos conferir lá se as respostas para as nossas perguntas já existem.
#2: Usar o que existe▾
Revisar os alinhamentos de Andes
Antes de colocar tags no handoff temos que revisar se o componente que está usando já tem alinhamentos de acessibilidade em Andes.
Podemos quebrar o código se colocamos tags ou labels demais em um componente que já os tem por default.
Só utilizamos tags se temos componentes custom (desenhados para nossa experiência em particular) ou necessitamos trocar a forma default em que se leem.
Não faz falta conectar componentes da tela com labels diferentes
A pessoa entende pelo contexto o que está fazendo.
Por exemplo, na Amount Screen de Transferências, não deveríamos adicionar na tarefa de Amount Screen o “transferir dinheiro PARA” para que conecte com o Collector.
A experiência deve funcionar de forma semelhante para ler e para escutar
A experiência que desenhamos deve funcionar para ler e escutar de maneira semelhante.
Por exemplo, se desenhamos uma ordem de leitura, ela não deveria variar para o leitor de tela (ao menos que compita com vários elementos em um mesmo lugar).
#3: Etiquetar certo▾
Não agrupar botões
Ao agrupar componentes, o leitor os lê como apenas um e permite uma única ação.
Se agrupamos dois ou mais botões (sejam CTAs, shortcuts, atalhos, etc), o leitor só irá reconhecer o primeiro e a pessoa não poderá ir ao restante.
Os erros e trocas de estados devem ser lidos como Announcements
Quando existe informação importante que requer a atenção da pessoa (por exemplo, para corrigir o que está fazendo e poder avançar), devemos utilizar a tag de Announcement.
Alguns componentes precisam de contexto
Mesmo que a maioria já tenha alinhamentos de acessibilidade em Andes, alguns componentes necessitam um contexto maior quando são utilizados com um leitor de tela, como os textfields ou os dropdowns.
Identificar quando usar Amount Screen e Money Amount
- Se é um valor sem uma interação, é chamado de “money amount” (exemplo: um helper). Neste caso, o monto “$ 4” se lê como “cuatro pesos”.
- Se é um campo editável é chamado de “amount field” porque a pessoa deve interagir com esse componente. Neste caso, o valor “$ 4” se lê literalmente como aparece: “pesos cuatro”.
Esta diferenciação foi feita para que a leitura seja mais acessível em casos que é necessário editar o valor.
#4: Traduzir labels▾
Como todo handoff, as labels que forem adicionadas devem ter as traduções de conteúdo necessárias de acordo com cada site.
Multiplicação
Depois de documentar tudo o que aprendemos, percebemos que esse conhecimento não podia ficar isolado só no nosso Figma. Decidimos multiplicar através de três canais:
Internamente: Publicamos o guia no Figma e apresentamos em uma mesa sobre acessibilidade no “Dia da Acessibilidad” (IT Talk interno)
Comunidade Tech: Transformamos os 4 pilares em um post no Medium (“6 Dicas para Melhorar a Acessibilidade dos Seus Produtos”) que ressoou com pessoas fora da Meli. 1K views, 319 reads com 31% de read ratio
Marca: Compartilhamos também no Instagram do Mercado Libre, posicionando acessibilidade como parte da identidade da empresa.
Post em PT-BR “6 Dicas para Melhorar a Acessibilidade dos Seus Produtos”
(Versão disponível também em ES: medium.com/mercadolibre-ux/6-tips-para-mejorar-la-accesibilidad-de-tus-productos)
Métricas da postagem:
N/A
Presentations
Times this story was presented across Medium, or via push/email notifications.
1K
Views
Landed on your full story through web, mobile, or email.
319
Reads
Read your story for at least 30 seconds.
Transformar um projeto em conhecimento compartilhado não gera o mesmo tipo de “impacto visível” que um aumento de conversão de 30%. Não tem gráfico bonito mostrando adoção.
O guia segue no Figma, o post no Medium acumula leitores todo mês, e as questões que resolvemos — como screen readers interpretam diferentes componentes — são as mesmas que times novos descobrem.
Impactar as pessoas e facilitar esse conteúdo é a textura real de impacto duradouro.