Extia - D'abord qui, ensuite quoi !

Le blog
Architecture hexagonale et accessibilité !

Partager
actuality.blog.title

Mercredi 15 décembre, la Comet’ JavaScript proposait son dernier Meetup® Event de l’année. Plus d’une soixantaine de personnes étaient au rendez-vous pour parler d'architecture hexagonale et d’accessibilité !

Après une rapide introduction sur les Comet’, Pierre, Lead de la communauté, a laissé la parole à Pierre Criulanscy, un intervenant connu de certains car il avait animé d’autres événements de la communauté JS. Cette fois-ci, il est venu parler d’architecture hexagonale.

Sa présentation s’est appuyée sur l’exemple métier d’une application de memory box, une boîte à souvenirs. Pour fabriquer cela, il faut tout d’abord commencer par faire un peu de pseudo code pour comprendre le cas d’usage. L’objectif ici est de pouvoir accéder à une memory box, ajouter du contenu à celle-ci et la sauvegarder. 

L’un des gros avantages de l’architecture hexagonale est d’éviter de devoir faire des choix techniques, potentiellement lourds, trop tôt dans la vie d’une application. Du coup, ce sont les tests qui vont être les premiers clients de cette application. Ici, les tests sont faits avec Jest, une des bibliothèques les plus utilisées en Javascript.

Pour créer la memory box, il faut une date et un contenu sous forme de texte qui sera fourni par Jest, qui sera notre driving adapter.

On peut maintenant imaginer un schéma de notre structure hexagonale. Au centre, on a du pseudo code qui sert à fabriquer notre memory box. À sa gauche, Jest qui va lui injecter des infos. Dans ce cas, on appelle Jest un driving adapter. Le pseudo code est censé avoir un impact sur le long terme, en interagissant avec une base de données ou des services. C’est ce qui s’appelle une dépendance, ou un driven adapter. Dans notre cas, cela va être une fausse base de données qui s’appelle un repository.

Une fois que toutes ces étapes sont réalisées, le tout peut être lancé !

La partie incroyable de cet ensemble est que l’on peut brancher d’autres adapters si besoin : Jest en driving adapter peut être remplacé par des calls graphQL, la fake database en driven adapter peut être remplacée par des services...

L’architecture hexagonale permet de repousser les choix techniques à plus tard, tester la logique métier avec les fonctionnels de l’équipe technique et avoir du feedback rapidement.

La seconde partie de la soirée s’est déroulée avec Augustin Le Fèvre, qui lui aussi revient une nouvelle fois rendre visite à la Comet’ JavaScript pour nous parler d'accessibilité. Un sujet important pour Extia. 

Augustin travaille pour une application qui génère beaucoup de trafic et l’accessibilité est devenu un élément clé. Son retour d’expérience a été une belle source d’information pour tous les Extien(ne)s connecté(e)s.

En comptabilisant tous les types de handicap qui peuvent altérer notre façon d'utiliser le web, près de 10 % des utilisateurs sont atteints. On compte 1 million de malvoyants en France, et pourtant, tant les dev que les PO oublient souvent de penser à cette tranche de la population quand ils pensent à une application web.

Voici quelques exemples de cas de handicap : les personnes ne pouvant pas utiliser une souris, les personnes pouvant être incommodées par des animations ou encore le daltonisme. Mais il existe aussi des cas que l’on appelle des handicaps temporaires : porter un enfant, avoir une main dans un plâtre, porter des lunettes de soleil…

Selon Augustin, l’accessibilité, c’est une question d’empathie.

Il faut aussi savoir que c’est une question légale. Pour des produits web publics, destinés à un large public, il est obligatoire de faire en sorte que le site soit utilisable par tous. De grosses sociétés comme Netflix ont été tenues de se mettre à jour.

L’accessibilité, c’est aussi l’opportunité d’améliorer l’UX, l’expérience utilisateur, pour tous. Une image sans texte alternatif, c’est un aveugle qui ne peut pas utiliser votre site.

Augustin a conseillé aux participants de ne pas lire les énormes pavés que forment l’ensemble des recommandations dans ce domaine mais plutôt s’attarder sur des articles et vidéos sur le sujets qui donnent des pistes d’améliorations. Par ailleurs, il ne s’agit pas de viser la perfection du jour au lendemain. Procédez par palier, petit à petit.

Un exemple de l’utilisation de Twitter par une aveugle ICI a très bien illustré ses propos.

Augustin a poursuivi avec une démonstration de code qu’il utilise pour éviter les écueils susmentionnés

- une image doit avoir un texte alternatif et le tag <img>,

- une icône doit avoir un label,

- ne pas utiliser de <div> à la place de bouton <button> de façon à ce que les outils d’aide à la navigation pour les aveugles puissent leur indiquer que l’item sélectionné est un bouton.

Il a également donné des conseils plus généraux :

- penser à mettre un label “disabled” si un bouton est impossible à cliquer,

- une information purement visuelle n’est pas accessible à tout le monde,

- faire attention aux contrastes ! (Les nuances de gris peuvent poser problème.),

- attention à un simple changement du vert au rouge pour des indications de statut (s’il n’y a pas de label associés, vous risquez de perdre les daltoniens),

- permettre la désactivation de vos animations avec le tag reduced motion.

Il existe des outils d’aide au diagnostic et de conseils en termes d’accessibilité : Lighthouse, Storybook…

Voici les présentations de Pierre ici et celle de Augustin ici pour plus de détails.

Bonnes fêtes ami.e.s du Javascript et une très belle nouvelle année !

Rendez-vous en 2021 pour nos prochains Meetup® Event online. Et d’ici là, n’hésitez pas à nous suivre sur notre page Twitter @CometByExtia et à consulter notre site internet dédié aux Meetup® Event.

WANTED !
1000 2021 Nos offres d'emploi Candidature spontanée Serez-vous le prochain ? Extia recrute talents en