Accessibility as a First-Class Citizen with React Native AMA

A.M.A. stands for Accessible Mobile App and is react native library that aim offers the best accessibility tooling experience and guides to guide you through accessibility best practices while you code your app. That's why we created A.M.A., a set of components and hooks designed to enforce minimum accessibility requirements. This is combined with extensive guidelines to help you understand how accessibility should work when manually testing your app. Finally we have provided a checklist which condenses these guidelines, explaining their intended functionality against specific features or components.

While in development AMA also provides run time accessibility checks against components

Example of AMA checks performed in development:

Note

This is an example of a runtime failure detected by AMA with additional information and links to guidelines provided in the console.

Example of additional console 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/extras: extra compound components and hooks beyond the scope of the base React Native components for building accessible react native apps

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 App in <AMAProvider>

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

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

📃 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.