davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>Design Accessible, la genèse d’un projet (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://blog.hello-bokeh.fr/2021/05/31/design-accessible-la-genese-dun-projet/">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
  <header>
    <h1>Design Accessible, la genèse d’un projet</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://blog.hello-bokeh.fr/2021/05/31/design-accessible-la-genese-dun-projet/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p>Pour la <a href="https://globalaccessibilityawarenessday.org/francais/">Journée mondiale de sensibilisation à l’accesssibilité</a> (le 20 mai), j’ai mis en ligne <a href="https://design-accessible.fr/">design-accessible.fr</a>, un site de <strong>ressources pour designer un web accessible et inclusif.</strong></p>

<p>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 💪.</p>

<figure class="wp-block-image size-large"><img data-attachment-id="1253" data-permalink="https://blog.hello-bokeh.fr/screenshot_2021-05-31-design-accessible/" data-orig-file="https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-design-accessible.png" data-orig-size="1440,775" data-comments-opened="1" data-image-meta='{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}' data-image-title="screenshot_2021-05-31-design-accessible" data-image-description="" data-medium-file="https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-design-accessible.png?w=300" data-large-file="https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-design-accessible.png?w=712" src="https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-design-accessible.png?w=1024" alt="Page d'accueil du site Design Accessible. Un gros titre annonce &quot;Designer un web accessible et inclusif&quot;. Une main soutient un écran affichant le logo du design universel." class="wp-image-1253" srcset="https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-design-accessible.png?w=1024 1024w, https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-design-accessible.png?w=150 150w, https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-design-accessible.png?w=300 300w, https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-design-accessible.png?w=768 768w, https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-design-accessible.png 1440w" sizes="(max-width: 1024px) 100vw, 1024px"><figcaption>Page d’accueil de <a href="https://design-accessible.fr/">Design Accessible</a> à sa sortie</figcaption></figure>

<p>Après <a href="https://twitter.com/annso_/status/1395317876085690370">l’annonce sur Twitter</a> (en moins de 280 caractères 😅), voici un peu plus de contexte sur ce projet qui m’a occupée pendant un moment !</p>

<h2>La genèse du projet</h2>

<p>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.</p>

<p>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 :</p>

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

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

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

<h2>Rendre les ressources facile à explorer</h2>

<p>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 ?</p>

<figure class="wp-block-image size-large"><img data-attachment-id="1245" data-permalink="https://blog.hello-bokeh.fr/screenshot_2021-05-31-design-accessible-ressources-airtable/" data-orig-file="https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-design-accessible-ressources-airtable.png" data-orig-size="1440,775" data-comments-opened="1" data-image-meta='{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}' data-image-title="screenshot_2021-05-31-design-accessible-ressources-airtable" data-image-description="" data-medium-file="https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-design-accessible-ressources-airtable.png?w=300" data-large-file="https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-design-accessible-ressources-airtable.png?w=712" src="https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-design-accessible-ressources-airtable.png?w=1024" alt='Tableau de ressources sur Airtable. Chaque ressource a un nom, un auteur et des tags "phase" ou "thématique"' class="wp-image-1245" srcset="https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-design-accessible-ressources-airtable.png?w=1024 1024w, https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-design-accessible-ressources-airtable.png?w=150 150w, https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-design-accessible-ressources-airtable.png?w=300 300w, https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-design-accessible-ressources-airtable.png?w=768 768w, https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-design-accessible-ressources-airtable.png 1440w" sizes="(max-width: 1024px) 100vw, 1024px"><figcaption>Version 0.1 du site : un tableau de données</figcaption></figure>

<p>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 :</p>

<ul><li>Je ne sais pas si l’outil d’Airtable soit accessible. Et proposer des ressources sur l’accessibilité de manière non accessible, c’est pas terrible.</li><li>Je n’aurais pas eu d’espace pour donner du contexte à ces ressources.</li></ul>

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

<p>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.</p>

<figure class="wp-block-image size-large"><img data-attachment-id="1248" data-permalink="https://blog.hello-bokeh.fr/v0-1/" data-orig-file="https://uxways.files.wordpress.com/2021/05/v0.1.png" data-orig-size="1440,1681" data-comments-opened="1" data-image-meta='{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}' data-image-title="v0.1" data-image-description="" data-medium-file="https://uxways.files.wordpress.com/2021/05/v0.1.png?w=257" data-large-file="https://uxways.files.wordpress.com/2021/05/v0.1.png?w=712" src="https://uxways.files.wordpress.com/2021/05/v0.1.png?w=877" alt="Page d'accueil du site &quot;Designer un web accessible et inclusif&quot;. Une liste de ressources est filtrable par thématiques." class="wp-image-1248" srcset="https://uxways.files.wordpress.com/2021/05/v0.1.png?w=877 877w, https://uxways.files.wordpress.com/2021/05/v0.1.png?w=128 128w, https://uxways.files.wordpress.com/2021/05/v0.1.png?w=257 257w, https://uxways.files.wordpress.com/2021/05/v0.1.png?w=768 768w, https://uxways.files.wordpress.com/2021/05/v0.1.png 1440w" sizes="(max-width: 877px) 100vw, 877px"><figcaption>Première maquette du site Design Accessible</figcaption></figure>

<h2>Sensibiliser à l’accessibilité</h2>

<p>Après avoir conçu une ébauche de page <a href="https://design-accessible.fr/ressources">Ressources</a>, 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.</p>

<p>C’est ainsi qu’est née la page <a href="https://design-accessible.fr/decouvrir"><strong>Découvrir</strong></a>. 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 :</p>

<ul><li>des gens : montrer que l’accessibilité ne s’adresse pas à un type de profil, mais une grande diversité de personnes.</li><li>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).</li></ul>

<figure class="wp-block-image size-large"><img data-attachment-id="1255" data-permalink="https://blog.hello-bokeh.fr/screenshot_2021-05-31-decouvrir-laccessibilite-design-accessible/" data-orig-file="https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-decouvrir-laccessibilite-design-accessible.png" data-orig-size="1440,775" data-comments-opened="1" data-image-meta='{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}' data-image-title="screenshot_2021-05-31-decouvrir-laccessibilite-design-accessible" data-image-description="" data-medium-file="https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-decouvrir-laccessibilite-design-accessible.png?w=300" data-large-file="https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-decouvrir-laccessibilite-design-accessible.png?w=712" src="https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-decouvrir-laccessibilite-design-accessible.png?w=1024" alt="Galerie de &quot;mini-personas&quot; : Solène est aveugle de naissance ; Philippe est atteint d'arthorse ; Brigitte est mal voyante ;..." class="wp-image-1255" srcset="https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-decouvrir-laccessibilite-design-accessible.png?w=1024 1024w, https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-decouvrir-laccessibilite-design-accessible.png?w=150 150w, https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-decouvrir-laccessibilite-design-accessible.png?w=300 300w, https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-decouvrir-laccessibilite-design-accessible.png?w=768 768w, https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-decouvrir-laccessibilite-design-accessible.png 1440w" sizes="(max-width: 1024px) 100vw, 1024px"><figcaption>Galerie de « mini-personas » pour illustrer la diversité des situations</figcaption></figure>

<p>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 <em>« mais moi, je n’ai pas d’usagers en situation de handicap »</em>).</p>

<h2>Proposer une checklist actionnable</h2>

<p>Avec une page de <a href="https://design-accessible.fr/ressources">Ressources</a> et une page de <a href="https://design-accessible.fr/decouvrir">sensibilisation</a>, 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.</p>

<p>Il fallait d’abord une ressources actionnable facilement, avec des conseils concrets. Ça tombait bien : depuis ma formation avec <a href="https://formations.access42.net/formations/design-dinterfaces-accessibles-ux-ui-multimedia/">Access 42</a>, j’avais commencé une checklist d’accessibilité, que je n’avais jamais pris le temps de mettre au propre.</p>

<p>J’ai repris ma checklist personnelle, couplée au RGAA et à d’<a href="https://design-accessible.fr/checklist#further">autres ressources</a> pour faire un gros travail d’organisation et de présentation de l’information :</p>

<ul><li>Dégager les grandes catégories (contenu, formulaires, couleurs…)</li><li>Reformuler de manière simple, le RGAA étant un document très technique. On y trouve par exemple <em>« L’utilisateur est averti par un texte de l’action du script et du type de changement avant son déclenchement. »</em>, ce qui veut dire concrètement que <em>« Remplir un formulaire ne doit pas provoquer d’événements surprenants. »</em>)</li><li>Chercher pour chaque item des ressources adaptées, et si possible en français.</li></ul>

<figure class="wp-block-image size-large"><img data-attachment-id="1258" data-permalink="https://blog.hello-bokeh.fr/screenshot_2021-05-31-checklist-design-accessible/" data-orig-file="https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-checklist-design-accessible.png" data-orig-size="1440,775" data-comments-opened="1" data-image-meta='{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}' data-image-title="screenshot_2021-05-31-checklist-design-accessible" data-image-description="" data-medium-file="https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-checklist-design-accessible.png?w=300" data-large-file="https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-checklist-design-accessible.png?w=712" src="https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-checklist-design-accessible.png?w=1024" alt="" class="wp-image-1258" srcset="https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-checklist-design-accessible.png?w=1024 1024w, https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-checklist-design-accessible.png?w=150 150w, https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-checklist-design-accessible.png?w=300 300w, https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-checklist-design-accessible.png?w=768 768w, https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-checklist-design-accessible.png 1440w" sizes="(max-width: 1024px) 100vw, 1024px"><figcaption>Capture d’écran de la checklist du designer</figcaption></figure>

<h2>Concevoir un site accessible ET beau</h2>

<p><a href="https://design-accessible.fr/">Design Accessible</a> est très vite devenu un terrain de jeu pour prouver qu’on peut faire un site accessible <strong>ET</strong> beau.</p>

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

<figure class="wp-block-image size-large"><img data-attachment-id="1261" data-permalink="https://blog.hello-bokeh.fr/recherches/" data-orig-file="https://uxways.files.wordpress.com/2021/05/recherches.png" data-orig-size="3732,2092" data-comments-opened="1" data-image-meta='{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}' data-image-title="recherches" data-image-description="" data-medium-file="https://uxways.files.wordpress.com/2021/05/recherches.png?w=300" data-large-file="https://uxways.files.wordpress.com/2021/05/recherches.png?w=712" src="https://uxways.files.wordpress.com/2021/05/recherches.png?w=1024" alt="Capture d'écrans de sites dédiés à l'accessibilité, de films ou couvertures de livres." class="wp-image-1261" srcset="https://uxways.files.wordpress.com/2021/05/recherches.png?w=1024 1024w, https://uxways.files.wordpress.com/2021/05/recherches.png?w=2048 2048w, https://uxways.files.wordpress.com/2021/05/recherches.png?w=150 150w, https://uxways.files.wordpress.com/2021/05/recherches.png?w=300 300w, https://uxways.files.wordpress.com/2021/05/recherches.png?w=768 768w" sizes="(max-width: 1024px) 100vw, 1024px"><figcaption>Benchmark des identités visuelles autour de l’accessibilité</figcaption></figure>

<p>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 😅.</p>

<figure class="wp-block-image size-large"><img data-attachment-id="1266" data-permalink="https://blog.hello-bokeh.fr/contrastes/" data-orig-file="https://uxways.files.wordpress.com/2021/05/contrastes.png" data-orig-size="4512,1694" data-comments-opened="1" data-image-meta='{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}' data-image-title="contrastes" data-image-description="" data-medium-file="https://uxways.files.wordpress.com/2021/05/contrastes.png?w=300" data-large-file="https://uxways.files.wordpress.com/2021/05/contrastes.png?w=712" src="https://uxways.files.wordpress.com/2021/05/contrastes.png?w=1024" alt="" class="wp-image-1266" srcset="https://uxways.files.wordpress.com/2021/05/contrastes.png?w=1024 1024w, https://uxways.files.wordpress.com/2021/05/contrastes.png?w=2046 2046w, https://uxways.files.wordpress.com/2021/05/contrastes.png?w=150 150w, https://uxways.files.wordpress.com/2021/05/contrastes.png?w=300 300w, https://uxways.files.wordpress.com/2021/05/contrastes.png?w=768 768w" sizes="(max-width: 1024px) 100vw, 1024px"><figcaption>Le site <a href="https://color.review/">color.review</a> permet de trouver la couleur « la plus vive étant suffisament contrastée »</figcaption></figure>

<p>J’ai alors cherché de l’inspiration sur les sites de palettes de couleur, notamment <a href="https://www.webdesignrankings.com/resources/lolcolors/?ref=yakut">Lol Colors</a> 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 😇 !</p>

<figure class="wp-block-image size-large"><img data-attachment-id="1262" data-permalink="https://blog.hello-bokeh.fr/screenshot_2021-05-31-lol-colors-curated-color-palette-inspiration/" data-orig-file="https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-lol-colors-curated-color-palette-inspiration.png" data-orig-size="1440,775" data-comments-opened="1" data-image-meta='{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}' data-image-title="screenshot_2021-05-31-lol-colors-curated-color-palette-inspiration" data-image-description="" data-medium-file="https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-lol-colors-curated-color-palette-inspiration.png?w=300" data-large-file="https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-lol-colors-curated-color-palette-inspiration.png?w=712" src="https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-lol-colors-curated-color-palette-inspiration.png?w=1024" alt="" class="wp-image-1262" srcset="https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-lol-colors-curated-color-palette-inspiration.png?w=1024 1024w, https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-lol-colors-curated-color-palette-inspiration.png?w=150 150w, https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-lol-colors-curated-color-palette-inspiration.png?w=300 300w, https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-lol-colors-curated-color-palette-inspiration.png?w=768 768w, https://uxways.files.wordpress.com/2021/05/screenshot_2021-05-31-lol-colors-curated-color-palette-inspiration.png 1440w" sizes="(max-width: 1024px) 100vw, 1024px"><figcaption>Lol Colors propose des palettes de couleurs inspirantes</figcaption></figure>

<p>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 <a href="https://accessibility-for-teams.com">Accessibility for teams</a>, un autre site de vulgarisation de l’accessibilité que j’avais consulté à maintes reprises. L’inconscient, ce fourbe 😭..</p>

<p>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 !</p>

<figure class="wp-block-image size-large"><img data-attachment-id="1264" data-permalink="https://blog.hello-bokeh.fr/capture-decc81cran-2021-05-31-acc80-14-51-59/" data-orig-file="https://uxways.files.wordpress.com/2021/05/capture-decc81cran-2021-05-31-acc80-14.51.59.png" data-orig-size="1206,286" data-comments-opened="1" data-image-meta='{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}' data-image-title="capture-decc81cran-2021-05-31-acc80-14.51.59" data-image-description="" data-medium-file="https://uxways.files.wordpress.com/2021/05/capture-decc81cran-2021-05-31-acc80-14.51.59.png?w=300" data-large-file="https://uxways.files.wordpress.com/2021/05/capture-decc81cran-2021-05-31-acc80-14.51.59.png?w=712" src="https://uxways.files.wordpress.com/2021/05/capture-decc81cran-2021-05-31-acc80-14.51.59.png?w=1024" alt="" class="wp-image-1264" srcset="https://uxways.files.wordpress.com/2021/05/capture-decc81cran-2021-05-31-acc80-14.51.59.png?w=1024 1024w, https://uxways.files.wordpress.com/2021/05/capture-decc81cran-2021-05-31-acc80-14.51.59.png?w=150 150w, https://uxways.files.wordpress.com/2021/05/capture-decc81cran-2021-05-31-acc80-14.51.59.png?w=300 300w, https://uxways.files.wordpress.com/2021/05/capture-decc81cran-2021-05-31-acc80-14.51.59.png?w=768 768w, https://uxways.files.wordpress.com/2021/05/capture-decc81cran-2021-05-31-acc80-14.51.59.png 1206w" sizes="(max-width: 1024px) 100vw, 1024px"><figcaption>Extrait du fichier de travail Figma de Design Accessible</figcaption></figure>

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

<p>Pour la <strong>typo</strong>, j’ai enfin pu utiliser la <a href="https://www.atipofoundry.com/fonts/silka">Silka</a>. 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 ! 😇</p>

<p>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 <em>« bonhomme comme sur le panneau Accessibilité de mon mac »</em>. L’article de Romy <a href="romy.tetue.net/symbole-accessibilite-numerique">Comment symboliser l’accessibilité numérique ?</a> m’a conforté dans cette idée (et appris que ce symbole avait un nom : « l’homme de Vitruve » 🙏).</p>

<h2>Porter des valeurs chères à mon coeur</h2>

<p>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 :</p>

<ul><li><strong>Open-source :</strong> 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 🙏 !</li><li><strong>Dans le respect de la vie privée</strong> : pas de tracker Google ou des réseaux sociaux. J’utilise <a href="https://withcabin.com/">With Cabin</a> qui se veut respectueux du <a href="https://withcabin.com/faq">RGPD</a>.</li><li><strong>Accessible</strong> : n’étant pas intégratrice de métier, je me suis entourée, notamment de <a href="https://twitter.com/skyounet">Jimmy</a> 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.</li></ul>

<h2>Faire évoluer le projet, à mon rythme</h2>

<p>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 <a href="https://globalaccessibilityawarenessday.org/francais/">Journée mondiale de sensibilisation à l’accessibilité</a> a été un excellent prétexte pour me botter les fesses et enfin <strong>sortir le projet</strong>. </p>

<p>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 !). </p>

<p>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 <a href="https://design-accessible.fr/">Design Accessible</a> :</p>

<ul><li>Plus de fonctionnalités : une recherche, des filtres multiples…</li><li>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é.</li><li>Une meilleure accessibilité : la page checklist est particulièrement longue et mériterait d’être parcourable plus simplement par exemple.</li><li>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.</li><li>Me penchr 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 !</li></ul>

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

<p>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 ! </p>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
              </svg> Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>
</body>
</html>