Acessibilidade em apps móveis: como tornar seu app mais acessível

Não é possível comprovar que um app é acessível por meio de uma prévia ou de uma pontuação de contraste. No entanto, é possível remover uma quantidade surpreendente de barreiras antes do início dos testes formais.

A acessibilidade móvel vai muito além do contraste de cores. Tipografia, espaçamento, navegação, áreas de toque, rótulos, movimento, mídia e comportamento com tecnologias assistivas também determinam se uma pessoa consegue concluir uma tarefa.

As WCAG foram escritas para conteúdo web. As orientações WCAG2Mobile do W3C explicam como aplicar os critérios de nível A e AA das WCAG 2.2 a apps móveis nativos, web e híbridos. O documento é informativo, não uma norma móvel separada, e sozinho não basta para estabelecer que um app seja acessível.

Esta checklist separa o que pode ser configurado de forma centralizada do que ainda precisa ser verificado no produto publicado:

Nada parecia obviamente quebrado nesta primeira tela. Esse era justamente o ponto útil do exercício: problemas de acessibilidade nem sempre são dramáticos; muitas vezes ficam escondidos em escolhas de design elegantes.

Usamos texto claro sobre fundo claro, reduzimos o corpo do texto para 10 px, removemos as margens globais e mantivemos rótulos de navegação genéricos como “Videos” e “Podcasts”. O resultado ainda parecia tranquilo em uma apresentação. No celular, a hierarquia desmoronou: o texto secundário perdeu força, os cards ficaram próximos demais das bordas e a navegação inferior se tornou muito mais difícil de percorrer.

A lição não é “nunca use tons pastéis” nem “deixe tudo grande”. As escolhas da marca precisam de um sistema legível por baixo.

Começamos em Meu App > Estilo do app > Cores e atribuímos as cores de acordo com sua função. O fundo quente permaneceu. O que mudou foi a distância entre cada primeiro plano e seu fundo:

As WCAG 2.2 estabelecem uma proporção mínima de contraste de 4,5:1 para texto normal e 3:1 para texto grande no nível AA. Deixamos deliberadamente uma margem maior no texto principal: uma combinação que passa no teste pode continuar fraca com uma fonte fina, um tamanho pequeno ou uma tela muito luminosa ao ar livre.

O GoodBarber permite começar por um tema integrado, gerar uma paleta ou criar uma do zero. O benefício não está na quantidade de amostras, mas na reutilização. Textos do header e do corpo, separadores, botões e estados de navegação podem receber funções consistentes em todas as seções. A documentação do Estilo do App explica como essas escolhas globais são propagadas.

Uma paleta legível é um ponto de partida forte, não um certificado de acessibilidade. Verifique cada combinação real de primeiro plano e fundo, incluindo estados selecionados, sobreposições, imagens e personalizações específicas de cada seção.

O contraste tornou as palavras visíveis. O tamanho e o espaçamento tornaram a leitura confortável.

Selecionamos o tema de fontes Formateca, que combina Work Sans nos títulos com Manrope no corpo. Depois usamos o controle global de tipografia para reconstruir a hierarquia: o corpo do texto passou de 10 px para 16 px, o título principal chegou a 30 px e o conteúdo principal recuperou margens de 16 px.

A escala tipográfica global do GoodBarber ajusta proporcionalmente oito níveis de texto. Isso facilita a manutenção de uma hierarquia consistente entre as telas, mas não garante um resultado acessível. Verifique os tamanhos, as quebras de linha e o espaçamento entre linhas no app gerado.

As WCAG não determinam um tamanho mínimo universal para o corpo do texto. Os 16 px são o valor que escolhemos para esta interface, não um limite de conformidade. Um texto maior também precisa de mais espaço; caso contrário, os cards ficam apertados e os rótulos quebram de forma desconfortável.

Por fim, teste o app com o tamanho de texto preferido pelo usuário. A Apple recomenda oferecer ampliação de texto e Dynamic Type, enquanto o conteúdo web deve continuar utilizável quando o texto é redimensionado. Uma prévia equilibrada no editor é apenas o primeiro estado a verificar.

Nesta comparação de antes e depois, a TabBar original mostrava “Videos”, “Podcasts” e “Navigation”. Esses rótulos descreviam formatos ou mecanismos da interface, não o que uma pessoa da comunidade de yoga poderia fazer em seguida.

Renomeamos para Classes, Audio e More. A estrutura não mudou, mas a decisão ficou mais simples: fazer uma aula, escolher uma sessão de áudio ou abrir as demais seções.

As orientações de acessibilidade do Android recomendam rótulos úteis e descritivos para elementos interativos, pois serviços como o TalkBack podem anunciar seus nomes de acessibilidade. Alterar o título visível melhora a navegação visual; ainda é preciso verificar o que o componente gerado realmente expõe ao VoiceOver e ao TalkBack.

Mantenha os rótulos curtos, únicos e orientados à tarefa. Combine ícones e texto quando houver espaço. Um teste simples: se os ícones desaparecessem, as palavras ainda indicariam o destino de cada toque?

A acessibilidade falha quando o conteúdo pode ser visto, mas um controle é difícil de tocar, ou quando uma mídia essencial exclui um canal sensorial.

Comece pelas áreas de toque. O Android recomenda uma área focável de pelo menos 48 × 48 dp para elementos interativos. Na PWA, o critério Tamanho do alvo (mínimo) das WCAG 2.2 estabelece um mínimo de 24 × 24 pixels CSS no nível AA, sujeito às exceções definidas. O ícone visível pode ser menor que sua área operável, mas alvos vizinhos precisam continuar distintos.

Em seguida, revise como o significado é comunicado. Erros, progresso e disponibilidade precisam de sinais que os usuários possam perceber. Imagens informativas necessitam de alternativas em texto; vídeos relevantes, de legendas; e conteúdo somente em áudio, de transcrição ou equivalente. Essas são decisões editoriais que um design consistente não pode automatizar por você.

O GoodBarber centraliza a hierarquia, as cores e a forma dos botões por meio do Estilo do App. Use esses controles para reduzir inconsistências e depois verifique tamanho dos alvos, foco, rótulos e estados nas versões iOS, Android e PWA geradas.

O Lotus Yoga usava resposta tátil e uma animação de abertura. Em Meu App > Estilo do app, desativamos o efeito decorativo de abertura e mantivemos a resposta tátil nos apps nativos. O GoodBarber também oferece efeitos de rolagem na mesma área; as opções de design adicionais do Estilo do App explicam onde esses controles ficam.

Essa escolha não é uma regra universal de acessibilidade. O movimento pode explicar uma mudança de estado e a resposta tátil pode confirmar uma ação sem adicionar ruído visual. A questão é saber se o efeito transmite uma informação útil. Se não transmite, uma configuração mais calma é mais fácil de justificar.

Não presuma que mudar a configuração no editor comprova suporte à redução de movimento. Teste o app publicado com as preferências de movimento do dispositivo ativadas e confirme que as tarefas completas continuam fazendo sentido sem o efeito.

Esta versão final é mais fácil de ler e navegar sem perder o caráter tranquilo da marca. Mais importante: as melhorias são sistêmicas. Uma única paleta, escala tipográfica e estrutura de espaçamento pode melhorar várias telas ao mesmo tempo.

A prévia mostra cor, hierarquia, espaçamento, rótulos e estados visíveis. Ela não diz se cada anúncio do leitor de tela é útil, se o foco avança de forma lógica ou se uma jornada completa continua operável com um método de entrada alternativo.

Antes da publicação:

• Percorra os principais fluxos do iOS com VoiceOver e os do Android com TalkBack sem olhar para a tela.
• Aumente o tamanho do texto do sistema e verifique cortes, sobreposições, controles ocultos e conteúdo perdido.
• Confira se botões, links, formulários e menus possuem nomes, funções, estados e uma ordem de foco claros.
• Teste a PWA com navegação por teclado, zoom do navegador e vários tamanhos de janela.

As ferramentas automáticas detectam problemas importantes. Elas não entendem se um rótulo faz sentido, se uma instrução é cognitivamente clara ou se concluir uma tarefa é frustrante. Testes manuais — idealmente com pessoas com deficiência — continuam essenciais.

A vantagem de um design system é seu efeito multiplicador. O GoodBarber constrói as telas a partir de fundamentos compartilhados e componentes reutilizáveis. Cor, tipografia, espaçamento, forma e navegação são regras reutilizadas em todo o app, não decorações isoladas. Você pode conhecer o Design System do GoodBarber para ver como essas camadas trabalham juntas.

Esse efeito multiplicador também cria uma divisão clara de responsabilidades:

O Design System do GoodBarber elimina parte do trabalho repetitivo de acessibilidade ao aplicar regras compartilhadas de tipografia, cor, espaçamento e componentes em todo o app. Você ainda precisa validar a interface e o conteúdo resultantes em cada plataforma.

As WCAG se aplicam a apps móveis nativos?

As WCAG foram escritas para conteúdo web, mas seus princípios e critérios de sucesso são amplamente usados no trabalho de acessibilidade móvel. O rascunho WCAG2Mobile do W3C explica como aplicar os critérios de nível A e AA das WCAG 2.2 a apps móveis nativos, web e híbridos. As orientações são informativas: não constituem uma norma móvel separada nem garantem conformidade legal.

Um app builder pode criar automaticamente um app acessível?

Não. Componentes reutilizáveis, padrões legíveis e regras globais de design podem criar uma base mais sólida, mas a acessibilidade também depende da configuração, do conteúdo, dos recursos de terceiros e das jornadas completas. O app gerado ainda precisa ser testado.

O que devo testar primeiro em um app móvel existente?

Comece pelos caminhos que os usuários não podem evitar: abrir o app, navegar, entrar na conta, encontrar conteúdo e concluir a ação principal. Teste-os com leitor de tela, texto ampliado e movimento reduzido e depois confira áreas de toque, erros de formulário e alternativas de mídia.

Qual é o contraste mínimo de texto para um app móvel?

O nível AA das WCAG 2.2 estabelece uma proporção mínima de contraste de 4,5:1 para texto normal e 3:1 para texto grande. Esses limites também são usados com frequência ao avaliar interfaces móveis por meio das orientações WCAG2Mobile. Trate-os como um piso, não como um objetivo de design.

Onde altero essas configurações no GoodBarber?

Abra Meu App > Estilo do app para gerenciar cores globais, fontes, margens, botões, animações e resposta tátil. Os rótulos e layouts de navegação são configurados na estrutura do app. Acompanhe o resultado na prévia e depois teste as versões iOS, Android e PWA geradas antes de publicar.

Um app acessível não é um estilo visual específico. É uma série de decisões que permite que mais pessoas percebam o conteúdo, entendam a interface e concluam a tarefa. Crie seu app com o GoodBarber, construa essa base uma vez e melhore-a com evidências de usuários reais.