Pourquoi j'ai créé A11y Canvas
Une histoire de reconversion, de frustration graphiste, et d'un outil qui n'existait pas encore.
Le nom
Que signifie « A11y » ?
« A11y » est une abréviation couramment utilisée dans le monde du numérique pour désigner l'accessibilité (accessibility en anglais). Il s'agit d'un numéronyme : entre la première lettre A et la dernière lettre Y du mot accessibility, il y a exactement 11 lettres.
Ce terme est largement connu parmi les professionnels du web et du logiciel : développeurs, designers UX/UI, experts en accessibilité, testeurs QA et responsables produit. L'accessibilité numérique consiste à concevoir des sites web, applications et services utilisables par toutes les personnes, y compris celles en situation de handicap (visuel, auditif, moteur, cognitif, etc.). Aujourd'hui, « A11y » est devenu un terme de référence dans les communautés du développement web et du design inclusif.
Canvas, c'est la partie visible du projet : le Preview Canvas — un aperçu en temps réel d'une mini-page simplifiée qui se met à jour instantanément à chaque changement de configuration. C'est l'élément central de l'application, et le nom le reflète.
Le logo reprend visuellement cette double identité : les lettres A et Y, le chiffre 11, et un carré — le canvas.
D'où vient l'idée
Je suis développeuse web full stack, diplômée de la Wild Code School en 2025. Et avant ça, graphiste et artiste pendant de nombreuses années. Cette reconversion était un choix délibéré. Mais elle ne m'a pas fait perdre mon œil de graphiste. Et c'est là que tout commence.
Pendant ma formation, j'ai travaillé sur des projets en équipe avec des deadlines serrées. À chaque fois, même situation : les fonctionnalités à développer prennent le temps qu'elles prennent, et la charte graphique se retrouve reléguée en fin de liste. On choisit des couleurs « à peu près correctes », on espère que les contrastes passent, et on rend le projet.
Ce n'est pas une critique de l'école — c'est la réalité de toute formation intensive full stack. L'accessibilité et le design n'y sont pas au programme. C'est logique, justifié, cohérent avec les objectifs pédagogiques.
Mais pour moi, avec mon passé de graphiste, cette étape était impossible à bâcler sans inconfort. Et j'avais conscience qu'un mauvais contraste de couleurs n'est pas qu'un problème esthétique — c'est une barrière réelle pour des utilisateurs réels.
Alors j'ai construit l'outil qui me manquait.
Ce que fait A11y Canvas
A11y Canvas est un générateur de design tokens accessibles pour landing pages. Ce n'est pas un page builder. C'est un outil de configuration qui produit des variables CSS prêtes à l'emploi, testées et conformes aux standards WCAG et RGAA.
L'interface est organisée autour de six axes de configuration, tous visibles en temps réel dans la PreviewCanvas.
Palettes de couleurs
Environ 59 palettes prédéfinies, testées manuellement avec l'extension WAVE, conformes WCAG AA minimum (ratio ≥ 4,5:1). Chaque palette couvre 12 rôles couleur et existe en version light et dark mode. Génération personnalisée via color picker avec vérification des contrastes en temps réel.
Typographie
Des paires de polices sélectionnées pour leur lisibilité et leur clarté à toutes les tailles, servies via Fontsource pour garantir la conformité RGPD.
Border-radius
Presets nommés : Angulaire, Arrondi doux, Pill — du plus austère au plus organique.
Espacement
Grille stricte à base 4 px. Presets nommés : Compact, Standard, Aéré.
Ombres
Quatre niveaux d'élévation (low / med / high / extra), uniquement en rgba noir — jamais de noir pur.
Preview Canvas & export
Mini-maquette de landing page en temps réel. Cinq formats d'écran : desktop, laptop, tablette, portrait, mobile. Export en CSS variables, à coller directement dans votre projet. Sauvegarde des configurations dans votre profil.
Pour qui ?
A11y Canvas s'adresse en priorité aux développeurs web — ceux qui travaillent seuls ou sans designer dans leur équipe, ceux qui démarrent leur carrière, et ceux qui, comme moi, ont un arrière-plan artistique et ont du mal à sacrifier la qualité visuelle sur l'autel du temps.
Sur l'accessibilité numérique
L'accessibilité n'est pas une « feature » qu'on ajoute en fin de projet. C'est un ensemble de critères qui traversent toutes les couches du développement front-end : HTML sémantique, contrastes, typographie, navigation au clavier, gestion du focus, formulaires, contenus dynamiques, médias.
Je suis parfaitement consciente de l'étendue de ce domaine. A11y Canvas se concentre sur les design tokens — un premier socle, indispensable et immédiatement actionnable. La collection de palettes continuera de grandir. Les fonctionnalités évolueront avec mes compétences et avec vos retours.
Je suis particulièrement heureuse de recevoir l'avis d'experts en accessibilité — auditeurs RGAA, ergonomes, utilisateurs de technologies d'assistance. Si vous avez des suggestions, des retours ou des critiques, je suis preneuse. Vraiment.