Boas Práticas de Acessibilidade
Um resumo condensado das 25 melhores práticas mais importantes, extraídas de todas as páginas desta seção.
//
Busque em todas as páginas da documentação
Um resumo condensado das 25 melhores práticas mais importantes, extraídas de todas as páginas desta seção.
Nomeie todo controle interativo: Forneça accessibilityLabel, texto visível ou accessibilityLabelledBy - botões apenas com ícones sem nomes falham no VoiceOver e na revisão da loja.
Defina o accessibilityRole correto: Use button para ações, link para navegação, header para títulos de seção e switch em alternâncias nativas - os papéis definem as expectativas do usuário.
Exponha o estado com accessibilityState: Comunique selected, disabled, checked e expanded - nunca confie apenas na cor para seleção ou erros.
Oculte conteúdo decorativo: Defina accessible={false} e importantForAccessibility="no-hide-descendants" em ornamentos, chevrons redundantes e arte de fundo.
Exija alvos de 44×44 pt: Use minHeight, padding ou hitSlop em visuais pequenos - usuários de toque e controle de interruptor precisam de regiões de toque generosas.
Centralize semântica no sistema de design: Envolventes AppButton, IconButton e Field exigem rótulos no nível do tipo - recursos não devem reinventar padrões Pressable brutos.
Encaminhe props de acessibilidade em primitivos: Componentes personalizados aceitam e passam accessibilityLabel, accessibilityHint e accessibilityState como Pressable subjacente.
Placeholder não é um rótulo: TextInput precisa de um rótulo visível ou accessibilityLabelledBy - campos apenas com placeholder falham nas auditorias de formulário.
Anuncie atualizações dinâmicas significativas: Use AccessibilityInfo.announceForAccessibility ou accessibilityLiveRegion para contagens de carrinho, erros de envio e conclusão assíncrona - não para cada re-renderização.
Agrupe linhas de lista em uma parada de foco: Cartões clicáveis devem mesclar título, preço e metadados em um único rótulo - reduza os gestos de deslizar para TalkBack e Controle de Interruptor.
Teste o VoiceOver em um iPhone físico: A fumaça do simulador é insuficiente - o comportamento do rotor, o tempo das dicas e as peculiaridades do foco aparecem no dispositivo.
Teste o TalkBack em um Android físico: importantForAccessibility e regiões ativas diferem do iOS - envie apenas após a passagem pelo dispositivo Android.
Consulte testes por papel e nome: getByRole('button', { name: 'Save' }) da React Native Testing Library alinha CI com tecnologia assistiva - testID sozinho esconde lacunas de rótulo.
Execute eslint-plugin-react-native-a11y em CI: Pegue rótulos ausentes antes da revisão - trate o lint como necessário, não suficiente.
Permita a escala de fonte no texto do corpo: allowFontScaling é verdadeiro por padrão - nunca desative globalmente; limite UI densas com maxFontSizeMultiplier em vez disso.
Use layouts flexíveis em tamanhos de texto grandes: Prefira minHeight, flexWrap e reflow de coluna em vez de height fixo + numberOfLines={1} em rótulos primários.
Leia a escala da fonte ao retomar o aplicativo: PixelRatio.getFontScale() após AppState ativo - os usuários mudam o tamanho do texto enquanto seu aplicativo está em segundo plano.
Honre o Reduzir Movimento: Assine reduceMotionChanged e passe ReduceMotion.System para animações de tempo e entrada do Reanimated.
Nunca bloqueie tarefas em animação: Usuários com movimento reduzido ativado devem atingir o estado final da UI instantaneamente - forneça alternativas não gestuais para ações de deslizar.
Prenda o foco modal: Defina accessibilityViewIsModal em folhas e diálogos; restaure o foco para o gatilho ao dispensar com setAccessibilityFocus.
Mova o foco em mudanças de navegação: Seleção mestre-detalhe, etapas de assistente e sucesso pós-envio devem direcionar o foco do leitor de tela para o novo título principal.
Habilite a travessia do teclado de hardware: focusable em controles Pressable acionáveis e returnKeyType="next" em formulários - crítico para iPad e DeX.
Execute a lista de verificação de auditoria antes do RC: Nível 1-2 a cada lançamento; pontuação P0/P1/P1 - veja Lista de Verificação de Auditoria de Acessibilidade.
Coordene com a política de animações: Combine verificações AccessibilityInfo com ReduceMotion.System do Reanimated - veja Movimento Reduzido e Movimento Reduzido de Animações.
Documente lacunas conhecidas para compradores corporativos: Acompanhe as pontuações da lista de verificação por lançamento; publique o contato de acessibilidade e o cronograma de remediação - a aquisição pergunta antes dos usuários.
Versões da Stack: Esta página foi escrita para React 19.2.3, React Native 0.86.0 e Expo SDK 57 (
expo~57.0.4).
Revisado por Chris St. John·Última atualização: 16 de jul. de 2026