Accessibility as a First-Class Citizen with React Native AMA

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

1. Runtime checks that help you catch common accessibility issues during development.
2. A set of popular components that are designed with accessibility in mind.
3. Extensive guidelines to help you understand how accessibility should work when manually testing your app.
4. 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.

Runtime Dev Tooling (Accessibility Checks)

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.

How it works

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.

Known limitation: React Native LogBox

AMA may report accessibility issues that originate from React Native's own LogBox/YellowBox overlay (the in-app warning and error UI), not from your own components. LogBox isn't built to AMA's accessibility standards, and there's no way for your code to fix it.

This is a known limitation, not a bug in your app. If it bothers you, disable LogBox with LogBox.ignoreAllLogs() — note this also silences every other LogBox warning, not just the ones AMA reports.

Real Time scanning	AMA in-app info

Getting started

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/core

or

npm install @react-native-ama/core

2. Wrap the App in <AMAProvider>

import { AMAProvider } from '@react-native-ama/core';

export const App = () => {
  return (
    <AMAProvider>
      <YourApp />
    </AMAProvider>
  );
};

Playground

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.

📃 Documentation

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.

🤝 Contributing

Please see our Contributing guide.

Maintenance Status

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.