davidbgk
/
larlet-fr-david


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500
							<!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>Tag #accessibilité — David Larlet</title>
<meta name="description" content="Publications relatives au tag #accessibilité">
<!-- 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>

<style type="text/css">
  details[open] summary {
    display: none;
  }
</style>

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


<header>
  <h1>Publications relatives au tag #accessibilité</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 rel="tags" href="/david/#tags" title="Liste de toutes les étiquettes"><svg class="icon icon-tags">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
      </svg> Étiquettes</a>
  </p>
</nav>
<hr>
<main>
  <p>Les plus récentes en premier, les 3 premières sont dépliées et ensuite c’est à la demande, bonne exploration !</p>
  
    <h2><a href="/david/2021/11/01/" title="Lien permanent vers cet article">Inaccessible</a> (2021-11-01)</h2>
    
      
<blockquote>
<ol>
<li>Je souhaite insister ici sur le fait que vivre dans une société inaccessible contribue très largement à ce sentiment. Bien plus que la maladie, c’est l’inaccessibilité qui réduit le champ des possibles pour les malades chroniques et personnes handicapées. <mark>Une vie que l’on peut juger diminuée ou rétrécie n’a pas moins de valeur que les autres.</mark></li>
</ol>
<p><cite><em><a href="https://bribesdereel.net/rechute-chronique">Rechute chronique</a></em> (<a href="/david/cache/2021/453afa4933a15181ceedb95afeb70c1c/">cache</a>)</cite></p>
</blockquote>
<p>Parfois, une note suffit pour écouter le monde différemment.</p>

    
    <h2><a href="/david/2021/10/19/" title="Lien permanent vers cet article">Lecteur d’écran</a> (2021-10-19)</h2>
    
      
<blockquote lang="en">
<p>Another false assumption is that screen readers understand the human content they are reading. <mark>They do not.</mark> Mostly. Screen reader heuristics will look at some strings of characters and announce them differently than what you may see (1<sup>st</sup> as &quot;first&quot;). But even that varies across screen readers <em>and</em> browsers.</p>
<p><cite><em><a href="https://adrianroselli.com/2021/10/blaming-screen-readers-red-flag.html">Blaming Screen Readers 🚩×5</a></em> (<a href="/david/cache/2021/4e5e21da7b89d6a426d51423b0c1a062/">cache</a>)</cite></p>
</blockquote>
<p>C’est la réflexion que je me faisais lorsqu’on parle d’accessibilité et de point médian pour une écriture inclusive&nbsp;: pourquoi ne pas faire évoluer les outils si c’est là que la conversion pose problème&#8239;?</p>
<p>Adrian Roselli y répond en partie dans son article, ça n’est pas aussi simple — ni rapide — que ça en a l’air. Les solutions faisant appel à la technique (des autres) sont si confortables…</p>

    
    <h2><a href="/david/2021/07/06/" title="Lien permanent vers cet article">Bloguisme</a> (2021-07-06)</h2>
    
      
<p>Vous connaissez cette injonction à «&nbsp;ouvrir un blog&nbsp;» dès qu’un <em>thread</em> Twitter fait plus de trois phrases. J’accepte de plus en plus que les personnes puissent être davantage à l’aise pour écrire dans un environnement où il y a leur(s) communauté(s) et leurs habitudes d’énonciation (mème, etc). Avoir un blog, cela peut être une charge cognitive et émotionnelle assez forte et je respecte le choix de vouloir s’en passer. Sans même mentionner la <a href="/david/2021/04/09/" title="Maximiser">complexité technique</a> associée.</p>
<p><strong>Est-ce que l’on m’invective à écrire un livre à chaque billet de blog&#8239;?</strong> Non, et je ne m’y soumettrais de toute façon pas car ce n’est pas mon moyen d’expression. Un autre tempo, une autre fabrique, probablement d’autres lecteur·ices aussi. Quel que soit le moyen d’expression, le principal me semble être de rester accessible au plus grand nombre (et encore&#8239;?).</p>
<hr />
<p>Je lisais <a href="https://ricochets.ninja/notes-de-bas-de-rage/mix.html">par ici</a> (<a href="/david/cache/2021/021daad615b67d995cb291d6f676ff67/">cache</a>)&nbsp;: <q>si c’est contraint, c’est pas du soin</q>. De quoi méditer dans plusieurs contextes.</p>
<hr />
<p>Oh et si on parle d’espace plus pérenne, j’arrive davantage à récupérer le contenu de <em>tweets</em> qu’un billet sur Medium avec la bouillie de HTML qui est produite par cette plateforme…</p>
<p><em>Note&nbsp;: ces -ismes de juillet sont autant d’auto-critiques.</em></p>

<blockquote>
<p>Tout naturellement, ceux qui ont le pouvoir cherchent à empêcher le développement de la recherche «&nbsp;sauvage&nbsp;». La quête insatiable de la connaissance a toujours produit, de mémoire d’homme, des concurrents indésirables. Ce que veulent les gens en place, ce sont des «&nbsp;progrès controlés&nbsp;», qui ne donneront naissance qu’à des produits et des idées aisément maîtrisables et qui, chose très importante, <mark>permettront que la plus grande partie des bénéfices soit recueillie par des investisseurs appartenant au système</mark>. Malheureusement, ce n’est pas un univers de hasard, soumis à des variables relatives, qui va leur donner l’assurance de ces «&nbsp;progrès contrôlés&nbsp;».</p>
<p><cite><em>Réflexion sur les Ixiens, Archives du Bene Gesserit</em>, <em><a href="/david/2020/12/21/#dune">Dune</a> V. Les Hérétiques de Dune</em>, Frank Herbert</cite></p>
</blockquote>

    
    <h2><a href="/david/2021/07/03/" title="Lien permanent vers cet article">Orthographisme</a> (2021-07-03)</h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        

<blockquote>
<p>«&nbsp;La Convivialité&nbsp;» est un moment ludique et instructif sur notre rapport à l’orthographe, alors que le sujet n’est pas nécessairement des plus attrayants mais toujours des plus clivants&nbsp;: c’est quand on aborde la possibilité de sa réforme que les réactionnaires sortent du bois. Une passion pour certains et un chemin de croix pour d’autres, l’orthographe s’inscrit comme un évaluateur tout le long de notre scolarité alors que son évolution est faite d’erreurs et d’incompréhensions, de raccourcis et d’illogismes. Bref, <mark>l’orthographe française, par sa complexité est un marqueur social</mark> qui permet de faire le tri.</p>
<p><cite><em><a href="https://postblue.info/la-convivialite/">La Convivialité</a></em> (<a href="/david/cache/2021/4928638ee3df1f58a1c3813734c4a59d/">cache</a>)</cite></p>
</blockquote>
<p>On dirait que je suis sur <a href="/david/2021/07/01/" title="Connexionisme">une</a> <a href="/david/2021/07/02/" title="Parisianisme">série</a> non préméditée (et probablement <a href="/david/2021/06/29/" title="OK">influencée</a> tout de même). J’essaye d’y voir une façon de remettre en question mes propres biais.</p>
<p>Je suis assez snob pour penser que la typographie est de la politesse alors imaginez ce qu’il se passe dans mon cerveau lorsque je vois des fautes d’orthographe ou de grammaire, <em>a fortiori</em> lorsque ce sont les miennes&#8239;!</p>
<p>Et pourtant, je suis bien conscient d’avoir eu le privilège de pouvoir prendre le temps d’apprendre ces règles et de les appliquer au quotidien en écrivant et en lisant plus que la moyenne (je crois).</p>
<p>Se retenir de blâmer la personne mais voir cet écart comme la concrétisation d’une inégalité systémique. Un autre type de combat… et de prise de soin.</p>

      </details>
    

    <h2><a href="/david/2021/07/02/" title="Lien permanent vers cet article">Parisianisme</a> (2021-07-02)</h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        

<blockquote>
<p>Le parisianisme est un terme péjoratif français qui désigne une attitude, perçue comme méprisante, consistant à distinguer systématiquement ce qui se passe à Paris (et par extension, en Île-de-France) de ce qui se passe dans les autres villes et départements français, considéré comme moins important. Cette attitude peut être considérée comme <mark>une forme localisée d’ethnocentrisme</mark>. Le terme peut être dirigé contre des personnes autant que contre des modes de fonctionnement (médiatiques ou culturels par exemple).</p>
<p><cite><em><a href="https://fr.wikipedia.org/wiki/Parisianisme">Parisianisme</a></em>, sur wikipedia</cite></p>
</blockquote>
<p>Je continue sur <a href="/david/2021/07/01/" title="Connexionisme">ma lancée</a>, il y a un biais pour les parisien·nes à tout ramener à leur environnement en arguant qu’il est plus facile de s’y rendre… ce qui ne fait que renforcer cette centralisation.</p>
<p>Pourtant, l’avantage d’une équipe décentralisée c’est de pouvoir être relativement libre dans ses choix de rencontres. Explorer de nouveaux lieux ensemble permet d’aplatir ce type d’ascendance territoriale tout en n’excluant pas les personnes qui sont un peu trop excentrées. Je ne parle bien évidemment pas de mon cas ici — encore que — les <a href="/david/stream/2019/04/05/">montréalisien·nes</a> on bien du mal à quitter le plateau aussi…</p>
<p>Je suis de plus en plus sensible à ces rapports de subordination qui me sont rendus encore plus visibles par ma lecture actuelle des inégalités.</p>

<blockquote>
<p>Les humains sont contents lorsque chacun occupe sa place, lorsque chacun sait parfaitement ce qu’il représente dans l’agencement des choses et ce qu’il peut espérer accomplir. <mark>Détruisez cette place et vous détruisez l’être.</mark></p>
<p><cite><em>Leçon du Bene Gesserit</em>, <em><a href="/david/2020/12/21/#dune">Dune</a> V. Les Hérétiques de Dune</em>, Frank Herbert</cite></p>
</blockquote>

      </details>
    

    <h2><a href="/david/2021/07/01/" title="Lien permanent vers cet article">Connexionisme</a> (2021-07-01)</h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        

<blockquote>
<p>(masculin) Discrimination envers les personnes ayant un handicap de connexion.</p>
</blockquote>
<p>Il est facile à force de faire des visioconférences d’en vouloir aux personnes pénalisant l’ensemble des échanges, les maillons faibles d’une communication en pair à pair. Il faut accepter qu’elles ne l’ont probablement pas choisi et qu’elles en souffrent bien plus, de façon ponctuelle ou semi-permanente. Nous ne sommes pas tou·tes également connecté·es.</p>
<p>Aussi, dans la plupart des pays, le débit a un coût non négligeable. Les personnes résidant en France n’en ont pas forcément conscience (grâce/à cause du réseau historique + cassage des prix par Free, libéralisation du service public nous voilà…).</p>
<p><em>Inspiré du <a href="https://fr.wiktionary.org/wiki/capacitisme">capacitisme</a>.</em></p>

      </details>
    

    <h2><a href="/david/2021/06/07/" title="Lien permanent vers cet article">Anxiété</a> (2021-06-07)</h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        

<blockquote lang="en">
<p>Considering the skyrocketing rates of mental illness throughout the course of the COVID-19&nbsp;pandemic — plus many more of us struggling with daily stressors and mood swings that may lead us to irrational negative thinking —how often are we asking ourselves, <mark>“How will someone with anxiety experience our product/service/feature? How can we make that better?”</mark></p>
<p>[…]</p>
<p>My heart sinks hearing these words over and over again over the last few years. From invalid credentials, to expired email links, to confusing password reset flows, to glitchy and lengthy forms, to jargon-filled websites, I know the majority of issues Alex has worked through with me have all been outside of her control. And I try to tell her that, but her anxiety doesn’t let her see it that way. She truly believes everything she’s struggled with is her fault, and with each failed click of a button, her anxiety continues to worsen.</p>
<p><cite><em><a href="https://uxdesign.cc/inclusive-ux-in-an-era-of-anxiety-dc89c39ec202">Inclusive UX in an era of anxiety</a></em> (<a href="/david/cache/2021/19518aa194e8ddbc4dcbe9c5c8de9ec9/">cache</a>)</cite></p>
</blockquote>
<p>Un précieux rappel qu’il y a des états invisibles et difficilement décelables, des angles (presque) morts à la conception Web d’aujourd’hui. Je retiens notamment le fait de rendre explicites les problèmes techniques lorsque la «&nbsp;faute&nbsp;» n’est pas du côté utilisateur·ice. Ça fait un moment qu’il faut que je me motive pour faire des pages d’erreurs correctes par ici. #cordonnerie</p>
<p>Il y a tellement de fois où j’ai besoin de bidouiller le site des autres pour arriver à mes fins (en partie parce que je bloque beaucoup de choses mais pas que), je me demande fréquemment comment font les personnes non-érudites pour arriver au bout de certains parcours.</p>
<p>Notamment sur des sites gouvernementaux. Sur des sujets aussi stressants que l’immigration. Qui déterminent des choix de vie…</p>
<p><mark>Note après publication&nbsp;:</mark> <a href="https://designpatternsformentalhealth.org/">Design Patterns for Mental Health</a>.</p>

      </details>
    

    <h2><a href="/david/2021/05/31/" title="Lien permanent vers cet article">Design accessible</a> (2021-05-31)</h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        

<blockquote>
<p>Ce projet représente des heures de lecture et de veille&#8239;; des heures de synthèse et de ré-ré-ré-écriture&#8239;; plus de 200&nbsp;commits (dont certains à 3&nbsp;heures du matin). C’est aussi mon premier «&nbsp;side-project&nbsp;» public donc je suis très fière d’avoir réussi à le sortir 💪.</p>
<p><cite><em><a href="https://blog.hello-bokeh.fr/2021/05/31/design-accessible-la-genese-dun-projet/">Design Accessible, la genèse d’un projet</a></em> (<a href="/david/cache/2021/40df5f72a34059f94a965454efb97b07/">cache</a>)</cite></p>
</blockquote>
<p>Superbe projet de la part d’Anne-Sophie&nbsp;: <a href="https://design-accessible.fr/">Design Accessible</a> avec un joli article pour comprendre d’où ça vient, le temps que ça prend et tout.</p>
<p>C’est assez rare d’avoir des sites de référence en français dans le domaine, je salue d’autant plus l’effort que j’ai eu à <a href="/david/2021/05/05/" title="Accessibilité">creuser le sujet</a> récemment.</p>

      </details>
    

    <h2><a href="/david/2021/05/05/" title="Lien permanent vers cet article">Accessibilité</a> (2021-05-05)</h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        
<p>Aujourd’hui, on a reçu le rapport d’un audit d’accessibilité. Cela fait maintenant <a href="/david/2020/05/26/">un an</a> que nous travaillons sur <a href="https://mesconseilscovid.sante.gouv.fr/">MesConseilsCovid</a> et c’est intéressant d’avoir des <a href="https://access42.net/?lang=fr">personnes tierces et expertes</a> qui viennent analyser tout cela avec un peu de recul. Je pensais que l’on n’était pas trop mauvais·es et nous étions en fait <a href="https://github.com/Delegation-numerique-en-sante/mesconseilscovid/labels/rgaa">assez loin</a> du compte&#8239;! Une belle leçon d’humilité, même en pensant faire attention à ces aspects.</p>
<p>La difficulté — une fois les erreurs corrigées à l’instant <code>t</code> — est de rester accessibles à l’instant <code>t + 1</code>.</p>

      </details>
    

    <h2><a href="/david/2021/04/15/" title="Lien permanent vers cet article">Dark mode</a> (2021-04-15)</h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        

<blockquote>
<p>Je suis le cas typique du client qui a besoin obligatoirement d’un <em>light mode</em>, sans quoi je n’utilise plus l’application et/ou <mark>je ne consulte plus le site</mark> (c’est déjà arrivé, j’ai désinstallé l’application et fermé l’onglet de mon navigateur). Dans mon cas, le <em>dark mode</em>, contrairement à ce que dit [le document dont parlaient mes collègues], augmente très fortement ma fatigue oculaire. Au bout de trois lignes j’ai la rétine imprimée, des lignes qui flottent devant les yeux, c’est très désagréable.</p>
<p><cite><em><a href="https://nota-bene.org/Dark-mode-et-accessibilite">Dark mode et accessibilité</a></em> (<a href="/david/cache/2021/544ecea9397616a9f4cfcc6fe27afc3d/">cache</a>)</cite></p>
</blockquote>
<p>C’est la raison pour laquelle — même après avoir <a href="/david/2020/06/25/#paillasse">cédé à la mode du foncé</a> — je laisse la personne qui consulte cet espace choisir. Utiliser les préférences du système (<code>prefers-color-scheme</code>) me semble être insuffisant. Certain·es préfèrent un thème sombre sans pour autant vouloir lire du clair sur foncé, d’autres ne savent pas comment changer le thème au niveau du système.</p>
<p>Pour les astigmates (au moins certain·es en tout cas), ça semble être problématique tout ce qui est clair sur trop sombre, surtout la nuit. Et je crois que c’est un pourcentage non négligeable des internautes…</p>
<hr />
<p>Quelques jours plus tard, je tombe sur&nbsp;:</p>

<blockquote lang="en">
<p>People with astigmatism (approximately <mark>50% of the population</mark>) find it harder to read white text on black than black text on white. Part of this has to do with light levels: with a bright display (white background) the iris closes a bit more, decreasing the effect of the “deformed” lens; with a dark display (black background) the iris opens to receive more light and the deformation of the lens creates a much fuzzier focus at the eye.</p>
<p><cite><em><a href="https://tatham.blog/2008/10/13/why-light-text-on-dark-background-is-a-bad-idea/">Why light text on dark background is a bad idea</a></em> (<a href="/david/cache/2021/9f3a8d345963dac24bef4df547fef72c/">cache</a>)</cite></p>
</blockquote>

      </details>
    

    <h2><a href="/david/2021/04/09/" title="Lien permanent vers cet article">Maximiser</a> (2021-04-09)</h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        

<blockquote lang="en">
<p>When we simplify a system of interactions to a certain minimalism, we often trade choices for reductionism. We maximize the simplicity to the point of dumbing everything down. But do we always help? Creativity, emergence of patterns often lie in the hackability of a system. When we reduce the options for someone to use the system in unexpected ways, <mark>we remove the possibility for people to own a craft, a skill</mark>. We make them serve the system, instead of the system serving them.</p>
<p>We should try to create simple interfaces that maximize the possibility for people to create (creative entropy), being empowered, being autonomous.</p>
<p><cite><em><a href="https://www.otsukare.info/2021/03/29/dumb-down-danger">Maximizing Possible Outcomes In Simple Interfaces</a></em> (<a href="/david/cache/2021/8bef65b7167873d697f665dab2fdbb8b/">cache</a>)</cite></p>
</blockquote>
<p>Je me pose beaucoup de questions <del>en ce moment</del> sur ce que l’on essaye de rendre plus efficace et pourquoi. Parfois pour qui. Souvent à quoi bon.</p>
<p>Par exemple&nbsp;: qu’est-ce qui permettrait à chacun·e de publier quelque chose sur le web tout en ayant une part de contrôle sur ce qui est partagé&#8239;? Lorsqu’on démêle cette pelote, elle s’avère être très longue. Les connaissances à acquérir — autant sur le fond que sur la forme — sont assez gigantesques et ne cessent de l’être un peu plus chaque année. Et à force de tirer sur ce fil, on (je m’inclus dans ce mouvement) ne se rend pas compte que l’on perd pas mal de personnes qui ont la motivation pour être autonomes mais se cassent de plus en plus les dents au point de vouloir abandonner.</p>
<p>Au point de ne <em>pouvoir</em> continuer.</p>
<p>En rendant le Web inaccessible, sauf pour quelques élu·es, on sera tous perdant·es à moyen terme. Car ça signifie un Web de spécialisation et d’expertise qui nécessite(ra) d’être rémunéré pour être encore en mesure de publier quelque chose.</p>
<p>Cela me rend profondément triste. <strong>Impuissant.</strong></p>

<blockquote>
<p>Je souhaite que rien ne marche, que rien ne fonctionne, que tout soit cassé, qu’il y ait plein de bugs. Je voudrais des designers capables de concevoir des outils compliqués, contre-intuitifs et mal fonctionnant.</p>
<p><mark>Le non fonctionnement est la condition de la pensée critique.</mark></p>
<p><cite><em><a href="http://blog.sens-public.org/marcellovitalirosati/cequipourrait/fonctionnement.html"> Ce qui pourrait être autrement&nbsp;: éloge du non fonctionnement</a></em> (<a href="/david/cache/2021/9de00d1e64540434735417d59f2570fe/">cache</a>)</cite></p>
</blockquote>

      </details>
    

    <h2><a href="/david/2021/03/22/" title="Lien permanent vers cet article">JavaScript-less</a> (2021-03-22)</h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        

<blockquote lang="en">
<p>With a few minor omissions and links, you can create a site that <strong>works great in modern browsers with ES6+</strong> <em>and</em> <strong>acceptably in browsers without JavaScript</strong>. This approach is more sustainable for teams without the resources for extensive QA, and more beneficial to users of nonstandard browsers. […]<br />
The best way to help your IE11&nbsp;users is <mark>to provide a great experience for your non-JS users</mark> and share that experience with them, instead of sending them an untested and buggy experience that also slows the experience of users with modern browsers.</p>
<p><cite><em><a href="https://blog.carlmjohnson.net/post/2020/time-to-kill-ie11/">Dropping Support For IE11&nbsp;Is Progressive Enhancement</a></em> (<a href="/david/cache/2021/a9e4daf32281eaee0adaa39e32d28890/">cache</a>)</cite></p>
</blockquote>
<p>Je trouve cette approche particulièrement pertinente, un peu difficile avec une <abbr title="Single Page App">SPA</abbr> sans serveur tout de même. Et encore, il y aurait des choses à expérimenter&nbsp;: on peut potentiellement aller très loin en CSS uniquement avec des <code>:checked</code> par exemple. À voir à quel point est-ce que ça endommage l’accessibilité par ailleurs… les défis techniques hypothétiques sont parfois de fausses bonnes idées pour des usages qui sont eux bien réels.</p>
<p>Les tests utilisateur·ices sont une source intarissable de découvertes impensables. <em>Qu’il faut pourtant panser.</em></p>

      </details>
    

    <h2><a href="/david/2021/03/16/" title="Lien permanent vers cet article">Confort</a> (2021-03-16)</h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        

<blockquote lang="en">
<p>Developers, particularly in Silicon Valley firms, are definitionally wealthy and enfranchised by world-historical standards. Like upper classes of yore, comfort (&quot;DX&quot;) comes with courtiers happy to declare how important comfort must surely be. It’s bunk, or at least most of it is.</p>
<p>As frontenders, <mark>our task is to make services that work well for all, not just the wealthy</mark>. If improvements in our tools or our comfort <em>actually</em> deliver improvements in that direction, so much the better. But we must never forget that measurable improvement for <em>users</em> is the yardstick.</p>
<p><cite><em><a href="https://infrequently.org/2021/03/the-performance-inequality-gap/">The Mobile Performance Inequality Gap, 2021</a></em> (<a href="/david/cache/2021/d3a653c926aa97707653300947b65ab5/">cache</a>)</cite></p>
</blockquote>
<p>Pour résumer, le budget réactualisé de la décence serait de <q>~100KiB (gzipped) of HTML/CSS/fonts and 300-350KiB of JavaScript on the wire (compressed)</q>. Un demi méga-octet transféré et si on a bien fait son travail on espère que ça ne donne pas une expérience trop fastidieuse en-deçà du 75<sup>e</sup> centile.</p>
<p>Je viens de vérifier et on est à 469&#8239;Ko sur <a href="https://mesconseilscovid.sante.gouv.fr/">MesConseilsCovid</a>. On a dû faire des choix assez drastiques pour cela&nbsp;: pas de <em>framework</em>, des dépendances limitées, etc. Est-ce que c’est inconfortable pour autant&#8239;? Parfois, et dans ces moments je me rappelle que mon «&nbsp;inconfort&nbsp;» est au service de l’accessibilité du produit pour lequel je travaille.</p>
<p>Et j’y accorde davantage d’importance.</p>

<blockquote lang="en">
<p>Getting there involves no small amount of class traitorship; <mark>the frontend community will need to value the commons over personal comfort</mark> for a little while longer to ease our ecosystem back toward health. The past 6&nbsp;years of consulting with partner teams has felt like a dark remake of Groundhog Day, with a constant parade of sites failing from the get-go thanks to Framework + Bundler + SPA architectures that are mismatched to the tasks and markets at hand. Time (and chips) can heal these wounds if we only let it. We only need to hold the line on script bloat for a few years for devices and networks to overtake the extreme, unconscionable excesses of the 2010’s.</p>
<p><cite><em>Ibid.</em></cite></p>
</blockquote>

      </details>
    

    <h2><a href="/david/2021/02/19/" title="Lien permanent vers cet article">Optimisation</a> (2021-02-19)</h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        

<blockquote lang="en">
<p>But when you increase complexity in order to optimise, demand never really goes down. The optimisation becomes an opportunity to do more, and so the complexity gets locked in – there will never be the chance to remove it.</p>
<p>And that compounding complexity, layers upon layers of it, a nest of interlocking feedback loops, <mark>increases the risk of fatal, emergent complexity quakes</mark>.</p>
<p>All of which colours my approach to everything from how I architect my code, to how I organise my finances, to what government policies I like.</p>
<p><cite><em><a href="http://interconnected.org/home/2021/02/12/optimisation">Anxious feelings about optimisation through complexity</a></em> (<a href="/david/cache/2021/eef2b3e3085a9b71cd7fe64f21fa0453/">cache</a>)</cite></p>
</blockquote>
<p>Je réfléchis beaucoup à ces choses là en ce moment. Sur le fait d’ouvrir des portes que l’on ne peut plus refermer ensuite. Chaque porte étant en fait sur un palier qui demande aux autres de passer une marche de plus, ce qui n’est pas forcément dans les moyens de la majorité.</p>
<p>Sur un de mes produits actuels, je me suis rendu compte aujourd’hui qu’en le rendant plus «&nbsp;propre&nbsp;» je l’ai aussi rendu moins convivial (au sens d’Illich) pour les personnes qui vont devoir le reprendre. Les concepts utilisés sont un peu plus complexes, les versions un peu plus modernes, autant de marches qui m’ont semblées petites mais qui mises bout à bout rendent le produit moins accessible.</p>
<p>À méditer… ne plus oublier le 10<sup>e</sup> principe&nbsp;:</p>

<blockquote lang="en">
<p>Design mediates so much of our realities and has tremendous impact on our lives, yet very few of us participate in design processes. In particular, the people who are most adversely affected by design decisions — about visual culture, new technologies, the planning of our communities, or the structure of our political and economic systems — tend to have the least influence on those decisions and how they are made.</p>
<p>[…]</p>
<p>Before seeking new design solutions, <mark>we look for what is already working at the community level</mark>. We honor and uplift traditional, indigenous, and local knowledge and practices.</p>
<p><cite><em><a href="https://designjustice.org/read-the-principles">Read the Principles - Design Justice Network</a></em> (<a href="/david/cache/2021/d685a0ad4878f3d833374164b49b3438/">cache</a>)</cite></p>
</blockquote>

      </details>
    

    <h2><a href="/david/2021/02/14/" title="Lien permanent vers cet article">Bibliothèque</a> (2021-02-14)</h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        

<blockquote lang="en">
<p>I know there’s lots of advice out there about considering your audience when you write, but when it comes to my personal site, I’d find that crippling. It would be one more admonishment from the inner critic whispering “no one’s interested in that”, “you have nothing new to add to this topic”, and “you’re not qualified to write about this.” If I’m writing for myself, then it’s easier to have fewer inhibitions. By treating everything as a scrappy note-to-self, I can avoid agonising about quality control …although I still spend far too long trying to come up with titles for posts.</p>
<p>[…]</p>
<p>If someone else gets some value from a quick blog post that I dash off here, that’s always a pleasant surprise. It’s a bonus. But it’s not my reason for writing. <mark>My website is primarily a tool and a library for myself.</mark> It just happens to also be public.</p>
<p><cite><em><a href="https://adactio.com/journal/17821">Associative trails</a></em> (<a href="/david/cache/2021/27f60626eb789433d6e2619663bb79f0/">cache</a>)</cite></p>
</blockquote>
<p>J’aime cette notion de bibliothèque d’idées personnelle <em>et</em> publique. Aucun service à ma connaissance ne permet cela avec la garantie de conserver les données et de les indexer sur plusieurs décennies. Privilège de développeur que celui d’<em>être en capacité</em> de le faire grâce aux compétences permettant de transformer — et donc conserver — des données au cours du temps.</p>
<p>Si vous devez un jour faire une recherche sur ce qui a été écrit ici, vous pouvez télécharger <a href="https://git.larlet.fr/davidbgk/larlet-fr-david">l’archive du dépôt</a>, la charger dans n’importe quel éditeur de texte un peu compétent (comme <a href="https://www.sublimetext.com/">SublimeText</a>) et une recherche dans tous les fichiers devrait vous permettre de fouiller. C’est ce que j’utilise personnellement lorsque ma mémoire me fait défaut ou que je veux faire un lien interne.</p>

<blockquote lang="en">
<p>And I’m also reminded of how writers I love and respect maintain their own reservoirs of knowledge, complete with migratory paths down from the mountains.</p>
<p>[…]</p>
<p>And it’s interesting, right, this accretive note-taking and the process of taking core samples through the deep time of your own ideas. I’ve built something similar, not as consistently, but for about two decades too, and <mark>I keep all my notes in plain text</mark>, and all in the same searchable database.</p>
<p><cite><em><a href="http://interconnected.org/home/2021/02/10/reservoirs">Memexes, mountain lakes, and the serendipity of old ideas</a></em> (<a href="/david/cache/2021/9b2e831c217bc1179c0f74c4fc363c11/">cache</a>)</cite></p>
</blockquote>

      </details>
    

    <h2><a href="/david/2021/01/16/" title="Lien permanent vers cet article">Bouc émissaire</a> (2021-01-16)</h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        

<blockquote lang="en">
<p>And so naturally, we apply our view of the world, our values. If you view your users with contempt, then the reason behind why people don’t like complicated products is because they are stupid and lazy. If, on the other hand, you <em>respect</em> your users, <mark>you might view things differently</mark>.</p>
<p><cite><em><a href="https://somehowmanage.com/2020/09/13/disrespectful-design-users-arent-stupid-or-lazy/">Disrespectful Design-Users aren’t stupid or lazy</a></em> (<a href="/david/cache/2021/883963a92bff6f5bd5ade883ae84bd3f/">cache</a>)</cite></p>
</blockquote>
<p>Deux articles qui invitent à revisiter notre rapport aux utilisateur·ice·s et à la responsabilité que l’on peut avoir dans leurs désarrois face à nos productions. <strong>Il est assez aisé d’éprouver de l’empathie pour ses pairs.</strong> En revanche, lorsqu’il s’agit de personnes très différentes, il est beaucoup plus difficile de se mettre à leurs places. Et c’est là où réside l’enjeu d’une approche qui a l’intention d’être inclusive.</p>

<blockquote lang="en">
<p>This shouldn’t be about shaming individual habits, it’s counter-productive to data shame users. Those of us designing and building these digital products and services should be the ones <mark>taking responsibility</mark> for ensuring that they’re fit for a more sustainable world.</p>
<p><cite><em><a href="https://branch.climateaction.tech/2020/10/15/designing-branch-sustainable-interaction-design-principles/">Designing Branch: Sustainable Interaction Design Principles</a></em> (<a href="/david/cache/2021/2057ddcf3fd20edd602cee1b08ac17e8/">cache</a>)</cite></p>
</blockquote>

      </details>
    

</main>


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