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 app para acessibilidade sem acesso ao código fonte. Para apps escritos em React Native, você pode executar verificações de acessibilidade em um dispositivo físico ou usando um simulador/emulador. Para os testes de acessibilidade mais abrangentes do seu app 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

Os testes de acessibilidade com axe DevTools Mobile para aplicações React Native são suportados em dois métodos diferentes de Testes de UI: Appium ou Nativo. Ambos têm suas vantagens, mas principalmente se relacionam à forma como os seus testes são feitos atualmente e ao nível de conforto da sua equipe com a implementação de testes de UI.

Opção 1: Appium

Se você já está usando o Appium para testar seu aplicativo móvel ou procura uma solução para testar multiplataforma, o plugin axe DevTools Mobile para Appium oferece uma integração para testar acessibilidade rapidamente.

Siga o guia de introdução ao axe DevTools Mobile para Appium.

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 sua aplicação React Native por meio de testes automatizados antes que eles cheguem à produção.

Por que duas plataformas?

As plataformas entre iOS e Android são simplesmente diferentes. Fabricadas por empresas diferentes, nenhuma promete conformidade com quaisquer 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 dos testes de UI, podemos testar automaticamente a acessibilidade do seu aplicativo móvel o mais próximo possível da experiência real de alguém com deficiência.

Android

Os testes de acessibilidade no Android são suportados através dos testes Espresso. Do seu projeto React Native, selecione a pasta android e arraste-a para o Android Studio para abrir o projeto. Uma vez que o Android Studio termine de importar, siga o guia de introdução.

Se você precisa 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 as verificações imediatamente. Abra o ExampleEndToEndAccessibilityTest.kt arquivo para ver um exemplo completo de testes automatizados com axe DevTools para Android. Este aplicativo é inacessível para mostrar as etapas de implementação do axe DevTools Mobile e sua detecção de problemas.

iOS e iPadOS

Os testes de acessibilidade na plataforma da Apple são suportados em nosso framework axeDevToolsXCUI. Do seu projeto React Native, abra a pasta ios e encontre o workspace do seu projeto, terminando em .xcworkspace. Clique duas vezes para abrir o workspace no Xcode. Agora você pode seguir nosso guia para começar com o axeDevToolsXCUI.xcframework.

Se você precisa 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 as verificações imediatamente. O exemplo necessário para testes React Native está disponível na pasta axe-devtools-ios-sample-appUITests e é nomeado SampleUITests-XCUI.swift. Este aplicativo é 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 VSCode axe Accessibility Linter e o Servidor axe Linter ambos oferecem suporte ao React Native.

Detecte problemas de acessibilidade enquanto desenvolve novas funcionalidades ou corrige bugs com o axe Linter, depois use o axe DevTools Mobile para mergulhar mais profundamente em testes de acessibilidade com testes automatizados, direcionados à plataforma.

A funcionalidade atualmente inclui seis regras que são executadas em arquivos React Native (.js, .jsx, .ts e .tsx). Por favor, 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 entrar em contato com 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 na tecnologia assistiva não entender como interpretar corretamente os componentes para a pessoa que está usando sua aplicação. Isso significa que o aplicativo pode se tornar 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 a tecnologia assistiva. Uma vez que os componentes tenham os papéis adequados para serem detectados, o axe DevTools Mobile poderá fazer uma análise mais profunda para garantir que outras propriedades de acessibilidade estejam presentes, sejam precisas e significativas para seu público com deficiência.