React Native

Link to React Native copied to clipboard

Getting Started with accessibility testing in React Native.

Linting with axe Linter

The axe Accessibility Linter VSCode Extension and axe Linter Server now include React Native support.

Catch accessibility issues while building new features or fixing bugs with axe Linter, then use axe DevTools Mobile to take a deeper dive into accessibility testing with platform-targeted, automated tests.

The feature currently includes 6 rules that run on React Native files (.js, .jsx, .ts, and .tsx). Please see the following links or full axe Linter documentation to learn more about what each rule tests for and how to fix the issues detected by them:

Automated Testing

Accessibility testing with axe DevTools Mobile for React Native applications is supported in two different UI Testing methods: Appium or Native. Both have their advantages, but mostly relate to how your testing is happening today and your team's comfort level with implementing UI tests.

Option 1: Appium

If you are already using Appium to test your mobile application, or are looking for one solution to test cross-platform, the axe DevTools Mobile plugin for Appium offers an integration for testing accessibility quickly.

Follow the getting started guide with axe DevTools Mobile for Appium.

Option 2: UI Testing with Native Test Suites

Use axe DevTools for iOS and Android to quickly find accessibility issues in your React Native application through automated testing before they make it into production.

Why two frameworks?

The platforms between iOS and Android are simply different. Manufactured from different companies, neither promises to conform to any shared standards or expectations. This is a recipe to guarantee the end-user experience is different for each platform. Through UI testing, we can automatically test the accessibility of your mobile application as close as it gets to the real experience of someone with disabilities.

Android

Testing for accessibility on Android is supported through Espresso testing. From your React Native project, select the android folder and drag it to Android Studio to open the project. Once Android Studio finishes importing, follow the getting started guide.

If you need additional references in getting set up, we have a sample application on GitHub. Add your Deque credentials and follow the README to get started running scans right away. Open the ExampleEndToEndAccessibilityTest.kt file to see a full example of automated testing with axe DevTools for Android. This application is inaccessible to showcase the axe DevTools Mobile implementation steps and its issue detection.

iOS and iPadOS

Testing for accessibility on Apple's platform is supported in our axeDevToolsXCUI framework. From your React Native project, open the ios folder and find your project's workspace, ending in .xcworkspace. Double-click to open the workspace in Xcode. Now you can follow our guide for getting started with the axeDevToolsXCUI.xcframework.

If you need additional references in getting set up, we have a sample application on GitHub. Add your Deque credentials and follow the README to get started running scans right away. The example needed for React Native testing is available under the axe-devtools-ios-sample-appUITests folder and is named SampleUITests-XCUI.swift. This application is inaccessible to showcase the axe DevTools Mobile implementation steps and its issue detection.

Do I need both a linter and automated tests?

Absolutely. React Native takes one code base and ports it into two different platforms, which brings a lot of nuances and edge cases to how properties and views behave for each platform.

Here's an example, we found that React Native does not add the accessibility role automatically to many components which can result in assistive technology not understanding how to properly interpret components to the person using your application. That means the application could be completely unusable for some critical customer success paths. With the linter, you will be guided where to add those roles to ensure the component is available to assistive technology. Once the components have the proper roles to be detected, then axe DevTools Mobile can take a deeper dive to ensure other accessibility properties are present, accurate, and meaningful for your audience with disabilities.