React Native

This page is not available in the language you requested. You have been redirected to the English version of the page.

Link to this page copied to clipboard

Comece com testes de acessibilidade no React Native

Not for use with personal data

Usando o Mobile Analyzer

Com o Axe DevTools Mobile Analyzer, você pode testar qualquer aplicativo para acessibilidade sem acesso ao código-fonte. Para aplicativos escritos em React Native, você pode executar verificações de acessibilidade em um dispositivo físico ou usar um simulador/emulador. Para o teste de acessibilidade mais abrangente do seu aplicativo móvel multiplataforma, você deve executar verificações para as versões iOS e Android.

Saiba mais sobre como usar o Axe DevTools Mobile Analyzer:

Testes Automatizados

O teste de acessibilidade com Axe DevTools Mobile para aplicativos React Native é suportado em dois métodos diferentes de Teste de UI: Appium ou Nativo. Ambos têm suas vantagens, mas estão principalmente relacionados a como seu teste está acontecendo hoje e ao nível de familiaridade da sua equipe com a implementação de testes de UI.

Opção 1: Appium

Se você já está usando Appium para testar seu aplicativo móvel ou está procurando uma solução para testar em várias plataformas, os drivers do Appium do Axe DevTools Mobile oferecem uma integração para testar a acessibilidade rapidamente.

Após a instalação simples, configure sua suíte de testes automatizados para verificar problemas de acessibilidade. Os drivers suportam dois modos de uso:

Para um início rápido, use o Auto Scan para identificar problemas de acessibilidade automaticamente à medida que sua suíte de testes existente é executada:
- Auto Scan com o UIAutomator2 Driver
- Auto Scan com o XCUITest Driver
Para um controle mais detalhado e personalização em seus testes, configure para Teste Direcionado.

Opção 2: Testes de UI com Suites de Teste Nativas

Use o Axe DevTools para iOS e Android para encontrar rapidamente problemas de acessibilidade em seu aplicativo React Native através de testes automatizados antes que eles cheguem à produção.

Por que dois frameworks?

As plataformas entre iOS e Android são simplesmente diferentes. Fabricadas por empresas diferentes, nenhuma promete seguir padrões ou expectativas compartilhadas. Isso é uma receita para garantir que a experiência do usuário final seja diferente para cada plataforma. Através do teste de UI, podemos testar automaticamente a acessibilidade do seu aplicativo móvel o mais próximo possível da experiência real de uma pessoa com deficiência.

Android

O teste de acessibilidade no Android é suportado pelo teste Espresso. Do seu projeto React Native, selecione a pasta android e arraste-a para o Android Studio para abrir o projeto. Assim que o Android Studio terminar de importar, siga o guia de introdução.

Se você precisar de referências adicionais para se configurar, temos um aplicativo de exemplo no GitHub. Adicione suas credenciais Deque e siga o README para começar a executar varreduras imediatamente. Abra o arquivo ExampleEndToEndAccessibilityTest.kt para ver um exemplo completo de teste automatizado com Axe DevTools para Android. Este aplicativo está inacessível para mostrar as etapas de implementação do Axe DevTools Mobile e sua detecção de problemas.

iOS e iPadOS

O teste de acessibilidade na plataforma da Apple é suportado em nosso framework axeDevToolsXCUI. Do seu projeto React Native, abra a pasta ios e encontre o espaço de trabalho do seu projeto, terminando em .xcworkspace. Clique duas vezes para abrir o espaço de trabalho no Xcode. Agora você pode seguir nosso guia para começar com o axeDevToolsXCUI.xcframework.

Se você precisar de referências adicionais para se configurar, temos um aplicativo de exemplo no GitHub. Adicione suas credenciais Deque e siga o README para começar a executar varreduras imediatamente. O exemplo necessário para o teste React Native está disponível na pasta axe-devtools-ios-sample-appUITests e é chamado SampleUITests-XCUI.swift. Este aplicativo está inacessível para mostrar as etapas de implementação do Axe DevTools Mobile e sua detecção de problemas.

Linting com Axe Linter

A Extensão Axe Accessibility Linter para VSCode e o Axe Linter Server oferecem suporte para React Native.

Identifique problemas de acessibilidade enquanto desenvolve novos recursos ou corrige bugs com o Axe Linter, e depois use o Axe DevTools Mobile para aprofundar-se em testes de acessibilidade com testes automatizados voltados para a plataforma.

O recurso atualmente inclui seis regras que são executadas em arquivos React Native (.js, .jsx, .ts e .tsx). Veja os seguintes links ou a documentação completa do Axe Linter para saber mais sobre o que cada regra testa e como corrigir os problemas detectados por elas:

notes

Para acessar o Axe Linter, você deve contatar o suporte para que as licenças sejam atribuídas. Envie sua solicitação para helpdesk@deque.com.

Preciso de um linter e testes automatizados?

Com certeza. O React Native utiliza uma base de código e a porta para duas plataformas diferentes, o que traz muitas nuances e casos extremos sobre como as propriedades e as visualizações se comportam em cada plataforma.

Aqui está um exemplo: descobrimos que o React Native não adiciona automaticamente o papel de acessibilidade a muitos componentes, o que pode resultar em tecnologias assistivas não compreenderem como interpretar corretamente os componentes para a pessoa que está usando seu aplicativo. Isso significa que o aplicativo pode ser completamente inutilizável para alguns caminhos críticos de sucesso do cliente. Com o Axe Linter, você será orientado sobre onde adicionar esses papéis, para garantir que o componente esteja disponível para tecnologias assistivas. Assim que os componentes tiverem os papéis adequados para serem detectados, o Axe DevTools Mobile poderá aprofundar-se para garantir que outras propriedades de acessibilidade estejam presentes, precisas e significativas para o seu público com deficiência.