Des suggestions d'amélioration pour l'attestation numérique de déplacement

Florent Morin |

La semaine dernière, le gouvernement a mis à disposition une attestation numérique de déplacement. Si le générateur d'attestation remplit très bien son office dans la plupart des cas, il reste néanmoins une marge de progression. Le ministère de l'Intérieur a d'ailleurs d'ores et déjà amélioré plusieurs aspects de ce générateur prenant la forme d'un formulaire web. Puisque le code est open source, nous en profitons pour faire quelques suggestions afin de peaufiner le générateur.

Le mode sombre

On peut choisir d’activer (automatiquement ou non ) le mode sombre pour diverses raisons :

  • pour ne pas fatiguer ses yeux, surtout si on est myope ;
  • pour limiter la lumière bleue le soir ;
  • pour économiser la batterie de son appareil ;
  • ou pour des raisons esthétiques, tout simplement.

Il est dommage de devoir subir une interface très claire alors qu’on a spécifiquement choisi de disposer d’un mode sombre sur son appareil. C’est d’autant plus dommageable s’il s’agit de raisons d’accessibilité.

Mode sombre dans iOS

Quel est le public concerné ?

Si Apple a démocratisé le mode sombre avec iOS 13, il est également accessible sur Mac. En dehors de l’univers Apple, on le retrouve sur Android depuis la version 10 et sur PC avec les dernières mises à jour de Windows 10 et d'Edge. Les navigateurs Firefox et Chrome prennent également en charge le mode sombre.

Le mode sombre dans macOS

Comment exploiter le mode sombre dans le code ?

Grâce au CSS, on peut choisir d’utiliser des couleurs différentes. Voici un simple exemple ci-dessous :

La même chose s’applique pour les images : on peut choisir d’utiliser une image alternative en mode sombre.

Cela se fait tout simplement ainsi en HTML :

En JavaScript, on peut détecter le mode sombre ainsi :

Quelles sont les bonnes pratiques de design à adopter ?

Plusieurs règles doivent être respectées pour un bon design en mode sombre. Il faut un contraste suffisant entre les couleurs pour que la lisibilité soit bonne. Sinon, l’image ou le texte risque de « vibrer ». De manière générale, on s’appuie sur des déclinaisons plus pâles des couleurs.

Il faut éviter d’avoir un noir totalement noir en arrière-plan s’il y a du texte blanc dessus. C’est plutôt un gris extrêmement foncé qui est recommandé.

Le fond n’est pas totalement noir et la couleur du titre est éclaircie pour une meilleure lisibilité

C’est essentiellement à l’usage que l’on se rend compte si un design est bien adapté ou non. À défaut, il existe des sites qui permettent de tester le contraste, de manière purement théorique.

L’accessibilité du texte

Depuis quelques années, iOS propose de changer la taille du texte de son appareil pour des raisons d’accessibilité évidentes (Réglages > Accessibilité > Affichage et taille du texte > Police plus grande).

Cela concerne une partie non négligeable de la population : beaucoup d’utilisateurs souffrant de presbytie s’en servent pour éviter de prendre leurs lunettes par exemple. Et cela concerne évidemment les personnes souffrant d’une forte déficience visuelle. Toujours est-il qu’il n’y a rien de plus frustrant que d’avoir un appareil accessible, mais une interface web illisible.

Là encore, le CSS fait des miracles. Depuis 2015, le moteur de rendu WebKit propose d’exploiter les tailles de texte dynamiques.

Le résultat change la vie des personnes en situation de handicap.

Sans taille de texte dynamique et avec : ça change tout

Et puisque nous sommes des utilisateurs d’iPhone et d’iPad Pro

Le petit bonus, c’est le support des encoches dans les interfaces web. Un petit détail qui apporte un confort supplémentaire.

Là encore, dès la sortie de l’iPhone X en 2017, les équipes WebKit ont prévu le coup.

Il s’agit d’utiliser une balise HTML adaptée dans l’en-tête du site.

Puis exploiter le tout en CSS.

Et le tour est joué. On ne risque plus de tapoter accidentellement la barre d'accueil en bas de l’écran pour accéder à un lien mal positionné : un espace est automatiquement ajouté.

À gauche, la marge de sécurité est respectée. À droite, elle est rognée.

Comment ce code pourrait-il être intégré à la version officielle ?

Comme dans tout projet open source, il y a une phase de validation du code par ses responsables. Les « mainteneurs » gèrent la vie du projet et s'assurent de sa qualité, en plus d'être les principaux contributeurs.

Aujourd'hui, nous avons juste mis en place une version alternative de l'app : on appelle ça un fork. Si les modifications apportées sont validées, notre code peut être fusionné avec le code existant.

Si vous souhaitez voir notre code pour le tester ou l’améliorer, la demande de modification avec commentaires est disponible sur GitHub. Le fork est lui aussi disponible sur GitHub et il intègre par définition toutes ces modifications (à utiliser uniquement pour tester).

Un bilan tout en compromis

Ces quelques suggestions pourraient permettre de peaufiner le générateur, en particulier pour les personnes porteuses de handicaps. Nous espérons qu’elles sauront inspirer les développeurs en charge du générateur d’attestation.

L’expérience reste limitée à ce que propose une web app. Une app native aurait permis une meilleure accessibilité (VoiceOver en particulier), une meilleure intégration à iOS (enregistrement du fichier PDF, entre autres) et des possibilités plus étendues (contrôle du nombre de sorties quotidiennes via mot de passe à usage unique).

Cependant, une app native nécessite de passer l'étape de validation de l'App Store (pas vraiment problématique pour un gouvernement) avec potentiellement moins d'appareils compatibles. La limite de compatibilité pour entrer sur l'App Store est iOS 8, soit l'iPhone 4s au minimum. Avec la version web, la limite théorique est iOS 6.1, soit l'iPhone 3GS au minimum. Il aurait fallu en plus maintenir une seconde app sur Android et de toute façon faire une version web pour les systèmes de bureau.


avatar Pyjamane | 

Il y en a qui s’ennuient, on dirait...

avatar TrollMan06 | 

@Pyjamane

Clairement 😂

avatar bugman | 

@Pyjamane

Pas mieux.

avatar nikoethore | 

Excellent article, on voit bien l'avantage de l'open source dans ce genre de projets.

D'ailleurs je viens de me rendre compte que j'ai eu plus ou moins la même idée que MacG en allant farfouiller dans le code JS du générateur d'attestation. Me rendant compte que c'était vraiment très basique, et n'ayant pas grand chose à faire de ma journée hier j'ai codé rapidos une version native en utilisant le combo de technologies Angular + Ionic5 qui permettent de créer des app semi natives en Javascript / Typescript. J'ai donc un APK pour Android et un projet Xcode fonctionnel d'une appli qui génère le même PDF que le site officiel, avec en plus une librairie des attestations générées.

Si quelqu'un est intéressé, je peux pousser le code sur Github avec plaisir :)

avatar enter1010 | 

@nikoethore

Avec plaisir pour le github :)
Merci

avatar nikoethore | 

J'ai pas eu le temps de le pousser, j'essaie de le faire ce soir :)

avatar InFunMatique | 

Excellent travail 😊
C’est vraiment vers ces problématiques qu’il faut se tourner 🙂
J’espère que le fork sera validé et intégré par les équipes du gouvernement.

avatar Florent Morin | 

@InFunMatique

Merci. Oui, c’est important de n’oublier personne. Et ça ne prend pas beaucoup de temps.

avatar bugman | 

@FloMo

Ça prend des ressources. Après, oui, je comprends concernant les handicaps. À côté de cela il me semble que les personnes ayant des problèmes de vue aujourd’hui les avaient également hier avant le mode sombre d’iOS. A croire qu’ils n’avaient pas de smartphone. 🤷🏻‍♂️
Le gouvernement a certainement mieux à faire que d’éviter que l’on touche par accident la barre en bas du smarphone. Question de priorité, certainement (tout comme la question du wallet (vu dans les coms), serieux !)

avatar Florent Morin | 

@bugman

Ça coûte pas cher franchement. Je suis pas développeur web (Je développe sur mobile) et j’ai fais ça en fin de matinée. Entre 1 et 2 heures peut-être.

avatar bugman | 

@FloMo

Là je pense qu’ils planchent sur leur logiciel de tracking avant tout.

avatar Florent Morin | 

@bugman

D’où l’intérêt de l’open-source. Ça permet de contribuer. De faire avancer les choses.

avatar bugman | 

@FloMo

Ah mais tout à fait... en temps normal, moins peut être dans une certaine urgence. Des choix sont fait.

avatar pat3 | 

@FloMo

Merci en tout cas, j’ai découvert des attributs HTML et des règles CSS que je ne connaissais pas.

avatar Florent Morin | 

@pat3

J’en suis ravi.

avatar noooty | 

Vachement intéressant: comment passer 20h de stress en modifiant les réglages d’un document pour une sortie plafonnée au max 1h, une seule fois par jour.
J’ajoute que le document se remplit et s’enregistre en 30s.

avatar Fabeme | 

@noooty

Uniquement pour les activités physiques :)

avatar Ali Baba | 

@noooty

Pas compris. De quelles 20h de stress tu parles ?

Par ailleurs, il n’y a pas que les loisirs dans les motifs de sortie. Il y en a six autres, très utilisés tous les jours, plusieurs fois par jour, par tout un tas de gens (en particulier le premier). Faut voir un peu plus loin que le bout de son nombril.

avatar noooty | 

@Ali Baba

Ha bon, tu as le droit de sortir plusieurs fois par jour?
C’est nouveau, ça vient de sortir, t’as tout compris...
Et les 20h étaient une plaisanterie.

avatar monsieurg33K | 

Et pourquoi pas pouvoir exporter l’attestation dans Wallet?

D’ailleurs, quand je vais courir, je ne prends que ma watch avec le QR code dedans (capture écran du QR code de l’attestation). Le scan avec l’iPhone (et un Pixel 4) marche nickel mais je me suis pas encore fait contrôlé. Des gens peuvent me dire s’ils ont aussi essayé ça et si c’était ok pour la police d’avoir juste le QR code?

avatar acnhc | 

@monsieurg33K

Ah super bonne idée !
Mais pas testée, à voir si ça fonctionne 😄

avatar calicoskies | 

@monsieurg33K

Je me suis fait contrôler hier, le gendarme n’était pas équipé pour lire le QR code. Il a pris mon téléphone en main pour lire l’attestation. Je déconseille, donc. (controlé à Paris, Trocadéro).

avatar rua negundo | 

@calicoskies

Pourquoi ne serait-il pas possible de lui tendre à bout de bras son téléphone pour qu’il lise (« on touche avec les yeux » comme il est écrit dans certains magasins qui vendent des choses fragiles)
La question s’adresse au gendarme

avatar calicoskies | 

@rua negundo

Bonne question... ça doit dépendre de qui fait le contrôle...

avatar bugman | 

@calicoskies

Je t’invite plutôt à lui demander de ne pas prendre ton smartphone en main. Suis certain qu’il peut comprendre.

avatar acnhc | 

C’est là qu’on s’aperçoit que c’est vraiment un métier. Certains n’en comprennent pas l’intérêt sur le moment mais lors de l’utilisation, au fil du temps, il n’y a plus débat.
C’est pareil pour tout logiciel, voir plus.
L’UI/UX n’est pas à négliger ☝️

avatar hirtrey | 

@acnhc

Si, elle peut être négligée si l’application a une durée de vie de 2 mois.

avatar mirando | 

@hirtrey

2 Mois utilise au moins par 40 millions de personnes ça fait quand même 2,4 millard d’utilisations. Oui ça vaut le coup de soigner l’UX

avatar acnhc | 

@hirtrey

N’en déplaise à ceux ayant besoin de fonctions d’accessibilité ?

avatar hirtrey | 

@acnhc

Oui

avatar acnhc | 

@hirtrey

J’aimerais pas entendre ça si j’étais atteint d’une certaine forme d’handicap..

avatar karateka31 | 

QR Code dans Wallet non?

avatar tahitibobx987 | 

De la publicité pour rembourser la dette 😉

avatar Kubusiu | 

Vous ne savez plus quoi écrire chez macgé? Parce que là, l’article donne l’impression que vous cherchez à enc... les mouches ...

avatar acnhc | 

@Kubusiu

Au contraire, c’est très intéressant pour moi

avatar BananaYatta | 

@Kubusiu

Article hyper intéressant, en espérant que les modifications apportées feront avancer ce formulaire qu’on va encore devoir utiliser pendant au moins un mois.

Et pour ceux qui trouvent l’article inutile, merci d’avoir pris le temps de le lire et de le commenter !

avatar JokeyezFX | 

@BananaYatta

+1

avatar Pyby | 

+1

Peut-être que ta PR pourrait être coupée en 3 PRs et soumises à nouveau, vu qu'il y a 2 virgules dans dans le titre. Parfois, c'est plus simple pour la "code review". 🤷🏻‍♂️ Ok, je chipote, mais c'est pour pousser un peu plus tes améliorations 😌

C'est tout à fait normal de faire un service accessible pour un service publique, même si c'est la startup nation qui le fait. Et top qu'il soit mis en Open Source.
Merci pour la sensibilisation à l'accessibilité.

avatar kalla | 

Il suffit de copier l'application Android : Multiple comptes, sauvegarde des attestations avec QR Code....

avatar WWII | 

De mon côté problème pour générer le PDF sur Safari iOS 13.4.1 🤔 c’est-à-dire que je remplis le formulaire mais quand je click sur « générer mon attestation » ça ne marche pas.
Quelqu’un a la réponse ??
Par contre sur Firefox ça fonctionne.

avatar Stef.L | 

Pareil pour moi. Impossible de générer l'attestation en cliquant dans Safari sur iPhone 4S. Obligé de passer par mon iMac (El Capitan), d'ouvrir la page dans Brave, l'enregistrer sur le bureau en pdf, l'uploader dans Google Drive, puis ouvrir l'app Drive sur l'iPhone! Ouf... C'est pas la fin du monde mais c'est un peu chiant comme manip'.

avatar TrollMan06 | 

On touche le fond 🤦‍♂️

avatar mystik91 | 

Pfffffff... que de préoccupations...

CONNEXION UTILISATEUR