For more information about building apps, read the introduction to React Native or this tutorial on React.
In traditional methods of UI programming, creating this same interface would have required more code, created more complexity, and would have been a worse experience for developers trying to iterate and see their changes.
Measuring a framework’s accessibility
A benefit of using certain frameworks is simplification, but this can also hinder or remove the ability to create accessible features. To evaluate React Native, we used a three-step process:
- Create a glossary of capabilities available on the native platform, i.e., iOS or Android
- Map these capabilities to a universal set of requirements
- Analyze and score the framework’s ability to accurately build each capability
The list of accessibility capabilities available in iOS and Android is large. Creating a glossary required meticulous evaluation of a variety of platform documents, affiliated websites, and actual code. We left no stone unturned.
Next, we created a universal set of requirements based on a mixture of industry standards and Facebook-specific definitions. We then further organized them into specific guidelines. We used guidelines that could be demonstrated with examples for which we could assign a pass or fail rating. For example:
Category: Content management (grouping elements)
Native platforms (iOS and Android) have ways to group multiple elements into a single focusable unit for a screen reader. For instance, if a box of text and an image need to act as a single button, those elements must be correctly grouped in order to prevent them from being read separately or in the wrong order.
Android — expected behavior (PASS ✅)
When focusing on a grouped element, the announcement should contain the content of all grouped items. The items grouped should not be focusable independently.
Code example { … }
iOS — expected behavior (PASS ✅)
When focusing on a grouped element, the announcement should contain the content of all grouped items. The items grouped should not be focusable independently.
Code example { … }
Organizing the research
We knew that in order to maximize the usefulness of the research, we needed to boil it down into a digestible format. A dashboard could summarize achievements and encourage change by showing progress over time. Then progress would be a score derived from the overall pass rate of the stated requirements. We eventually realized that this method could be used to summarize other frameworks, as well, not just React Native.