Design Accessible

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 :

  • Les ressources sont souvent axées développement. J’avais du mal à identifier ce que moi, je pouvais faire en tant que designer.
  • Les ressources que je trouvais étaient souvent en anglais. Et souvent « peu accessible » (dans le sens jargon du terme).

À 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 :

  • J’avais envie de pouvoir faire le lien plus facilement entre des ressources traitant du même sujet.
  • Je voulais améliorer la découvrabilité de cette veille.

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. La base de données dispose même d’un formulaire de contribution. Mais ça n’aurait pas été satisfaisant :

  • Je n’ai pas de garantie que l’outil d’Airtable soit accessible (c’est compliqué de trouver des informations sur le sujet : les entreprises communiquent rarement dessus… ). Et proposer des ressources sur l’accessibilité de manière non accessible, c’est pas terrible.
  • Je n’aurais pas eu d’espace pour donner du contexte à ces ressources.

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 :

  • des gens : montrer que l’accessibilité ne s’adresse pas à un type de profil, mais une grande diversité de personnes.
  • de l’usage varié : il n’existe pas une expérience utilisateur mais autant qu’il existe de manière de naviguer sur le Web (c’est à dire beaucoup).
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 :

  • Dégager les grandes catégories (contenu, formulaires, couleurs…)
  • Reformuler de manière simple, le RGAA étant un document très technique. On y trouve par exemple « L’utilisateur est averti par un texte de l’action du script et du type de changement avant son déclenchement. », ce qui veut dire concrètement que « Remplir un formulaire ne doit pas provoquer d’événements surprenants. »)
  • Chercher pour chaque item des ressources adaptées, et si possible en français.
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. C’est par exemple très compliqué de travailler avec les jaune, le orange ou le rouge. En revanche, le vert, le violet et le bleu offrent une large de palettes de nuances à la fois suffisament contrastées et « joyeuses ». Pour ma part, puisque je bosse déjà beaucoup dans le service public, j’en ai ma claque du bleu 😅. J’avais donc envie d’aller voir du côté du vert et du violet.

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 sombres. Il me fallait donc d’autres couleurs 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 :

  • Open-source : mon objectif est de diffuser de l’information publique. Aucune raison donc de fermer le code. Et je ne regrette absolument pas puisque ça a permis à plusieurs de personnes de contribuer via des issues ou directement en modifiant le code ! Merci à elles et eux 🙏 !
  • Dans le respect de la vie privée : pas de tracker Google ou des réseaux sociaux. J’utilise With Cabin qui se veut respectueux du RGPD.
  • Accessible : n’étant pas intégratrice de métier, je me suis entourée, notamment de Jimmy qui m’a beaucoup aidé sur l’intégration. Pour autant, je suis consciente que, comme l’UX, l’accessibilité est toujours améliorable. Je sais qu’il reste des tonnes d’améliorations possible.

Faire évoluer le projet, à mon rythme

Après avoir bossé pendant plusieurs semaines sur le projet, j’ai réalisé que je tournais en rond. 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 :

  • Plus de fonctionnalités : une recherche, des filtres multiples…
  • Plus de contenus : il manque quelques images d’illustrations sur la page découvrir. J’aimerais aussi prendre le temps de vulgariser d’autres concepts de l’accessibilité.
  • Une meilleure accessibilité : je reçois encore régulièrement des retours d’utilisateurs du site qui me permettent de l’améliorer.
  • Plus de ressources : pour le moment, j’ai uniquement intégré au site les ressources dont j’avais parlé dans ma veille. Par effet de bord, beaucoup de « vieux » articles que j’aime beaucoup et qui traînent dans mes bookmarks mais dont je n’ai jamais parlé sur mon blog ne sont aujourd’hui pas référencés.
  • Me pencher sur des sujets mis de côté : l’éco-conception (je n’ai aucune idée d’où se situe le site), le SEO et j’en passe !

É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 du fabuleux CMS Kirby, et de comment j’ai créé ce site avec très peu de code ❤️ !

👉 Voir le site Design Accessible


Votre commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l’aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l’aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l’aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l’aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s