Acessibilidade e Design System: será que deu match?

Esse artigo foi escrito por João Marques (Product Designer, HeroSpark) e publicado originalmente aqui.

Como trabalhamos o tema nos fundamentos do nosso DS e o que descobrimos nesse processo

Desde o início da minha carreira na área de experiência da pessoa usuária, (e isso não faz muito tempo), sempre me permiti navegar por diferentes áreas e iniciativas dentro dos times de design os quais fiz parte. Hoje, na HeroSpark, não poderia ter sido diferente e vocês logo vão saber o porquê.

O objetivo deste artigo vai muito além de apenas compartilhar um trabalho que foi pensado e desenvolvido de forma coletiva ou simplesmente mostrar resultados. A ideia aqui é trazer para o maior número de pessoas o valor de se pensar a acessibilidade desde o início, de forma simples e clara. Mas, principalmente, como isso pode impactar todo um produto (como um Design System), com o apoio dos C-Levels e outras pessoas dentro da empresa. Afinal, acessibilidade não é um bicho de sete cabeças e nem deve ser pensado só no final dos projetos!

Quando tudo começou

Atualmente, o nosso “HeroDesign Team” possui iniciativas focadas em disciplinas muito importantes, para não falar essenciais, dentro do famoso “Guarda chuva de UX” como:

• Acessibilidade (A11Y)
• Design System (DS)
• Writing
• Research

Eu, muito curioso que sou, sempre visualizei uma relação de importância e apoio entre esses pilares, principalmente os de Acessibilidade+DS+Writing. Tá mas onde chegamos com isso?

O Head de Design aqui na HeroSpark, João Santos, propôs uma série de atividades para as pessoas de design, dentre as Guildas existentes em cada uma dessas vertentes. E, um dos direcionamentos para o mês de agosto de 2021, foi o de estruturamos uma versão ideal para os Foundations (Fundamentos base) de nosso Design System — “Codinome: Madrox”.

Deste momento em diante começamos a nos organizar e a conversar para entender quais seriam as melhores formas e processos para atendermos esse direcionamento, envolvendo tanto os Foundations, quanto a acessibilidade para uma entrega ideal dentro do Madrox. A partir daí, definimos todas as atividades relacionadas aos Foundations, o tempo final de entrega e os responsáveis por cada uma delas. Foi exatamente aqui que tudo começou.

Print do Roadmap utilizado para o planejamento e realização das tarefas relacionadas a este projeto.

Um pouquinho de contexto

Antes de nos aprofundarmos neste projeto, gostaria de trazer alguns conceitos e pensamentos sobre Design System (DS) e também Acessibilidade (A11Y).

Em um artigo de repositório com vários conteúdos sobre (DS), o Fabrício Teixeira fala sobre quais são os benefícios de se ter e incluir um DS em sua empresa. São eles:

• Eficiência para seu time
• Consistência para seus usuários
• Escala para sua empresa

Gostaria de abordar o segundo item para analisarmos juntos:

“Consistency for your users. Design systems enable your team to create familiar experiences for your audience, eliminating inconsistencies and making sure that every time someone interacts with your company, their experience will always look and feel the same.”

“Consistência para seus usuários. Os sistemas de design permitem que sua equipe crie experiências familiares para o seu público, eliminando inconsistências e garantindo que toda vez que alguém interagir com sua empresa, sua experiência será sempre a mesma.”

Então vamos lá. Basicamente trata-se de eliminar inconsistências e tentar proporcionar uma experiência sempre próxima para cada uma das pessoas usuárias.

Até aí tudo normal e dentro do esperado, porém, o que torna um produto diferente no mercado? Muitas pessoas vão falar de preço, custo, inovação, percepção de valor, resolução de problemas e uma série de outras coisas. Daí você me pergunta — Tá errado? Não.

Mas eu volto a pergunta para você: de que adianta um produto ou serviço ter preços interessantes, com propostas inovadoras e disruptivas, se o básico — que é ser acessível para todas as pessoas — não for algo pensado desde o início e presente em todos os momentos?

Definições de conceitos importantes pela Microsoft:

• Acessibilidade: qualidades que tornam uma experiência aberta a todos.
• Design inclusivo: metodologia de design que permite e se baseia em toda a gama de diversidade humana.

“Criamos produtos que se adaptam às pessoas, em vez de esperar que as pessoas se adaptem aos produtos.”

— Ricardo Wagner, líder de Acessibilidade da Microsoft Canadá

Agora você pode estar se perguntando: “Nossa, mas é muita coisa para se fazer sozinho ou com poucas pessoas, certo?”. De certa forma não, mas de qualquer jeito é importante lembrar que no caso da HeroSpark esse é um trabalho constante e feito a várias mãos.

Dentre estas mãos estão pessoas do time de Design, incluindo o Bruno Nepomuceno, um dos Product Designers. Ele é uma das pessoas incríveis que temos aqui no time, além de ser um dos responsáveis pelo nosso Design System atualmente. O Bruno compartilhou uma analogia que é muito interessante e deixa ainda mais simples de entender o porquê de termos feito esse trabalho e o motivo de termos feito ele neste momento:

“Ter uma arquitetura sólida é fundamental para qualquer projeto, seja ele um prédio ou um produto digital, sabendo disso se faz fundamental investir tempo e energia na fundação de um produto digital. Nesse caso específico, foram os elementos base do Design System, pois a partir daqui serão criados todos os outros elementos que irão compor a interface que a pessoa usuária terá contato.”

— Bruno Nepomuceno, Senior Product Designer na HeroSpark

Arrumando a casa

Depois de falarmos brevemente sobre conceito e importância por trás da acessibilidade e os foundations do Design System, entramos na parte mão na massa. Com o decorrer do tempo e as trocas de pessoas e empresas, aconteceu o que já era esperado quando falamos sobre as criações visuais: a existência de uma grande quantidade de cores e elementos textuais. E, cada pessoa que utilizava aquele conteúdo para criar interfaces ou peças visuais, aplicava esses elementos sem nenhum filtro. O resultado foi uma falta de escalabilidade e consistência no que era criado.

1. Nossas cores

O processo começou com o levantamento e a análise do inventário criado pela Guilda do Madrox (nosso Design System) de todas as cores e tipografias existentes atualmente no produto e também em todas aplicações da HeroSpark. Logo em seguida temos um exemplo visual de como foi esse mapeamento de cores, nele é possível perceber a quantidade de cores e variações existentes.

Paleta de cores existentes no Color System (sistema de cores) do Design System até antes deste projeto.

Uma outra coisa muito comum, e também relacionada as cores, é que nem sempre as Brand Colors (Cores da marca), são pensadas voltadas para acessibilidade. Aqui no nosso caso não foi diferente. Temos cores vibrantes e muitas vezes complexas de serem aplicadas com fundos e textos, porém isso não precisa ser um problema — na verdade foi um desafio bem interessante!

Paleta de cores do Brand Colors (cores da marca) e suas aplicações sobre o tema Ligh (claro) e Dark (escuro).

2. Nossos textos

Outro ponto levantado dentro dos Foundations, foi a questão do Text-System (sistema de textos). Não tínhamos bem definida uma hierarquia dentro dos níveis de “Headings (cabeçalhos), Titles (títulos), Paragraphs (parágrafos), Captions (descrições) e Links”, o que novamente gerava bastante inconsistência nas entregas.

Text System (sistema de textos). Esta é a hierarquia e divisão de textos, assim como as orientações de aplicação e uso, após este projeto.

Ferramentas de acessibilidade. Aliadas ou vilãs?

Hoje em dia, a gente tem visto uma discussão muito grande sobre ferramentas milagrosas e que resolvam todos os problemas de acessibilidade digital, inclusive temos materiais recentes sobre isso na comunidade. Um é o vídeo “Não confie em ferramentas “milagrosas” de acessibilidade” — com Marcelo Sales — , e outro é o artigo “Conformidade com validadores automáticos em uma página com barreiras de acesso” — escrito pelo Reinaldo Ferraz. Os dois falam um pouco sobre esta questão das ferramentas e como elas comprovadamente são um apoio, mas que o principal, que é a intervenção humana, ainda é algo mais que essencial e importante.

Levando em consideração isso e entendendo que as ferramentas não são a solução, mas que podem ser aliadas ao que se está realizando definimos apoiar nossas análises dos Foundations em algumas delas. Optamos por utilizar as verificações de cores e contraste com a ferramenta Adobe Color, mais especificamente a “Color Contrast Analyzer”.

Print de tela retirado na página de ferramenta de acessibilidade, dentro do site da Adobe Color. Nela encontramos textos explicativos e exemplos de aplicação de cores de texto e fundo.

1. Reinventar a roda? Ou apenas repensar?

Essa foi uma das perguntas que ficou na nossa cabeça logo no início deste trabalho. Será que precisaríamos realmente abortar todas as cores existentes e encontrar novas opções que fossem realmente acessíveis nos quesitos de leitura, percepção e contraste? A resposta é sim e não!

Em alguns dos casos realmente precisamos repensar algumas cores, escalas e aplicações, porém também aconteceu o contrário e vou explicar melhor para vocês entenderem o que fizemos.

Em nossas Brand Colors, nós até então trabalhávamos o azul para cor principal no Light mode (modo claro), e o roxo no Dark mode (modo escuro). Porém, ao validarmos algumas dessas cores no Adobe Color, percebemos que o azul aplicado em um background (fundo/cor de fundo) mais claro, a proporção de contraste tanto para a parte textual, quanto para elementos visuais era muito baixa. E o mesmo acontecia quando usávamos o roxo em um fundo mais escuro.

Tá, mas e aí? Será que a gente deveria começar a mexer nas nossas Brand Colors? Deveríamos criar novas opções de cores? Limitar a utilização dessas cores para contextos específicos? Talvez sim, mas, antes de qualquer coisa é interessante testar. E foi isso que nós fizemos.

Nós testamos o roxo (a cor mais escura da nossa Brand Color) em um fundo mais claro. E fizemos o mesmo com o azul, mas em um fundo mais escuro.

Print de tela com exemplos de antes e depois, das mudanças de aplicação das cores roxa e azul, presentes na Brand Colors (cores da marca). Agora com azul no Dark Mode (modo escuro) e o roxo como cor predominante no Light Mode (modo claro).

No final das contas não precisamos recriar todas as cores presentes no “Color System” já existente. Em relação as cores da marca fizemos essa mudança de tema para aplicação, e nas demais cores, em alguns casos foram refeitos estudos de escala, e em outros proposta de novas cores. De qualquer maneira, outro ponto também documentado, foram as possibilidades/orientações de aplicação.

2. E qual foi o resultado disso tudo?

O resultado foi ainda melhor do que o esperado. Entregamos nosso Color System (Sistema de Cores) baseado e validado com critérios de acessibilidade, não apenas no Light Mode, mas também para Dark Mode.

Atualmente temos uma das variações dentro das interfaces de produto que exclusivamente trabalha com o modo Dark e outra eque só utiliza o modo Light. Daí foi de extrema importância termos estudos diferentes para aplicações de cores em ambos os tipos de tema.

Nossa divisão foi da seguinte forma:

• Mode (Modo): Light (Claro) + Dark (Escuro)
• Brand Colors (Cores da Marca): Primary (Primária) + Secondary (Secundária)
• Neutral Colors (Cores Neutras): Low (baixa) intensidade + High (alta) intensidade
• Feedback Colors (Cores de Feedback): Success (Sucesso) + Info (Informação) + Waring (Atenção) + Danger (Perigo)

As variações foram em três intensidades, pegando como exemplo a cor de marca primária:

1. Primary pure (Primária pura)
   1.1 — Primary dark (Primária escura)
   1.2 — Primary medium (Primária média)
   1.3 — Primary light (Primária clara)

Print de tela com exemplos da versão final de cores após a conclusão dos Foundations (fundamentos) do Design System (DS). Primeiro a paleta para o Light Mode (modo claro) e a segunda para o Dark Mode (modo escuro).

Para cada uma das variações e grupos de cores citados, foi feito um estudo e uma validação de níveis de proporção de contraste, aplicação de texto sobre a cor, aplicação de texto com a cor e também elementos gráficos/visuais com ou sobre estas cores: Onde utilizar / Onde NÃO utilizar / Utilizando como texto / Utilizando texto sobre essa cor.

Uma outra dica importante é a de sempre conferir seu Color System em diferentes dispositivos, pois a intensidade de brilho, contraste, reflexo, entre outras coisas, podem variar de tela para tela. Afinal, muito provavelmente a pessoa usuária do seu produto, nem sempre vai acessar o conteúdo de um Iphone, um Macbook com tela de retina ou um monitor ips 4k, lembrem-se disso.

Mas isso é responsabilidade só das pessoas de design?

Ainda sobre o trabalho em conjunto, um dos pontos principais neste projeto foi justamente o envolvimento e a conversa não apenas entre o time de design e as pessoas interessadas no Design System ou acessibilidade.

De nada adiantaria fazer todo esse trabalho se não tivéssemos a validação do time de produto e do próprio “C-Level da área”. Pensando nisso, o primeiro passo após a construção e validação com o time de design foi a de apresentar e explicar todo o trabalho desenvolvido neste projeto para as pessoas de Product Manager — PM (Gestoras do produto), Agiles (Agilistas) e o Chief Product Officer — CPO.

Mas o que seria essa apresentação, ou melhor, como apresentar isso sem ser muito técnico e mesmo assim conseguir passar tanto o esforço, quanto o valor deste trabalho para empresa? Nossa solução foi dividir a apresentação em quatro momentos, contando uma história do porquê até a entrega final:

1. Contextualização do tema / Nossas motivações
2. Desenvolvimento técnico e embasado no que outras empresas já fazem
3. Aplicação dos novos Foundations em algumas das interfaces do produto
4. Como podemos difundir o uso e tornar isso um ponto de atenção dentro dos times/squads

Isso é uma receita de bolo? Precisa ser seguida passo a passo? De forma alguma! É apenas uma sugestão daquilo que acreditamos serem pontos importantes a serem abordados durante o processo.

E chegamos ao final? Acabou?

A resposta para essa pergunta é fácil: não, e estamos bem longe disso. Esse trabalho é apenas um pequeno passo, mas de extrema importância não apenas pelo intuito de tentar deixar o produto mais acessível para todas as pessoas, mas também pelo fato de trazer a tona a pauta de acessibilidade dentro da empresa e para pessoas diferentes.

Porém, duas coisas são muito importantes e devem sempre ser levadas em consideração. A primeira é que devemos comemorar nossas pequenas conquistas, mesmo tendo ainda grandes desafios pela frente. E a segunda é que, muitas das vezes, as pessoas acreditam que iniciar acessibilidade digital é fazer uma revolução completa, entretanto, ela é sim uma caminhada longa, mas o mais importante é pensar em dar o primeiro passo e o famoso “match”.

“A preocupação com acessibilidade nasceu com a área de design e à medida que o time foi crescendo esse tema se tornou mais recorrente nas discussões. Sabemos que o desafio é grande. Porém o mais importante é estarmos evoluindo um pouquinho a cada dia, dentro da realidade do produto, mercado e atuação de todas as pessoas envolvidas pra gerar o melhor resultado. Esse trabalho foi a ponta do iceberg do que queremos construir”.

— João Santos, Head de Design na HeroSpark

Compartilhar esse artigo é um dos passos que gostaríamos de dar para que outras pessoas possam começar a sua caminhada para construir uma cultura de acessibilidade nas empresas em que estão. E, com isso, proporcionar acesso ao maior número de pessoas usuárias.

Time de pessoas responsáveis pelo projeto

Da esquerda para direita: João Marques, Mariana Silva, Talissonn Buchinger, Bruno Nepomuceno e Jorge Silva

Acessibilidade: João Marques (Product Designer), Mariana Silva (Product Designer) e Talissonn Buchinger (Product Designer Lead)

Design System: Bruno Nepomuceno (Product Designer), Jorge Silva (Product Designer) e Mariana Silva (Product Designer)

Ficou com alguma dúvida, quer tomar um café para falar sobre isso ou jogar conversa fora? É só mandar uma mensagem pra qualquer uma dessas pessoas incríveis e bora lá!

E obrigado por seu tempo e por ter lido até aqui! ❤