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 lugares-comuns do costume. 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 equipas deveriam estar envolvidos no trabalho de acessibilidade. Claro. Ninguém, no seu perfeito juízo, irá discutir qualquer uma destas frases (espero eu).
Contudo, a segunda parte desta conversa, à qual muito poucas empresas chegam, é: “como?” Como é que fazemos isto acontecer no meio do dia a dia das equipas de transformação digital, que todos nós sabemos, vivem mergulhadas em roadmaps exigentes, muitas vezes com um número de pessoas disponíveis bastante limitado. Na maior parte das vezes, a escolha acaba entre “fazemos isto” e “aquilo”. E não deveria, porque, nestes casos, nunca via a acessibilidade sair a ganhar nesta equação.
Não deveria ser assim. Não precisa ser assim. Primeiro que tudo, porque escolher entre acessibilidade e outra coisa qualquer não é a escolha certa. A acessibilidade não é mais uma funcionalidade a juntar às outras. É uma mais-valia para o negócio e, atualmente, uma obrigação legal que pode acarretar consequências graves para as empresas. Por outro lado, existem formas inteligentes, otimizadas e com impacto para inserir os princípios de acessibilidade na dinâmica natural das equipas. É possível trabalhar a acessibilidade sem virar do avesso o funcionamento das equipas. No fundo, é isto que faz a AccessibilityOps. Capacitar as pessoas e dotar as equipas de processos simples para que possam integrar o trabalho de acessibilidade no dia a dia sem esforço desproporcionado.
Acessibilidade e o design
Trabalhar a acessibilidade digital no design pode envolver diversas ações. É evidente que temos que ter uma preocupação particular com a cor e com a forma como esta é utilizada para transmitir algum tipo de significado. Certo. Claro que os tamanhos de interação dos elementos têm que ter uma dimensão confortável. Mas, o mais importante é pensar o design por uma perspectiva versátil. Um interface não é um cartaz. Podemos controlar muitos aspetos daquele desenho, mas a forma como os utilizadores interagem com o interface está sujeita a um sem-fim de variáveis. O tipo de dispositivo, o contexto, o propósito, a qualidade da rede, etc. Tudo isto afeta muito a experiência e a interação de cada pessoa. A par de tudo isto, quando as preocupações de acessibilidade digital passam a estar à mesa, para o design, isto acrescenta ainda mais variáveis.
Muitas vezes as pessoas utilizam aquilo que se chama tecnologias e estratégias de apoio. Basicamente, são ferramentas tecnológicas ou, no limite, “truques” a que as pessoas recorrem para encontrar modelos de uso mais confortáveis. Os famosos leitores de ecrã, vulgarmente associados à utilização de pessoas cegas (mas que não são úteis apenas a estas pessoas), por exemplo, são uma tecnologia de apoio. A alteração das cores ou dos contrastes de cor entre os diferentes elementos também. O aumento do tamanho de letra (de que falamos neste texto), idem. Existem inúmeras tecnologias e estratégias de apoio. Quase tantas quantas os diferentes contextos de uso de cada pessoa.
Não controlamos tudo
Por outras palavras (e estas são as “más notícias” para nós, designers), o “nosso design” está sujeito, do lado dos utilizadores, a transformações que não controlamos. Ele será “transformado” pelo utilizador, garantindo que este consegue interagir com a aplicação e com tudo o que ela lhe coloca à disposição, da forma mais confortável possível. E ainda bem. Se isto acontecer e tudo correr bem, seguramente fizemos o nosso trabalho de acessibilidade, muito bem feito, e estamos todos de parabéns. Se o utilizador aplicar alguma destas tecnologias e estratégias de apoio e não conseguir utilizar a aplicação digital, é sinal de que algo não está a funcionar como deveria.
Ah, e já agora. Nem penses em começar a bloquear o uso destas tecnologias ou estratégias de apoio. Elas podem estar a “destruir” o teu lindo design, mas estão a permitir que mais e mais pessoas consigam realmente utilizar a aplicação. No final do dia, não era isto mesmo que prometemos que queríamos fazer? Pensar no design para (todas) as pessoas. Sem exceção?
Aumento do tamanho de letra
Quantas vezes já ouvimos alguém, amigos, familiares ou mesmo colegas, a queixar-se de que este ou aquele texto está demasiado pequeno? O texto desempenha um papel muito importante na experiência digital. Muita da informação é transmitida por meio de texto. Instruções de utilização. Legendas de botões ou de elementos interativos. Tudo isto utiliza o texto como ferramenta de comunicação. Se a leitura de todos estes elementos for difícil, naturalmente, a experiência fica fortemente prejudicada.
A leitura confortável dos textos, seja qual for a sua função, é um princípio inegociável. Esta leitura pode ser facilitada ao utilizar no design tamanhos confortáveis. Contudo, as tecnologias e estratégias de apoio, por meio da funcionalidade de aumento do tamanho da letra, também podem ajudar a melhorar a leitura. Segundo os dados da APPT, 26% dos utilizadores de dispositivos móveis Android e iOS aumentam o tamanho de letra padrão (dados de Fevereiro de 2026). Um em cada quatro utilizadores aumenta o tamanho da fonte no smartphone. Esta é uma amostra muito significativa de pessoas que faz com que esta funcionalidade não possa ser ignorada nos processos de design.
Conformidade com as diretrizes
O aumento do tamanho de letra nos interfaces pode significar um desafio imenso para o design. Aquilo que é importante perceber é que de um momento para o outro, alguns elementos textuais, podem por ação dos utilizadores, passar a ter o dobro do tamanho inicial. Segundo o critério de sucesso 1.4.4 Redimensionar texto das Web Content Accessibility Guidelines (WCAG), versão 2.2, devemos garantir que “Com exceção da Legendagem e das imagens de texto, o texto pode ser redimensionado sem tecnologia de apoio até 200% sem perda de conteúdo ou funcionalidade.” Este critério de sucesso é de nível AA de conformidade, o que significa que esta é uma funcionalidade absolutamente obrigatória segundo qualquer enquadramento legal.
É fácil entender os 200% neste critério de sucesso. Se assumirmos que desenhamos os interfaces numa escala de 100%, ou seja, o tamanho dos elementos é o tamanho inicial. Por conseguinte, o aumento do texto até 200% corresponderá ao dobro do tamanho inicial. Podem também ser utilizadas outras escalas de ampliação, como 120%, 140%, etc. Por outras palavras, temos que assegurar que os utilizadores conseguem aumentar os textos até ao dobro do tamanho inicial, por meio de tecnologias ou estratégias de apoio (e isto não é um detalhe).
Para cumprir esta norma, não precisamos disponibilizar nos interfaces ferramentas de aumento do tamanho do texto. Na prática estas funcionalidades mais que não são do que uma redundância. Os dispositivos já permitem fazer isto de forma padronizada. Os utilizadores que precisam mesmo desta configuração conhecem-na (porque, sem ela, a sua vida seria muito mais difícil). Ora, já têm esta configuração aplicada de forma transversal no seu dispositivo. E isto quer dizer que podemos eliminar estes elementos adicionais do interface, simplificando a experiência.
Acesso padronizado
Um conceito importante a reter sobre as tecnologias de apoio, em particular neste caso, sobre o aumento do tamanho de letra, é que a maior parte dos dispositivos já tem muitas destas ferramentas instaladas por padrão. Ou seja, em muitos casos os utilizadores não precisam adquirir software próprio ou comprar um determinado tipo de dispositivo só para que tenha esta funcionalidade.
Seja em dispositivos móveis ou mesmo em web browsers, na esmagadora maioria dos casos é fácil encontrar funcionalidades instaladas que permitem aumentar o tamanho de letra padrão que estamos a utilizar em todo o interface. Este princípio de aumento do tamanho de letra pode ser aplicado a produtos digitais, como apps, ou mesmo a qualquer tipo de website a correr nos web browsers padrões utilizados hoje em dia.
iPhones
Em dispositivos iPhone, a funcionalidade de aumento do tamanho de letra, está integrada de forma padrão. Para utilizar a essa funcionalidade, basta aceder ao painel de “Definições”, opção “Acessibilidade”, dentro do grupo de opções relacionadas com a “Visão”, aceder à funcionalidade “Tamanho do texto e visualização” e nesse ecrã, configurar o aumento do tamanho de letra pretendido.
Google Chrome
Também em web browsers é possível encontrar, por definição, a funcionalidade de aumento do tamanho de letra. Por exemplo, em Google Chrome, a funcionalidade está disponível no painel de “Opções”, especificamente na área de “Aparência”. Na listagem de opções que vão aparecer neste grupo, basta selecionar a opção de “Tamanho de letra”. Por norma, a opção “Médio – Recomendado” estará selecionada. Podes alterar esta definição para qualquer outro tamanho de letra disponível. Experimenta, por exemplo, a opção “Muito grande”.
Testar em Figma
Para garantir que o trabalho de acessibilidade digital se torne eficaz no dia a dia das equipas, é fundamental encontrar processos de trabalho simples. Ações ou iniciativas que possam ser integradas no quotidiano da equipa, que trabalhem a acessibilidade de forma integrada e não exijam uma transformação mirabolante da realidade atual. Se isto for necessário, acredita, não vai acontecer na maior parte das vezes. Portanto, desenhar processos de trabalho simples é meio caminho andando para a acessibilidade acontecer realmente, neste caso também numa equipa de design.
No que toca ao teste do aumento do tamanho de letra no design, temos hoje ferramentas extraordinárias à nossa disposição. Quem é do tempo em que se desenhavam interfaces complexos em Adobe Photoshop, reconhece bem as diferenças das ferramentas que temos hoje (e ainda bem). É possível hoje, através de ferramentas como o Figma, criar um dinamismo tal no desenho que o teste do aumento do tamanho de letra para a acessibilidade, se torna quase incontornável para a equipa.
Nota importante! Para realizares este teste, tens que dominar muito bem os text styles, auto layouts e as variáveis de Figma. São três instrumentos fundamentais para que isto aconteça sem grande esforço adicional. Se ainda não dominas estas funcionalidades, é muito aconselhável que comeces por aí. Não saltes etapas! A aprendizagem é um processo gradual que tem mesmo que ser percorrido de forma estruturada passo a passo.
Onde queremos chegar?
O teste de aumento do tamanho de letra em Figma que queremos garantir é simples. Queremos ter um conjunto de variáveis disponíveis para todos os estilos de texto que utilizamos no interface e que nos permita escolher se queremos ver aquele interface com os textos numa escala de 100%, 120%, 140%, 160%, 180% ou 200%. Conforme vamos aplicando este conjunto de variáveis (muito à semelhança de como se aplicam as variáveis para light e dark mode), vamos observando as transformações dos textos no interface e percebendo até que ponto são necessárias adaptações em cada uma das versões dos interfaces com escalas tipográficas diferentes.
Como fazemos isto acontecer?
Para que este teste aconteça de forma tão natural, precisas de fazer algum trabalho de casa. Os design systems podem ajudar a otimizar e muito, boa parte deste trabalho inicial. Mas não te vou enganar. Para o teste funcionar bem, o teu design precisa de ter um nível de organização e sistematização bastante sério.
Não é bem um guia, porque cada equipa terá o seu modelo de trabalho e estas recomendações podem ser aplicadas de diferentes formas (e está tudo bem). Contudo, para que este teste funcione, é importante garantir, no design, algumas premissas. Para ajudar a fasear a implementação deste modelo de testes, tens aqui alguns passos a seguir. Etapas, passo a passo para te guiar na organização que deves implementar nos teus ficheiros e garantir que vais conseguir realizar este teste em pleno da forma mais simples e prática possível.
1. Desenhar os interfaces
Tudo começa no desenho. Antes de qualquer teste, o foco deve estar, como não poderia deixar de ser, no desenho de cada interface que vamos querer testar mais à frente. Nesta fase, ainda sem nenhuma preocupação específica com o teste de aumento do tamanho da letra que vamos realizar mais à frente. Naturalmente que todo o desenho de interfaces devia, à partida, seguir aquilo que são as mais elementares recomendações de acessibilidade aplicadas ao design.
2. Aplicar auto layouts em todos os elementos
Em todo o desenho que fizeres de ecrãs, terás que garantir que aplicas de forma exímia auto layouts. Este é um passo muito importante. É esta aplicação consistente de auto layouts a toda a estrutura e aos elementos de desenho que vai permitir, mais à frente, garantir a escalabilidade do interface quando começarmos a testar o aumento do tamanho da letra. Não podes mesmo menosprezar esta etapa. Se não lhe deres a atenção devida, verás quando formos testar a escala tipográfica nos interfaces, tudo a quebrar como se estivesse um elefante numa loja de porcelana.
3. Estruturar e aplicar text styles
Para realizarmos o nosso teste de aumento do tamanho de letra, vamos precisar também que tenhas aplicado ao desenho de cada interface, text styles. Muito provavelmente até começaste a criar à medida que foste desenhando. Ótimo. Se não o fizeste, é importante que o faças agora. Para que o teste funcione na perfeição, vamos mesmo precisar disto. Não deixes nenhum elemento de texto no desenho sem um text style aplicado.
4. Definir o conjunto de variáveis 100%
Este teste obriga a um grau de otimização bastante grande. Isto quer dizer na prática que teremos que utilizar variáveis de Figma para todas as características dos text styles que temos no interface. Nesta etapa, deves definir variáveis “number” de Figma para pelo menos o font-size e o line-height dos text styles que aplicaste ao desenho. Com esta etapa, estás a definir os valores da escala de aumento do tamanho de letra, para um modelo de visualização de 100%, ou seja, a versão inicial e de referência do desenho. É importante que estrutures estas variáveis para cada text style existente no desenho, porque, a seguir, teremos que pensar na escala de ampliação de cada um destes elementos de texto.
5. Aplicar as variáveis aos text styles
Tendo as variáveis dos text styles da escala 100% definidas, deves agora aplicá-las aos elementos dos text styles já criados. Não te esqueças de aplicar pelo menos variáveis às características de font-size e de line-height. Se tiveres mais variáveis tipográficas, tudo bem. Mas pelo menos deves ter variáveis aplicadas ao font-size e o line-height. Isto é mesmo muito importante.
6. Definir as variáveis para aumento do texto
Agora que tens as variáveis aplicadas aos text styles da escala de 100%, o passo seguinte é criar as variáveis para as outras escalas de aumento do tamanho da fonte. Na prática, tens que criar as variáveis que vão dizer ao sistema para que tamanho de letra cada text style vai crescer, quando a escala de aumento for de 120%, 140%, 160%, etc. Para definires os valores do font-size e o line-height basta multiplicares o valor inicial pela percentagem de escala. Por exemplo, se um text style tem um font-size de 16px, o tamanho para a escala de 120% será 16 a multiplicar por 1,2 o que dá um resultado de 19,2. Repete este cálculo para todos os valores de font-size e o line-height das percentagens de escala de aumento do tamanho de letra que escolheres. Podes também escolher aplicar ou não arredondamentos aos valores finais. Este é um teste aproximado e por isso as diferenças que possam advir desses arredondamentos não vão prejudicar a percepção final do resultado do teste.
7. Aplicar variáveis às diferentes versões de escala
Chegou o momento da verdade. O próximo passo é percebermos se temos tudo a funcionar para que o teste corra perfeitamente. Por isso, deves copiar o interface original e aplicar o conjunto de variáveis de cada uma das taxas de aumento do tamanho de letra que te fizerem sentido. Repete este processo para todas as percentagens de aumento do tamanho de letra que tenhas definido. Como sugestão, podes utilizar como referência as percentagens de aumento de 120%, 140%, 160%, 180% e 200%. Se quiseres simplificar, podes reduzir o número de percentagens de escala com que estás a trabalhar. Independentemente do número de percentagens com que estejas a trabalhar, deves sempre trabalhar no mínimo dos mínimos com as escalas de 100% e 200%.
8. Identificar pontos de melhoria
Tendo as diferentes escalas de aumento do tamanho de letra aplicadas ao mesmo ecrã, é fácil perceber onde poderão estar os pontos de melhoria. É aqui que começa realmente o teste de aumento do tamanho de letra ao desenho dos interfaces e o trabalho mais interessante de acessibilidade. Na análise que realizares aos vários ecrãs, tem em atenção alguns aspetos importantes:
- O facto dos textos parecerem gigantes não é um problema e não “estraga” o design. Lembra-te de que isto pode representar a diferença entre alguém conseguir ou não utilizar determinado produto ou serviço.
- Existe um problema de acessibilidade quando o aumento do tamanho de letra faz com que o utilizador deixe de conseguir ler determinados textos ou não consiga acionar algum controlo.
- Elementos textuais originalmente muito grandes podem não fazer sentido aplicar o aumento do tamanho de letra. Pois fazer isso poderia tornar aqueles elementos desproporcionais, o que não melhoraria a sua leitura (porque já têm originalmente um bom tamanho) e ocuparia um espaço absolutamente desnecessário.
- Se existirem elementos a partir no ecrã, o primeiro passo a fazer é confirmar a forma como estás aplicar o auto layout. Existem muitos aspetos do design que se resolvem simplesmente com uma boa utilização do auto layout.
- Independentemente da escala de aumento do tamanho de letra é fundamental manter a hierarquia visual da tipografia, pois essa leitura é importante para perceber os diferentes níveis de informação presentes no ecrã.
- Este teste pode ajudar a identificar elementos que podem precisar de ajustes directamente no código para funcionarem bem em determinada escala de aumento. Nem tudo se resolve só no design e não tem mal nenhum. A acessibilidade é essencialmente um trabalho de equipa.
9. Realizar correcções e ajustes no design
Por fim, tendo como base os vários ecrãs com diferentes escalas de aumento do texto aplicadas, podes realizar as alterações de design que fizerem sentido. Alguns destes ajustes podem ser necessários apenas em código. Nesses casos, documenta todas essas sugestões e transmite-as à equipa de desenvolvimento. É ainda fundamental reforçar (novamente) que alguns dos problemas que possas encontrar no desenho podem ser logo resolvidos no design, com a simples aplicação correcta das propriedades de auto layout.
10. Voltar ao início e repetir o processo
Esta é uma abordagem cíclica. Quer isto dizer que deves repetir estes passos, ou derivações deles, tantas vezes quanto forem necessárias ao longo do projeto. É natural que com o tempo e a otimização do processo, algumas destas etapas deixem de fazer sentido. Não tem problema absolutamente nenhum. Mas o mais importante a perceber aqui, é que a acessibilidade e este processo de teste do aumento do tamanho da letra não deve ser feito uma única vez e pronto. É um teste a fazer várias e várias vezes ao longo do dia a dia de cada projeto e equipa.
Papel dos design system
Olhando pela primeira vez para esta lista de passos, pode surgir a ideia de que é um exercício complexo. Mas na verdade não é. Não é porque a esmagadora maioria destes passos, se não mesmo todos, são fáceis de executar em qualquer contexto onde exista um design system. A bem da verdade, os design systems tornaram-se na indústria de Product Design um padrão incontornável. Podemos discutir aquilo que cada equipa chama de design system, mas a verdade é que é hoje muito difícil encontrar uma equipa de Product Design que não tenha, mais que não seja, uma biblioteca de componentes e estilos minimamente estruturada.
Com essa base, estando ela mais ou menos documentada, é muito fácil aplicar este tipo de teste de aumento do tamanho de letra com variáveis de Figma. Mais, se o teu design system já tiver, por exemplo, variáveis estruturadas para light e dark mode, é sinal de que já estás a aplicar exactamente os mesmos princípios que utilizamos para realizar este teste. Portanto, nada de novo.
Trabalhar com design systems implica um nível de estruturação e organização que também é muito útil para criar este tipo de testes. Existe um mito segundo o qual os design systems limitam a criatividade. Isso não é verdade. Os design systems ajudam a resolver a parte “burocrática” do design, para que possamos ter realmente mais tempo para o que interessa: neste caso, para testar a acessibilidade e construir cada vez mais produtos e serviços verdadeiramente acessíveis ao maior número de pessoas.
Ficheiro exemplo
É sempre mais fácil ver um exemplo do que apenas ler uma descrição de um processo. Se isto é verdade em muitas disciplinas do conhecimento, no design, esta premissa faz ainda mais sentido. Por isso mesmo, poderás encontrar neste ficheiro Figma, publicado gratuitamente e aberto na comunidade, um exemplo prático de todo o processo de testes aqui descrito. Lembra-te de que este é só um exemplo. Podem existir inúmeras formas de realizar este tipo de teste no contexto de um ficheiro de Figma.
Não deixes de olhar para esta abordagem com todo o sentido crítico. É uma sugestão de teste de aumento do tamanho de letra que segue um processo específico. Apesar disso, esta abordagem deve ser adaptada à tua realidade de equipa em concreto. Aos seus processos e à sua maturidade. Copiar simplesmente fórmulas de outras equipas, sem perceber se fazem sentido na nossa, é meio caminho andando para o esforço no trabalho de acessibilidade se tornar desproporcionado. Cada realidade é uma realidade. Tenta simplificar ao máximo o trabalho de acessibilidade nesse contexto específico. E lembra-te. Se alguma coisa acontecer, por mais pequena que seja, é um passo em frente, não um passo atrás. E isso também deve ser celebrado por todos na equipa.
Fotografia © Michael Myers (Unsplash)