Acessibilidade em apps: VoiceOver e TalkBack sem mistério

Pessoas cegas ou com baixa visão usam o celular com leitores de tela: o VoiceOver no iPhone e o TalkBack no Android. O leitor anuncia cada elemento e a pessoa navega por gestos. Um app que não foi pensado para isso fica inutilizável.

O básico no React Native

• `accessibilityLabel` em botões com ícone: "Adicionar ao carrinho", não "botão".
• `accessibilityRole` correto: button, link, header, image.
• `accessibilityHint` quando a ação não for óbvia.
• `accessibilityState` para selecionado, desabilitado, marcado.
• Imagens decorativas ocultadas do leitor; imagens informativas com descrição.

Navegação e foco

1. 1.Ordem lógica de leitura, seguindo a ordem visual.
2. 2.Agrupar elementos de um card para não ler cada pedaço separadamente.
3. 3.Mover o foco para modais e mensagens importantes quando aparecerem.
4. 4.Anunciar mudanças como "item adicionado".

Além dos leitores de tela

• Tamanho de fonte do sistema: o layout precisa aguentar textos maiores.
• Áreas de toque grandes.
• Contraste (Contraste de cores e WCAG: como checar em cinco minutos, Dark mode no app: tema do sistema, contraste e imagens).
• Alternativa a gestos complexos (Gestos nativos no React Native: arrastar, deslizar e soltar com fluidez).
• Movimento reduzido (prefers-reduced-motion: animação com respeito a quem sente desconforto).

Teste de verdade

Ative o VoiceOver e o TalkBack e tente completar as tarefas principais do app de olhos fechados. É o teste mais revelador que existe.

A We Codex desenvolve apps acessíveis. Veja aplicativos nativos ou fale com a gente.