Ga naar hoofdinhoud
Logo Appt Light

Native versus cross-platform frameworks om toegankelijke apps te ontwikkelen

28 december 2023

Het is belangrijk om toegankelijkheid in overweging te nemen bij het ontwikkelen van een app. Meer dan 1 miljard mensen in de wereld hebben een beperking. En 50% van alle mensen maakt gebruik van toegankelijkheidsfuncties op hun mobiele apparaten.

Een vraag die ons vaak wordt gesteld, is: "Welk framework moet ik kiezen om een toegankelijke app te ontwikkelen?"

In dit artikel vergelijken we de voor- en nadelen van Android, iOS, Flutter, React Native en Xamarin. En we hebben ook Web-equivalenten toegevoegd. Op het eind wordt een conclusie getrokken.

1. Oriëntatie

Apps dienen meerdere oriëntaties (staand en liggend) te ondersteunen om ervoor te zorgen dat gebruikers hun apparaten op de gewenste manier kunnen vasthouden.

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

Framework

Functie

Voordelen

Nadelen

Android

android:screenOrientation

Alle oriëntaties staan standaard aan 

 

iOS

UISupportedInterfaceOrientations

 

De 'Upside Down' oriëntatie is standaard uitgeschakeld

Flutter

setPreferredOrientations

Flexibel

 

React Native

expo-screen-orientation or native

Flexibel

 

Xamarin

Device Orientation or native

Flexibel

 

Web

@media query

Uitgebreide mogelijkheden

 

2. Tekstvergroting

Apps dienen tekstvergroting te ondersteunen, zodat gebruikers tekst kunnen lezen in de gewenste lettergrootte.

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

Framework

Functie

Voordelen

Nadelen

Android

Scale-independent Pixels (sp)

Schaalt automatisch

 

iOS

UIFontMetrics

 

Eigen vergroting logica implementeren

Flutter

fontSize

Schaalt automatisch

 

React Native

fontSize

Schaalt automatisch

 

Xamarin

SetEnableAccessibilityScalingForNamedFontSizes

 

Eigen vergroting logica implementeren

Web

(r)em unit / Browser zoom

Schaalt automatisch

 

3. Contrast

Apps dienen voldoende contrast te hebben, zodat gebruikers tekst kunnen lezen en interface-elementen kunnen onderscheiden.

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

Framework

Functie

Voordelen

Nadelen

Android

Color

 

 

iOS

Color

Ingebouwde ondersteuning voor hoog contrast

 

Flutter

Color

 

 

React Native

Color

 

 

Xamarin

Color

 

 

Web

<color>

 

 

4. Naam

Apps dienen een toegankelijke naam te verstrekken voor interactieve elementen, zodat gebruikers van ondersteunende hulpmiddelen ze kunnen identificeren.

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

Framework

Functie

Voordelen

Nadelen

Android

contentDescription

Flexibel

 

iOS

accessibilityLabel

Flexibel

 

Flutter

semanticsLabel

Flexibel

 

React Native

accessibilityLabel

Flexibel

 

Xamarin

AutomationProperties.Name

Flexibel

 

Web

aria-label

Flexibel

 

5. Rol

Apps dienen een toegankelijke rol te verstrekken voor elementen, zodat gebruikers van ondersteunende hulpmiddelen hun bedoeling begrijpen.

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

Framework

Functie

Voordelen

Nadelen

Android

setRoleDescription or setClassName

Aanpasbare rollen

 

iOS

accessibilityTraits

 

Geen aanpasbare rollen

Flutter

Semantics → role

 

Geen aanpasbare rollen

React Native

accessibilityRole

 

Geen aanpasbare rollen

Xamarin

SemanticEffectsetDescription

 

Externe bibliotheek, maakt gebruik van contentDescription

Web

role / aria-roledescription

Aanpasbare rollen

 

6. Waarde

Apps dienen een toegankelijke waarde te verstrekken voor elementen, zodat gebruikers van ondersteunende hulpmiddelen op de hoogte zijn van hun huidige waarde.

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

Framework

Functie

Voordelen

Nadelen

Android

AccessibilityNodeInfoCompat

 

Beperkte keuze uit waardes

iOS

accessibilityValue

Flexibel

 

Flutter

Semantics → value

Flexibel

 

React Native

accessibilityValue

Flexibel

 

Xamarin

Niet ondersteund

 

Waarde kan niet ingesteld worden

Web

aria-valuenow / aria-valuetext

Flexibel

 

7. Status

Apps dienen een toegankelijke status te verstrekken voor elementen, zodat gebruikers van ondersteunende hulpmiddelen op de hoogte zijn van hun huidige status.

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

Framework

Functie

Voordelen

Nadelen

Android

setStateDescription and AccessibilityNodeInfoCompat

Flexibel

Vereist Android 11 (API 30)

iOS

accessibilityTraits

 

Beperkte opties

Flutter

Semantics → state

 

Beperkte opties

React Native

accessibilityState

 

Beperkte opties

Xamarin

Niet ondersteund

 

Status kan niet ingesteld worden

Web

ARIA states, e.g. aria-selected

Uitgebreid

 

8. Focusvolgorde

Apps dienen een logische focusvolgorde te bieden, zodat gebruikers van ondersteunende hulpmiddelen efficiënt kunnen navigeren.

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

Platform

Functie

Voordelen

Nadelen

Android

setAccessibilityTraversalBefore/After

Individuele aanpassing

Twee functies voor één doel

iOS

accessibilityElements

Volledige controle

Indexering up-to-date houden

Flutter

SemanticsSortKey

Flexibel

 

React Native

Niet ondersteund

 

Volgorde kan niet aangepast worden

Xamarin

TabIndex and IsTabStop

Flexibel

Indexering up-to-date houden

Web

tabindex

Flexibel

Indexering up-to-date houden

9. Focusverplaatsing

Apps dienen de focus van ondersteunende hulpmiddelen te kunnen verplaatsen, zodat gebruikers op het juiste element terechtkomen.

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

Functie

Voordelen

Nadelen

Android

AccessibilityEventTYPE_VIEW_FOCUSED

 

 

iOS

UIAccessibility.NotificationscreenChanged of layoutChanged

Twee soorten

 

Flutter

Niet ondersteund

 

Focus kan niet verplaatst worden

React Native

setAccessibilityFocus

 

 

Xamarin

SemanticExtensionsSetSemanticFocus

 

Externe bibliotheek

Web

tabindex / focus()

 Meerdere opties

 

10. Statusberichten

Apps dienen belangrijke interfacewijzigingen te communiceren aan ondersteunende hulpmiddelen, zodat gebruikers op de hoogte zijn van gebeurtenissen.

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

Platform

Functie

Voordelen

Nadelen

Android

AccessibilityEventTYPE_ANNOUNCEMENT

of

View.announceFor Accessibility

 Twee opties

iOS

UIAccessibility.Notificationannouncement

Makkelijk

 

Flutter

SemanticsServiceannounce

Eenvoudig

 

React Native

AccessibilityInfoannounceForAccessibility

Eenvoudig

 

Xamarin

SemanticExtensionsAnnounce

Eenvoudig

Externe bibliotheek

Web

aria-live

 

Minder controle

Conclusie

Dus, welk framework raden we aan voor de ontwikkeling van toegankelijke apps? Native frameworks bieden de beste ondersteuning voor toegankelijkheid.

Het is misschien niet haalbaar om twee codebases en twee ontwikkelingsteams te onderhouden. Cross-platform frameworks zijn gelukkig bezig om hun ondersteuning voor toegankelijkheidsfuncties uit te breiden.

Maar let op, bij het gebruik van cross-platform frameworks heb je mogelijk geen toegang tot bepaalde toegankelijkheidsfuncties vanwege abstractielagen. Indien je de meest toegankelijke app wilt ontwikkelen, dan is native altijd de beste keuze.

Framework

Score

Oordeel

Android

100%

Volledige ondersteuning

iOS

100%

Volledige ondersteuning

Web

100%

Volledige ondersteuning

Flutter

90%

Goede ondersteuning, focus verplaatsing ontbreekt

React Native

90%

Goede ondersteuning, volgorde aanpassen ontbreekt

Xamarin

50-80%

Matige ondersteuning, status/waarde ontbreekt, vereist externe bibliotheken.

Bekijk onze uitgebreide documentatie voor aanvullende informatie:

  • Android logo (light)

    Android accessibility

    Android heeft een toegankelijkheidslaag die gebruikers helpt om hun Android toestel te gebruiken. Door toegankelijkheidsfuncties te integreren, kun je de bruikbaarheid van jouw app verbeteren, met name voor gebruikers met een beperking.

    Learn about Android accessibility
  • iOS logo (light)

    iOS accessibility

    iOS heeft ingebouwde toegankelijkheidsfuncties, toegankelijkheids-API's en ontwikkelaarstools die een buitengewone kans bieden om elke gebruiker, waaronder met een beperking, een superieure mobiele ervaring te bieden.

    Learn about iOS accessibility
  • Flutter logo (light)

    Flutter accessibility

    Flutter zet zich in om ontwikkelaars te ondersteunen bij het toegankelijker maken van hun apps. Er is ingebouwde ondersteuning voor toegankelijkheidsfuncties van het onderliggende besturingssysteem.

    Learn about Flutter accessibility
  • React Native logo (light)

    React Native accessibility

    React Native heeft toegankelijkheids-API's waarmee je jouw app geschikt kunt maken voor alle gebruikers. Je kunt apps integreren met ondersteunende technologieën zoals de bijvoorbeeld de schermlezers VoiceOver en TalkBack.

    Learn about React Native accessibility
  • Xamarin logo (light)

    Xamarin accessibility

    Xamarin heeft functies om apps te ontwikkelen die goed werken met toegankelijkheidsfuncties van het besturingssysteem, zoals groot lettertype, hoog contrast, inzoomen, schermlezer, visuele of haptische feedback en alternatieve invoermethoden.

    Learn about Xamarin accessibility

Credits

Dit artikel is een aangepaste versie van de presentatie die Jan Jaap de Groot gaf op de #id24-conferentie op 21 september 2023. Je kunt de presentatie terugkijken voor uitgebreide informatie over dit onderwerp.

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

Feedback?

Laat 't ons weten!