Le design system de la Fabrique de Noël
Les lutins Oli Daynight et Any Goodcookie ont été convoqués dans le bureau du Père Noël. Oli Daynight est le lutin responsable du design de la plateforme et Any Goodcookie, la nouvelle experte accessibilité, embauchée récemment sur les conseils de Candy Canes.
Le lutin et la lutine entrent dans le bureau du Père Noël. Tout est grand dans le bureau du Père Noël, mais eux, sont tout petits… Évidemment, ce sont des lutins ! Oli et Any doivent donc littéralement grimper pour pouvoir s’asseoir sur les fauteuils que leur désigne le Père Noël. Oli ronchonne, marmonnant que les fauteuils ne sont pas très accessibles aux lutins et lutines.
« Comme vous le savez, nous avons retravaillé notre identité visuelle, en nous assurant que celle-ci soit inclusive et accessible. Nous avons reçu de nombreux courriers des enfants et parents du monde entier, nous remerciant du travail que nous avons fait. Nous avons aussi eu de très bons retours de la part des lutins et lutines et de nos fournisseurs de jouets. En revanche, beaucoup mentionnent aussi que notre plateforme n’est pas encore accessible. Qu’en pensez-vous ? Par où devrions-nous commencer ? »

Le Père Noël plante ses deux coudes sur son immense bureau et dépose son visage rond dans ses mains, un sourcil relevé.
Le lutin et la lutine expliquent au Père Noël que la plateforme de la Fabrique de Noël est très dense, avec de nombreuses fonctionnalités. Certaines s’adressent aux fournisseurs de jouets, d’autres aux lutins et lutines de la fabrique.
Oli Daynight explique qu’un bon moyen de commencer serait de travailler sur les composants du design system 1 car ils représentent une bonne partie des éléments présents dans la plateforme.
« Qu’est ce que c’est un Design System ? », demande le Père Noël, un peu vexé car habituellement, c’est lui qui sait tout.
« Pour faire simple, un design system est un ensemble de composants que l’on retrouve de manière récurrente sur un site ou une application. Cela permet d’unifier le design de ces composants récurrents, voire d’en créer une version codée, que les personnes s’occupant du design ou du développement peuvent intégrer dans les pages. », explique Oli.
Any Goodcookie intervient, expliquant que ce n’est malheureusement pas magique, que c’est un bon moyen de commencer mais que cela ne rendra pas la plateforme totalement accessible immédiatement. Pour atteindre ce but, il faudra revoir les différentes pages, modifier les autres composants, les interactions entre eux ainsi qu’entre les pages. Si les moyens le permettent, ce travail pourra être fait en parallèle. Sinon, il faudra le faire par la suite.
État des lieux
Oli et Any s’attèlent à faire un état des lieux de ce qu’il faut mettre en place pour ce gros projet.
Former les équipes
Any insiste sur le fait qu’avant toute chose il est important de mettre en place une nouvelle série de formations pour les équipes de lutins et lutines chargé·es du design et du développement de la plateforme. La lutine organise alors des sessions de formation avec Candy Canes pour chaque typologie de métiers (exemple : lutins et lutines designers, lutins développeurs et lutines développeuses, lutins et lutines gestionnaires de projets…).
Audit ou refonte immédiate ?
Oli demande à Any d’auditer les différents composants afin de pouvoir estimer l’étendue du travail à faire. Après réflexion, Any ne trouve pas cela très efficace : comme les composants doivent être retravaillés dans leur intégralité suite au changement d’identité visuelle, et au vu du peu de temps imparti, la lutine trouve plus pertinent d’appliquer l’accessibilité directement dès le début du travail sur chacun des composants.
Le lutin n’est pas convaincu car cela implique qu’ils n’auront plus de traces des composants initiaux, plus aucun moyen de savoir quel était leur niveau d'accessibilité de départ.

« En effet. Mais, si tu y réfléchis bien, tu n’as pas eu besoin de mesurer la hauteur du fauteuil avant de t’asseoir, n’est-ce pas ? Tu savais de toute façon à vue d’œil qu’il était haut. Et pourtant, tu l’as escaladé directement pour pouvoir t’y asseoir confortablement, non ? C’est un peu pareil ici.
La marche est haute, mais si nous la grimpons directement nous pourrons y arriver plus rapidement. Nous pourrons alors évaluer notre niveau d’accessibilité tout en sachant que ce sera un niveau déjà relativement confortable », explique Any Goodcookie avec un clin d’œil.
Avec ces arguments, la lutine réussit non seulement à convaincre son confrère, mais également le Père Noël : pour lui, le plus vite sera le mieux ! (Et à moindre coût en plus car un audit lui coûterait cher en cookies et sucreries…)
Conformité ou accessibilité ?
Any pose la question à Oli et au Père Noël : souhaitent-ils :
- uniquement se conformer aux référentiels d’accessibilité, assurant ainsi un accès sans points bloquants à leurs utilisateurs et utilisatrices ainsi que le respect des différentes lois pour l’accessibilité et l’inclusion à travers le monde ?
- ou se conformer aux référentiels et, au-delà, vers plus d’accessibilité et d’utilisabilité pour un réel confort de tous leurs utilisateurs et utilisatrices ?
Bien qu’ils préfèrent tous la deuxième solution, le temps restant avant Noël ne le leur permet pas. Oli propose donc d’assurer la conformité, tout en tentant, par petites touches, sur le design notamment, d’assurer une meilleure accessibilité et utilisabilité, tant que cela ne leur demande pas trop de travail supplémentaire.
Une fois cette décision actée, Any propose d’utiliser les Web Content Accessibility Guidelines (WCAG)2 comme référentiel principal. En effet, la Fabrique de Noël travaillant avec des fournisseurs de jouets à travers le monde, elle se doit de respecter un référentiel reconnu légalement à travers le monde. De plus, ce référentiel a récemment été reconnu comme étant une norme ISO (ISO/IEC 40500).
La mise en pratique
Intégrer l’accessibilité dans les processus
Any explique également à Oli et au Père Noël que, pour s'assurer que les composants soient le plus accessibles possibles, il est important qu’elle soit impliquée à chaque étape : de la conception au développement, mais aussi lors de la phase de tests.
Any devient au fur et à mesure la lutine préférée des lutins et lutines designers, développeurs et développeuses. Elle est toujours présente pour les aider en saupoudrant un peu de connaissances par ici, veiller avec bienveillance par là ou encore faire s’envoler de nouvelles idées…
Saupoudrer un peu de connaissances
Pour chaque composant, Any rédige une documentation incluant des recommandations de base pour les designers et pour les développeurs et les développeuses.
Cette documentation sera disponible pour toutes les équipes, pas seulement pour l’équipe du design system. Ainsi, les autres équipes pourront commencer à rendre accessibles tous les composants custom3
sur la base de cette documentation.
Veiller avec bienveillance
Pour accompagner au mieux les lutins et lutines, Any a mis en place des points de contrôle à deux niveaux. Dès que les designers ou les développeurs et développeuses commencent à avoir quelque chose de concret à présenter, Any y jette un œil.
Cela lui permet souvent de:
- les aider à corriger immédiatement les plus grosses erreurs d’accessibilité,
- de repérer immédiatement les points de frustration que pourraient avoir les utilisateurs et utilisatrices en situation de handicap par exemple face à un composant trop complexe,
- ou encore de repérer les soucis de fonctionnement techniques.
Elle vérifie également leurs travaux juste avant la validation finale de chaque étape, afin d’être sûre que rien n’a été oublié.
Phases de tests
Any et Oli auraient bien aimé organiser des tests utilisateurs en rassemblant les différents utilisateurs et utilisatrices en situation de handicap de la plateforme de la Fabrique, lutin·es et fournisseurs de jouets.
« Nous manquons de temps car Noël approche à grands pas ! Nous pourrons le faire après Noël, sur une phase d’amélioration », dit le Père Noël. « Les jouets que je crée ne sont jamais parfaits au premier essai ! J’observe toujours les enfants jouer avec, afin de les améliorer l’année suivante. Faisons pareil dans ce cas ! », ajoute-t-il avec un clin d’œil.
Any explique que la phase de tests reste importante en accessibilité. D’autant que la fabrique de Noël ne possède pas d’équipe de test, par conséquent, les designers, développeurs et développeuses utilisent souvent la technique anglosaxone du « peer review »4 , en faisant tester leurs travaux par les autres membres de l’équipe.

Any a alors l’idée de créer des sessions de tests en commun, qu’elle a appelées « Dans leurs chaussons », en référence à l’expression anglaise « to put yourself in someone’s shoes »5 , où les lutins designers, développeurs et développeuses devront tester les travaux de leurs pairs. Any leur propose quelques idées magiques :
- une poudre rouge et verte permettant de simuler certaines typologies de daltonisme et de malvoyance,
- une poudre arc-en-ciel pour faire ressortir les erreurs de code,
- un clavier magique empêchant la souris de fonctionner,
- une poudre dorée faisant parler l’ordinateur…
Any leur fournit également une checklist de choses à vérifier durant ces séances.
Bilan
Nous voici au mois de novembre, Noël est au pas de la porte et le Père Noël convoque de nouveau Oli Daynight et Any Goodcookie afin qu’il et elle lui expliquent où en est le projet.
Le lutin et la lutine exultent : quasiment la totalité des composants du design system ont été révisés et sont maintenant en majeure partie accessibles.
Même si la plateforme n’est pas encore totalement accessible, de beaux efforts ont été fournis et les composants du design system apportent une base solide à l’accessibilité de la plateforme.
Les processus mis en place par Any ont porté leurs fruits, et les sessions « Dans leurs chaussons » ont apporté un avantage imprévu : tout cela a permis aux équipes de continuer à apprendre sur l’accessibilité !
En effet, la mise en pratique et les conseils quotidiens d’Any pour trouver des solutions et tester ont permis aux équipes d’en apprendre bien plus que lors de leurs formations initiales.
Durant l’année, certains lutins et lutines des autres équipes de design et de développement ont suivi le mouvement, contactant Any pour lui demander de l’aide pour améliorer les quelques pages dont ils et elles étaient responsables.
Le Père Noël est très content car la magie opère à un tout autre niveau : par la volonté et l’engouement des lutins pour l’accessibilité !
Mais il reste conscient qu’il y a encore du travail à faire et des étapes à suivre pour que la plateforme de la Fabrique de Noël soit totalement accessible. Il assure à Any Goodcookie que l’année suivante, tout le monde s’attèlera au reste du travail à faire — il en a déjà informé Léna Candelight, la lutine responsable de la plateforme dans son intégralité (la manager d’Oli), — mais aussi qu’il aimerait bien organiser ces fameux tests utilisateurs. Any s’en réjouit : elle sait déjà qu’elle recommandera Molly Chamalow.
Note de l'auteur : remerciements à ma lutine Eléa pour les illustrations ! 🥰
- Design System - traduction littérale : système de conception ou système de design. Il s'agit d'un ensemble de composants réutilisables, guidé par des standards et une gouvernance, pouvant être assemblés pour construire plusieurs pages ou sites Internet Retour au texte 1
- Web Content Accessibility Guidelines abrégé WCAG : Recommandations d’accessibilité pour les contenus web. Retour au texte 2
- Composant custom - traduction littérale : un composant personnalisé. Il s'agit d'un composant fait sur mesure dans le cadre spécifique d’une fonctionnalité, d’une page ou d’un ensemble de pages. Retour au texte 3
- Peer review - traduction littérale : « évaluation par les pairs ». Technique initialement utilisée dans le domaine de la recherche scientifique (voir la définition Wikipédia de l’évaluation par les pairs) mais de plus en plus utilisée dans le domaine du web. Retour au texte 4
- « To put yourself in someone’s shoes » - traduction littérale : « se mettre dans les chaussures de quelqu’un ». Cette expression signifie « se mettre à la place de quelqu’un » afin de mieux comprendre la situation dans laquelle la personne est. Retour au texte 5
Il n’est plus possible de laisser un commentaire sur les articles mais la discussion continue :