React Native

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 using assistive technology.

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 for automated testing in XML.

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. Note the application utilizes both manual and automated scanning capabilities, but React Native support is only available through automated testing. 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. Note the application utilizes both iOS frameworks, the XCUI example 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.

axe Linter Support

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. The axe Accessibility Linter VSCode Extension and axe Linter Server now include React Native support which can help you catch bugs like these prior to UI testing.