Un utilisateur, un réglage d'accessibilité, et mon application devenait inutilisable

Il y a quelques semaines, j’ai publié Marées Nouvelle-Calédonie, mon application de marées hors-ligne. Peu après, un utilisateur m’écrit : avec ses réglages d’accessibilité, il ne peut pas passer le premier écran. Il ne voit pas le bouton pour continuer.

Ce premier écran est un avertissement de sécurité, celui qui rappelle que l’application ne sert pas à la navigation. Il faut l’accepter une fois. C’est un passage obligé. S’il est infranchissable, toute l’application est inutilisable. Pour lui, elle l’était.

Je te raconte ce que j’ai trouvé, parce que ce n’est pas une histoire de développeuse. C’est une histoire de couleurs, de taille de texte et de suppositions, et elle vaut pour ton site, tes documents et tes présentations autant que pour mon application.

Ce que j’ai mesuré

Le bouton était à 3 412 pixels sous l’écran

L’écran d’avertissement était une colonne de texte centrée, avec le bouton « J’ai compris » en bas. Sans défilement. Avec le texte à sa taille normale, tout tient. Avec le texte agrandi à trois fois, sur le plus petit téléphone que l’application supporte, le bouton se retrouvait à 3 412 pixels sous le bord de l’écran. Autant dire dans la pièce d’à côté.

Trois fois la taille normale, ça te paraît extrême ? C’est un réglage que proposent iPhone et Android dans leurs options d’accessibilité, et que des gens utilisent au quotidien. Pas pour le plaisir : parce que c’est la condition pour lire.

Deux couleurs que la moitié des gens confondaient

En cherchant ce premier problème, j’ai regardé le reste. Dans cinq écrans, la pleine mer et la basse mer se distinguaient par leur couleur : un bleu et un vert-bleu. Deux couleurs qui, à l’œil, me semblaient bien différentes.

J’ai mesuré au lieu de juger. Le rapport de contraste est un nombre qui dit à quel point deux couleurs se détachent l’une de l’autre. Les référentiels d’accessibilité, le RGAA en France, le référentiel général d’amélioration de l’accessibilité, comme les recommandations internationales, demandent au moins 4,5 pour 1 entre un texte et son fond.

• Mon bleu sur fond clair : 3,05 pour 1. En dessous du seuil.
• Mon bleu contre mon vert : 1,18 pour 1. Deux teintes de luminosité presque identique. Pour une personne qui perçoit mal les couleurs, environ un homme sur douze, c’était la même couleur.

Autrement dit, sur ces cinq écrans, l’information « la mer monte » ou « la mer descend » n’était portée que par une couleur que certains ne pouvaient pas distinguer.

Ce que j’ai corrigé

L’écran d’avertissement défile, tout simplement. Et j’ai passé les sept écrans de l’application au texte agrandi trois fois, sur le plus petit appareil : tous restent utilisables.

Les couleurs de pleine mer et de basse mer ont été refaites. Les nouvelles dépassent 7 pour 1 sur leur fond, en clair comme en sombre.

Surtout, chaque horaire porte maintenant une flèche, montante ou descendante. La couleur reste, elle aide, mais elle ne porte plus jamais l’information toute seule. C’est exactement ce que demande le premier critère du RGAA sur les couleurs.

Même logique sur la nouvelle carte des sites : les marqueurs se distinguent par leur forme, rond, étoile ou cible, pas seulement par leur couleur.

Le fond de carte lui-même a été mesuré : la terre se détache de la mer à 3,8 pour 1 en mode clair et 4,1 pour 1 en mode sombre, et les marqueurs dépassent 6,4 pour 1 sur leur liseré.

Et j’ai ajouté des tests automatiques qui rejouent ces situations à chaque modification de l’application. Le bouton qui disparaît, c’est le genre d’erreur qu’on refait sans s’en rendre compte six mois plus tard.

Deux soirées de travail. Pour une application qu’un pêcheur ouvre en plein soleil sur un bateau, ou qu’une personne de 70 ans consulte avant d’aller marcher sur le platier, c’était deux soirées bien placées.

Les trois règles que ça m’a rappelées

Elles ne concernent pas que les applications. Elles s’appliquent à un site web, à un document Google Docs, à une présentation, à un formulaire.

1. Un passage obligé doit être franchissable par tout le monde

Un écran d’accueil, une case à cocher pour accepter des conditions, un menu de navigation, un bouton « Envoyer ». Si un seul de ces passages échoue avec un réglage d’accessibilité, tout ce qui vient après n’existe plus pour cette personne. Commence toujours par vérifier ceux-là.

2. La couleur ne porte jamais une information toute seule

Rouge pour « en retard », vert pour « fait », dans un tableau ? Ajoute un mot, un symbole ou une forme. Une courbe bleue et une courbe orange dans un graphique ? Différencie aussi le trait ou la légende. Un lien qui ne se distingue du texte que par sa couleur ? Souligne-le. La règle tient en une phrase : si tu imprimes en noir et blanc, l’information doit rester là.

3. Mesurer plutôt que juger à l’œil

Mon œil me disait que bleu et vert-bleu étaient différents. Le chiffre disait 1,18. Un vérificateur de contraste en ligne te donne le rapport en deux secondes, il suffit de coller deux codes couleur. Et pour le texte, le meilleur test ne coûte rien : va dans les réglages de ton téléphone, section Accessibilité, monte la taille du texte au maximum, et ouvre ton propre site ou ton propre document. Tu verras ce que voient les gens qui vivent avec ce réglage.

Ce que je n’ai pas encore vérifié

Par honnêteté : ces corrections ont été vérifiées par des tests automatiques et sur simulateur, pas encore par une personne qui utilise ces réglages tous les jours. Si c’est ton cas et que tu ouvres l’application, dis-moi ce que tu vois, le bouton pour m’écrire est dans l’écran « À propos ». C’est ton regard qui manque, pas le mien.

Pour aller plus loin

• La même démarche, appliquée à tes documents de tous les jours : rendre vos documents bureautiques accessibles aux personnes dys, 10 pratiques simples.
• Marées Nouvelle-Calédonie, gratuite, sur App Store et Google Play.

Et si tu gères un site ou une application pour ta structure, et que tu ne sais pas par où commencer : commence par le passage obligé, la couleur, et le texte agrandi. Ces trois vérifications prennent une heure, et elles règlent une grande partie des problèmes que rencontrent réellement les gens.