A.M.A. stands for Accessible Mobile App and is a React Native library that offers the best accessibility tooling experience as well as expert guides to support you with accessibility best practices while developing your app.
The library consists of
- Runtime checks that help you catch common accessibility issues during development.
- A set of popular components that are designed with accessibility in mind.
- Extensive guidelines to help you understand how accessibility should work when manually testing your app.
- A checklist which condenses these guidelines, explaining their intended functionality against specific features or components.
AMA consists of a family of packages under the npm @react-native-ama namespace.
These packages are designed to work independently, allowing you to pick and choose the ones that suit your needs.
This modular approach enables developers to create a tailored experience for their applications without the overhead of unnecessary dependencies.
Adopting an "accessibility-first" approach is the best way to ensure that digital experiences are inclusive for everyone. By prioritizing accessibility in the early stages of code development, you avoid having to later apply retroactive fixes which can be very time-consuming, expensive and difficult.
When you wrap your application with the AMAProvider from the @react-native-ama/core package, AMA begins scanning your UI for accessibility (a11y) issues as the app is running.
If any issues are found at the end of a scan, AMA will:
- Highlight the offending component directly on the screen.
- Print a detailed report of the issue to the console.
- Display a summary of the total number of errors and warnings detected.
You can use the built-in developer UI to get more information about the issues affecting each component. As you modify your code to fix them, AMA reacts to the changes and removes the issues from the report in real-time.
| Real Time scanning | AMA in-app info |
|---|---|
 |
 |
AMA is made of the following packages:
@react-native-ama/core: the core components and hooks, providers and consumers used by AMA packages@react-native-ama/animations: to create accessible animations@react-native-ama/react-native: for accessibility-first React Native replacement components@react-native-ama/forms: to create accessible forms@react-native-ama/lists: to create accessible lists@react-native-ama/bottom-sheet: to create accessible bottom sheets
The core package, is the minimum installable setup for AMA to function. This package contains the AMA context provider and consumer as well various other hooks and utilities for focusing, WCAG checks, accessibility tree management, etc.
Start off by installing core and wrapping your app in the <AMAProvider>. Then add any other AMA packages you wish to make use of for building an accessible mobile app.
1. Install the core package:
yarn add @react-native-ama/corenpm install @react-native-ama/core2. Wrap the App in <AMAProvider>
import { AMAProvider } from '@react-native-ama/core';
export const App = () => {
return (
<AMAProvider>
<YourApp />
</AMAProvider>
);
};You can use the playground app within this repository to see how AMA checks work in practice. The playground can also be used to learn how to fix accessibility issues in your app.
The documentation contains everything you need to know about @react-native-ama/.... It contains several sections in order of importance when you first get started:
- Getting started — contains the "Getting Started" guide.
- Packages — documentation for each package under React Native AMA
- Guidelines — mobile accessibility guidelines enforced by AMA
- Checklist — condensed guidelines enforced by AMA
You can find the raw markdown files inside this repository's docs folders.
Please see our Contributing guide.
Active: NearForm (Previously Formidable) is actively working on this project, and we expect to continue work on this project for the foreseeable future. Bug reports, feature requests and pull requests are welcome.