<div class="box">
  <h1>A11Y Study case: Breaking text on a specific word and Screen Readers implications</h1>
  <a href="https://dev.to/a_sandrina_p/a11y-study-case-splitting-text-into-multiple-lines-and-screen-readers-implications-g72" class="link">Read article on Dev.to</a>
</div>

<div class="card">
  <h3>Continuous text</h3>
  <p>
    Hello human being
  </p>

  <p class="sr" aria-hidden="true">Voice Over: "Hello human being"</p>
</div>

<div class="box">
  <h2>Common (poor) approaches</h2>
</div>

<ul>
  <li class="card">
    <h3>1 - Using <code>br</code></h3>
    <!-- Do not use br. They are meant to be used when
  different lines have meaning. (eg stress addresses and poems) -->
    <p>
      Hello
      <br />
      human being
    </p>
    <p class="sr" aria-hidden="true">⚠️ Voice Over: "Hello" [next block] "human being"</p>
  </li>

  <li class="card">
    <!-- A util class makes the job but SR still reads it "with pauses"
-->
    <h3>2 - Using <code>span</code> with <code>display:block</code></h3>
    <p>
      Hello <span class="u-newline"></span>
      human being
    </p>
    <p class="sr" aria-hidden="true">⚠️ Voice Over: "Hello" [next block] "human being"</p>
  </li>

  <li class="card">
    <h3>3 - Using inline flexbox</h3>

    <p class="textInLines">
      <span>Hello</span>
      <span>human being</span>
    </p>
    <p class="sr" aria-hidden="true">⚠️ Voice Over: "Hello" [next block] "human being"</p>
  </li>
</ul>

<div class="box">
  <h2>Solution attempts</h2>
</div>

<ul>

  <li class="card">
    <h3>1.1 - Using <code>role="text"</code> (in paragraphs)</h3>
    <p role="text">
      Hello
      <span class="u-newline"></span>
      human being
    </p>
    <p class="sr" aria-hidden="true">✅ Voice Over: "Hello human being"</p>
    </div>

  <li class="card">
    <h3>1.2 - Using <code>role="heading"</code> (in headings)</h3>

    <h4 role="heading" aria-level="3">
      Hello
      <span class="u-newline"></span>
      human being
    </h4>
    <p class="sr" aria-hidden="true">⚠️ Voice Over: "Heading level 4 2 items Hello [pause] human being"</p>
  </li>

  <li class="card">
    <h3>2.1- Using <code>aria-label</code> (in paragraphs)</h3>

    <p aria-label="Hello human being">
      Hello
      <span class="u-newline"></span>
      human being
    </p>
    <p class="sr" aria-hidden="true">⚠️ Voice Over: "Hello human being, group"</p>
  </li>

  <li class="card">
    <h3>2.2 - Using <code>aria-label</code> (in headings)</h3>

    <h4 aria-label="Hello human being">
      Hello
      <span class="u-newline"></span>
      human being

    </h4>
    <!-- I guess it says "2 items" because u-newline is
     "display block", which forces a "block" per line. -->
    <p class="sr" aria-hidden="true">⚠️ Voice Over: "Heading level 4 2 items, Hello human being"</p>
  </li>

  <li class="card">
    <!-- Solution from https://twitter.com/hzr/status/1317569835568693250 -->
    <h3>3.1 - Using <code>white-space: pre-line</code> v1</h3>
    <p class="u-preline">Hello
      human being</p>
    <p class="sr" aria-hidden="true">✅ Voice Over: "Hello human being"</p>
  </li>

  <li class="card">
    <!-- Solution from https://twitter.com/simevidas/status/1317586897548476418 -->
    <h3>3.2 - Using <code>white-space: pre-line</code> v2 (<code>&NewLine</code>)</h3>
    <p class="u-preline">Hello &NewLine; human being</p>
    <p class="sr" aria-hidden="true">✅ Voice Over: "Hello human being"</p>
  </li>

  <li class="card">
    <!-- Solution from https://twitter.com/ecbos_/status/1317740758431129600 -->
    <h3>4.1 - Using <code>br role="presentation"</code>(in paragraphs)</h3>
    <p>Hello
      <br role="presentation" />
      human being
    </p>
    <p class="sr" aria-hidden="true">⚠️ Voice Over: "Hello" [next block] "human being"</p>
  </li>

  <li class="card">
    <!-- Solution from https://twitter.com/ecbos_/status/1317740758431129600 -->
    <h3>4.2 - Using <code>br role="presentation"</code> (in headings)</h3>
    <h4>Hello
      <br role="presentation" />
      human being
    </h4>
    <p class="sr" aria-hidden="true">⚠️ Voice Over: "heading level 4 2 items Hello [pause] human being"</p>
  </li>
</ul>

<footer class="footer">
  <p>Made without coffee by <a href="https://twitter.com/a_sandrina_p" class="link">Sandrina Pereira</a>. Would you <a href="https://www.buymeacoffee.com/sandrinap" target="_blank" class="link">buy me one</a>?</p>
</footer>