davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398
							<!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>Blaming Screen Readers 🚩×5 (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://adrianroselli.com/2021/10/blaming-screen-readers-red-flag.html">

<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>Blaming Screen Readers 🚩×5</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://adrianroselli.com/2021/10/blaming-screen-readers-red-flag.html" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p>
The title of this post is pretty specific. It relates to the meme on Twitter where users identify a trait or preference that they see as problematic, and identify it as a <em>red flag</em>. The emoji represents the red flag. For example:
</p>

<p><span id="RedFlag">
  <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100.2 105.5" xml:space="preserve" focusable="false" aria-hidden="true">
    <title>A stylized red flag</title></p>
<pre><code>&lt;g&gt;
  &lt;path class="wh" d="m93.3 105.3-1-.2c-.6-.3-1.1-.8-1.3-1.4L56.7 11.5c-.5-1.3.2-2.7 1.4-3.2l4.3-1.6.9-.2 1 .2c.7.3 1.2.8 1.4 1.4l34.2 92.1c.5 1.3-.2 2.7-1.4 3.2l-4.3 1.6-.9.3z"&gt;&lt;/path&gt;
  &lt;path class="wh" d="m39.3 53-.6-.1c-.8-.2-1.4-.8-1.7-1.5-4.3-10.9-8.3-21.9-12.2-32.6-.2-.5-.2-1.1 0-1.7 2.1-6.3 7.3-9.3 15.6-9.3 4 0 8.2.6 12.3 1.3l5.4.8c.9.1 1.7.7 2.1 1.6L73 46.4c.3.8.2 1.6-.3 2.3-.5.7-1.2 1.1-2 1.1h-2.1c-2.7 0-5.4-.1-8-.3l-7-.2c-6.2 0-10 .9-12.5 3.1-.6.4-1.2.6-1.8.6z"&gt;&lt;/path&gt;
  &lt;path class="wh" d="M46.9 57.9h-.5l-8.2-1.6c-.9-.2-1.7-.9-1.9-1.8-.2-.9.1-1.9.8-2.5l1.9-1.6a10 10 0 0 1 5.1-2.6h.5c1 0 1.9.6 2.3 1.5l2.3 5.3c.4.9.2 1.8-.3 2.6-.5.4-1.2.7-2 .7z"&gt;&lt;/path&gt;
  &lt;path class="wh" d="M22.6 67.1c-3.9 0-7.9-.5-11.8-1.4-.7-.2-1.3-.6-1.6-1.2-.3-.6-.4-1.4-.2-2l3.5-9.7 3-8.3C10.6 39 5.6 33.4.7 28.2c-.6-.7-.9-1.7-.5-2.6s1.1-1.5 2.1-1.6L27 21h.3c1 0 2 .7 2.4 1.7L34 34.3c2 5.3 4 10.7 5.9 16.3l1 2.2.2.8 7.6 1.7c1 .2 1.8 1 1.9 2.1.2 1-.3 2-1.2 2.5a55.9 55.9 0 0 1-26.8 7.2zm35.8-55.6a2 2 0 0 1-1.1-.3 6.1 6.1 0 0 1-2.9-3.4c-.6-1.5-.5-3.2.3-4.6A5.5 5.5 0 0 1 58 .7c.7-.2 1.3-.4 2-.4 2.4 0 4.4 1.4 5.3 3.5l.2.9c0 1.1 0 2.1-.5 3.4-.2.7-.8 1.3-1.5 1.5l-4.3 1.6c-.2.3-.5.3-.8.3z"&gt;&lt;/path&gt;
  &lt;path class="bl" d="m63.4 9 34.2 92.1-4.3 1.7-34.2-92.1z"&gt;&lt;/path&gt;
  &lt;path class="rd" d="M70.6 47.2c-12.2.3-24.3-2.6-31.2 3.3-4.3-10.9-8.2-21.7-12.2-32.6 3.9-11.5 19.4-6.9 30.6-5.6l12.8 34.9zm-31.9 6.6 2-1.6a8 8 0 0 1 3.9-2l2.3 5.3-8.2-1.7z"&gt;&lt;/path&gt;
  &lt;path class="rd" d="m37.4 51.5 1 2.3v.3l.7 1.6 8.9 2a50.2 50.2 0 0 1-36.5 5.6l6.9-19.4C13 38 7.8 32 2.5 26.5l24.7-3c3.3 9.2 6.9 18.4 10.2 28z"&gt;&lt;/path&gt;
  &lt;path class="bl" d="M63 4.7c0 1 0 1.6-.3 2.6L58.4 9a3 3 0 0 1-1.6-2c-.7-1.6.3-3.6 2-3.9 1.6-.7 3.6 0 4.2 1.6z"&gt;&lt;/path&gt;
&lt;/g&gt;
</code></pre>
<p></svg>
</span></p>
<blockquote>
 <p>
 Blaming Screen Readers 🚩🚩🚩🚩🚩
 </p>
</blockquote>

<p>
And here we see the usual pattern repeat itself. An inaccessible meme goes viral. After it is so tired that brands use it, someone relying on assistive technology points out how annoying this can be. Authors and developers jump up to blame assistive technology for being terrible at internetting.
</p>

<p>
In the last few days I have seen more than a few people on Twitter blame screen readers for not being evergreen like browsers, for not understanding the context, for not returning just a count of emoji, and so on. I have even seen people post code snippets on how they could <em>fix</em> screen readers.
</p>

<h2 id="Not">Screen Readers Are Not…</h2>

<p>
…to blame for your inaccessible content.
</p>

<h3 id="API">Screen Readers Are Not Browsers</h3>

<p>
To address one false assumption, screen readers do not read pages. Not exactly. Screen readers announce what information the web browser hands them. Screen readers will add instructions for operating things, but even that is based on how the browser reports it. In the context of the web, barring heuristics and bugs, the browser is in charge.
</p>

<p>
This means that all those bits of content, navigation, the states of controls, the count of how many items are in a list, cues for form field errors, and so on, are themselves built on what the developers write. The HTML.
</p>

<p>
I am leaving out <a href="https://alistapart.com/article/semantics-to-screen-readers/">a bunch of technical detail</a> about accessibility APIs, the DOM, the virtual DOM, heuristics, and so on. I just want to impress upon you that browsers are what screen readers announce.
</p>

<h3 id="NLP">Screen Readers Do Not Use Natural Language Processing</h3>

<p>
Another false assumption is that screen readers understand the human content they are reading. They do not. 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 <q>first</q>). But even that varies across screen readers <em>and</em> browsers.
</p>

<p>
I have a long history trying to <a href="https://stackoverflow.com/questions/43491644/how-can-i-override-a-screen-readers-pronunciation-of-a-word-in-a-sentence-witho/43496525#43496525">stop developers from overriding how screen readers announce things</a> when it is not what they expect.
</p>

<p>
A screen reader does not know the context of what you wrote, the implications of what it contains, or even what you wanted to convey. It just reads words aloud the best it can, adding inflection based on punctuation and maybe some other cues.
</p>

<h3 id="See">Screen Readers Do Not See What You See</h3>

<p>
But here is a curve ball — the red flag emoji <a href="https://twitter.com/ChanceyFleet/status/1448798849519210497">isn’t a red flag</a>. It is a <q>triangular flag on post</q>.
</p>

<blockquote>
 <p>
 Blaming Screen Readers triangular flag on post triangular flag on post triangular flag on post triangular flag on post triangular flag on post
 </p>
</blockquote>

<p>
That is not the fault of screen readers. That is the risk of using emoji to convey meanings that are not part of the Unicode standard for the character. It is a fluke that they appear red. Platforms could make them yellow, or green, or striped, and so on.
</p>

<p>
The author intent is completely dependent on the arbitrary color in the emoji. Without it, the meaning you wanted to convey is completely lost.
</p>

<h3 id="Cycle">Screen Readers Do Not Update Overnight</h3>

<p>
Screen readers are software with release cycles. They add features, fix bugs, and have to contend with browsers that change every six weeks, all at whatever pace they can muster.
</p>

<p>
Some are tied into the operating system, like VoiceOver, and historically only update with the operating system. Just because Apple is a trillion dollar company does not mean it will move any faster <a href="/2020/03/i-dont-care-what-google-or-apple-or-whomever-did.html">or even get it right</a>. NVDA may be able to pivot more quickly, but it is open source and its release cycle reflects its revenue stream. <a href="https://github.com/FreedomScientific/VFO-standards-support/issues">JAWS has a public bug tracker</a>, and you can see it has a lot sitting out there, more important than memes.
</p>

<p>
Never mind that the half-life of a typical meme is measured in days. Some are done and gone before the screen reader engineers have been able to get their VMs fired up to do regression testing.
</p>

<h3 id="Free">Screen Readers Are Not Free</h3>

<p>
As in beer. There is a cost to being able to run a screen reader, particularly the latest release.
</p>

<p>
The <a href="https://www.forbes.com/sites/denisebrodey/2019/10/26/why-underemployment-plagues-people-with-disabilities-even-in-a-strong-economy/">disabled community is historically under-employed</a>. This means older hardware, older software, less frequent access to tech support, to updates, and so on. The latest screen reader may require the latest browser. It may require the latest hardware (when built into the operating system). It may require more time and effort to even update than its users reasonably have.
</p>

<p>
Let’s not forget the opportunity cost. First think about everyone in your family who is not comfortable with technology. Now apply that same ratio to the disabled community. Now consider that if something goes wrong in their upgrade, that the tool that may be their lifeline is suddenly broken, and they cannot fix it. Now imagine the existential risk involved in upgrading to read a meme.
</p>

<h3 id="Stagnant">Screen Readers Are Not Stagnant</h3>

<p>
We have seen screen readers update to account for memes already. TalkBack used to ignore all the <a href="https://twitter.com/aardrian/status/1136647423328227328">special characters used to mimic bold and italic text in tweets</a>. Now it treats them as if they were regular ASCII letters.
</p>

<p>
The trade-off is that for users who had a genuine purpose to use those characters, whether for math or science, those characters are now lost to them.
</p>

<p>
I have also been told (sadly, it is anecdata and I have no specific example to show) that VoiceOver will ignore runs of emoji altogether. Which could be a problem if those emoji have meaning to convey, especially if the sender and receiver previously relied on them being announced.
</p>

<h2 id="Handle">How Should a Screen Reader Handle…</h2>

<p>
…the red flag meme? Some people suggested round them all up and give a count.
</p>

<p>
Although, Twitter could step in here too. We already know <a href="/2018/01/improving-your-tweet-accessibility.html#:~:text=three%20different%20ways%20you%20can%20experience%20a%20single%20tweet">Twitter does some emoji processing on the fly</a>, and it has a dedicated accessibility team. As the venue for the meme, it is in the best place to consider how (or if) it should concatenate those repetitive emoji.
</p>

<p>
How do you propose it handle some of the other memes that have been popular? That rely on spacing and position? That mix words and letters with symbols and emoji?
</p>

<h3 id="Box">That Text Intersecting Year Thing</h3>

<figure>
 <video preload="metadata" controls="" poster="/wp-content/uploads/2018/01/2020-meme_VO-Safari-macOS_poster.png">
  <source src="/wp-content/uploads/2018/01/2020-meme_VO-Safari-macOS.mp4" type="video/mp4">
  <track label="English" kind="subtitles" srclang="en-us" src="/wp-content/uploads/2018/01/2020-meme_VO-Safari-macOS.vtt" default="">
  Sorry, your browser doesn’t support embedded videos, but don’t worry, you can <a href="/wp-content/uploads/2018/01/2020-meme_VO-Safari-macOS.mp4">download it</a>. The <a href="/wp-content/uploads/2018/01/2020-meme_VO-Safari-macOS.vtt">caption file</a> is also available in case your video player can import it.
 </track></source></video>
 <figcaption>As captured in VoiceOver for macOS using Safari. I wrote the captions instead of relying on the speech viewer.</figcaption>
</figure>

<h3 id="Clapping">Clapping Hands</h3>

<figure>
 <video preload="metadata" controls="" poster="/wp-content/uploads/2018/01/twitter-mobile-emoji-three-ways_poster.jpg">
  <source src="/wp-content/uploads/2018/01/twitter-mobile-emoji-three-ways.mp4" type="video/mp4">
  <track label="English" kind="subtitles" srclang="en-us" src="/wp-content/uploads/2018/01/twitter-mobile-emoji-three-ways.vtt" default="">
  Sorry, your browser doesn’t support embedded videos, but don’t worry, you can <a href="/wp-content/uploads/2018/01/twitter-mobile-emoji-three-ways.mp4">download it</a>. The <a href="/wp-content/uploads/2018/01/twitter-mobile-emoji-three-ways.vtt">caption file</a> is also available in case your video player can import it.
 </track></source></video>
 <figcaption>TalkBack 9.1 on Android 11 with Chrome 91. First using <em>Read from next item</em> (which announces every image but does not announce its emoji alt text), then reading the entire tweet as a block, and then reading the tweet as a block after <a href="https://twitter.com/aardrian/status/1424875391970390023">Twitter’s script has updated it with the plain language alternative text</a> on the emoji images.</figcaption>
</figure>

<h3 id="Sheriff">Sheriff</h3>

<figure>
 <video preload="metadata" controls="" poster="/wp-content/uploads/2021/10/tweet_meme_sheriff.jpg">
  <source src="/wp-content/uploads/2021/10/tweet_meme_sheriff.mp4" type="video/mp4">
  <track label="English" kind="subtitles" srclang="en-us" src="/wp-content/uploads/2021/10/tweet_meme_sheriff.vtt" default="">
  Sorry, your browser doesn’t support embedded videos, but don’t worry, you can <a href="/wp-content/uploads/2021/10/tweet_meme_sheriff.mp4">download it</a>. The <a href="/wp-content/uploads/2021/10/tweet_meme_sheriff.vtt">caption file</a> is also available in case your video player can import it.
 </track></source></video>
 <figcaption>Captured in Firefox 93 with NVDA 2021.2. Announced just from putting focus on the page. Had I done a read-all command, each emoji would have been announced as clickable. <a href="ttps://twitter.com/ellkay_/status/884103936935948290">Try it yourself</a>.</figcaption>
</figure>

<h3 id="Bunny">Sign Bunny</h3>

<figure>
 <video preload="metadata" controls="" poster="/wp-content/uploads/2021/10/tweet_meme_sign-bunny.jpg">
  <source src="/wp-content/uploads/2021/10/tweet_meme_sign-bunny.mp4" type="video/mp4">
  <track label="English" kind="subtitles" srclang="en-us" src="/wp-content/uploads/2021/10/tweet_meme_sign-bunny.vtt" default="">
  Sorry, your browser doesn’t support embedded videos, but don’t worry, you can <a href="/wp-content/uploads/2021/10/tweet_meme_sign-bunny.mp4">download it</a>. The <a href="/wp-content/uploads/2021/10/tweet_meme_sign-bunny.vtt">caption file</a> is also available in case your video player can import it.
 </track></source></video>
 <figcaption>Captured in Chrome 94 with JAWS 2021. Notice how it fails to announce the majority of characters. You can <a href="https://twitter.com/AcademicsSay/status/1017926074150187010">test it</a> in your favorite combination.</figcaption>
</figure>

<h3 id="Jump">Building Jump</h3>

<figure>
 <video preload="metadata" controls="" poster="/wp-content/uploads/2021/10/tweet_meme_building-jump.jpg">
  <source src="/wp-content/uploads/2021/10/tweet_meme_building-jump.mp4" type="video/mp4">
  <track label="English" kind="subtitles" srclang="en-us" src="/wp-content/uploads/2021/10/tweet_meme_building-jump.vtt" default="">
  Sorry, your browser doesn’t support embedded videos, but don’t worry, you can <a href="/wp-content/uploads/2021/10/tweet_meme_building-jump.mp4">download it</a>. The <a href="/wp-content/uploads/2021/10/tweet_meme_building-jump.vtt">caption file</a> is also available in case your video player can import it.
 </track></source></video>
 <figcaption>Captured in Edge 94 with Narrator (Windows 10). The only part of <a href="https://twitter.com/hamsandcastle/status/464478899217649664">this meme</a> it announced was the word and preceding slash.</figcaption>
</figure>

<h3 id="Peek">Peeking</h3>

<figure>
 <video preload="metadata" controls="" poster="/wp-content/uploads/2021/10/tweet_meme_peeking.jpg">
  <source src="/wp-content/uploads/2021/10/tweet_meme_peeking.mp4" type="video/mp4">
  <track label="English" kind="subtitles" srclang="en-us" src="/wp-content/uploads/2021/10/tweet_meme_peeking.vtt" default="">
  Sorry, your browser doesn’t support embedded videos, but don’t worry, you can <a href="/wp-content/uploads/2021/10/tweet_meme_peeking.mp4">download it</a>. The <a href="/wp-content/uploads/2021/10/tweet_meme_peeking.vtt">caption file</a> is also available in case your video player can import it.
 </track></source></video>
 <figcaption>As heard using VoiceOver on iOS 14.8 with Safari 14. I did not investigate why it switches languages on the second read (starting at 1:25), but you can try it with the <a href="https://twitter.com/edburmila/status/1024712919316148224">original tweet</a> and see what you get.</figcaption>
</figure>

<h2 id="Wrap">Wrap-up</h2>

<p>
The better, more immediate, solution is to be more thoughtful in how you post your content (memes). Be considerate of others, even if it takes an extra minute. Stop offloading blame. Stop making it someone else’s problem.
</p>

<p>
Screen readers happen to be the focus of this post, but everything holds true for other disabilities and other assistive technologies. Videos without captions, blinking and flashing imagery, unnecessary animations, loud noises, terrible audio, CAPTCHAs, and so on.
</p>

<p>
Techniques to make your content accessible abound. They are no more than a quick search away should you care to try. Once a user (a fellow human) has raised a problem, you would have to actively work to ignore it. Which might make you kind of a jerk.
</p>

<p>
Also, while you are thinking of other people, wear a mask and get vaccinated.
</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>