Native versus cross-platform frameworks om toegankelijke apps te ontwikkelen
1 mei 2024
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.
Framework | Functie | Voordelen | Nadelen |
|---|---|---|---|
Android | Alle oriëntaties staan standaard aan |
| |
iOS |
| De 'Upside Down' oriëntatie is standaard uitgeschakeld | |
Flutter | Flexibel |
| |
React Native | expo-screen-orientation or native | Flexibel |
|
Xamarin | Device Orientation or native | Flexibel |
|
Web | Uitgebreide mogelijkheden |
|
2. Tekstvergroting
Apps dienen tekstvergroting te ondersteunen, zodat gebruikers tekst kunnen lezen in de gewenste lettergrootte.
Framework | Functie | Voordelen | Nadelen |
|---|---|---|---|
Android | Schaalt automatisch |
| |
iOS |
| Eigen vergroting logica implementeren | |
Flutter | Schaalt automatisch |
| |
React Native | Schaalt automatisch |
| |
Xamarin |
| Eigen vergroting logica implementeren | |
Web | Schaalt automatisch |
|
3. Contrast
Apps dienen voldoende contrast te hebben, zodat gebruikers tekst kunnen lezen en interface-elementen kunnen onderscheiden.
Framework | Functie | Voordelen | Nadelen |
|---|---|---|---|
Android |
|
| |
iOS | Ingebouwde ondersteuning voor hoog contrast |
| |
Flutter |
|
| |
React Native |
|
| |
Xamarin |
|
| |
Web |
|
|
4. Naam
Apps dienen een toegankelijke naam te verstrekken voor interactieve elementen, zodat gebruikers van ondersteunende hulpmiddelen ze kunnen identificeren.
Framework | Functie | Voordelen | Nadelen |
|---|---|---|---|
Android | Flexibel |
| |
iOS | Flexibel |
| |
Flutter | Flexibel |
| |
React Native | Flexibel |
| |
Xamarin | Flexibel |
| |
Web | Flexibel |
|
5. Rol
Apps dienen een toegankelijke rol te verstrekken voor elementen, zodat gebruikers van ondersteunende hulpmiddelen hun bedoeling begrijpen.
Framework | Functie | Voordelen | Nadelen |
|---|---|---|---|
Android | Aanpasbare rollen |
| |
iOS |
| Geen aanpasbare rollen | |
Flutter | Semantics → role |
| Geen aanpasbare rollen |
React Native |
| Geen aanpasbare rollen | |
Xamarin |
| Externe bibliotheek, maakt gebruik van contentDescription | |
Web | 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.
Framework | Functie | Voordelen | Nadelen |
|---|---|---|---|
Android |
| Beperkte keuze uit waardes | |
iOS | Flexibel |
| |
Flutter | Semantics → value | Flexibel |
|
React Native | Flexibel |
| |
Xamarin | Niet ondersteund |
| Waarde kan niet ingesteld worden |
Web | 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.
Framework | Functie | Voordelen | Nadelen |
|---|---|---|---|
Android | Flexibel | Vereist Android 11 (API 30) | |
iOS |
| Beperkte opties | |
Flutter | Semantics → state |
| Beperkte opties |
React Native |
| 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.
Platform | Functie | Voordelen | Nadelen |
|---|---|---|---|
Android | Individuele aanpassing | Twee functies voor één doel | |
iOS | Volledige controle | Indexering up-to-date houden | |
Flutter | Flexibel |
| |
React Native | Niet ondersteund |
| Volgorde kan niet aangepast worden |
Xamarin | Flexibel | Indexering up-to-date houden | |
Web | 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.
Platform | Functie | Voordelen | Nadelen |
|---|---|---|---|
Android |
|
| |
iOS | UIAccessibility.Notification → screenChanged of layoutChanged | Twee soorten |
|
Flutter | Niet ondersteund |
| Focus kan niet verplaatst worden |
React Native |
|
| |
Xamarin |
| Externe bibliotheek | |
Web | Meerdere opties |
|
10. Statusberichten
Apps dienen belangrijke interfacewijzigingen te communiceren aan ondersteunende hulpmiddelen, zodat gebruikers op de hoogte zijn van gebeurtenissen.
Platform | Functie | Voordelen | Nadelen |
|---|---|---|---|
Android | AccessibilityEvent → TYPE_ANNOUNCEMENT of | Twee opties | |
iOS | Makkelijk |
| |
Flutter | Eenvoudig |
| |
React Native | Eenvoudig |
| |
Xamarin | Eenvoudig | Externe bibliotheek | |
Web |
| 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:
- Learn about Android accessibility
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 iOS accessibility
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 Flutter accessibility
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 React Native accessibility
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 Xamarin accessibility
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.
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.
