Mobile & accessibilité

Le taux d’équipement en téléphone a bondi depuis quelques années selon une étude du CREDOC (décembre 2013), 39% des français sont équipés de smartphones (+ 10 points en un an). Il est à noter que les personnes de plus de 70 ans, 59% d’entre elles sont équipés de mobile.

L’intensification de l’usage du mobile en tous lieux et à tout moment, nous confronte à des situations de handicap auxquelles nous ne prêtons garde car nous reportons l’usage du mobile où nous cherchons une situation propice à une utilisation dans le confort.

Tous handicapés

Qui n’a pas un jour :

  • consulté son écran en situation de grande luminosité (grand ensoleillement) et cherché un coin d’ombre, 
  • oublié de nettoyer son écran (de téléphone ou tablette) et constaté que ce dernier fait office de glace et n’est que reflet….
  • pu saisir du texte (SMS, mail, url…) dans les transports du fait des mouvements
  • eu un raté d’action, un “tap” qui ne marche pas ou qui envoie ver une page inattendue parce que le lien ou bouton est trop petit (perte de précision lors d’un déplacement, ou par la tenue du téléphone d’une seule main)
  • été perdu dans un site, une application faute de repère….

 

Comment remédier

C’est simple, en partant d’un postulat de base que l’accessibilité c’est pour tous, tous les publics : les handicapés bien évidemment mais aussi les séniors, les personnes en invalidité temporaire… bref ! toutes personnes sans distinction d’âge, de sexe, d’environnement ou de handicap.

Une série de bonnes pratiques, de recommandations peuvent vous aider à rendre les usages plus performants mais aussi et surtout des applications mobiles accessibles*:

Deux pré-requis

  1. appuyez-vous sur les normes internationales WCAG des contenus web qui pour une grand part s’appliquent au monde de l’applicatif (cf. “Mobile Web application Best practices“)
  2. respecter en priorité les guidelines des constructeurs en matière de conception d’interface par exemple :
    • pour la taille minimale d’une zone de tap (min 48 dp, soit 9mm)
    • la navigation dans l’interface : prévoir des éléments de navigation dans l’interface pour les téléphone sous iOS, pour les téléphones sous  android laissez toujours la navigation native opérante en doublon d’une navigation dans l’interface (bouton back)
    • proposer l’usage des 2 orientations (portrait et paysage)
    • utilisez les polices natives, les icônes natives (partage, envoi, ajout…)
    • la lisibilité des textes, sous iOS7 vous pouvez adopter le “Format Dynamique” (“Dynamic Type”) pour votre application, la hauteur des  lignes, la taille de la police et l’espacement voire les styles portés par les blocs sémantiques de vos pages seront réglés par rapport aux réglages spécifiques de l’utilisateur
    • faites appel aux picker de date et autres composants d’interface natifs (clavier numérique, clavier alphabétique…)
    • appuyer vous sur la grammaire de gestes existantes pour les interactions motrices tel le zoom/dézoom qui se réalise avec 2 doigts… néanmoins offrez la possibilité de réaliser une action par un tap unique (pour les personnes à motricité très réduite, réalisation de l’action avec 1 doigt), voire via une autre modalité (vocal…)
  3. regardez les fonctionnalités natives offertes par les constructeurs en matière d’accessibilité, citons par exemple :
    • lecteur d’écran (vocalisation des éléments d’écran grâce à Voie over sous iOS ou TalkBack sous android), zoom, inversion des couleurs, énonciation, contraste, flash d’alerte, assistance au touch, raccourcis…

Les constructeurs fournissent des outils pour gérer l’accessibilité sans avoir à faire des développements spécifiques supplémentaires. Voici des liens vers les guidelines constructeurs :

 

Des éléments de bonne pratique essentiels

  •  les images et éléments de type graphique doivent porter une alternative textuelle pour préciser leur nom ou leur fonction
  • les formulaires et autres situations de saisie
    • structurer les informations recueillies en introduisant des parties aux formulaires longs et à contenu diversifié, n’hésitez pas à procéder par étapes (prévenir du nombre d’étapes si nécessaire),
    • doivent, pour chacun des éléments qui le composent comme les champs texte, bouton radio, case à cocher… présenter une légende, un libellé que l’on positionnera conformément au standard de présentation (le label d’un champ est toujours avant le champs, le libellé d’un bouton radio ou d’une case à cocher est à droite …)
    • faciliter la saisie en offrant des listes d’options, en proposant des clic to call…
    • penser à pré-saisir les composants de formulaire pour faciliter la saisie de l’utilisateur, mettre en place l’auto-complétion ou système de suggestion
  • structurer le contenu de vos pages :
    • penser au titre de page et autres niveaux de titre (équivalent au H1, H2… du web)
      • faites des titres courts, concis et explicites (en rapport avec le contenu  ou le but de la page)
    • créer des blocs d’information si besoin
    • supprimez toute information superflue
    • déportez des éléments d’information en seconde lecture soit sur une page déportée soit par un mode plié/déplié
    • avec l’arrivée du flat design, on a vu les interface “s’épurer” (allez dans ce sens)
  • les boutons :
    • ils auront un libellé  texte (pour connaître leur fonction), ne faites pas des boutons images
    • leur positionnement dans l’interface ne doit pas contrevenir aux guidelines des constructeurs,
      • par exemple évitez de les coller sur le bord de l’écran car certaines fonctionnalités qu’elles soient d’accessibilité ou pas nécessitent des actions sur le bord de l’écran
      • l’usage du téléphone d’une main ne permet pas de taper sur le bord de l’écran,
    • leur look and feel suggèrera l’action (un bouton doit être une invitation à taper); bien différencier les différents états des boutons si nécessaire (actif/ non actif)
    • les boutons récurrents seront positionnés au même endroit (homogénéité)
  • les couleurs et contraste
    • pensez au contraste des couleurs de votre charte graphique (en particulier que ce passe-t-il lors de l’usage en situation d’éclairement intense direct), pour cela appuyez vous sur des outils en ligne pour vous aider à choisir les bons niveaux de contraste (contrast-A)
  • feed back
    • lors de la saisie pensez à restituer un feed-back à l’utilisateur pour lui indiquer la validité de la saisie, les modalités du feed back peuvent être visuelle, audio et/ou vibration
    • préciser si l’input est de la saisie textuelle, de la commande vocale, de la prise de photo…
    • ne pas trop injecter de feed-back et être en cohérence avec le but de l’application
    • indiquer les évènements en cours, tel le chargement de la page, d’un document, … (registres visuels et audio sont importants)
  • personnalisation
    • pouvoir paramétrer : les feedbacks (absence/présence, modalité du feedback audio/vibration…), les notifications (absence/présence), la taille de la police voire l’inversion couleur Fond foncé/texte clair au lieu du fond blanc/texte noir.
    • proposer la création de compte avec la possibilité de connexion automatique, ainsi la saisie de données personnelles en sera facilitée
  • Chargement
    • optimiser les temps de chargement,
    • lors de situation de  faible débit, chargez une version dégradée et l’indiquer à l’utilisateur. Par dégradée, il faut entendre de ne charger que le contenu  le plus attendu à cet endroit de l’application (chargement du contenu le plus probable)
    • lors de temps de chargement long, indiquer le déroulé du chargement (cf. feedback)

Enfin pour finir sur ces quelques recommandations qui n’ont pas valeur exhaustive, nous vous conseillons de faire des tests utilisateurs réalisés avec des personnes handicapées (couvrant les champs de handicap visuel, moteur, auditif) et des personnes expertes en accessibilité.

Ce qu’il faut retenir c’est que :” ce qui profite aux uns profite aux autres”, toute mise à niveau en accessibilité réduit les inégalités certes mais sera vous apportera des bénéfices en terme de fréquentation.

 

* Dans le propos qui suit, nous nous focaliserons sur l’accessibilité des applications mobiles.

 

Liens utiles

Publié dans Billets d'humeur