davidbgk
/
larlet-fr-david-cache

<!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>
  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>Overcoming my panic towards accessibility (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="#f0f0ea">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.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 type="text/javascript">
    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://zellwk.com/blog/overcoming-panic-towards-accessibility/">

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

<article>
  <header>
    <h1>Overcoming my panic towards accessibility</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil">🏠</a> •
      <a href="https://zellwk.com/blog/overcoming-panic-towards-accessibility/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <main>
    <p>Accessibility is a big part of JavaScript. If you build anything with JavaScript, you need to make them accessible.</p>

<p>I’ve been afraid of touching accessibility for a few years now. This fear magnified when I began writing the accessibility lessons for <a href="https://learnjavascript.today">Learn JavaScript</a>.</p>

<p>Today, I want to share with you why I became afraid of accessibility, and how I overcame this fear.</p>

<h2 id="my-background">My background</h2>

<p>I grew up in an environment where I felt I was constantly scrutinised for my actions. Whenever something goes wrong, it was always my fault; it doesn’t matter whether I actually did anything wrong.</p>

<p>So I grew up being very sensitive towards whether things are “right” or “wrong”. I need to make things “right” in order not to get punished. I also grew up thinking that everyone out there is trying to harm me.</p>

<p>It’s unhealthy, I know. I just realised this a few months ago.</p>

<h2 id="why-i-was-scared-of-accessibility">Why I was scared of accessibility</h2>

<p>I keep track of dev-related conversations on Twitter. I noticed a trend whenever I see anything about accessibility: Someone fucked up.</p>

<p>There are two kinds of fuck-ups.</p>

<h3 id="first-kind%3A-made-by-companies">First kind: Made by companies</h3>

<p>The first kind is where big (and rich) companies refuse to build accessible websites. Developers all around Twitter-verse would talk negatively about these companies.</p>

<p>When I see these conversations, I can’t help but wonder whether I fucked up somewhere. I can’t help but wonder if anyone was angry at me for creating something not accessible.</p>

<p>Yes, the news is not about me. But I can’t help it. I was the kind of person where everything (that’s bad) will always be about me. Because everything is my fault. I grew up that way.</p>

<p>(I’m admitting all my flaws right in this article. It’s so freaking hard to write).</p>

<p>I became guarded against the “Accessibility” topic. I cannot afford to screw up on this topic (I told myself this unconsciously).</p>

<h3 id="second-kind%3A-made-by-individuals">Second kind: Made by individuals</h3>

<p>The second kind of fuck-ups is made by developers who make and share experiments (or discoveries). Accessibility critics will always be there to point out more accessible options. Sometimes, they’ll simply denounce the idea by saying the experiment is not accessible.</p>

<p>I was defensive against such comments because I grew up thinking everyone was scrutinising me for my actions. Everyone was judging me. Everyone was everyone out to get me. I can’t help it.</p>

<p>There was one incident where I created a calendar with CSS Grid. I shared how I made this through <a href="https://zellwk.com/blog/calendar-with-css-grid/" title="How to build a calendar with CSS Grid">an article</a>. I also tweeted about it.</p>

<figure role="figure">
  <img src="https://zellwk.com/images/2020/overcoming-panic-towards-accessibility/calendar-fixed.png" alt="Calendar built with CSS Grid."/>
</figure>

<p>Guess what? The only people that jumped on this topic were the accessibility folks. They mentioned I should use a <code>&lt;table&gt;</code> element because it’s more semantically correct.</p>

<figure role="figure">
  <img src="https://zellwk.com/images/2020/overcoming-panic-towards-accessibility/rik.png" alt="Rik says he would use table instead of CSS Grid."/>
</figure>

<figure role="figure">
  <img src="https://zellwk.com/images/2020/overcoming-panic-towards-accessibility/meduz.png" alt="Meduz says he would use table instead of CSS Grid."/>
</figure>

<p>These weren’t troll-type comments. They were valid replies.</p>

<p>But when I saw these comments, I jumped and got angry. Why? Remember, I was at a point where I took things personally. I believed that everyone out there was trying to harm me. I grew up needing to be “correct”.</p>

<p>These comments pointed out where I was “wrong”. When I was wrong, I get punished. This process was so ingrained in me that I punished myself (by beating myself up psychologically) even when nobody was around to punish me physically. It reinforced the idea that people are out there to get me.</p>

<p>Here’s another incident. It was worse than the previous one.</p>

<p>Back in April 2019, I published an article about <a href="https://zellwk.com/blog/hide-content-accessibly/">a new way to hide content accessibly</a>. This article challenged long-standing conventions in the accessibility field. I was excited about the idea because it was a major discovery for me.</p>

<p>When I published the article, I got this email.</p>

<figure role="figure">
  <img src="https://zellwk.com/images/2020/overcoming-panic-towards-accessibility/eric-1.png" alt="Email that asked if I tested this with a full range of assistive technology and browser pairings. If I didn't, then I'm being incredibly irresponsible."/>
</figure>

<p>I wasn’t trying to be irresponsible. I already mentioned explicitly (in the article) that my suggestion was new and not thoroughly tested in the article, but the email came anyway. Once again, this reaffirmed my views that people are out there are watching me and are trying to get me.</p>

<p>I tried to calm down. I understood that accessibility people were immensely concerned about accessibility. So I gave an adult reply to his message. I even added the words “disclaimer” in bold and caps in my article to emphasise the instability of the new method.</p>

<figure role="figure" aria-label="Adding a huge bold disclaimer to my article">
  <img src="https://zellwk.com/images/2020/overcoming-panic-towards-accessibility/disclaimer.png" alt=""/>
  <figcaption>Adding a huge bold disclaimer to my article</figcaption>
</figure>

<p>What happened next was a productive discussion on Twitter about the pros/cons of this new method. Some people were more aggressive (fuckers, I would call them in my mind). Others were more understanding.</p>

<p>Overall, it was a great learning experience. Here, I realised that Scott O’Hara is probably the most understanding and nicest person in the accessibility field.</p>

<p>I then wrote about my findings and updated the article after the discussion. And I sent another email out to tell my readers about my new findings.</p>

<p>Everything above happened in a day.</p>

<p>Then, I received this in my email. From the same guy.</p>

<figure role="figure">
  <img src="https://zellwk.com/images/2020/overcoming-panic-towards-accessibility/eric-2.png" alt="Person stressed curt tone was justified. And if I break accessibility, I deny people of their civil rights."/>
</figure>

<p>I blew up.</p>

<p>I raged at him for pushing my buttons (about being “wrong”, about being “irresponsible”). I raged at him for feeling justified about his crudeness by punishing me with words, and it was all my fault to begin with. (I realised much later that I was the one who punished myself. But the process was so ingrained I felt that dude punished me).</p>

<p>I’m the one who’s wrong here. Yes, even though it’s not my fault. 😡.</p>

<p>So once again, this reaffirmed my world-view that people are out to get me. This is especially prevalent when it comes to accessibility.</p>

<p>I allowed myself to let out my frustrations by writing an article <a href="https://zellwk.com/blog/advocacy/">on Advocacy</a>. I thought I let it all out.</p>

<p>But that wasn’t the end.</p>

<p>Deep down, I wanted nothing to do with accessibility anymore. I don’t want to think about it. I don’t want to touch it. And I retreated.</p>

<p>But I didn’t know I retreated. I didn’t know I would become afraid of touching accessibility.</p>

<p>The damage was done. But I was unaware.</p>

<h2 id="deciding-to-overcome-the-panic">Deciding to overcome the panic</h2>

<p>I was the kind of person who retreated when challenged. It made absolute sense why I was afraid of accessibility if you consider my background and experiences.</p>

<p>But I had a reason to overcome my panic towards accessibility. My reason? I was writing <a href="https://learnjavascript.today">Learn JavaScript</a>. JavaScript is a huge part of accessibility. If I teach people to build things with JavaScript, I need to teach them how to make it accessible for other users. It’s the right thing to do.</p>

<p>So I had to step back out into the accessibility minefield.</p>

<h2 id="overcoming-the-panic-towards-accessibility">Overcoming the panic towards accessibility</h2>

<p>I worked through two things to overcome my panic.</p>

<p><strong>First: I had to allow myself to understand why I panicked</strong>. I did this with the help of a life coach. This was how I discovered the whole background story you read above. (This was for general anxiety/panic related things. I panicked in many other parts of my life too).</p>

<p><strong>Second: I had to understand accessibility</strong>. I ate my own medicine. <a href="https://zellwk.com/blog/figure-it-out/">I sat down and figured it out</a>. I got good enough to know the field.</p>

<p>I spent one month doing these:</p>

<ol>
<li>Reading and understanding the spec</li>
<li>Reorganizing content from the spec</li>
<li>Setting up screen readers on both Mac and Windows</li>
<li>Testing properties and attributes with Voiceover and NVDA</li>
<li>Building accessible components</li>
<li>Testing components with both Voiceover and NVDA</li>
<li>Writing about accessibility</li>
</ol>

<p>In one month, I built 8 accessible components for <a href="https://learnjavascript.today">Learn JavaScript</a>. I also wrote 20+ lessons about accessibility. I figured out enough things to know the accessibility field.</p>

<p>Am I still afraid of accessibility?</p>

<p>Yes. I still get panic attacks when I think about accessibility. Heck, I even get panic attacks when I write CSS and JavaScript. I have not gotten to a point where I can manage all my panic reactions flawlessly.</p>

<p>But I moved on. I’m at a better place compared to where I was a few months ago. I’m more confident. I became a better developer and a better teacher.</p>

<h2 id="why-i%E2%80%99m-writing-this%3F">Why I’m writing this?</h2>

<p>I felt like writing an extremely righteous message here (like saying it’s for you to break out of your panic attacks towards code).</p>

<p>But if I’m honest. I would say I don’t really know.</p>

<p>On one hand, I hope learning about my experiences would help you see yourself in a new light. That it’s okay to panic. And you can continue to learn and improve even if you’re panicking.</p>

<p>I also hope you take the chance to work through any past traumas when you were a child (which led to the panic attacks).</p>

<p>But ultimately, I think I’m telling this story so I can close this panic episode with integrity and honesty. I think I want to tell myself that it’s okay to be weak and imperfect. That it was okay for me to be defensive. That it was okay for me to be angry.</p>

<p>And it’s okay to let the anger go now. Nobody out there is trying to harm me. Nobody out there is trying to force me to admit to mistakes I didn’t make. Nobody out there is trying to make me “wrong”.</p>

<p>Even if I’m wrong, I don’t have to punish myself. It’s okay to make mistakes. I don’t have to stay vigilant against the world. I don’t have to protect myself from the entire world anymore.</p>

<p>I can let go of my defensive barrier and receive the world with a pair of lenses that are less tinted compared to before. I don’t know if how long it would take for me to let this all go. But I’ve started to let go. And that’s a good thing.</p>
  </main>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil">🏠</a> •
    <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
    <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend>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 type="text/javascript">
    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>