davidbgk
/
larlet-fr-david


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501
							<!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>
    Étiquette #accessibilité
  — David Larlet</title>
  <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>
  <!-- Documented, feel free to shoot an email. -->
  <link rel="stylesheet" href="/static/david/css/style_2024-03-09.css">
  <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_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/century_supra_ot_a_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/century_supra_ot_a_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/century_supra_ot_b_regular.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <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)">
  <!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  <meta name="robots" content="noai, noimageai">
  
  <style type="text/css">
    details[open] summary {
      display: none;
    }
  </style>

  <body data-instant-intensity="viewport-all">
    <article>
      
  <header>
    <hgroup>
      <h1>#accessibilité</h1>
      <p>Publications relatives à cette étiquette</p>
    </hgroup>
  </header>
  <nav>
    <p>
      <a href="/david/" title="Aller à l’accueil">
        Accueil</a>
      •
      <a rel="tags"
        href="/david/2024/#tags"
        title="Liste de toutes les étiquettes">
        Étiquettes</a>
      •
      <a href="/david/recherche/" title="Aller à la page de recherche" rel="search" data-no-instant>Recherche</a>
      •
      <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
    </p>
  </nav>
  
    <h2>
      <a href="/david/2024/02/10/" title="Lien permanent vers cet article">Validisme</a> <time datetime="2024-02-10">10 février 2024</time>
    </h2>
    

<blockquote>
<p>En informatique, y’a ce concept de «&nbsp;ça marche sur ma machine&nbsp;». C’est quand une personne qui utilise un logiciel, remonte un problème qu’elle rencontre et la personne qui fabrique le logiciel répond&nbsp;ça</p>
<p>Évidemment, c’est frustrant de recevoir cette réponse, parce que ça ne fournit aucune solution, mais ça ressemble aussi très fort à «&nbsp;je ne vois pas le problème, donc ce problème n’existe&nbsp;pas&nbsp;»</p>
<p>Un peu comme une personne blanche qui dirait que le racisme n’existe pas vu qu’elle ne le vit pas<br />
Ou un homme avec le&nbsp;sexisme</p>
<p>Et j’ai vécu plusieurs fois avec des grosses structures (administrations et entreprises privées) un truc qui ressemble à «&nbsp;ça marche sur leur machine&nbsp;»<br />
Là, c’est une variante de dénégation qui dit «&nbsp;ça marche pour suffisamment d’autres personnes, donc on ne va pas s’intéresser à votre situation&nbsp;particulière&nbsp;»</p>
<p>Et c’est frustrant quand, mauvaise pioche&#8239;! on est systématiquement dans la minorité&nbsp;statistique</p>
<p><mark>Le validisme, ça parle aussi de comment des personnes sont systématiquement le&nbsp;1%</mark> de personnes qui voient mal l’écran pendant une présentation<br />
ou le&nbsp;1% avec un fauteuil roulant dans la pièce
etc.</p>
<p>Certaines personnes passent 90% de leur vie à être dans le&nbsp;mauvaise-pioche-1%</p>
<p><cite><em><a data-link-domain="eldritch.cafe" href="https://eldritch.cafe/@davidbruant/111872926260149351">Sapphire Rubyant sur&nbsp;masto</a></em></cite></p>
</blockquote>
<p>Se retrouver en invalidité temporaire permet de se rendre compte de choses par l’expérience. Et c’est parfois bien plus que de la double peine&nbsp;: je mets plus de temps pour faire ma correspondance métro faute d’infrastructures adaptées, ce qui me fait arriver en retard donc j’ai la place la moins appropriée, je dois travailler plus vite / efficacement pour rattraper le groupe ce qui me fait prendre davantage de risques, etc. Et je ne parle même pas de l’impact psychologique sur la situation&nbsp;: frustration, colère, dévaluation de soi, à quoi bon, honte, isolement, etc.</p>
<p>C’est déplacé de parler de <em>mon</em> cas alors que de très nombreuses personnes vivent cela au quotidien. Toute leur vie. En supportant le regard des autres, avec une potentielle intersectionalité qui vient mettre les difficultés au&nbsp;carré…</p>
<p>Ce que je voulais souligner avec cet exemple parmi d’autres, c’est qu’il n’y a qu’en expérimentant la situation que j’ai pu prendre conscience de cet effet domino. J’étais pourtant relativement sensibilisé aux problèmes d’accessibilité de manière isolée mais c’est vraiment leur enchainement qui m’a sauté aux yeux pendant cette&nbsp;période.</p>
<p>Je m’imagine maintenant des suites de frustrations numériques du même ordre&nbsp;: il y a un souci bloquant sur le site que je voudrais solidairement faire remonter, je cherche à faire un report de <em>bug</em> sur l’outil dédié mais il y a de l’authentification qui m’affiche une erreur à laquelle je n’ai pas accès, je décide de passer par le formulaire de contact mais il y a un captcha illisible pour moi, je fais une demande sur les réseaux sociaux et on me redirige vers un <em>screencast</em> non sous-titré ou une aide en anglais, etc.</p>
<p>L’accessibilité doit être pensée holistiquement (pour employer un gros mot), chaque situation impensée devenant une goutte de plus dans un verre déjà bien trop&nbsp;plein.</p>
<p>J’ai encore du&nbsp;travail.</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/accessibilite/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#accessibilité</a>
          
            <a href="/david/2024/experience/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#expérience</a>
          
            <a href="/david/2024/psychologie/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#psychologie</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/02/01/" title="Lien permanent vers cet article">Vision</a> <time datetime="2024-02-01">1 février 2024</time>
    </h2>
    

<blockquote lang="en">
<p>But if you were to try just one thing using Vision Pro — just one thing — it has to be <mark>watching a movie</mark> in the TV app, in theater mode. Try that, and no matter how skeptical you were beforehand about the Vision Pro’s price tag, your hand will start inching toward your&nbsp;wallet.</p>
<p><cite><em><a data-link-domain="daringfireball.net" href="https://daringfireball.net/2024/01/the_vision_pro" hreflang="en"
            title="Consultation de l’article (anglais)">Daring Fireball: The Vision Pro</a>
            <a href="/david/cache/2024/cd9184008ba5d9e4c9be4d0a0eea4f60/" hreflang="en"
                data-tippy data-description="A headset, a spatial productivity platform, and a personal entertainment device."
                data-source="https://daringfireball.net/2024/01/the_vision_pro"
                data-date="2024-01-31"
                data-favicon="https://daringfireball.net/graphics/favicon.ico?v=005"
                data-domain="daringfireball.net"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>Ce jouet est bien trop cher… et c’est une bonne chose. D’une certaine manière, c’est la seule innovation de 2023&nbsp;qui ne comporte pas IA dans le premier écran marketing, c’est déjà pas mal. Je n’ai pas la naïveté de penser que la version 2&nbsp;ne nous amènera pas vers le <em>SpatIAl Computing</em> pour autant, restons&nbsp;sérieux.</p>
<p>Je peux imaginer des des <a data-link-domain="theinfiniteexperience.world" href="https://theinfiniteexperience.world">expériences immersives</a> dans des endroits dédiés, de la location comme on pouvait louer un DVD il y a des années, des salles dédiées en bibliothèques (ambiance dystopie cyberpunk assurée), à un moment il pourrait même y avoir un espace pour ça (payant&#8239;?) dans les <em>Apple Store</em>. Si le son est aussi bon que ce que peut décrire <em>Daring Fanboy</em>, j’aurais vraiment envie de me retrouver au milieu d’un concert, d’avoir le choix entre plusieurs points de vues et&nbsp;acoustiques.</p>
<p>Le côté immersif aurait aussi sa place en terme d’apprentissage / transmission. Être au premier rang d’une conférence ou d’un cours pourrait permettre de redéfinir son attention&nbsp;(?) et sachant que la dernière version de l’iPhone permet de capter de telles vidéos, c’est peut-être un moyen de faire entrer quelqu’un dans son salon ce qui produirait un autre type&nbsp;d’intimité.</p>
<p>En parlant de captation et d’intimité, avec les <em>deepfakes</em> il devient possible de se retrouver dans un salon mais dans une autre tenue. Toute prise de vidéo devient une menace potentielle. Impossible de ne pas penser à des objets connectés / synchronisés autour de la&nbsp;pornographie…</p>
<a href="#hr-59" title="Lien vers cette section de la page"><hr id="hr-59" /></a>

<blockquote lang="en">
<p>The “i” in iPhone stands for “inequality”. […]</p>
<p><mark>iPhone owners live in a different world</mark> than high-end Android buyers, and light-years away what the bulk of the market experiences. No matter how you slice it, the performance inequality gap is growing for CPU-bound workloads like JavaScript-heavy web&nbsp;apps.</p>
<p><cite><em><a data-link-domain="infrequently.org" href="https://infrequently.org/2024/01/performance-inequality-gap-2024/" hreflang="en"
            title="Consultation de l’article (anglais)">The Performance Inequality Gap, 2024</a>
            <a href="/david/cache/2024/0676c7ccf1ab2b380641866789366d26/" hreflang="en"
                data-tippy data-description="How much HTML, CSS, and JavaScript can we afford? More than in years past, but much less than frontend developers are burdening users with."
                data-source="https://infrequently.org/2024/01/performance-inequality-gap-2024/"
                data-date="2024-01-31"
                data-favicon="https://infrequently.org/assets/images/favicons/ino-dark-opt-192x192.png"
                data-domain="infrequently.org"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>Ce rapport me rappelle que la notion d’accessibilité est très vaste. Et je suis mal placé pour donner des leçons en vous faisant charger 5&nbsp;polices de caractères pour vous afficher une page… je n’ai pas encore travaillé les performances du thème de l’année et c’est une&nbsp;erreur.</p>

<blockquote lang="en">
<p>We got to a place where performance has been a constant problem in large part because a tribe of programmers convinced themselves that it <em>wasn’t</em> and <em>wouldn’t be</em>. […]</p>
<p>But tribalism-boosted confirmation bias mixed with JavaScript’s toxic positivity culture to precipitate out a Silicon Prosperity Gospel; all resources would go infinite if you just <em>believed</em>. […]</p>
<p>The solutions are social, not technical, because <mark>the delusions are social,</mark> rather than&nbsp;technical.</p>
<p><cite><em>Ibid.</em></cite></p>
</blockquote>
<p>Ça&nbsp;pique.</p>
<a href="#hr-60" title="Lien vers cette section de la page"><hr id="hr-60" /></a>

<blockquote lang="en">
<p>Rather, the biggest benefits I see are <em>collective</em>, cutting across the industry as a whole. I think web components can make the entire web more accessible. They have the potential to unify currently fragmented communities, including various JavaScript frameworks <em>and</em> <mark>those who avoid them</mark>.</p>
<p>[…] Web components won’t take web development by storm, or show us the One True Way to build websites. They don’t need to dethrone JavaScript frameworks. We probably won’t even all learn how to write&nbsp;them!</p>
<p><cite><em><a data-link-domain="jakelazaroff.com" href="https://jakelazaroff.com/words/the-web-component-success-story/" hreflang="en"
            title="Consultation de l’article (anglais)">The Web Component Success Story</a>
            <a href="/david/cache/2024/f4d2d42eba58062be910407690ae447c/" hreflang="en"
                data-tippy data-description="Web components won't take web development by storm, or show us the One True Way to build websites. What they will do is let us collectively build a rich ecosystem of dynamic components that work with any web stack."
                data-source="https://jakelazaroff.com/words/the-web-component-success-story/"
                data-date="2024-01-31"
                data-favicon="https://jakelazaroff.com/favicon.ico"
                data-domain="jakelazaroff.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>Très bon article et la boite de prévisualisation au survol de chaque lien ressemble beaucoup à ce que j’avais l’intention de faire pour régler mes soucis d’accès à la version archivée tout en affichant le domaine. Actuellement chaque lien devient trop long et hache le texte lorsque ça n’est pas en pied de citation (et encore). Il faut que je creuse comment cela est fait, via un <em>web component</em> réutilisable&nbsp;j’imagine&nbsp;:-).</p>
<p>PS&nbsp;: si vous minifiez votre JavaScript, les <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/SourceMap">SourceMap</a> sont un moyen de partager votre expérience. Sinon l’aspect <q lang="en">collective</q> est beaucoup moins&nbsp;pertinent.</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/accessibilite/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#accessibilité</a>
          
            <a href="/david/2024/dystopie/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#dystopie</a>
          
            <a href="/david/2024/evolution/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#évolution</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/01/09/" title="Lien permanent vers cet article">Blessure</a> <time datetime="2024-01-09">9 janvier 2024</time>
    </h2>
    
<p>Avec les amis, on profite des premières chutes de neige sur Montréal pour aller s’amuser sur le Mont Royal et vérifier que les skis de rando sont encore en bon état. Cinq minutes avant, je tirais l’enfant avec son baudrier en mode remontée musculaire, en pleine forme. Une descente entre les arbres même pas tant engagée et au moment de rejoindre le groupe, légère perte de contrôle dans un endroit très boisé. Mon ski se coince entre deux arbres assez fins mais suffisamment solides pour que ma cheville doive tourner dans le mauvais sens vu que mon corps a choisi de continuer sa course. <em>Ouille.</em></p>
<p>La tristesse de se faire mal au tout début de la saison. Aussi, c’est la pire chose à expérimenter lorsqu’on prépare un <a href="/david/2024/01/06/" title="Objectif">défi sportif</a>…</p>
<p>Youtube est le plus proche du célèbre <q lang="en">I know kung-fu</q> de Neo, j’ai appris à straper une cheville et j’ai l’espoir de pouvoir aller jusqu’au refuge avec l’enfant dans 2&nbsp;semaines vu que j’ai déjà réservé. Une cheville <em>tape</em>ée devrait pouvoir tenir les 5&#8239;km à skis si j’en prends suffisamment soin d’ici&nbsp;là&nbsp;🤞.</p>
<p>Ce soir, j’ai besoin d’y&nbsp;croire.</p>
<a href="#hr-19" title="Lien vers cette section de la page"><hr id="hr-19" /></a>
<p>Copsaé publie un <a data-link-domain="copsae.fr" href="https://www.copsae.fr/">nouveau site web</a> qui me donne des idées. J’apprécie aussi ce qu’a fait Access42 pour <a data-link-domain="access42.net" href="https://access42.net/">le sien</a>. Ne pas oublier <a data-link-domain="koena.net" href="https://koena.net/">Koena</a> aussi&#8239;! J’ai déjà vu passer des commentaires comme quoi un site accessible était forcément moche, j’apprécie de pouvoir proposer des&nbsp;contre-exemples.</p>
<a href="#hr-20" title="Lien vers cette section de la page"><hr id="hr-20" /></a>

<blockquote lang="en">
<p>In short, building with accessible semantics from the get-go can give you expressive, meaningful style hooks for free. Leaning on those style hooks in your CSS selectors lets you reduce the number of moving parts in your site or application, and it can prevent accessibility bugs from creeping in down the&nbsp;road.</p>
<p><cite><em><a data-link-domain="benmyers.dev" href="https://benmyers.dev/blog/semantic-selectors/" hreflang="en"
            title="Consultation de l’article (anglais)">Style with Stateful, Semantic Selectors</a>
            <a href="/david/cache/2024/99e7d2ba7e4adc69dbf0f1b2858a5248/" hreflang="en"
                data-tippy data-description="See how building with accessible semantics from the get-go can give you expressive, meaningful style hooks for free."
                data-source="https://benmyers.dev/blog/semantic-selectors/"
                data-date="2024-01-08"
                data-favicon="https://benmyers.dev/favicon-32x32.png"
                data-domain="benmyers.dev"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>C’est ce que j’essaye de faire depuis plusieurs années déjà et non seulement ça me permet d’améliorer le couple sémantique HTML/CSS mais ça rend mon JS plus résilient&nbsp;aussi&#8239;!</p>

<blockquote lang="en">
<p>Recently I decided to stop using the word <em>semantics</em>. Instead I talk about the <abbr title="User eXperience">UX</abbr> of <abbr title="HyperText Markup Language">HTML</abbr>. And all of a sudden my students are not allergic to <abbr>HTML</abbr> anymore but really interested. Instead of explaining the meaning of a certain element, I show them <em>what it does</em>. So we look at <em>what happens</em> when you add a label to an input: The input and the label now form a pair. You can now click on the label to interact with a checkbox. The label will be read out loud when you focus on an input with a screenreader. When you hover over a <em>label</em>, the hover state of the connected <em>input</em> is shown. My students <em>love</em> stuff like that. They care about <abbr>UX</abbr>.</p>
<p><cite><em><a data-link-domain="vasilis.nl" href="https://vasilis.nl/nerd/the-ux-of-html/" hreflang="en"
            title="Consultation de l’article (anglais)">The UX of HTML</a>
            <a href="/david/cache/2024/e5056f8e0e6acf87c5777ba5b3a2ba92/" hreflang="en"
                data-tippy data-description=""
                data-source="https://vasilis.nl/nerd/the-ux-of-html/"
                data-date="2024-01-08"
                data-favicon="https://vasilis.nl/favicon.ico"
                data-domain="vasilis.nl"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>

    
      <nav>
        <p>
          
            <a href="/david/2024/accessibilite/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#accessibilité</a>
          
            <a href="/david/2024/sport/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#sport</a>
          
            <a href="/david/2024/technique/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#technique</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  

      
        <form action="/david/recherche/" method="get">
          <fieldset>
            <legend>Recherche</legend>
            <label for="input-search">Termes de votre recherche :</label>
            <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
            <input type="submit" value="Chercher">
            <p id="indexation-infos">
              <small>
                Seuls les contenus de ces 8 dernières années sont indexés.
              </small>
            </p>
          </fieldset>
        </form>
      
      <aside>
        <theme-toggle></theme-toggle>
      </aside>
    </article>
    <hr>
    <footer>
      <p>
        <a href="/david/" title="Aller à l’accueil">Accueil</a>
        •
        <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
        •
        <a href="http://larlet.com"
           title="Go to my English profile"
           data-instant>Pro</a>
        •
        <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
        •
        <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
      </p>
      <template id="theme-selector">
        <form>
          <style type="text/css">
            fieldset div {
              text-align: center;
            }
          </style>
          <fieldset>
            <legend>Thème</legend>
            <div>
              <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>
            </div>
          </fieldset>
        </form>
      </template>
    </footer>
    <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
    <script>
      class ThemeToggle extends HTMLElement {
        constructor() {
          super()
          const themeSelectorTemplate = document.querySelector('#theme-selector')
          const form = themeSelectorTemplate.content.firstElementChild
          this.attachShadow({ mode: 'open' })
          this.shadowRoot.appendChild(form.cloneNode(true))
        }

        connectedCallback() {
          const form = this.shadowRoot.querySelector('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 colorsLayer = undefined
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
          let mediaRules = []
          for (const layerRule of styleSheet.cssRules) {
            if (!(layerRule instanceof CSSLayerBlockRule)) {
              continue
            }
            if (layerRule.name === 'colors') {
              colorsLayer = layerRule
            }
            for (const cssRule of layerRule.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) {
            // Safari requires the `0` second parameter (even if default).
            colorsLayer.insertRule(mediaRule.cssText, 0)
            hasDarkRules = true
          }
        }

        if (hasDarkRules) {
          if ('customElements' in window && !customElements.get('theme-toggle')) {
            customElements.define('theme-toggle', ThemeToggle)
          }
        }
      })
    </script>
    
  </body>
</html>