Quand le graphisme rencontre le code : la génèse du projet A11y Canvas
Yuliana a terminé notre formation intensive de 5 mois en développement web en 2026. Avant cela, elle était artiste graphiste en Russie. Une fois arrivée en France, en tant que nouvelle arrivante sans diplôme reconnu et avec une maîtrise encore limitée du français, elle a dû recommencer son parcours de zéro. Elle a donc choisi de prendre des jobs alimentaires le temps de se former à nouveau. Grâce à l'accompagnement de CAP Emploi et au dispositif Transition Pro, elle a pu construire un véritable projet de reconversion vers le développement web, dans de bonnes conditions.
« Il y a tout juste un an, je transportais des montagnes de cartons sur un tire-palette dans un hypermarché et je réapprovisionnais les rayons épicerie. Aujourd’hui, je développe seule des applications full-stack et je les déploie en ligne. Ce changement de vie, à 50 ans, en tant qu’étrangère et personne en situation de handicap auditif, relève pour moi du miracle. » confie-t-elle.
En se réorientant dans le développement web, elle a pourtant choisi de ne pas abandonner sa carrière passée ! Même lorsque l’on souhaite changer de métier, les compétences acquises lors de nos précédents postes ne disparaissent pas, bien au contraire !
« Ma reconversion n'est pas, au fond, un abandon du passé ni un virage radical vers quelque chose de totalement nouveau : c'est plutôt l'ajout de nouvelles compétences, de nouvelles perspectives d'évolution. Aujourd'hui, quand je travaille de façon autonome sur mes projets full-stack, mon bagage de designer m'aide énormément : je choisis ma charte graphique et je conçois la maquette de mon application sans difficulté particulière. J'ai compris que les compétences techniques supplémentaires me donnent bien plus d'autonomie et bien plus de possibilités de concrétiser ce que j'ai en tête que le graphisme seul. », explique-t-elle.
Aujourd’hui, ce double profil est un réel avantage lorsqu’elle donne vie à des projets !
Pourtant, malgré un solide bagage en design graphique, concevoir une palette numérique conforme à la réglementation est complexe. Dans le cadre d'un bootcamp intensif, chaque minute compte ! C’est pour palier à ce manque de temps qu’elle a conçu A11y Canvas, un générateur de chartes graphiques accessibles, gratuit et déjà en production. Ce projet prouve qu’en maîtrisant le code, on peut apporter des solutions concrètes aux enjeux majeurs de l’accessibilité web.
L'accessibilité numérique : un impératif humain et technique
Les normes WCAG (Web Content Accessibility Guidelines) ont été conçues pour briser les barrières numériques et compenser les difficultés quotidiennes des personnes en situation de handicap (visuel, auditif, moteur ou cognitif). C’est un enjeu qui compte énormément pour Yuliana :
« Je suis moi-même en situation de handicap invisible : malentendante avec un implant auditif à ancrage osseux. Par exemple, la présence de sous-titres dans les vidéos me facilite considérablement la vie. La possibilité d'accéder à l'intégralité de l'information sous format texte, et pas uniquement en format vidéo ou audio, est extrêmement importante pour moi. Quand les sources d'information sont adaptées à mes besoins, je peux être plus efficace et plus productive, mieux comprendre le contenu, mieux travailler. Cela vaut aussi pour les personnes ayant d'autres types de handicap, et pas seulement : les personnes qui, à un moment donné, font face à des difficultés techniques — une connexion internet lente, un fort ensoleillement qui tombe sur l'écran, etc. — d'une manière générale, il faut que notre monde soit confortable pour tout le monde, et pas uniquement pour les personnes en parfaite santé. D'autant que chez la quasi-totalité des personnes après cinquante ans, des problèmes de vision se développent. Même si nous n'avons aucun handicap ni aucune difficulté technique, nos yeux se fatiguent tout de même beaucoup moins lorsque l'application que nous utilisons ne les sollicite pas outre mesure. Je considère comme totalement injustifiées les décisions de design qui compliquent l'expérience utilisateur au lieu de la faciliter. »
En appliquant ces règles fondamentales, les développeurs créent des interfaces adaptées qui allègent la charge des utilisateurs et favorisent leur autonomie en ligne. À l'inverse, négliger ces critères revient à exclure activement une part essentielle de la population.
« Pendant la formation, quand nous devions, avec nos groupes d'étudiants, concevoir la charte graphique et la maquette de nos applications, peu d'entre nous avaient comme moi un passé de designer, et pour beaucoup, cette étape posait des difficultés. Le premier réflexe naturel, c'est de choisir les combinaisons de couleurs et les polices qui, à ce moment-là, vous semblent belles, agréables à l'œil. Mais si l'on ne suit que ses propres conceptions de la beauté sans tenir compte des règles d'accessibilité, le texte peut devenir tout simplement illisible, et certaines personnes ne le distingueront même pas de la couleur du fond. Ce n'est pas une question de beauté ni d'esthétique — c'est une question d'utilisabilité. Si l'utilisateur ne peut pas accéder correctement à l'information sur notre application, il va simplement la fermer et s'en aller. Dans la vie réelle, cela signifie la perte de clients, des pertes financières. » explique Yuliana.
Analyser rigoureusement la compatibilité des couleurs est un processus long. Lorsque l’on développe un projet en ligne, on ne prend pas toujours le temps de le faire et cette tâche peut vite devenir chronophage. Yuliana a voulu créer un outil capable de faciliter cette étape lors de la création d’un projet : c'est ainsi qu'A11y Canvas est né !
« En même temps, le rythme du bootcamp de notre formation, aussi excellente soit-elle, ne nous laissait tout simplement pas le temps d'analyser de façon réfléchie et rigoureuse la compatibilité de nos combinaisons de couleurs. D'autres tâches étaient prioritaires. À ce moment-là, cette application m'a cruellement manqué — pour pouvoir en quelques secondes choisir parmi des palettes prêtes à l'emploi ou en générer une personnalisée, correcte par défaut, conforme WCAG AA / RGAA. Je serais ravie que cette application puisse être utile à d'autres étudiants qui se retrouvent dans la même situation. Mais au-delà de la résolution d'un problème d'urgence dans les projets étudiants, cet outil peut être utile dans tous les cas où il s'agit de créer un contenu comportant du texte et des couleurs : pas seulement des sites web, mais aussi des présentations, des CV, des portfolios, et bien d'autres choses. »
Zoom sur A11y Canvas : la charte graphique accessible en quelques clics
A11y Canvas est un générateur gratuit de design tokens pour la conception d'une charte graphique avec vérification intégrée de l'accessibilité. L'application est conçue pour faciliter et accélérer le processus de choix d'une palette de couleurs correcte pour votre maquette. Qu'il s'agisse d'un site web, d'un blog ou d'une présentation, l'accessibilité doit être présente partout où il y a du texte, pour que ce soit non seulement beau, mais véritablement lisible !
A11y Canvas génère des variables CSS prêtes à l’emploi testées et conformes aux standards WCAG AA minimum. L’interface configure cinq axes : couleurs, typographie, border-radius, espacement et ombre.
« Pour le dire très simplement : vous choisissez une palette de couleurs, des polices, l'arrondi des boutons, les espacements, les ombres — et vous voyez tout cela en direct, sur un mini-maquette schématique simplifiée, juste devant vous. Pas de Figma. Pas de « je vais juger à l'œil ». Chaque token est vérifié automatiquement pour sa conformité WCAG AA. » explique Yuliana.
« L'interface est organisée autour de cinq axes : couleurs, typographie, border-radius, espacement et ombre. Dès que vous sélectionnez une valeur, le résultat est immédiatement visible en temps réel sur une mini-maquette schématique — une sorte de mockup que j'appelle le Preview Canvas. Le Preview Canvas dispose actuellement de deux types : App (par défaut) et Vitrine, pour pouvoir évaluer en quelques secondes comment l'ensemble des éléments de design choisis par l'utilisateur se présente sur une page web type. » détaille Yuliana.
L'expérience à la Wild Code School
Quelle école choisir pour une reconversion ? Yuliana a choisi la Wild Code School pour la possibilité de se former à distance. L'accompagnement humain de l'école a également été décisif pour piloter sereinement son financement avec Transition Pro Île-de-France :
« Le format de formation proposé par la Wild Code School me convient parfaitement : c'est à la fois un enseignement à distance — ce qui signifie qu'il n'y a pas besoin de se déplacer — et en même temps un véritable rythme de travail avec un cadre clair, de la discipline, des deadlines, et la présence d'un formateur toujours prêt à répondre aux questions et à aider. Ce qui se passe pendant le bootcamp est conçu pour reproduire au maximum les processus de travail réels au sein d'une équipe de développeurs dans une entreprise moderne. J'avais trouvé plusieurs écoles proposant un format similaire et des programmes comparables. » avoue-t-elle.
Dès octobre, elle poursuivra sa montée en compétences en suivant une alternance Concepteur Développeur d'Applications Éco-Conception (CDA). Si vous souhaitez suivre son travail, n’hésitez pas à la contacter ou à consulter son portfolio !
A11y Canvas montre que le code est un formidable levier d'inclusion. Envie de tester l'outil ? Rendez-vous sur a11y-canvas.fr.
Pour propulser votre carrière ou former vos équipes aux métiers d'avenir, découvrez notre formation développeur web ou devenez expert en IA avec notre cursus développeur IA.
