Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 17KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409
  1. <!DOCTYPE html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="fr">
  4. <!-- Has to be within the first 1024 bytes, hence before the `title` element
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset="utf-8">
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name="viewport" content="width=device-width,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>
  13. Validisme
  14. — David Larlet</title>
  15. <script>
  16. function toggleTheme(themeName) {
  17. document.documentElement.classList.toggle(
  18. 'forced-dark',
  19. themeName === 'dark'
  20. )
  21. document.documentElement.classList.toggle(
  22. 'forced-light',
  23. themeName === 'light'
  24. )
  25. }
  26. const selectedTheme = localStorage.getItem('theme')
  27. if (selectedTheme !== 'undefined') {
  28. toggleTheme(selectedTheme)
  29. }
  30. </script>
  31. <!-- Documented, feel free to shoot an email. -->
  32. <link rel="stylesheet" href="/static/david/css/style_2024-03-09.css">
  33. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  34. <link rel="preload"
  35. href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
  36. as="font"
  37. type="font/woff2"
  38. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  39. crossorigin>
  40. <link rel="preload"
  41. href="/static/david/css/fonts/century_supra_ot_a_bold.woff2"
  42. as="font"
  43. type="font/woff2"
  44. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  45. crossorigin>
  46. <link rel="preload"
  47. href="/static/david/css/fonts/century_supra_ot_a_italic.woff2"
  48. as="font"
  49. type="font/woff2"
  50. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  51. crossorigin>
  52. <link rel="preload"
  53. href="/static/david/css/fonts/century_supra_ot_b_regular.woff2"
  54. as="font"
  55. type="font/woff2"
  56. media="(prefers-color-scheme: dark)"
  57. crossorigin>
  58. <link rel="preload"
  59. href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
  60. as="font"
  61. type="font/woff2"
  62. media="(prefers-color-scheme: dark)"
  63. crossorigin>
  64. <link rel="preload"
  65. href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
  66. as="font"
  67. type="font/woff2"
  68. media="(prefers-color-scheme: dark)"
  69. crossorigin>
  70. <meta name="description" content="En informatique, y’a ce concept de « ça marche sur ma machine ». 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 ça">
  71. <!-- That good ol' feed, subscribe :). -->
  72. <link rel="alternate"
  73. type="application/atom+xml"
  74. title="Feed"
  75. href="/david/log/">
  76. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  77. <link rel="apple-touch-icon"
  78. sizes="180x180"
  79. href="/static/david/icons2/apple-touch-icon.png">
  80. <link rel="icon"
  81. type="image/png"
  82. sizes="32x32"
  83. href="/static/david/icons2/favicon-32x32.png">
  84. <link rel="icon"
  85. type="image/png"
  86. sizes="16x16"
  87. href="/static/david/icons2/favicon-16x16.png">
  88. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  89. <link rel="mask-icon"
  90. href="/static/david/icons2/safari-pinned-tab.svg"
  91. color="#07486c">
  92. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  93. <meta name="msapplication-TileColor" content="#f7f7f7">
  94. <meta name="msapplication-config"
  95. content="/static/david/icons2/browserconfig.xml">
  96. <meta name="theme-color"
  97. content="#f7f7f7"
  98. media="(prefers-color-scheme: light)">
  99. <meta name="theme-color"
  100. content="#272727"
  101. media="(prefers-color-scheme: dark)">
  102. <!-- Is that even respected? Retrospectively? What a shAItshow…
  103. https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  104. <meta name="robots" content="noai, noimageai">
  105. <style type="text/css">
  106. .tippy-content {
  107. min-width: 280px;
  108. padding: .5rem;
  109. font-size: calc(var(--fluid-0) * 0.8);
  110. font-family: var(--labor-font);
  111. letter-spacing: initial;
  112. text-align: left;
  113. }
  114. .tippy-content h3 {
  115. margin-top: 0;
  116. }
  117. .tippy-content h3 img {
  118. max-width: 2rem;
  119. max-height: 2rem;
  120. display: inline-block;
  121. }
  122. .tippy-content .tippy-links {
  123. display: flex;
  124. justify-content: space-around;
  125. }
  126. .tippy-content a {
  127. padding: .4rem;
  128. color: #F06048;
  129. }
  130. </style>
  131. <body data-instant-intensity="viewport-all">
  132. <article>
  133. <header>
  134. <hgroup>
  135. <h1>Validisme</h1>
  136. <p>Le <time datetime="2024-02-10">10 février 2024</time></p>
  137. </hgroup>
  138. </header>
  139. <nav>
  140. <p>
  141. <a rel="prev"
  142. href="/david/2024/02/09/"
  143. title="Publication précédente : Version">← Précédent</a> •
  144. <a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a>
  145. <a href="/david/recherche/"
  146. title="Aller à la page de recherche"
  147. rel="search" data-no-instant>Recherche</a>
  148. • <a rel="next"
  149. href="/david/2024/02/11/"
  150. title="Publication suivante : Violence">Suivant →</a>
  151. </p>
  152. </nav>
  153. <blockquote>
  154. <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>
  155. <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>
  156. <p>Un peu comme une personne blanche qui dirait que le racisme n’existe pas vu qu’elle ne le vit pas<br />
  157. Ou un homme avec le&nbsp;sexisme</p>
  158. <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 />
  159. 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>
  160. <p>Et c’est frustrant quand, mauvaise pioche&#8239;! on est systématiquement dans la minorité&nbsp;statistique</p>
  161. <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 />
  162. ou le&nbsp;1% avec un fauteuil roulant dans la pièce
  163. etc.</p>
  164. <p>Certaines personnes passent 90% de leur vie à être dans le&nbsp;mauvaise-pioche-1%</p>
  165. <p><cite><em><a data-link-domain="eldritch.cafe" href="https://eldritch.cafe/@davidbruant/111872926260149351">Sapphire Rubyant sur&nbsp;masto</a></em></cite></p>
  166. </blockquote>
  167. <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>
  168. <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>
  169. <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>
  170. <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>
  171. <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>
  172. <p>J’ai encore du&nbsp;travail.</p>
  173. <nav>
  174. <p>
  175. <a href="/david/2024/accessibilite/"
  176. title="Liste de tous les articles 2024 associés à cette étiquette"
  177. rel="tag">#accessibilité</a>
  178. <a href="/david/2024/experience/"
  179. title="Liste de tous les articles 2024 associés à cette étiquette"
  180. rel="tag">#expérience</a>
  181. <a href="/david/2024/psychologie/"
  182. title="Liste de tous les articles 2024 associés à cette étiquette"
  183. rel="tag">#psychologie</a>
  184. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  185. </p>
  186. </nav>
  187. <nav>
  188. <p>
  189. <a rel="prev"
  190. href="/david/2024/02/09/"
  191. title="Publication précédente : Version">← Précédent</a> •
  192. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  193. • <a rel="next"
  194. href="/david/2024/02/11/"
  195. title="Publication suivante : Violence">Suivant →</a>
  196. </p>
  197. </nav>
  198. <form action="/david/recherche/" method="get">
  199. <fieldset>
  200. <legend>Recherche</legend>
  201. <label for="input-search">Termes de votre recherche :</label>
  202. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  203. <input type="submit" value="Chercher">
  204. <p id="indexation-infos">
  205. <small>
  206. Seuls les contenus de ces 8 dernières années sont indexés.
  207. </small>
  208. </p>
  209. </fieldset>
  210. </form>
  211. <aside>
  212. <theme-toggle></theme-toggle>
  213. </aside>
  214. </article>
  215. <hr>
  216. <footer>
  217. <p>
  218. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  219. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  220. <a href="http://larlet.com"
  221. title="Go to my English profile"
  222. data-instant>Pro</a>
  223. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  224. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  225. </p>
  226. <template id="theme-selector">
  227. <form>
  228. <style type="text/css">
  229. fieldset div {
  230. text-align: center;
  231. }
  232. </style>
  233. <fieldset>
  234. <legend>Thème</legend>
  235. <div>
  236. <label>
  237. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  238. Auto
  239. </label>
  240. <label>
  241. <input type="radio" value="dark" name="chosen-color-scheme">
  242. Foncé
  243. </label>
  244. <label>
  245. <input type="radio" value="light" name="chosen-color-scheme">
  246. Clair
  247. </label>
  248. </div>
  249. </fieldset>
  250. </form>
  251. </template>
  252. </footer>
  253. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  254. <script>
  255. class ThemeToggle extends HTMLElement {
  256. constructor() {
  257. super()
  258. const themeSelectorTemplate = document.querySelector('#theme-selector')
  259. const form = themeSelectorTemplate.content.firstElementChild
  260. this.attachShadow({ mode: 'open' })
  261. this.shadowRoot.appendChild(form.cloneNode(true))
  262. }
  263. connectedCallback() {
  264. const form = this.shadowRoot.querySelector('form')
  265. form.addEventListener('change', (e) => {
  266. const chosenColorScheme = e.target.value
  267. localStorage.setItem('theme', chosenColorScheme)
  268. toggleTheme(chosenColorScheme)
  269. })
  270. const selectedTheme = localStorage.getItem('theme')
  271. if (selectedTheme && selectedTheme !== 'undefined') {
  272. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  273. }
  274. }
  275. }
  276. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  277. window.addEventListener('load', () => {
  278. let colorsLayer = undefined
  279. let hasDarkRules = false
  280. for (const styleSheet of Array.from(document.styleSheets)) {
  281. let mediaRules = []
  282. for (const layerRule of styleSheet.cssRules) {
  283. if (!(layerRule instanceof CSSLayerBlockRule)) {
  284. continue
  285. }
  286. if (layerRule.name === 'colors') {
  287. colorsLayer = layerRule
  288. }
  289. for (const cssRule of layerRule.cssRules) {
  290. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  291. continue
  292. }
  293. // WARNING: Safari does not have/supports `conditionText`.
  294. if (cssRule.conditionText) {
  295. if (cssRule.conditionText !== prefersColorSchemeDark) {
  296. continue
  297. }
  298. } else {
  299. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  300. continue
  301. }
  302. }
  303. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  304. }
  305. }
  306. // WARNING: do not try to insert a Rule to a styleSheet you are
  307. // currently iterating on, otherwise the browser will be stuck
  308. // in a infinite loop…
  309. for (const mediaRule of mediaRules) {
  310. // Safari requires the `0` second parameter (even if default).
  311. colorsLayer.insertRule(mediaRule.cssText, 0)
  312. hasDarkRules = true
  313. }
  314. }
  315. if (hasDarkRules) {
  316. if ('customElements' in window && !customElements.get('theme-toggle')) {
  317. customElements.define('theme-toggle', ThemeToggle)
  318. }
  319. }
  320. })
  321. </script>
  322. <script src="/static/david/js/popper-2.11.8.min.js"></script>
  323. <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  324. <script>
  325. tippy('[data-tippy]', {
  326. content(reference) {
  327. reference.addEventListener('click', (e) => e.preventDefault())
  328. return `
  329. <h3 lang="fr">
  330. <img src="${reference.dataset.favicon}" loading="lazy">
  331. <a href="${reference.dataset.source}"
  332. >Article sur ${reference.dataset.domain}</a></h3>
  333. <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
  334. <div class="tippy-links" lang="fr">
  335. <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
  336. </div>
  337. `
  338. },
  339. allowHTML: true,
  340. interactive: true,
  341. delay: [150, 700],
  342. hideOnClick: false
  343. })
  344. </script>
  345. <script type="module">
  346. import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
  347. const markObserver = new IntersectionObserver((entries, observer) => {
  348. const computedStyle = getComputedStyle(document.documentElement)
  349. const markBackground = computedStyle.getPropertyValue('--mark-background')
  350. for (const entry of entries) {
  351. if (entry.intersectionRatio === 0) continue
  352. const markElement = entry.target
  353. markElement.style.backgroundColor = 'inherit'
  354. const annotation = annotate(
  355. markElement, {
  356. type: 'highlight',
  357. multiline: true,
  358. color: markBackground,
  359. // animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
  360. animate: false
  361. }
  362. )
  363. annotation.show()
  364. observer.unobserve(markElement)
  365. }
  366. }, {threshold: 1.0})
  367. for (const markElement of document.querySelectorAll('mark')) {
  368. markObserver.observe(markElement)
  369. }
  370. </script>
  371. </body>
  372. </html>