Acessibilidade prática em design de interfaces para apps

O que é acessibilidade (na prática) em apps

Acessibilidade em interfaces mobile é projetar e implementar telas para que pessoas com diferentes capacidades (visuais, motoras, cognitivas e auditivas) consigam perceber, entender e operar o app com autonomia. Na prática, isso significa: conteúdo legível com ajustes do sistema, controles fáceis de tocar, navegação previsível por leitor de tela e feedback que não dependa apenas de cor ou animação.

Um bom atalho mental: se uma ação importante só funciona “olhando”, “tocando com precisão” ou “lembrando demais”, ela provavelmente não está acessível.

Requisitos essenciais de acessibilidade no mobile

1) Contraste suficiente (texto, ícones e estados)

Contraste não é só para texto: ícones, bordas de campos, estados desabilitado/erro e gráficos também precisam ser distinguíveis. Um erro comum é usar cinza claro para texto secundário e placeholders, tornando-os ilegíveis em ambientes externos.

• Garanta contraste adequado entre texto/ícones e fundo.
• Evite comunicar estado apenas por cor (ex.: “campo em vermelho”). Combine com texto e/ou ícone.
• Cuidado com texto sobre imagens: use overlay/blur ou caixa de fundo para manter legibilidade.

2) Tamanho de fonte e suporte a text scaling

Usuários podem aumentar o tamanho do texto nas configurações do sistema. Se a UI “quebra” (corta texto, sobrepõe botões, esconde rótulos), a experiência se torna inacessível.

• Evite alturas fixas para componentes com texto (botões, cards, células de lista). Prefira altura mínima e conteúdo expansível.
• Permita quebra de linha em títulos e descrições quando necessário.
• Evite truncar informações essenciais com reticências; se precisar truncar, ofereça forma de ver o conteúdo completo.

3) Foco e navegação por leitor de tela

Leitores de tela (como VoiceOver/TalkBack) navegam por elementos focáveis em uma ordem. Se a ordem for ilógica, o usuário “se perde” mesmo que a tela pareça correta visualmente.

Continue em nosso aplicativo e ...

• Ouça o áudio com a tela desligada
• Ganhe Certificado após a conclusão
• + de 5000 cursos para você explorar!

ou continue lendo abaixo...

Baixar o aplicativo

• Todo elemento interativo deve ser focável e anunciado com nome e função (ex.: “Botão, Adicionar ao carrinho”).
• Evite elementos decorativos recebendo foco (ícones puramente visuais).
• Ao abrir um modal, o foco deve ir para o título/primeiro campo do modal; ao fechar, voltar ao elemento que abriu.

4) Rótulos e hints (nome acessível e instruções)

O leitor de tela precisa de um “nome acessível” para cada controle. Visualmente, isso costuma ser o rótulo (label), mas pode ser um texto associado, um atributo de acessibilidade ou uma descrição.

• Use rótulos persistentes para campos (não dependa de placeholder).
• Use hints para explicar ações não óbvias (ex.: gesto, consequência, formato esperado).
• Para ícones, forneça descrição (ex.: “Pesquisar”, “Filtrar”, “Compartilhar”).

5) Ordem lógica (leitura e tabulação)

A ordem de leitura deve seguir a estrutura mental da tarefa: título → contexto → campos → ações → ajuda/links secundários. Se a UI usa colunas, cards ou elementos flutuantes, a ordem do foco pode ficar errada.

• Garanta que a ordem do foco siga a ordem visual principal (de cima para baixo, esquerda para direita, respeitando o idioma).
• Em listas, cada item deve ser anunciado de forma completa (nome, preço, status, ação).
• Evite “pular” para botões do rodapé antes do conteúdo principal.

6) Áreas de toque (alvos fáceis de acertar)

Em mobile, acessibilidade também é motora: dedos variam em tamanho, há tremor, uso com uma mão e telas pequenas. Alvos pequenos geram erros e frustração.

• Use áreas de toque generosas para botões, ícones e itens de lista.
• Separe ações próximas (ex.: “Editar” e “Excluir”) com espaçamento suficiente para evitar toque acidental.
• Não use apenas texto pequeno como alvo; transforme em botão/área clicável maior.

7) Feedback não apenas visual

Se o app só mostra feedback por cor, animação ou posição, usuários com baixa visão, daltonismo ou usando leitor de tela podem não perceber. Feedback deve ser redundante: visual + textual + (quando aplicável) sonoro/háptico.

• Erros de validação: mostre mensagem clara e associe ao campo.
• Sucesso: confirme com texto (“Salvo”) e, se fizer sentido, vibração leve.
• Carregamento: anuncie estado (ex.: “Carregando resultados”) e evite travar foco.

8) Linguagem clara (microcopy acessível)

Linguagem clara reduz carga cognitiva e melhora a compreensão para todos. Evite jargões, abreviações ambíguas e instruções incompletas.

• Use frases curtas e diretas: “Enviar código” em vez de “Prosseguir com a autenticação”.
• Explique formatos: “CPF (11 dígitos)” ou “Senha (mín. 8 caracteres)”.
• Mensagens de erro devem dizer o que aconteceu e como corrigir.

Problemas comuns (e como corrigir)

Ícones sem rótulo

Problema: uma barra com ícones (lupa, funil, sino) sem texto. Visualmente pode ser “óbvio”, mas o leitor de tela anuncia apenas “Botão” ou “Imagem”.

Correção: forneça nome acessível e, quando útil, hint.

// Exemplo conceitual (independente de framework):// Ícone de buscar precisa de um nome acessívelaccessibilityLabel = "Pesquisar"accessibilityHint = "Abre a busca"

Placeholder como label

Problema: o campo mostra “Email” apenas como placeholder. Ao digitar, o texto some e o usuário perde o contexto; leitores de tela podem anunciar de forma inconsistente.

Correção: use rótulo persistente (acima do campo ou flutuante) e deixe placeholder para exemplo de formato (opcional).

• Label: “Email”
• Placeholder (opcional): “nome@dominio.com”

Baixo contraste em texto secundário e estados desabilitados

Problema: texto cinza claro em fundo branco, bordas quase invisíveis, botão desabilitado que parece “sumir”.

Correção: aumente contraste e adicione pistas adicionais (ex.: ícone de bloqueio, texto “Indisponível”, explicação do motivo).

Ordem de foco confusa em cards e listas

Problema: em um card de produto, o foco vai para “Curtir” → “Compartilhar” → “Título” → “Preço”, quebrando a compreensão.

Correção: reordene a sequência de foco para refletir a leitura: título → preço → status → ações. Se o card inteiro é clicável, avalie se ações internas devem ser separadas e bem anunciadas.

Área de toque pequena em ícones no topo

Problema: ícones de 20–24px com área clicável igual ao tamanho do ícone.

Correção: mantenha o ícone visual, mas aumente a área de toque (padding) e garanta espaçamento entre ícones.

Erro mostrado só por cor

Problema: campo fica vermelho, mas sem mensagem. Usuário não sabe o que corrigir; leitor de tela pode não anunciar mudança.

Correção: inclua mensagem textual e associe ao campo; anuncie a mensagem quando o erro aparecer.

Passo a passo prático: como revisar uma tela com foco em acessibilidade

Passo 1 — Faça um “scan” visual rápido

• Consigo ler tudo em ambiente claro? (simule brilho alto/baixo)
• Há textos pequenos demais ou muito finos?
• Estados (erro/sucesso/desabilitado) são entendidos sem depender só de cor?

Passo 2 — Teste text scaling do sistema

• Aumente o tamanho de fonte do sistema para um nível alto.
• Verifique: títulos quebram? botões estouram? campos cortam texto? listas ficam ilegíveis?
• Corrija usando layouts flexíveis, quebra de linha e componentes com altura mínima.

Passo 3 — Navegue com leitor de tela (teste manual simples)

• Ative o leitor de tela no dispositivo.
• Passe por todos os elementos focáveis na tela.
• Confirme se cada item é anunciado com: nome + tipo + estado (quando aplicável). Exemplos: “Notificações, botão”; “Wi‑Fi, alternância, ligado”.
• Verifique se a ordem faz sentido e se não há elementos “fantasmas” recebendo foco.

Passo 4 — Valide rótulos, hints e agrupamentos

• Campos têm label persistente?
• Botões têm texto claro (evite “OK”, “Enviar” sem contexto)?
• Ícones têm descrição?
• Se houver grupos (ex.: endereço com vários campos), há um título/descrição que contextualiza?

Passo 5 — Cheque áreas de toque e espaçamento entre ações

• Tente usar o app com uma mão.
• Toques acidentais acontecem em ações perigosas (excluir, cancelar)?
• Itens de lista são fáceis de selecionar sem acertar “no pixel”?

Passo 6 — Verifique feedback e mensagens

• Erros: dizem o que fazer para corrigir?
• Carregamento: há indicação clara e, se necessário, anúncio para leitor de tela?
• Sucesso: há confirmação textual (não só animação)?

Checklist por tela (use como padrão de revisão)

Como validar com ferramentas (e sem ferramentas)

Validação com ferramentas

• Inspeção de acessibilidade: use o inspetor/árvore de acessibilidade para confirmar nomes, roles, estados e ordem de foco.
• Verificador de contraste: meça contraste de texto/ícones/estados (incluindo desabilitado e placeholders).
• Auditoria de UI: rode verificações automáticas para detectar alvos pequenos, falta de rótulos e problemas de foco (quando disponível no seu ambiente).

Testes manuais simples (rápidos e eficazes)

• Teste sem olhar: com leitor de tela ativado, tente completar a tarefa (login, busca, compra) sem usar visão.
• Teste de zoom/texto grande: aumente texto e verifique se a tarefa ainda é possível sem perder ações.
• Teste de luz forte: use o app sob luz intensa para revelar baixo contraste.
• Teste de “dedão”: use uma mão e tente tocar ações no topo e em listas; observe erros de toque.
• Teste de erros: provoque erros (campo vazio, formato inválido, senha curta) e avalie se a mensagem orienta correção e é anunciada.