Skip to main content
Logo Appt Light

Native versus cross-platform frameworks to develop accessible apps

December 28, 2023

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.

Screenshot of an app in landscape mode, the layout has changed to two columns

Framework

Feature

Pros

Cons

Android

android:screenOrientation

All orientations supported by default

 

iOS

UISupportedInterfaceOrientations

 

'Upside Down' disabled by default

Flutter

setPreferredOrientations

Flexible

 

React Native

expo-screen-orientation or native

Flexible

 

Xamarin

Device Orientation or native

Flexible

 

Web

@media query

Extensive

 

2. Text scaling

Apps should support text scaling, to ensure users can read text in the font size they need.

Screenshot of an app with increased font size, none of the text is truncated

Framework

Feature

Pros

Cons

Android

Scale-independent Pixels (sp)

Scales automatically

 

iOS

UIFontMetrics

 

Write scaling implementation

Flutter

fontSize

Scales automatically

 

React Native

fontSize

Scales automatically

 

Xamarin

SetEnableAccessibilityScalingForNamedFontSizes

 

Write scaling implementation

Web

(r)em unit / Browser zoom

Scales automatically

 

3. Contrast

Apps should have sufficient contrast, to ensure users can read text and distinguish interface elements.

Screenshot of an app, text colors are picked using a color picker, the contrast ratio is 4,77:1

Framework

Feature

Pros

Cons

Android

Color

 

 

iOS

Color

Built-in high contrast support

 

Flutter

Color

 

 

React Native

Color

 

 

Xamarin

Color

 

 

Web

<color>

 

 

4. Name

Apps should provide an accessible name for interactive elements, to ensure users of assistive technologies can identify them.

Screenshot of an app with Voice Control enabled, numbers and labels are indicated by tooltips

Framework

Feature

Pros

Cons

Android

contentDescription

Flexible

 

iOS

accessibilityLabel

Flexible

 

Flutter

semanticsLabel

Flexible

 

React Native

accessibilityLabel

Flexible

 

Xamarin

AutomationProperties.Name

Flexible

 

Web

aria-label

Flexible

 

5. Role

Apps should provide an accessible role for elements, to ensure users of assistive technologies know their intent.

Screenshot of an app showing that the role of elements has been marked for assistive technologies

Framework

Feature

Pros

Cons

Android

setRoleDescription or setClassName

Custom roles

 

iOS

accessibilityTraits

 

No custom roles

Flutter

Semantics → role

 

No custom roles

React Native

accessibilityRole

 

No custom roles

Xamarin

SemanticEffectsetDescription

 

3rd party library, uses contentDescription

Web

role / aria-roledescription

Custom roles

 

6. Value

Apps should provide an accessible value for elements, to ensure users of assistive technologies know their current value.

Screenshot of an app showing that a selected item has been marked as selected for assistive technologies

Framework

Feature

Pros

Cons

Android

AccessibilityNodeInfoCompat

 

Limited types

iOS

accessibilityValue

Flexible

 

Flutter

Semantics → value

Flexible

 

React Native

accessibilityValue

Flexible

 

Xamarin

Not supported

 

Can’t set accessibility value

Web

aria-valuenow / aria-valuetext

Flexible

 

7. State

Apps should provide an accessible state for elements, to ensure users of assistive technologies know their current state.

Screenshot of an app announcing a status message for screen reader users when loading or when errors are displayed

Framework

Feature

Pros

Cons

Android

setStateDescription and AccessibilityNodeInfoCompat

Flexible

Requires Android 11 (API 30)

iOS

accessibilityTraits

 

No custom states

Flutter

Semantics → state

 

No custom states

React Native

accessibilityState

 

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.

Screenshot of an app, showing the focus order using numbers displayed by Voice Control

Platform

Feature

Pros

Cons

Android

setAccessibilityTraversalBefore/After

Single adjustment

Two API’s

iOS

accessibilityElements

Full control

Keep array up-to-date

Flutter

SemanticsSortKey

Flexible

 

React Native

Not supported

 

Can’t change accessibility order

Xamarin

TabIndex and IsTabStop

Flexible

Keep indices up-to-date

Web

tabindex

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.

Screenshot of an app showing two scenarios where you might forcefully move the focus of assistive technologies, e.g. after scanning a QR-code or entering a pincode

Platform

Feature

Pros

Cons

Android

AccessibilityEventTYPE_VIEW_FOCUSED

 

 

iOS

UIAccessibility.NotificationscreenChanged or layoutChanged

Two types

 

Flutter

Not supported

 

Can’t change accessibility focus

React Native

setAccessibilityFocus

 

 

Xamarin

SemanticExtensionsSetSemanticFocus

 

3rd party library

Web

tabindex / focus()

 Multiple options

 

10. Status messages

Apps should communicate major interface changes to assistive technologies, to ensure users know what's going on.

Screenshot of an app announcing a status message for screen reader users when loading or when errors are displayed

Platform

Feature

Pros

Cons

Android

AccessibilityEventTYPE_ANNOUNCEMENT

or

View.announceFor Accessibility

 Two options

iOS

UIAccessibility.Notificationannouncement

Simple

 

Flutter

SemanticsServiceannounce

Easy

 

React Native

AccessibilityInfoannounceForAccessibility

Easy

 

Xamarin

SemanticExtensionsAnnounce

Easy

3rd party library

Web

aria-live

 

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:

  • Android logo (light)

    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 Android accessibility
  • iOS logo (light)

    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 iOS accessibility
  • Flutter logo (light)

    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 Flutter accessibility
  • React Native logo (light)

    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 React Native accessibility
  • Xamarin logo (light)

    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.

    Learn about Xamarin accessibility

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.

Video: Jan Jaap de Groot / Native mobile accessibility testing #id24 2023

Feedback?

Let us know!