Artigos
Descoberta e Inovação Embracon
Descoberta e Inovação Embracon
·Oficial da Embracon

Acessibilidade no design system da Embracon

Fernando Barberato

Embracon Design System

Boas práticas para criar soluções inclusivas para todos os públicos.

A acessibilidade digital deixou de ser um diferencial para se tornar uma necessidade essencial em qualquer produto digital. Segundo a Organização Mundial da Saúde (OMS), mais de 1 bilhão de pessoas vivem com algum tipo de deficiência, o que representa cerca de 16% da população mundial. No Brasil, o IBGE estima que 14,4 milhões de brasileiros têm algum grau de deficiência, quase um quarto da população.

Esse cenário reforça a importância de projetar produtos acessíveis, não apenas por obrigação legal, mas por compromisso ético e social.

De acordo com a HandTalk, empresas que investem em acessibilidade e inclusão são percebidas de forma mais positiva por seus públicos, internos e externos. Isso fortalece a reputação da marca, evidencia responsabilidade social e reforça um compromisso genuíno com a diversidade.

No contexto do produto Consórcio da Embracon, falamos de um público amplo: qualquer pessoa brasileira acima de 18 anos, regularizada nos órgãos públicos. Portanto, garantir a acessibilidade significa abrir espaço para todos os tipos de clientes, tornando o produto naturalmente mais inclusivo e democrático.

1. Cores e Contrastes

Boas práticas de aplicação para uma interface inclusiva

  1. Design que considera diferentes contextos

    Usuários podem acessar o produto sob sol forte, em telas com brilho baixo ou de qualidade inferior. O contraste adequado garante legibilidade mesmo fora do “cenário ideal” de design.

  1. Suporte a limitações cognitivas

    Cores com baixo contraste exigem mais esforço mental para leitura. Quanto maior o contraste, mais rápida e fluida é a leitura, especialmente para pessoas com dislexia, TDAH ou cansaço visual.

  2. Padrões internacionais (WCAG)

    As diretrizes WCAG (Web Content Accessibility Guidelines) definem níveis mínimos de contraste para garantir legibilidade.

    🔗 Ferramenta recomendada: Adobe Color Contrast Analyzer

    Tons de Cinza

    Na Embracon a paleta Tons de cinza é usada para aplicação em texto e pode ser utilizada em elementos de apoio visual que organizam e mantém a hierarquia da interface (dividers, linhas de tabela, background e strokes).


  3. Legibilidade para pessoas com daltonismo

    Aproximadamente 1 em cada 12 homens e 1 em cada 200 mulheres têm algum tipo de daltonismo. Interfaces que dependem apenas da cor para transmitir informações correm risco de exclusão e falhas de usabilidade.

2. Tipografia

Boas práticas para textos acessíveis

  1. Tamanho mínimo da fonte

    Em dispositivos móveis, o mínimo recomendado para textos longos é 14px. Isso facilita a leitura para pessoas com baixa visão ou presbiopia.

    Além disso, aumentar o zoom do navegador não deve quebrar a interface, reforçando a importância de partir de um tamanho base adequado.

  2. Hierarquia clara

    Leitores de tela dependem da hierarquia semântica (h1, h2, h3...) para navegação eficiente.

    Para usuários videntes, a hierarquia visual: tamanho, peso e espaçamento auxilia a escanear o conteúdo com facilidade.

  3. Evitar fontes decorativas em textos longos

    Fontes muito estilizadas prejudicam a legibilidade e causam fadiga visual, especialmente para pessoas com dislexia ou baixa visão.

    Essas fontes podem ser usadas em títulos curtos ou elementos de marca, mas nunca em blocos de texto.

3. Componentes Interativos

Tornando a navegação mais inclusiva

  1. Estados visuais definidos (hover, foco, ativo, desabilitado)

    Usuários que navegam apenas com teclado precisam enxergar claramente onde está o foco.

    O feedback visual também beneficia todos os usuários, indicando que um elemento é clicável.


  2. Área mínima de clique/touch (44x44px)

    Pessoas com mobilidade reduzida ou tremores precisam de áreas maiores para interação. Em telas touch, áreas pequenas aumentam erros e frustração.

  3. Resposta imediata da interação

    Ao clicar em um botão, deve haver retorno visual (mudança de cor, estado de loading, mensagem de sucesso/erro). Sem feedback, o usuário pode repetir a ação desnecessariamente.

  4. Rótulos claros e descritivos

    O texto do botão ou link deve indicar exatamente o que será feito, evitando termos genéricos como “Clique aqui”.

  5. Uso correto de semântica HTML

    Use sempre as tags nativas (<button>, <a>, <input>) para garantir compatibilidade com leitores de tela e navegação via teclado.

    Evite substituir por <div> ou <span> estilizados.

4. Imagens e Ícones

Comunicação visual acessível

  1. Ícones com aria-label

    Um ícone de lupa pode ser intuitivo para quem enxerga, mas para um leitor de tela é apenas um “SVG sem nome”.

    Utilize aria-label="Buscar" ou texto visível para garantir compreensão universal.

  2. Evite ícones sem contexto

    Nem todos os ícones são interpretados da mesma forma. Por exemplo, o ícone de disquete pode confundir pessoas mais jovens. Prefira ícones familiares (como os usados em WhatsApp ou Instagram) ou combine ícone + texto.

  3. Imagens com texto alternativo (alt)

    O atributo alt garante que usuários cegos recebam a descrição da imagem.

    Se for decorativa, use alt="" (vazio) para que o leitor de tela a ignore.

    ⚠️ Evite usar imagens com texto, leitores de tela não conseguem interpretá-las, e o conteúdo pode se perder em diferentes tamanhos de tela.

Conclusão

Criar experiências digitais acessíveis é um compromisso contínuo: técnico, humano e cultural.

No Design System da Embracon, a acessibilidade deve ser parte central das decisões de design e desenvolvimento, garantindo que todos os usuários possam navegar, compreender e interagir com facilidade.

Mais do que cumprir diretrizes, acessibilidade é sobre inclusão real: projetar para pessoas diversas, em contextos diversos, e construir produtos que acolhem a todos.

Referências:

2