Design Accessible, la genèse d’un projet


Pour la Journée mondiale de sensibilisation à l’accesssibilité (le 20 mai), j’ai mis en ligne design-accessible.fr, un site de ressources pour designer un web accessible et inclusif.

Ce projet représente des heures de lecture et de veille ; des heures de synthèse et de ré-ré-ré-écriture ; plus de 200 commits (dont certains à 3 heures du matin). C’est aussi mon premier « side-project » public donc je suis très fière d’avoir réussi à le sortir 💪.

Page d'accueil du site Design Accessible. Un gros titre annonce "Designer un web accessible et inclusif". Une main soutient un écran affichant le logo du design universel.
Page d’accueil de Design Accessible à sa sortie

Après l’annonce sur Twitter (en moins de 280 caractères 😅), voici un peu plus de contexte sur ce projet qui m’a occupée pendant un moment !

La genèse du projet

L’accessibilité est un sujet que j’ai eu la chance de découvrir très tôt, avant même de commencer ma carrière (de développeuse à l’époque). Mais, à mon grand regret, je n’ai jamais réussi à en faire quelque chose de central dans mon travail. Au fil des années, j’ai perdu mes connaissances et me sentais de moins en moins légitime pour porter le sujet au sein des entreprises où je travaillais.

Alors quand début 2020, je me suis mise à mon compte, c’était l’occasion pour moi de me recentrer sur les sujets qui étaient important pour moi. J’ai entreprise de me (re)former à l’accessibilité. Très vite, j’ai constaté plusieurs choses :

À force de faire de la veille, j’ai tout de même trouvé des tonnes de ressources passionnantes, que j’ai publié sur ce blog au fil de mes découvertes. Mais restais encore des problématiques :

Rendre les ressources facile à explorer

Sans encore savoir sous quelle forme je pouvais faire ça, j’ai commencé par reprendre la centaine d’articles déjà listés sur le blog pour les (re) catégoriser. À quelle étape de design sont elles intéressantes à connaître ? Quelles problématiques sont abordées ?

Tableau de ressources sur Airtable. Chaque ressource a un nom, un auteur et des tags "phase" ou "thématique"
Version 0.1 du site : un tableau de données

J’ai rassemblé tout ça sous la forme d’un document Airtable : un tableur évolué. J’aurais pu m’arrêter là (vive le no-code !) et diffuser le lien de partage. J’aurais même pu faire un formulaire de contribution en quelques clics. Mais ça n’aurait pas été satisfaisant :

J’ai alors décidé de retrousser mes manches et de faire un site dédié.

Mais avant de travailler sur le côté technique, j’avais besoin d’avoir une idée de comment je voulais présenter ces ressources.

Page d'accueil du site "Designer un web accessible et inclusif". Une liste de ressources est filtrable par thématiques.
Première maquette du site Design Accessible

Sensibiliser à l’accessibilité

Après avoir conçu une ébauche de page Ressources, je me suis aperçue que donner du contexte serait indispensable. Un des gros frein à l’accessibilité n’est pas tant le manque de ressources (la preuve, elles existent) que le manque de connaissances et d’intérêt pour le sujet.

C’est ainsi qu’est née la page Découvrir. Je voulais qu’une personne totalement débutante sur le sujet puisse repartir avec les bases. Et puisque mon site s’adresse principalement à des designers, je voulais parler :

Galerie de "mini-personas" : Solène est aveugle de naissance ; Philippe est atteint d'arthorse ; Brigitte est mal voyante ;...
Galerie de « mini-personas » pour illustrer la diversité des situations

Ces ressources existaient déjà (je n’ai rien inventé !) mais toujours en anglais. Pourtant, en donnant des formations, j’ai remarqué que ces exemples très concrets étaient très parlant pour beaucoup de monde. Ils aident à comprendre un concept clé : l’accessibilité concerne potentiellement tout le monde (en d’autres termes, on ne peut pas dire « mais moi, je n’ai pas d’usagers en situation de handicap »).

Proposer une checklist actionnable

Avec une page de Ressources et une page de sensibilisation, mon projet commençait à prendre forme ! Mais il restait trop dense à mon goût. Après avoir compris les enjeux de l’accessibilité, je ne pouvais pas envoyer les gens sur une sélection de ressources : ça reste trop pointu.

Il fallait d’abord une ressources actionnable facilement, avec des conseils concrets. Ça tombait bien : depuis ma formation avec Access 42, j’avais commencé une checklist d’accessibilité, que je n’avais jamais pris le temps de mettre au propre.

J’ai repris ma checklist personnelle, couplée au RGAA et à d’autres ressources pour faire un gros travail d’organisation et de présentation de l’information :

Capture d’écran de la checklist du designer

Concevoir un site accessible ET beau

Design Accessible est très vite devenu un terrain de jeu pour prouver qu’on peut faire un site accessible ET beau.

J’ai d’abord recherché s’il existait une couleur qui « évoquait » l’accessibilité. La réponse est non.

Capture d'écrans de sites dédiés à l'accessibilité, de films ou couvertures de livres.
Benchmark des identités visuelles autour de l’accessibilité

Ainsi, je pouvais créer ma palette de couleur comme je l’entendais ! Joie ! Je sais qu’il existe des couleurs plus faciles à travailler que d’autres pour obtenir des compositions suffisamment contrastées sans être ternes : c’est le cas par exemple du vert, du violet et du bleu. Pour ma part, puisque je bosse déjà beaucoup dans le service public, j’en ai ma claque du bleu 😅.

Le site color.review permet de trouver la couleur « la plus vive étant suffisament contrastée »

J’ai alors cherché de l’inspiration sur les sites de palettes de couleur, notamment Lol Colors pour chercher de l’inspiration. Et finalement, je n’ai pas cherché très loin : c’est la première palette, qui mixait vert et violet qui m’a tout de suite tapé dans l’œil 😇 !

Lol Colors propose des palettes de couleurs inspirantes

C’est seulement après 2 semaines de travail que j’ai réalisé que cette association vert et violet était aussi celle choisie par Accessibility for teams, un autre site de vulgarisation de l’accessibilité que j’avais consulté à maintes reprises. L’inconscient, ce fourbe 😭..

De mon côté, j’avais déjà agrandi cette palette de couleurs. En retravaillant la palette pour la rendre plus accessible, je suis vite tombée sur des choses un peu ternes. Il me fallait donc une troisième couleur bien vive pour contrebalancer ça : bienvenue au jaune et au rose !

Extrait du fichier de travail Figma de Design Accessible

Côté illustrations, mes maquettes initiales utilisaient le classique undraw.co. Ces illustrations commencent à être vue et revues, mais elles restent bien pratique pour commencer. Quand le projet a commencé à prendre forme, j’ai fouillé blush.design pour trouver un set qui apporterait un peu plus de personnalité au site. J’ai jetté mon dévolu sur Hands, un set d’images d’Ivan Mesaroš, dont j’aimais beaucoup le look frais.

Pour la typo, j’ai enfin pu utiliser la Silka. Un client me l’avait refusé, car licence trop chère. Mais pour ce projet, c’est moi la cliente, c’est moi qui choisit, haha ! 😇

Et pour finir de construire l’identité graphique du site, il me fallait un semblant de logo, pour le favicon. J’avais en tête d’utiliser le « bonhomme comme sur le panneau Accessibilité de mon mac ». L’article de Romy Comment symboliser l’accessibilité numérique ? m’a conforté dans cette idée (et appris que ce symbole avait un nom : « l’homme de Vitruve » 🙏).

Porter des valeurs chères à mon coeur

Le truc bien dans les projets persos, c’est vraiment de pouvoir faire les choses comme on en a envie. Je tenais donc à ce que le site soit :

Faire évoluer le projet, à mon rythme

Après avoir bossé pendant plusieurs semaines sur le projet, j’ai réalisé que j’avais besoin de prendre du recul. J’avais le sentiment que ça ne serait jamais assez fini. L’arrivée de la Journée mondiale de sensibilisation à l’accessibilité a été un excellent prétexte pour me botter les fesses et enfin sortir le projet.

Et, j’ai bien fait car l’accueil réservé au site a été extraordinaire ❤️. J’ai reçu de nombreux retours positifs ; et pleins de conseils bienveillants pour améliorer ce que j’avais mis en ligne (notamment mon orthographe qui laisse à désirer 🤐, ou bien l’accessibilité du site !).

Après le coup de fouet du lancement et des correctifs, je vais prendre maintenant un peu de repos. Mais pour mieux revenir, car j’ai encore de nombreuses idées d’améliorations pour Design Accessible :

Étant la seule mainteneuse du projet, j’irais évidemment à mon rythme. Affaire à suivre donc !

Et rendez-vous dans quelques jours pour un prochain article, un peu plus technique. Je parlerais de mon expérience avec le CMS Kirby pour créer un site, sur mesure, avec très peu de code !