Édito

Linxo, l’accessibilité vue par le développeur

27 commentaires

Romain est le développeur de l’application Linxo, permettant de consulter ses comptes bancaires à travers son iPhone. Dans cet article, il nous livre son point de vue de développeur ainsi que les difficultés rencontrées pour rendre Linxo complètement accessible aux utilisateurs de VoiceOver.

Le contexte

Quand on décide de s’intéresser à l’accessibilité sur iPhone, qu’on est développeur et voyant, on s’aperçoit qu’il y a vraiment peu de ressources sur le web traitant du sujet d’un point de vue technique.

Je suis ingénieur-développeur en freelance, je travaille entre autres pour la société Linxo, qui est une société française proposant de simplifier la gestion des comptes bancaires. Il y a quelques mois nous avons décidé de mettre l’accent sur l’accessibilité dans notre application iPhone. Nous voulions rendre la gestion des finances personnelles accessible à TOUS.

J’avais déjà joué avec VoiceOver sans jamais avoir approfondi le sujet d’un point de vue technique. Je savais qu’Apple avait fait un sacré travail pour intégrer cette technologie, pour qu’elle fonctionne nativement et pour que le travail du développeur soit le plus aisé possible.

Pour les développeurs qui liraient cet article, le fonctionnement de VoiceOver pour un déficient visuel est le suivant: au lieu de déplacer son doigt sur l’écran à la recherche du contenu à énoncer (comme un voyant qui testerait VoiceOver le ferait intuitivement), les utilisateurs balayent leur doigt de gauche à droite et droite à gauche pour aller à l’élément suivant ou précédent et un double tap n’importe où sur l’écran permet d’actionner l’élément actuellement sélectionné. Simple, rapide, efficace mais contre-intuitif pour un voyant !

VoiceOver, une technologie bien intégrée … mais facile à casser

Cela donne une perspective toute à fait nouvelle sur son application, aussi bien sur la façon de se la représenter que celle de la concevoir.
Car même si Apple fait tout pour que le développeur ait un minimum de travail à faire pour rendre son appli accessible, le développeur a très rapidement fait de «casser» les services gratuits rendus par VoiceOver, simplement par ignorance. L’AppStore compte aujourd’hui plus d’un demi million d’applications et nous sommes loin des premières applications tierces partie (c’est à dire la phase de découverte de la plateforme par les développeurs hors Apple). Aujourd’hui pour se distinguer dans la foule, il faut non seulement proposer une application innovante mais faire en sorte qu’elle se distingue par son graphisme, son ergonomie et ses effets visuels. Or, la plupart du temps, ces innovations nous font perdre un bon nombre des services gratuits rendus par VoiceOver.

Par exemple dans les premières versions de Linxo, les lignes de la liste des opérations d’un compte étaient organisées à l’écran de façon antéchronologique, mais lues dans un ordre totalement aléatoire par VoiceOver. Ceci était simplement dû aux changements graphiques et optimisations techniques des headers qui indiquent les dates pour grouper les opérations par jour.

Il est aussi très simple de faire des erreurs d’accesssibilité, simplement parce qu’un développeur ignore que tel choix impactera VoiceOver. Par exemple avant, dans Linxo, le contenu de l’application était bien en français mais la barre de statut en haut de l’écran (avec l’opérateur, l’horloge et la batterie) était énoncée en anglais. En fait le projet avait été créé avec les réglages de base, et iOS considère par défaut que l’application est en anglais même si toutes les chaînes de caractères sont en français.

Vive Linxo V2.0 !

Suite à un message sur la list Maccessible il y a quelques mois, nous avons récolté de nombreux retours de la part d’aveugles et malvoyants et nous avons ainsi pu cibler les points les plus problématiques en termes d’accessibilité à améliorer pour la v2, que nous venons de sortir.

Outre les améliorations d’accessibilité, nous avons introduit de nouvelles fonctionnalités, notamment les graphiques; et nous avons fait en sorte que ces nouvelles fonctionnalités soient accessibles directement dès la conception.
Et ce ne fut pas une mince affaire car les graphismes sont par essence purement visuels. Nous avons ainsi un camembert qui permet de comprendre instantanément dans quelles catégories sont ventilés nos dépenses et revenus; ou bien un diagramme en bâtons qui montre l’évolution de l’épargne à travers le temps. Et nous sommes très fiers d’avoir trouvé une solution pour que ces données soient aussi accessibles aux non-voyants: nous présentons tout bonnement une toute autre interface quand VoiceOver est activé ! Pour les déficients visuels les données sont ainsi énoncées sous forme de liste.

Un champ des possibilités à explorer

Ainsi au fur et à mesure des semaines nous avons appris beaucoup de choses sur les capacités de VoiceOver et les possibilités offertes aux développeurs. En voici une liste principale:

  • Il est possible de savoir à tout moment si VoiceOver est activé, et ainsi agir de manière différente si besoin. C’est ce que nous avons fait avec les écrans qui présentent des graphiques.
  • Le développeur dispose d’un outil qui lui permet de générer plus facilement des interfaces graphiques, nommé Interface Builder. L’ordre dans lequel le développeur dispose les éléments dans une fenêtre est important car c’est l’ordre dans lequel VoiceOver va lire les données. Ainsi, il se peut très bien que deux libellés soient lus dans le mauvais ordre alors que graphiquement ils sont dans le bon ordre. Heureusement, réordonner les éléments est facile, mais encore faut-il savoir que cet ordre est important pour VoiceOver !
  • Il est possible de faire énoncer à VoiceOver autre chose que ce qui est strictement écrit à l’écran. Un bon exemple dans Linxo se situe sur l’écran de synthèse, ou le bloc qui indique le nombre d’infos et alertes en cours est énoncé de la manière suivante: “Vous avez 2 infos ou alertes, la plus récente date du 6 mars” alors que l’utilisateur voyant ne voit que les morceaux de phrases suivants: “Infos et alertes”, “2”, “la plus récente date du 6 mars”; mais présentés de façon plus visuelle et stylisée avec un gros badge rouge.
  • Un corollaire du point précédent est qu’il est possible de cacher à VoiceOver l’existence d’un élément afin qu’il ne l’énonce pas !
  • Nous avons aussi découvert la possibilité de faire annoncer à tout moment un texte sans que l’utilisateur ait à balayer l’écran à la recherche de l’information. Par exemple quand l’utilisateur entre un code PIN erronné, le texte “Code PIN invalide, 2 tentatives restantes” est énoncé au même moment que la phrase apparait à l’écran. Le focus VoiceOver reste sur le clavier, l’utilisateur sait instantanément qu’il doit réessayer.
  • Il est aussi possible d’associer une astuce VoiceOver à un élément. Par exemple sur l’écran du code PIN, nous, utilisateurs voyants, distinguons 4 carrés blancs indiquant que le code PIN comporte 4 chiffres. Pour les utilisateurs VoiceOver, une astuce qui dit que le code PIN comporte 4 chifres est énoncée après “Tapez votre code” si l’utilisateur reste une demie seconde sans changer d’élément.
  • Un élément ayant une opacité de 0% est invisible pour un voyant, mais visible pour VoiceOver qui ne se privera pas de l’énoncer. Amis aveugles, si vous avez déjà rencontré une application qui prononçait des éléments qui n’avaient rien à voir avec le contexte, en voici la cause ! L’opacité est souvent utilisée pour des animations graphiques de fade-in/fade-out. Ainsi en fin d’animation le développeur doit changer la propriété hidden d’un élément pour qu’il soit correctement interprété par VoiceOver.

Nous pensons avoir grandement amélioré l’accessibilité dans la version 2 de l’appli Linxo, cependant nous sommes conscients que tout n’est pas parfait. Parfois VoiceOver agit de façon inexpliquée et nous ne savons pas ce qui provoque ce comportement. En tout cas nous serions très heureux d’avoir à nouveau votre avis (en commentaire), aussi bien en positif qu’en négatif sur cette version. Profitez-en l’application est gratuite pour encore quelques jours (disponible ici) !

A vos finances! Prêt! Partez!

Amicalement,
Romain, pour l’équipe Linxo

27 réflexions sur « Linxo, l’accessibilité vue par le développeur »

  1. Article passionnant! Merci! Moi qui n’avais pas l’appli Linxo, je m’en vais la chercher immédiatement! Vous avez gagné!

  2. Bonjour Romain et tous!
    Tout d’abord, je tiens sincèrement, étant donné que je ne l’avais pas fait jusqu’ici a te remercier pour le travail que tu fais afin que nous puissions, nous aveugles, utiliser linxo de façon confortable!
    Je ne pensais pas qu’elle était encore gratuite, je ais la tester, et ferai mes commentaires par la suite!
    A bientot, et continue comme ca, c’est de l’excellent boulot!
    Carine

    1. @vincent: elle arrive très prochainement, merci de votre patience 🙂
      En revanche nous sommes loin d’être sûr qu’elle pourra offrir le même niveau d’accessibilité que l’application iPhone, les possibilités étant plus limitées !

  4. Bien joué Romain ! Pour ma part, j’avais pour habitude d’utiliser l’apli Bankin, mais je viens de la remplacer par Linxo, tant l’accessibilité est notable avec cette V2. Et puis, je préfère soutenir des applis dont l’éditeur s’implique pour les rendre délibérément accessible VoiceOver !!!

  5. Bonjour,

    Un grand merci pour cet article très instructif, et un encore plus grand merci pour la nouvelle version de Linxo. Pour être tout à fait franche, entre Linxo version antérieure et Bankin, je préférais cette dernière. Mais depuis la mise à jour, je délaisse volontiers Bankin pour Linxo! Excellent travail, l’app est vraiment très utilisable maintenant avec VoiceOver.
    Si tous les développeurs s’impliquaient comme vous, ça serait tellement bien…
    Bonne continuation, et encore bravo pour le travail accompli

  6. Pas mal cette nouvelle version. Par contre je ne trouve pas la catégorisation des rentrées et sorties d’argent au sein de l’appli comme on a sur Bankin. Normal ou j’ai raté un truc ? 🙁

  7. Je veux dire qu’on n’a pas d’affichage par catégories, uniquement par transaction on dirait. 🙁

    1. @Ludo: Si, sur la synthèse, quand on tape sur le bloc qui détaille les dépenses et revenus du mois courant (en dessous des infos et alertes) on accède à la liste des dépenses et revenus par catégories et sous-catégories.
      Peut-être est-ce quelque chose sur lequel on peut rajouter une astuce qui dit «taper pour voir les dépenses et revenus par catégorie», qu’en pensez-vous ?

  8. Ah oui exact. Je ne pensais pas que tapoter sur cet élément ouvre une sous-fenêtre. Du coup, je trouve votre idée d’ajouter une indication plutôt pertinente.

  9. Merci Romain pour ce travail, ce pendant je trouve que la fonction qui permet de changer la période de temps pour afficher les catégories n’est pas très accessible. On dirait une fenêtre bizarre qui apparaît vers le bas de l’écran mais perso, j’ai du mal à la localiser rapidement pour effectuer mes modifes et la virer ensuite avec VoiceOver. Je dois la chercher presque à chaque fois.

    1. Merci Chloé pour ce retour. Effectivement c’est une fenêtre bizarre; ce n’est pas un composant d’origine. Nous avons eu beaucoup de mal avec VoiceOver pour l’accessibilité de ce composant, nous sommes conscient qu’il faudrait l’améliorer. Nous essayerons d’autres pistes à l’avenir.

  10. Pour ma part je n’utilise pas ce type d’application, j’utilise l’application proposée par ma banque. Celle de ma banque par chance est totalement gratuite et est très accessible avec VoiceOver.

    1. Oui, mais aucune banque ne vous préviendra quand elle vous prélèvera des frais bancaires importants ! De plus toutes les banques ne proposent pas de catégorisation automatique de vos opérations ni une synthèse détaillée de votre argent et votre épargne. C’est là où Linxo apporte un réel plus.
      Dans tous les cas utilisez l’outil qui vous semble le plus adapté à vos besoins, c’est le plus important 🙂

  11. @Romain: Pourquoi ne pas tout simplement utiliser le composant classique d’iOS, qu’on voit notamment dans Safari lorsqu’on doit interagir avec un menu tel que celui qui nous permet de modifier la date d’expiration d’une CB sur certains site ?
    Il apparaît sur le côté droit de l’écran et disparaît quand on tape sur “ok”.

    1. Je reformule un peu ce que j’ai dit: j’utilise bien un composant standard, une «roulette», c’est la façon dont elle est intégrée à l’écran qui n’est pas très compatible avec VoiceOver. Quand on appuie sur une date, la roulette apparaît à l’écran par le bas (et fait remonter la barre qui contient les dates de début et de fin). À ce moment là VoiceOver peut s’emmêler un peu les pinceaux.
      Il n’y a malheureusement pas de façon plus standard de faire ça. En l’occurrence dans Safari, ils ont implémenté cette fonctionnalité avec les mêmes composants de base, mais à leur manière, qui est mieux intégrée à VoiceOver. En tant que développeur on n’a pas accès à leur recette, on ne sait pas comment ils ont fait ça. Mon travail est d’imiter au mieux, de trouver des solutions pour que VoiceOver marche au mieux.

  12. Ah les salopios ! Ils ont dû réserver ça à des API / framework non-autorisées aux développeurs je suis sûr. Et si tu décides de l’utiliser, l’application sera rejetée de l’App Store comme d’hab. Dommage.

  13. À mon tour, je viens remercier ce développeur qui a pris la peine de nous rendre accessible cette application. Les ressources de développement d’applications accessibles VoiceOver devraient être mieux documenté à mon humble avis mais bon… En attendant, bravo pour l’initiative. et surtout, bravo à Apple qui a bien implémenté VoiceOver ! Voilà l’avantage d’un système complètement fermé et dieu sait que je critique beaucoup Apple pour ça. 🙁

  14. Merci Romain pour cet article très instructif. Un peu de pub au passage çane peut pas nuire [:D sourire], surtout pour ceux qui font de réels efforts. Ce qui me frape le plus en lisant l’article c’est l’absence de ressource documentaire et fait que vous ayez dû apprendre tout cela par vous-mêmes, à l’aveugle 😉 A mes heures perdues je fais du dev. Je compatis donc complètement.
    Petite question subsidiaire : comment peut-on connaître les banques couvertes par l’applications ? Autrement dit, comment puis-je savoir si mon compte au Crédit Mutuel de Bretagne sera gérable depuis Linxo ? Je sais, c’est has been comme banque, mais au moins ils prennent moins de risque avec notre argent que les grosses qui ont de belles vitrines.
    Cordialement
    Tanguy

    1. Apple fournit un peu de documentation sur les API VoiceOver, mais n’explique pas comment s’en servir. Sur le net il n’y a pas ou peu d’exemples d’utilisation alors effectivement on défriche par nous même 😀

      Pour la liste des banques elle est disponible à la fin de la description de l’application sur l’Appstore, sur le site web de Linxo, ou bien encore dans l’application elle même mais il faut l’avoir téléchargé!
      En l’occurrence le Crédit Mutuel Bretagne est supporté par Linxo. Si vous avez d’autres questions vous pouvez aussi les envoyer à assistance [arobase] linxo [point] com .

  15. Un article très instructif qui, je l’espère, donnera des idées à tout un tas d’autres développeurs.
    Comme certains, je n’utilise plus l’ancienne app mais je l’ai remplacée par Linxo.
    Merci à toi Romain.

  16. Vraiment excellente cette application, avec une accessibilité haut de gamme. Bravo Romain, ça mérite 15 étoiles sur l’App Store si c’était possible. A défaut, je lui en ai mis 5. 😉

  17. Et la sécurité des identifiants dans tout ça? Moi je n’ai pas confiance!
    Linxo est une petite entreprise, et le développeur en freelence!

    PS : il y’a des voleurs de pseudo sur edencast !!! c’est moi le véritable Jarod! car je ne suis jammais content la preuve!

    1. Vous avez raison de vous poser des questions, c’est une bonne démarche. Linxo est un service en «lecture seule»: aucun virement n’est possible. Vos données sont transmises et stockées de façon chiffrée dans une infrastructure qui offre les mêmes niveaux de sécurité que celles des banques. En cas de vol de votre appareil, sachez qu’il faut impérativement rentrer votre code PIN pour accéder à Linxo, et que de plus aucune information bancaire n’est stockée sur l’appareil.
      Je vous invite à consulter la page http://www.linxo.com/securite-confidentialite/faq-securite/ ou à contacter le support de Linxo pour toute question relative à la sécurité.

      Linxo externalise en effet une partie de ses développements mais les mêmes règles de sécurité s’appliquent aussi bien à Linxo qu’à ses prestataires. Ne vaut-il pas mieux d’ailleurs faire appel à un spécialiste iOS pour savoir comment gérer au mieux la sécurité de la plateforme ?
      Sachez aussi que Linxo est soutenu par le Crédit Mutuel Arkea (entre autres) et que la plateforme est aujourd’hui utilisée par Fortuneo dans son outil Budget.
      Si toutefois vous êtes encore réticent à fournir vos identifiants, faites une demande auprès de votre banque pour disposer d’un jeu d’identifiants en “lecture seule”, qui pourrait être utilisé par les services bancaires tiers, type Linxo.

  18. Bonjour Romain,
    félicitation pour ces explications et recherche mené vis à vis de VoiceOver,.
    Il est excessivement rar, comme l’on déjà dit certains utilisateurs, de voir un éditeur de logiciel rendre accessible une application, au point quasiment, d’après ce que j’ai pu comprendre, de faire carrément une autre interface presque totalement dédier a VoiceOver.
    N’ayant pas encore lu la fiche descriptive, de Linxo, mais il me semble que Kevin avait déjà fais passé l’information, et je crois me souvenir que seul les banques française sont concerné.
    Si je fais erreur, je m’en excuse. Je me permet toutefois de vous posé la question, cette application serat-elle compatible avec les banque Belge?
    Merci d’avance pour votre réponse.
    Cordialement,
    Michaël Lurkin

  19. Bonjour,

    Je viens de passer sous Bankin Premium et je dois tirer pour mettre à jour mais comment tire-t-on?

    Merci d’avance,

    GReg

Les commentaires sont fermés.