Trois recommandations pratiques du team chargĂ© du dĂ©veloppement de lâappli « Inclusive CFF » pour un front-end inclusif.
En dĂ©cembre 2020, les CFF lançaient lâappli Inclusive CFF, qui avait initialement pour vocation de numĂ©riser les informations clientĂšle visuelles dans les gares et les trains du trafic grandes lignes des CFF afin de les diffuser sur le smartphone personnel des client·e·s. Elle a ainsi rendu lisibles et audibles les informations de voyage essentielles pour les personnes souffrant dâun handicap visuel. Depuis, lâappli Inclusive CFF sâest enrichie de nouvelles fonctionnalitĂ©s: un localisateur de bouton de porte a Ă©tĂ© installĂ©, les informations clientĂšle affichĂ©es aux arrĂȘts de tram et de bus y ont Ă©tĂ© intĂ©grĂ©es et les annonces diffusĂ©es en gare y sont retranscrites sous forme de texte. Câest pourquoi lâappli, de plus en plus utilisĂ©e par les personnes malentendantes Ă©galement, est devenue aujourdâhui un assistant de voyage pour lâensemble des voyageurs et voyageuses en situation de handicap.Lâappli Inclusive CFF a Ă©tĂ© rĂ©compensĂ©e Ă plusieurs reprises. Elle a remportĂ© le Prix de la Canne Blanche 2020 remis par lâUCBA ainsi que le Participants Award dĂ©cernĂ© lors des UIC International Sustainable Railway Awards 2022. CFF Inclusive est aussi la toute premiĂšre application Ă avoir Ă©tĂ© certifiĂ©e en 2022 par la fondation «AccĂšs pour tous».
Mais quels sont les critĂšres Ă prendre en compte dans le front-end en vue de rendre une application facile dâutilisation pour les personnes souffrant dâun handicap visuel? Lâexercice est Ă la fois passionnant et exigeant. Le team en charge du dĂ©veloppement dâInclusive CFF a beaucoup appris ces quatre derniĂšres annĂ©es: de la part des utilisateur·trice·s tests ayant une dĂ©ficience visuelle mais Ă©galement de leurs propres tests rĂ©alisĂ©s avec diffĂ©rentes fonctions dâassistance. Ses trois principales recommandations sont prĂ©sentĂ©es ci-dessous et illustrĂ©es par des exemples tirĂ©s du code:
Recommandation n° 1 : prendre en charge lâagrandissement des contenus.
Il est facile dâĂ©viter les textes tronquĂ©s.
De nombreux utilisateurs et utilisatrices en situation de handicap visuel utilisent lâoption dâagrandissement du texte proposĂ©e par le systĂšme dâexploitation. Il est par consĂ©quent important que lâappli puisse prendre en charge les diffĂ©rentes tailles de contenu.
Lors de tests rĂ©alisĂ©s avec une application prĂ©sentant des textes agrandis, il arrive rĂ©guliĂšrement que certains contenus soient tronquĂ©s. Dans la plupart des cas, il suffit dâautoriser lâapplication Ă afficher des textes de plusieurs lignes pour remĂ©dier Ă ce problĂšme.
Mais cette possibilitĂ© nâest parfois pas souhaitable, notamment pour les boutons. Il est dĂšs lors judicieux, dâune part, de choisir des libellĂ©s aussi courts que possible et, dâautre part, de limiter â Ă titre de compromis â la taille maximale des caractĂšres pour certains textes et de laisser au systĂšme dâexploitation le soin de lâaffichage. Toutefois, pour les personnes Ă lâacuitĂ© visuelle rĂ©duite, une limitation de la taille des caractĂšres nâest pas idĂ©ale dans la mesure oĂč le texte pourrait sâafficher dans une police de caractĂšres trop petite pour elles. Il est donc recommandĂ©, dans la mesure du possible, de raccourcir les libellĂ©s, de disposer diffĂ©remment les boutons dans le design ou dâautoriser les contenus de plusieurs lignes.
Dans de nombreux cas, lâagrandissement des contenus ne permet plus lâaffichage intĂ©gral du texte sur lâĂ©cran. Les utilisateur·trice·s souffrant dâun handicap visuel rencontrent frĂ©quemment ce problĂšme. Il est donc recommandĂ©, lorsquâun texte risque de sâĂ©tendre sur plusieurs lignes suite Ă un fort agrandissement de sa taille, de configurer des vues dĂ©roulantes.
Autre disposition des éléments pour des contenus agrandis.
Malheureusement, mĂȘme les designs les plus simples ne fonctionnent pas toujours pour toutes les tailles de texte. Dans ce cas, il est conseillĂ© de crĂ©er une autre variante de mise en page qui permette de modifier la disposition des Ă©lĂ©ments en fonction de la taille du contenu. Il peut notamment sâavĂ©rer utile de masquer les icĂŽnes pour rĂ©server davantage dâespace aux informations plus importantes.
Recommandation n° 2 : sélectionner les couleurs avec circonspection.
Pour les personnes avec un handicap visuel, lâapplication doit garantir une bonne qualitĂ© de contrastes pour ĂȘtre performante. Il est recommandĂ© dâutiliser une palette de couleurs avec un nombre limitĂ© de nuances soigneusement sĂ©lectionnĂ©es. IdĂ©alement, on y trouvera des couleurs de premier plan et dâarriĂšre-plan prĂ©sentant un fort contraste les unes par rapport aux autres.
De nombreux utilisateurs et utilisatrices avec un acuitĂ© visuelle rĂ©duite utilisent le mode sombre pour Ă©viter lâĂ©blouissement. Pour la mise en Ćuvre, le team chargĂ© du dĂ©veloppement de lâappli Inclusive CFF a mis au point une sĂ©rie de couleurs sĂ©mantiques. Une couleur sĂ©mantique est toujours utilisĂ©e pour un usage prĂ©cis. Exemple: la couleur textBlack est rĂ©servĂ©e Ă tous les textes ordinaires de lâappli. Un couple chromatique est ensuite attribuĂ© Ă la couleur sĂ©mantique pour le mode clair et le mode sombre. La palette de couleurs nâest ainsi dĂ©finie quâune seule fois et sera systĂ©matiquement appliquĂ©e de la mĂȘme maniĂšre dans toute lâapplication.
Recommandation n° 3 : optimiser lâaffichage pour les lecteurs dâĂ©cran.
Se familiariser avec les lecteurs dâĂ©cran.
VoiceOver et TalkBack sont dâautres Ă©lĂ©ments importants Ă prendre en compte lors de la programmation dâune appli accessible aux personnes en situation de handicap. En tant que dĂ©veloppeur ou dĂ©veloppeuse, il est conseillĂ© dâutiliser soi-mĂȘme rĂ©guliĂšrement les lecteurs dâĂ©cran et de les configurer sous la forme de raccourcis sur son propre appareil. Cela permet dâavoir une idĂ©e concrĂšte de ce qui est vĂ©ritablement important pour garantir une bonne utilisation de lâapplication. Ă cet Ă©gard, il est recommandĂ© de prendre Ă©galement en compte les feed-back des utilisateurs et utilisatrices tests, ces personnes maĂźtrisant parfaitement lâusage du smartphone avec leur handicap.
Masquer les informations visuelles non essentielles.
VoiceOver et TalkBack lisent Ă haute voix chacun des Ă©lĂ©ments visuels affichĂ©s sur lâĂ©cran. Mais cette fonctionnalitĂ© nâest pas toujours utile, notamment lorsquâune appli a souvent recours Ă des symboles ou Ă des images pour illustrer le texte. La rĂ©pĂ©tition ainsi engendrĂ©e est superflue pour les personnes utilisant un lecteur dâĂ©cran. Il convient donc, dans ce cas, de masquer ce type dâinformations.
Fournir des textes mieux adaptĂ©s aux lecteurs dâĂ©cran.
Souvent, lâinformation proprement dite ne devient claire quâune fois ses diffĂ©rents Ă©lĂ©ments assemblĂ©s. Il est donc important dâassocier ces donnĂ©es entre elles pour les lecteurs dâĂ©cran Ă©galement.
Information ligne par ligne | Informations combinées |
---|---|
â12:39â â12:40â âFlawilâ | â12:39, 12:40, Flawil, âŠâ |
Un design est considĂ©rĂ© intelligent lorsquâil fournit un contexte aux informations reprĂ©sentĂ©es sans le mentionner explicitement. LâĂ©cran ci-dessous en donne un exemple: au vu de lâordre dâaffichage des donnĂ©es, on peut en dĂ©duire que le train arrive Ă Flawil Ă 12h39 et en repart Ă 12h40. Ces informations ne sont toutefois pas explicitement communiquĂ©es par le biais de textes. Pour les personnes utilisant un lecteur dâĂ©cran, ces corrĂ©lations visuelles font dĂ©faut. On ajoutera donc des Ă©lĂ©ments de liaison sous la forme de textes supplĂ©mentaires.
Avant | AprĂšs |
---|---|
â12:39, 12:40, Flawil, âŠâ | « Flawil, arrivĂ©e Ă 12h39, dĂ©part Ă 12h40, voie n° 2, descendre Ă gauche » |
Mais pour ce faire, lâajout dâun simple attribut au code ne suffit pas. Il est de ce fait conseillĂ© de configurer un TextFormatter dĂ©fini par lâutilisateur·trice, lequel prendra en charge la mise Ă disposition de textes pertinents.
Pour accĂ©der plus rapidement au contenu souhaitĂ©, les lecteurs dâĂ©cran permettent la navigation de titre en titre. Ceux-ci doivent donc ĂȘtre identifiĂ©s en consĂ©quence dans le code.
Bien que les lecteurs dâĂ©cran soient trĂšs performants, tant sous iOS que sous Android, il est parfois nĂ©cessaire de leur donner un coup de pouce. Câest notamment le cas avec les horaires affichĂ©s par dĂ©faut de maniĂšre peu comprĂ©hensible.
Identifier les cas oĂč VoiceOver et TalkBack ne sont pas parfaits demande la rĂ©alisation de tests rĂ©guliers par tous les membres du team de dĂ©veloppement.
En résumé.
Concevoir une application accessible nâest pas si complexe dĂšs lors que les principes essentiels de lâaccessibilitĂ© numĂ©rique sont connus et pris en considĂ©ration. Il est important dâintĂ©grer ces principes dĂšs la phase de conception et de sensibiliser le team de dĂ©veloppement en consĂ©quence. Le travail de programmation supplĂ©mentaire sera ainsi minime. En outre, lâapplication sâadressera dĂšs son lancement Ă un public potentiellement plus large, dans la mesure oĂč les personnes en situation de handicap pourront Ă©galement lâutiliser de maniĂšre intuitive. LâaccessibilitĂ© numĂ©rique offre un voyage passionnant et instructif Ă forte valeur ajoutĂ©e, aussi bien pour les utilisateur·trice·s que pour les teams de dĂ©veloppement.
Information à propos des auteur·e·s
Ce texte a Ă©tĂ© publiĂ© pour la premiĂšre fois en aoĂ»t 2020, en anglais, sur le blog Medium de lâAppBakery des CFF. La prĂ©sente version a Ă©tĂ© actualisĂ©e et remaniĂ©e.
Reto Allemann travaille en tant que Product Owner de lâappli Inclusive CFF. Il est en outre responsable de lâinnovation et accompagne les teams dans le cadre dâorganisations de travail agiles.
Nicolas Brunner a occupĂ© jusquâen 2022 la fonction de dĂ©veloppeur iOS de lâappli Inclusive CFF. En aoĂ»t 2020, il a par ailleurs publiĂ© la version de base de cet article dans un blog paru sur Medium.
Jeanne Fleury travaille depuis 2022 en qualitĂ© de dĂ©veloppeuse iOS de lâappli Inclusive CFF.
Les dĂ©veloppeur·euse·s de lâappli Inclusive CFF travaillent pour le compte de lâAppBakery, une agence interne aux CFF chargĂ©e de crĂ©er des solutions innovantes Ă partir de nouvelles technologies.
Autres articles spĂ©cialisĂ©s passionnants sur lâaccessibilitĂ© des applications
- Lâinclusion numĂ©rique est pour tous
- Lâinclusion numĂ©rique, un fondement de lâĂ©galitĂ©
- Des barriÚres souvent négligées
- Assurer lâaccessibilitĂ© sur iOS et Android en mĂȘme temps
- Inclusion numérique dans la Post-App
- Voie vers un logiciel de gestion accessible
- Observations et avis dâun dĂ©veloppeur Web