Native versus cross-platform frameworks to develop accessible apps
May 1, 2024
It's important to consider accessibility when developing an app. Over 1 billion people in the world have a disability. And 50% of all people use accessibility features on their mobile devices.
A question we are often asked is: "Which framework should I choose to develop an accessible app?"
In this article, we are comparing the pros and cons of Android, iOS, Flutter, React Native and Xamarin. And we added Web equivalents. A conclusion is drawn at the end.
1. Orientation
Apps should support multiple orientations (portrait and landscape) to ensure users can hold devices in their preferred way.
Framework | Feature | Pros | Cons |
|---|---|---|---|
Android | All orientations supported by default |
| |
iOS |
| 'Upside Down' disabled by default | |
Flutter | Flexible |
| |
React Native | expo-screen-orientation or native | Flexible |
|
Xamarin | Device Orientation or native | Flexible |
|
Web | Extensive |
|
2. Text scaling
Apps should support text scaling, to ensure users can read text in the font size they need.
Framework | Feature | Pros | Cons |
|---|---|---|---|
Android | Scales automatically |
| |
iOS |
| Write scaling implementation | |
Flutter | Scales automatically |
| |
React Native | Scales automatically |
| |
Xamarin |
| Write scaling implementation | |
Web | Scales automatically |
|
3. Contrast
Apps should have sufficient contrast, to ensure users can read text and distinguish interface elements.
Framework | Feature | Pros | Cons |
|---|---|---|---|
Android |
|
| |
iOS | Built-in high contrast support |
| |
Flutter |
|
| |
React Native |
|
| |
Xamarin |
|
| |
Web |
|
|
4. Name
Apps should provide an accessible name for interactive elements, to ensure users of assistive technologies can identify them.
Framework | Feature | Pros | Cons |
|---|---|---|---|
Android | Flexible |
| |
iOS | Flexible |
| |
Flutter | Flexible |
| |
React Native | Flexible |
| |
Xamarin | Flexible |
| |
Web | Flexible |
|
5. Role
Apps should provide an accessible role for elements, to ensure users of assistive technologies know their intent.
Framework | Feature | Pros | Cons |
|---|---|---|---|
Android | Custom roles |
| |
iOS |
| No custom roles | |
Flutter | Semantics → role |
| No custom roles |
React Native |
| No custom roles | |
Xamarin |
| 3rd party library, uses contentDescription | |
Web | Custom roles |
|
6. Value
Apps should provide an accessible value for elements, to ensure users of assistive technologies know their current value.
Framework | Feature | Pros | Cons |
|---|---|---|---|
Android |
| Limited types | |
iOS | Flexible |
| |
Flutter | Semantics → value | Flexible |
|
React Native | Flexible |
| |
Xamarin | Not supported |
| Can’t set accessibility value |
Web | Flexible |
|
7. State
Apps should provide an accessible state for elements, to ensure users of assistive technologies know their current state.
Framework | Feature | Pros | Cons |
|---|---|---|---|
Android | Flexible | Requires Android 11 (API 30) | |
iOS |
| No custom states | |
Flutter | Semantics → state |
| No custom states |
React Native |
| No custom states | |
Xamarin | Not supported |
| Can’t set accessibility state |
Web | ARIA states, e.g. aria-selected | Extensive |
|
8. Focus order
Apps should provide a logical focus order, allowing users of assistive technologies to navigate efficiently.
Platform | Feature | Pros | Cons |
|---|---|---|---|
Android | Single adjustment | Two API’s | |
iOS | Full control | Keep array up-to-date | |
Flutter | Flexible |
| |
React Native | Not supported |
| Can’t change accessibility order |
Xamarin | Flexible | Keep indices up-to-date | |
Web | Flexible | Keep indices up-to-date |
9. Focus change
Apps might need to move the focus of assistive technologies, to ensure users end up at the right element.
Platform | Feature | Pros | Cons |
|---|---|---|---|
Android |
|
| |
iOS | UIAccessibility.Notification → screenChanged or layoutChanged | Two types |
|
Flutter | Not supported |
| Can’t change accessibility focus |
React Native |
|
| |
Xamarin |
| 3rd party library | |
Web | Multiple options |
|
10. Status messages
Apps should communicate major interface changes to assistive technologies, to ensure users know what's going on.
Platform | Feature | Pros | Cons |
|---|---|---|---|
Android | AccessibilityEvent → TYPE_ANNOUNCEMENT or | Two options | |
iOS | Simple |
| |
Flutter | Easy |
| |
React Native | Easy |
| |
Xamarin | Easy | 3rd party library | |
Web |
| Less control |
Conclusion
So, which framework do we recommend for accessible app development? Native frameworks provide the best accessibility support.
It may not be feasible to maintain two codebases and two development teams. Fortunately, cross-platform frameworks are expanding their support for accessibility features.
But beware, when using cross-platform frameworks you may not be able to access certain accessibility features due to layers of abstraction. If you want to develop the most accessible app, native is always the best choice.
Framework | Score | Verdict |
|---|---|---|
Android | 100% | Full support |
iOS | 100% | Full support |
Web | 100% | Full support |
Flutter | 90% | Good support, lacks accessibility focus change |
React Native | 90% | Good support, lacks accessibility order change |
Xamarin | 50-80% | Mediocre support, lacks accessibility state/value, requires 3rd party libraries |
Check our in-depth documentation for further guidance:
- Learn about Android accessibility
Android accessibility
Android has an accessibility layer that helps users to navigate their Android devices more easily. By integrating accessibility features, you can improve your app's usability, particularly for users with disabilities.
- Learn about iOS accessibility
iOS accessibility
iOS has built-in accessibility features, accessibility APIs, and developer tools which provide an extraordinary opportunity to deliver a superior mobile experience to every user, including those with disabilities.
- Learn about Flutter accessibility
Flutter accessibility
Flutter is committed to supporting developers in making their apps more accessible. It has built-in support for accessibility features provided by the underlying operating system.
- Learn about React Native accessibility
React Native accessibility
React Native has accessibility APIs which let your app accommodate all users. You can integrate apps with assistive technologies like the screen readers VoiceOver and TalkBack.
- Learn about Xamarin accessibility
Xamarin accessibility
Xamarin has features to create apps which work well with accessibility features such as large type, high contrast, zoom in, screen reading, visual or haptic feedback cues, and alternative input methods.
Credits
This article is an adapted version of the talk Jan Jaap de Groot gave at the #id24 conference on 21 September 2023. You can watch the recording for more details.
