Um banner de cookies pode excluir a pessoa antes mesmo dela entrar no site
Na Lacrei Saúde, onde atuo como voluntário em UX/UI, desenhei o componente de consentimento do Design System Marsha, e aprendi que o problema não era só visual, era de linguagem e de acesso.
O desafio
Criar o banner de consentimento para páginas web, no desktop e no mobile, seguindo os benchmarks do time, a WCAG 2.1 AA e os tokens do Design System Marsha.
O que encontrei no caminho
- Contraste reprovado. O texto verde sobre fundo verde-claro dos benchmarks dava 3.89:1. Troquei pela cor de texto padrão e cheguei a 11.84:1.
- Foco invisível. O anel de foco sumia em alguns botões, porque o quadro cortava o conteúdo. Para quem navega pelo teclado, isso significa se perder na tela.
- Palavra difícil. “Cookies” não conversava com nosso público, que tem até o ensino médio. Saiu da interface e virou uma frase simples sobre privacidade e acolhimento.
- Opção que não existia. O “Gerenciar cookies” foi cortado, porque a plataforma ainda não separa categorias. Menos opção, menos dúvida.
- Ordem dos botões. “Aceitar termos” vem sempre antes de “Rejeitar termos”, no desktop e no mobile. A mesma ordem em todas as telas evita que a pessoa precise procurar o botão.
O que isso muda para quem usa a Lacrei
A Lacrei Saúde conecta a comunidade LGBTQIAPN+ a profissionais de saúde que acolhem. Para muita gente, o banner de consentimento é o primeiro contato com a plataforma, e se ele confunde, a pessoa pode ir embora antes de procurar atendimento.
- Quem tem pouca familiaridade com termos técnicos entende o que está aceitando, sem precisar saber o que é cookie.
- Quem navega pelo teclado ou usa leitor de tela consegue ler o aviso e escolher uma opção sem se perder.
- Quem acessa pelo celular encontra os botões sempre na mesma ordem e no mesmo lugar.
Oportunidades para a Lacrei
- Confiança desde o primeiro contato. Explicar com clareza como os dados são usados reforça o acolhimento que a Lacrei já pratica.
- Componente pronto para reaproveitar. O banner está documentado no Design System Marsha, com tokens, estados e regras de acessibilidade, então o time de front-end pode usar em outras páginas sem refazer.
- Base para medir. Com o componente no ar, dá para acompanhar quantas pessoas aceitam ou rejeitam e ajustar o texto a partir de dados reais.
Na Lacrei Saúde, levamos sua privacidade a sério. Utilizamos seus dados para um atendimento inclusivo e acolhedor.
Sua privacidade na Lacrei Aceitar termos Rejeitar termosO que fica de aprendizado
- Benchmark é ponto de partida, não verdade. Tudo precisa ser testado de novo.
- Acessibilidade também é escolha de palavras, não só de cor e tamanho.
- Simplificar exige negociar com PO, dev e jurídico, e documentar cada decisão para o handoff.
No fim, o componente ficou mais enxuto, acessível e com a cara de quem vai usar.