Skip to content

Latest commit

 

History

History
executable file
·
154 lines (110 loc) · 7.01 KB

initialisation.md

File metadata and controls

executable file
·
154 lines (110 loc) · 7.01 KB

Initialisation d'un projet

Ionic

Pour débuter, vous pouvez utiliser l'outil en ligne de commande d'Ionic, pour créer rapidement la structure de l'application.

ionic start sgmapApp blank

On peut auditer la page générée avec le lecteur d'écran. Le titre “Ionic Blank Starter” est bien lu par le lecteur d'écran, de plus iOS indique le niveau de titre.

Création de modules AngularJs de mise en accessibilité

Pour créer une application Ionic accessible, nous allons créer 2 modules AngularJs. Pour rappel, le but d'un module AngularJs est d'être facilement réutilisable dans plusieurs applications.

Le premier module corrigera les erreurs d'accessibilité d'Ionic :

  • Mauvaise gestion des événements
  • Correction CSS (Élément focusable, contrôle de la propagation des événements [pointer-events]…)
  • Structure HTML

Le second module implémentera l'API native d'accessibilité mobile dans le contexte AngularJs. Cela permettra à toutes les applications AngularJs, dans un contexte hybride, d'utiliser cette API (Ionic, OnsenUI, AngularJs+Bootstrap…)

phonegap-mobile-accessibility

Le second module sera implémenté à partir du plugin PhoneGap mobile accessibility. Nous pouvons grâce à ce plugin connaître les options d'accessibilité sélectionnées par l'utilisateur et le plugin peut interagir avec le lecteur d'écran. Plus de détails sur la page : https://github.com/phonegap/phonegap-mobile-accessibility

Dans un premier temps le module AngularJs implémentera uniquement le retour du statut du lecteur d'écran.

angular.module('$mobileAccessibility', [])
.provider("$mobileA11yScreenReaderStatus", function(){
  var _this = this;

  // Default config
  this.cssClass = {
    addClass: true,
    screenReaderOn: "sr-on",
    screenReaderOff: "sr-off"
  };

  this.config = function (config) {
    angular.extend(this.cssClass, config);
  };

  this.changeBodyClass = function (isRunning) {
    if (isRunning) {
      //screen reader is running
      document.body.classList.add(_this.cssClass.screenReaderOn);
      document.body.classList.remove(_this.cssClass.screenReaderOff);
    } else {
      //screen reader is off
      document.body.classList.add(_this.cssClass.screenReaderOff);
      document.body.classList.remove(_this.cssClass.screenReaderOn);
    }
  };

  this.$get = function($rootScope, $window, $timeout) {

    var screenReaderStatus = function (isRunning) {
      $timeout(function () {
        $rootScope.$broadcast('$mobileAccessibilityScreenReaderStatus:status', isRunning);
      });
      if (_this.cssClass.addClass) {
        _this.changeBodyClass(isRunning);
      }
    };

    var a11yStatus = function (status) {
      screenReaderStatus(status.isScreenReaderRunning);
    };



    document.addEventListener("deviceready", function () {
      // start once for android 4.3
      MobileAccessibility.isScreenReaderRunning(screenReaderStatus);

      // events doesn't seems to work on android 4.3
      $window.addEventListener(MobileAccessibilityNotifications.SCREEN_READER_STATUS_CHANGED, a11yStatus, false);
    }, false);
    return true;
  };
});

De cette façon, à chaque modification de l'état du lecteur, un événement AngularJs sera envoyé. Cet événement nous informera du comportement à adopter en fonction de l'état du lecteur d'écran. De plus, sur le body, la class CSS sr-on sera ajoutée si le lecteur d'écran est activé, et sr-off si il est éteint.

On peut, dès lors, créer une feuille de style pour nous aider à la conception de l'application accessible.

.sr-off .sr-on-only ,
.sr-on .sr-off-only {
  display: none !important;
}

Nous disposons maintenant de 2 classes CSS : une pour afficher un bloc uniquement lorsque le lecteur d'écran est actif (.sr-on-only) et la seconde seulement lorsqu'il est éteint (.sr-off-only)

Profiling et Debugging distant sur mobile

Pour développer correctement une application mobile accessible, la première règle sera de pouvoir la déboguer facilement. Ionic facilite grandement la phase de développement et de debugging. Une des options intéressantes est le livereload sous Android. Le livereload met à jour l'application à chaque modification du code en cours d'écriture.

ionic run android -l

La deuxième option permettra d'obtenir les retours de la console JavaScript directement dans le terminal de lancement de l'application.

ionic run android -c

De cette façon on peut facilement débugger la partie JavaScript. Malheureusement les outils d'Ionic n'accéderont pas au code CSS, c'est ici qu'interviennent les outils de déboguage distants de Safari et Chrome.

Le déboguage distant accédera depuis l'ordinateur au web development tools de l'application mobile en cours d'exécution. On peut l'utiliser sur les plateformes Android 4.4+ et iOS 6+. Pour des versions antérieures, seuls les outils Ionic pourront vous aider.

Article : Testing Mobile: Emulators, Simulators And Remote Debugging

OnsenUI

Pour débuter, vous pouvez utiliser l'outil en ligne de commande de Cordova, pour créer rapidement la structure de l'application.

cordova create test io.onsen.testapp TestApp

Téléchargez un des modèles disponibles sur la page d'OnsenUI

Copiez ensuite le contenu du modèle téléchargé dans le répertoire créé à l'étape précédente ("TestApp").

Ajoutez une plateforme, Android ou iOS :

cordova platform add android

Vous pourrez enfin exécuter le projet dans le simulateur, en vous plaçant dans le répertoire du projet :

cordova emulate

Licence

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.