Construir uma verdadeira cultura de acessibilidade digital numa empresa é uma missão de resiliência e perseverança. Não é difícil que o discurso sobre acessibilidade caia nos clichês habituais. A acessibilidade é muito importante para as pessoas. A acessibilidade de produtos e serviços digitais promove a inclusão. Ou ainda, todos os profissionais das equipes deveriam estar envolvidos nos trabalhos de acessibilidade. Claro. Ninguém em sã consciência contestará qualquer uma dessas afirmações (espero). No entanto, a segunda parte desta conversa, à qual poucas empresas chegam, é “como?” Como fazer com que isso aconteça no dia a dia das equipes de transformação digital, que, como todos sabemos, estão imersas em roteiros exigentes, muitas vezes com um número muito limitado de pessoas disponíveis? Na maioria das vezes, a escolha acaba sendo entre “nós fazemos isso” e “aquilo”. E não deveria, porque, nesses casos, nunca vi a acessibilidade ganhar nessa equação. Não deveria ser assim. Você não precisa ser assim. Em primeiro lugar, porque escolher entre acessibilidade e qualquer outra coisa não é a escolha certa. A acessibilidade não é mais apenas mais um recurso a ser adicionado aos demais. É uma mais-valia para o negócio e, atualmente, uma obrigação legal que pode ter consequências graves para as empresas. Por outro lado, existem formas inteligentes, otimizadas e impactantes de incorporar princípios de acessibilidade na dinâmica natural das equipes. É possível trabalhar a acessibilidade sem virar as operações da equipe de cabeça para baixo. Em essência, é isso que o AccessibilityOps faz. Capacitar as pessoas e fornecer às equipas processos simples para que possam integrar o trabalho de acessibilidade nas suas rotinas diárias sem esforço desproporcional. Acessibilidade e Design Trabalhar a acessibilidade digital no design pode envolver diversas ações. É claro que precisamos prestar atenção especial à cor e como ela é usada para transmitir significado. É claro que os tamanhos de interação dos elementos devem ser confortáveis. Mas, o mais importante, devemos pensar no design a partir de uma perspectiva versátil. Uma interface não é um pôster. Podemos controlar muitos aspectos desse design, mas a forma como os usuários interagem com a interface está sujeita a um número infinito de variáveis. O tipo de dispositivo, contexto, finalidade, qualidade da rede, etc. Tudo isso afeta muito a experiência e interação de cada pessoa. Junto com tudo isso, quando as preocupações de acessibilidade digital são trazidas para o processo de design, acrescentam-se ainda mais variáveis.
As pessoas costumam usar o que chamamos de tecnologias e estratégias assistenciais. No fundo, tratam-se de ferramentas tecnológicas ou, pelo menos, “truques” a que as pessoas recorrem para encontrar modelos de utilização mais confortáveis. Os famosos leitores de tela, comumente associados ao uso de pessoas cegas (mas que não são úteis apenas para elas), por exemplo, são uma tecnologia assistiva. Alterar cores ou contrastes de cores entre diferentes elementos também é uma tecnologia assistiva. Aumentar o tamanho da fonte (que discutimos neste texto) é outro exemplo. Existem inúmeras tecnologias e estratégias assistivas. Quase tantos quantos os diferentes contextos de uso de cada pessoa. Nós não controlamos tudo Ou seja (e esta é a “má notícia” para nós, designers), “o nosso design” está sujeito, na perspetiva dos utilizadores, a transformações que não controlamos. Ele será “transformado” pelo usuário, garantindo que ele possa interagir com o aplicativo e tudo o que ele oferece da forma mais confortável possível. E isso é uma coisa boa. Se isso acontecer e tudo correr bem, certamente teremos feito muito bem o nosso trabalho de acessibilidade e todos merecemos parabéns. Se o usuário aplicar alguma dessas tecnologias e estratégias de suporte e ainda assim não conseguir utilizar o aplicativo digital, é sinal de que algo não está funcionando como deveria. Ah, e falando nisso. Nem pense em bloquear o uso dessas tecnologias ou estratégias de suporte. Eles podem estar “destruindo” seu belo design, mas estão permitindo que mais e mais pessoas realmente usem o aplicativo. No final, não foi exatamente isso que prometemos que queríamos fazer? Design para (todas) as pessoas. Sem exceção? Aumentar o tamanho da fonte Quantas vezes já ouvimos alguém — amigos, familiares ou mesmo colegas — reclamar que este ou aquele texto é muito pequeno? O texto desempenha um papel muito importante na experiência digital. Muitas informações são transmitidas por meio de texto:instruções de uso, legendas de botões ou elementos interativos. Tudo isso utiliza o texto como ferramenta de comunicação. Se a leitura de todos esses elementos for difícil, naturalmente, a experiência fica gravemente prejudicada. A leitura confortável de textos, independente de sua função, é um princípio inegociável. Essa leitura pode ser facilitada utilizando tamanhos confortáveis no design. No entanto, tecnologias e estratégias de apoio, através da funcionalidade de aumentar o tamanho da fonte, também podem ajudar a melhorar a legibilidade. De acordo com dados do APPT, 26% dos usuários de dispositivos móveis Android e iOS aumentam o tamanho da fonte padrão (dados de fevereiro de 2026). Um em cada quatro usuários aumenta o tamanho da fonte em seus smartphones. Esta é uma amostra de pessoas muito significativa, tornando esta funcionalidade inevitável nos processos de design.
Conformidade com as Diretrizes Aumentar o tamanho da fonte nas interfaces pode representar um enorme desafio de design. É importante entender que, repentinamente, alguns elementos de texto, devido às ações do usuário, podem dobrar de tamanho em relação ao tamanho inicial. “Com exceção de legendas e imagens de texto, o texto pode ser redimensionado sem tecnologia assistiva em até 200% sem perda de conteúdo ou funcionalidade.” — Critério de sucesso 1.4.4, “Redimensionamento de texto” das Diretrizes de acessibilidade de conteúdo da Web (WCAG), versão 2.2
Este critério de sucesso está ao nível de conformidade AA, o que significa que esta é uma característica absolutamente obrigatória de acordo com qualquer enquadramento legal. É fácil entender os 200% neste critério de sucesso. Se assumirmos que projetamos as interfaces em uma escala de 100%, o que significa que o tamanho do elemento é o tamanho inicial, então aumentar o texto em até 200% corresponderá à duplicação do tamanho inicial. Outras escalas de ampliação também podem ser utilizadas, como 120%, 140% e assim por diante. Por outras palavras, temos de garantir que os utilizadores possam aumentar o texto para duplicar o seu tamanho inicial através de tecnologias ou estratégias de apoio (e isto não é um detalhe menor). Para cumprir este padrão, não precisamos fornecer ferramentas de aumento de tamanho de texto nas interfaces. Na prática, esses recursos nada mais são do que redundância. Os dispositivos já permitem que isso seja feito de forma padronizada. Os usuários que realmente precisam dessa configuração sabem disso (pois, sem ela, suas vidas seriam muito mais difíceis). Bem, eles já têm essa configuração aplicada em seus dispositivos. E isso significa que podemos eliminar esses elementos adicionais da interface, simplificando a experiência.
Acesso Padronizado Um conceito importante a lembrar sobre tecnologias assistivas, especialmente neste caso em relação ao aumento do tamanho da fonte, é que a maioria dos dispositivos já possui muitas dessas ferramentas instaladas por padrão. Ou seja, em muitos casos, os usuários não precisam adquirir seu próprio software ou adquirir um tipo específico de dispositivo apenas para ter essa funcionalidade. Seja em dispositivos móveis ou mesmo em navegadores web, na grande maioria dos casos, é fácil encontrar recursos instalados que permitem aumentar o tamanho da fonte padrão que usamos em toda a interface. Este princípio de aumentar o tamanho da fonte pode ser aplicado a produtos digitais, como aplicativos, ou mesmo a qualquer tipo de site executado nos navegadores padrão usados atualmente. iPhone Em dispositivos iPhone, o recurso de aumento do tamanho da fonte é integrado por padrão. Para utilizar este recurso, basta acessar o painel “Configurações”, selecionar “Acessibilidade” e dentro do grupo de opções “Visão”, acessar o recurso “Tamanho e Exibição do Texto” e configurar o aumento de tamanho de fonte desejado naquela tela.
Google Chrome Os navegadores da Web também oferecem, por padrão, a funcionalidade para aumentar o tamanho da fonte. Por exemplo, no Google Chrome, este recurso está disponível no painel “Opções”, especificamente na área “Aparência”. Na lista de opções que aparecem neste grupo, basta selecionar a opção “Tamanho da fonte”. Normalmente, a opção “Médio – Recomendado” será selecionada. Você pode alterar essa configuração para qualquer outro tamanho de fonte disponível. Experimente, por exemplo, a opção “Muito grande”.
Teste na Figma Para garantir que o trabalho de acessibilidade digital se torne eficaz no dia a dia das equipes, é fundamental encontrar processos de trabalho simples. Ações ou iniciativas que possam ser integradas à rotina da equipe, que abordem a acessibilidade de forma integrada e que não exijam uma transformação dramática da realidade atual. Se isso fosse necessário, acredita ele, não aconteceria na maioria das vezes. Portanto, projetar processos de trabalho simples é metade da batalha para que a acessibilidade realmente aconteça, nestecaso, também dentro de uma equipe de design. Em relação ao teste de aumento do tamanho da fonte no design, temos hoje ferramentas extraordinárias à nossa disposição. Aqueles que se lembram da época de projetar interfaces complexas no Adobe Photoshop reconhecerão as diferenças nas ferramentas que temos hoje (e felizmente). Agora é possível, por meio de ferramentas como o Figma, criar tal dinamismo no design que testar o aumento do tamanho da fonte para acessibilidade se torna quase inevitável para a equipe.
Nota: Para fazer este teste, você precisa ter um bom conhecimento dos estilos de texto, layouts automáticos e variáveis do Figma. Estas três são ferramentas fundamentais para o sucesso sem muito esforço extra. Se você ainda não domina esses recursos, é altamente recomendável que comece por aí. Não pule etapas. A aprendizagem é um processo gradual que deve ser seguido de forma estruturada e passo a passo. Para onde queremos ir? O teste de aumento do tamanho da fonte no Figma que queremos realizar é simples. Queremos ter um conjunto de variáveis disponíveis para todos os estilos de texto que utilizamos na interface, permitindo-nos escolher se queremos ver a interface com o texto numa escala de 100%, 120%, 140%, 160%, 180% ou 200%. À medida que aplicamos esse conjunto de variáveis (assim como aplicamos variáveis para modo claro e escuro), observamos as transformações do texto na interface e entendemos até que ponto são necessárias adaptações em cada versão da interface com diferentes escalas tipográficas.
Como fazemos isso acontecer? Para que este teste corra tão bem, você precisa fazer alguns trabalhos de base. Os sistemas de design podem ajudar muito a otimizar grande parte desse trabalho inicial. Mas não vou mentir para você. Para que o teste funcione bem, seu design precisa ter um nível muito sério de organização e sistematização. Este não é exatamente um guia, pois cada equipe terá seu próprio modelo de trabalho e essas recomendações podem ser aplicadas de diferentes maneiras (e tudo bem). No entanto, para que este teste funcione, é importante garantir certas suposições no design. Para ajudá-lo a fasear a implementação deste modelo de teste, aqui estão algumas etapas a seguir. Instruções passo a passo para orientá-lo na organização de seus arquivos e garantir que você possa executar este teste totalmente da maneira mais simples e prática possível. 1. Projetando as interfaces Tudo começa com o design. Antes de qualquer teste, o foco deve, como não poderia deixar de ser, no design de cada interface que desejaremos testar posteriormente. Nesta fase ainda não existe uma preocupação específica com o teste de aumento do tamanho da fonte que realizaremos posteriormente. Naturalmente, todo design de interface deve, desde o início, seguir as recomendações mais básicas de acessibilidade aplicadas ao design.
2. Aplicar layouts automáticos a todos os elementos Em cada design de tela criado, você precisará garantir a aplicação perfeita de layouts automáticos. Este é um passo muito importante. É esta aplicação consistente de layouts automáticos em toda a estrutura e elementos de design que mais tarde garantirá a escalabilidade da interface quando começarmos a testar aumentos de tamanho de fonte. Você realmente não pode subestimar esta etapa. Se você não prestar a atenção que merece, verá quando testarmos o dimensionamento tipográfico nas interfaces, tudo quebrando como um elefante em uma loja de porcelana.
3. Estruturação e aplicação de estilos de texto Para realizar nosso teste de aumento de tamanho de fonte, também precisaremos que você aplique estilos de texto a cada design de interface. Você provavelmente até começou a criá-los enquanto desenhava. Ótimo. Se ainda não o fez, é importante que o faça agora. Para que o teste funcione perfeitamente, realmente precisamos disso. Não deixe nenhum elemento de texto no design sem um estilo de texto aplicado.
4. Defina o conjunto de variáveis 100% Este teste força um grau bastante alto de otimização. Na prática, isso significa que teremos que utilizar variáveis Figma para todas as características dos estilos de texto que temos na interface. Nesta fase, você deve definir as variáveis “numéricas” do Figma para pelo menos o tamanho da fonte e a altura da linha dos estilos de texto que você aplicou ao desenho. Com esta etapa você está definindo os valores da escala de aumento do tamanho da fonte para um modelo de visualização 100%, ou seja, a versão inicial e de referência do desenho. É importante que você estruture essas variáveis para cada estilo de texto do desenho porque, posteriormente, teremos que considerar a escala de ampliação de cada um desses elementos de texto.
5. Aplique as variáveis aos estilos de texto Tendo definido as variáveis para os estilos de texto em escala de 100%, você deve agora aplicá-lasaos elementos dos estilos de texto já criados. Não se esqueça de aplicar variáveis pelo menos às características de tamanho da fonte e altura da linha. Se você tiver mais variáveis tipográficas, tudo bem. Mas você deve pelo menos ter variáveis aplicadas ao tamanho da fonte e à altura da linha. Isto é realmente muito importante.
6. Defina as variáveis para aumentar o tamanho do texto Agora que você tem as variáveis aplicadas aos estilos de texto em escala de 100%, o próximo passo é criar as variáveis para as demais escalas de aumento de tamanho de fonte. Na prática, você tem que criar as variáveis que dirão ao sistema qual tamanho de fonte cada estilo de texto crescerá quando a escala de aumento for 120%, 140%, 160%, etc. Para definir os valores do tamanho da fonte e da altura da linha, basta multiplicar o valor inicial pela porcentagem da escala. Por exemplo, se um estilo de texto tiver tamanho de fonte de 16px, o tamanho da escala de 120% será 16 multiplicado por 1,2, o que dá um resultado de 19,2. Repita esse cálculo para todos os valores de tamanho de fonte e altura de linha das porcentagens de escala de aumento de tamanho de fonte que você escolher. Você também pode optar por aplicar ou não arredondamento aos valores finais. Este é um teste aproximado e, portanto, quaisquer diferenças que possam surgir do arredondamento não afetarão a percepção final do resultado do teste.
7. Aplicar variáveis a diferentes versões de escala O momento da verdade chegou. O próximo passo é entender se temos tudo funcionando para que o teste funcione perfeitamente. Portanto, você deve copiar a interface original e aplicar o conjunto de variáveis para cada taxa de aumento de tamanho de fonte que fizer sentido para você. Repita este processo para todas as porcentagens de aumento do tamanho da fonte que você definiu. Como sugestão, você pode usar como referência os percentuais de aumento de 120%, 140%, 160%, 180% e 200%. Se quiser simplificar, você pode reduzir o número de porcentagens de escala com as quais está trabalhando. Independentemente do número de porcentagens com as quais você está trabalhando, você deve sempre trabalhar com escalas mínimas de 100% e 200%.
8. Identifique áreas para melhoria Ao aplicar diferentes escalas de aumento de tamanho de fonte na mesma tela, é fácil entender onde melhorias podem ser necessárias. É aqui que começa o verdadeiro teste de aumento do tamanho da fonte no design da interface e o trabalho de acessibilidade mais interessante. Na sua análise das diversas telas, tenha em mente alguns aspectos importantes:
O fato do texto parecer gigantesco não é problema e não “estraga” o design. Lembre-se que isso pode significar a diferença entre alguém poder utilizar ou não determinado produto ou serviço. Existe um problema de acessibilidade quando o aumento do tamanho da fonte impossibilita ao usuário a leitura de determinados textos ou a ativação de determinados controles. Para elementos de texto que já são muito grandes, aumentar o tamanho da fonte pode não fazer sentido. Isso poderia tornar esses elementos desproporcionais, o que não melhoraria a legibilidade (já que já têm um bom tamanho) e ocuparia um espaço completamente desnecessário. Se houver elementos que parecem estar saindo da tela, o primeiro passo é confirmar como você está aplicando o layout automático. Muitos aspectos do design podem ser facilmente resolvidos com o uso adequado do layout automático. Independentemente da escala de aumento do tamanho da fonte, é fundamental manter a hierarquia visual da tipografia, pois essa legibilidade é importante para a percepção dos diferentes níveis de informação presentes na tela. Este teste pode ajudar a identificar elementos que podem precisar de ajustes diretamente no código para funcionarem bem em uma determinada escala de aumento. Nem tudo pode ser resolvido apenas através do design, e isso é perfeitamente normal. A acessibilidade é essencialmente um esforço de equipe.
9. Faça correções e ajustes no design Finalmente, com base nas diversas telas com diferentes escalas de ampliação de texto aplicadas, você pode fazer as alterações de design que fazem sentido. Alguns desses ajustes podem ser necessários apenas no código. Nesses casos, você documenta todas essas sugestões e repassa para a equipe de desenvolvimento. É também crucial reforçar (novamente) que alguns dos problemas que poderá encontrar no projeto podem ser rapidamente resolvidos no processo de projeto, com a aplicação simples e correta das propriedades de auto-layout.
10. Volte ao início e repita o processo Esta é uma abordagem cíclica. Isso significa que você deve repetir essas etapas, ou variações delas, quantas vezes forem necessárias ao longo do projeto. É natural que, com o tempo e com a otimização dos processos, algunsdessas etapas deixará de fazer sentido. Isso não é absolutamente um problema. Mas a coisa mais importante a perceber aqui é que a acessibilidade e esse processo de testar o aumento do tamanho da fonte não devem ser feitos apenas uma vez, e é isso. É um teste a ser feito muitas e muitas vezes ao longo do dia a dia de cada projeto e equipe.
O papel dos sistemas de design À primeira vista, esta lista de passos pode parecer um exercício complexo. Mas não é. Isso ocorre porque a grande maioria, senão todas, dessas etapas são fáceis de executar em qualquer contexto onde exista um sistema de design. Na verdade, os sistemas de design tornaram-se um padrão inevitável na indústria de Design de Produto. Podemos discutir o que cada equipe chama de design system, mas a verdade é que hoje é muito difícil encontrar uma equipe de Design de Produto que não tenha, no mínimo, uma biblioteca minimamente estruturada de componentes e estilos.
Com essa base, mais ou menos documentada, é muito fácil aplicar esse tipo de teste de aumento de tamanho de fonte usando variáveis Figma. Além disso, se o seu sistema de design já possui, por exemplo, variáveis estruturadas para o modo claro e escuro, significa que você já está aplicando exatamente os mesmos princípios que usamos para realizar este teste. Então, nada de novo. Trabalhar com design systems envolve um nível de estruturação e organização que também é muito útil para a criação deste tipo de teste. Existe um mito de que os sistemas de design limitam a criatividade. Isto não é verdade. Os sistemas de design ajudam a resolver a parte “burocrática” do design, para que possamos realmente ter mais tempo para o que importa: neste caso, testar a acessibilidade e construir cada vez mais produtos e serviços que sejam verdadeiramente acessíveis ao maior número de pessoas. Arquivo de exemplo É sempre mais fácil ver um exemplo do que apenas ler a descrição de um processo. Se isto é verdade em muitas disciplinas do conhecimento, no design, esta premissa faz ainda mais sentido. Portanto, neste arquivo Figma, publicado gratuitamente e disponível abertamente à comunidade, você encontrará um exemplo prático de todo o processo de teste aqui descrito. Lembre-se que este é apenas um exemplo. Pode haver inúmeras maneiras de realizar esse tipo de teste no contexto de um arquivo Figma.
Certifique-se de analisar essa abordagem com um olhar crítico. É uma sugestão para testar aumentos de tamanho de fonte que seguem um processo específico. Apesar disso, a abordagem deve ser adaptada à realidade, aos processos e ao nível de maturidade específicos da sua equipe. Simplesmente copiar fórmulas de outras equipes sem entender se elas fazem sentido em nosso próprio contexto é uma maneira segura de tornar os esforços de acessibilidade desproporcionais. Cada situação é única. Esta abordagem tenta simplificar ao máximo o trabalho de acessibilidade neste contexto específico. E lembre-se: se algo acontecer, por menor que seja, é um passo à frente, não um passo para trás. E isso deve ser comemorado por todos da equipe.
