Ce guide s'adresse aux développeurs d'applications mobiles qui souhaitent connaître les techniques à utiliser pour créer des applications accessibles avec les frameworks Ionic et OnsenUI.
Les différents tests réalisés pour étudier l'accessibilité d'Ionic et d'OnsenUI conduisent à la conclusion que ces frameworks ne peuvent actuellement pas être utilisés pour développer rapidement et de manière sûre une application accessible. Il est préférable de développer des applications natives, en utilisant les API d'iOS et d'Android pour atteindre un bon niveau d'accessibilité. Les éléments fournis dans ces tutoriels visent à accompagner le développeur dans l'évaluation de l'accessibilité des composants et dans la mise en oeuvre de corrections qui peut toutefois s'avérer complexe. Par ailleurs, la pérennité de telles corrections n'est pour le moment pas garantie : pour qu'elle le soit, les corrections devront être intégrées dans les différents frameworks.
Ionic et OnsenUI sont des boîtes à outils pour développer des applications hybrides. Une application hybride est écrite en HTML, CSS et JavaScript dans un conteneur WebView natif et peut être exécutée sur différentes plates-formes (iOS, Android, etc.) sans changement du code. Les technologies utilisées sont Apache Cordova, SASS et AngularJs. Ionic et OnsenUI proposent des composants réutilisables, en mettant l'accent sur les performances et la facilité d'implémentation. Par ailleurs, Ionic et OnsenUI mettent à disposition des outils pour développer, tester, déployer et analyser les applications.
L'architecture d'Ionic et d'OnsenUI peut être divisée en quatre couches (le schéma ci-dessus est valable à la fois pour Ionic et OnsenUI) :
- La couche native, qui varie suivant l'OS. Si nous n'utilisions que cette couche, nous aurions créé une application native pure.
- La couche Apache Cordova. C'est ici que l'application hybride commence. Il est possible d'intégrer une application web sans couche supplémentaire, en ayant des interactions natives grâce aux plugins fournis par Cordova (Notifications, GPS, Contacts…).
- La couche AngularJs nous permet ici de créer une application hybride riche, avec un système de route, vue, contrôleur…
- La dernière couche, Ionic ou OnsenUI, apporte un ensemble de composants d'interface web reproduisant le design et les modes d'intraction natifs des composants d'iOS et d'Android (checkbox, toggle, radio, modal…).
Ce tutoriel traitera de l’accessibilité dans le contexte d'une application Ionic ou OnsenUI.
Pré-requis nécessaires :
- Les outils : npm, bower, cordova, Android Studio et/ou xcode
- Connaissance de l'environnement hybride Apache Cordova
- Connaissance de la création d'application riche sous AngularJS (modules, services, directives)
- Connaissance de Ionic et OnsenUI
Pour débuter, nous verrons comment initaliser un projet et mettre en place une structure pour créer un projet d'application accessible sous Ionic et OnsenUI. Nous verrons ensuite les bonnes pratiques à utiliser dans l'environnement Apache Cordova et nous étudierons l'accessibilité des plugins Apache Cordova. Pour finir nous ferons l'étude de l'accessibilité des composants d'interface d'Ionic et d'OnsenUI pour aider et accompagner un développeur qui souhaiterait utiliser ces frameworks pour développer une application mobile accessible.
- Initialisation d'un projet Ionic et OnsenUI
- Bonnes pratiques sous Cordova et étude d'accessibilité des plugins Cordova
- Tutoriel de mise en accessibilité d'une application Ionic
- Tutoriel de mise en accessibilité d'une application OnsenUI
- Synthèse des tests et correctifs proposés
Les guides suivants peuvent être consultés en complément :
- Guide d'audit d'applications mobiles
- Guide de conception d'applications mobiles accessibles
- Guide de développement d'applications mobiles accessibles avec les API Android et iOS
Ce document est la propriété du Secrétariat général à la modernisation de l'action publique français (SGMAP). Il est placé sous la licence ouverte 1.0 ou ultérieure, équivalente à une licence Creative Commons BY. Pour indiquer la paternité, ajouter un lien vers la version originale du document disponible sur le compte Github de la DInSIC.