Accessibility from the Jump

3 min readOct 19, 2020

Web Accessibility is a form of Universal design — striving to make things accessible to all people, regardless of age, disability or other factors. Not everyone access web content the same way, so ensuring there are little to no barriers to that content is paramount.

It’s important to think about who our users are, and how they interact with the things we make. Between physical disabilities, situational disabilities, and socio-economic restrictions on bandwidth and speed, there is plenty to be considerate of when programming.

Assistive technology can understand and process web content and adapt it for users, but only with a solid core of good semantics and functionality. For developers, it’s not that difficult to implement a good amount of accessibility from the beginning, it all starts with solid html.

Semantic HTML

Let’s look at some examples of good and bad html, and how it can effect users

For the first example, we’ve created a simple html document, with a handful of items, displaying above

the html for this example is below, and hopefully you’ll see a few mistakes

<body>
  <h1>My heading</h1>
  This is the first section of my document.
  <p>I'll add another paragraph here too.</p>
  <ol>
    <li>Here is</li><br>
    <li>a list for</li><br>
    <li>you to read</li><br>
  </ol>
  <font>My subheading</font><br>
  <div>This is the first subsection of my document. I'd love people to be able to find this content!</div>
</body>

Visually this looks pretty nice with some space in between our list items, but a screen reader actually reads this as six list items. Obviously there are some other issues here too, maybe not egregious, but a few simple changes make this much easier for everyone to understand.

<body>
  <h1>My heading</h1>
  <p>This is the first section of my document.</p>
  <p>I'll add another paragraph here too.</p>
  <ol>
    <li>Here is</li>
    <li>a list for</li>
    <li>you to read</li>
  </ol>
  <h2>My subheading</h2>
  <p>This is the first subsection of my document. I'd love people to be able to find this content!</p>
</body>

The first example is very simple, so let’s look at a form example, where the user wants to interact with the page more.

And here’s the html for it:

<form>
  <div class="fs">
    <main>
      <p>Fruit juice size</p>
      <div>
        <input type="radio">
        <p style="display:inline">Small</p>
      </div>
      <div>
        <input type="radio">
        <label>Medium</label>
      </div>
      <div>
        <input type="radio">
        <p style="display:inline">Large</p>
      </div>
    </main>
  </div>
</form>

In it’s current form the html looks fine on the screen, but is incredibly confusing from any other viewpoints, and what a screen reader interprets is almost useless. A user accessing this form with only keyboard would have a very difficult, if not impossible time choosing the correct option.

Here’s the example again with semantically correct

<form>
  <fieldset>
    <legend>Fruit juice size</legend>
    <p>
      <input type="radio" name="size" id="size_1" value="small">
      <label for="size_1">Small</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_2" value="medium">
      <label for="size_2">Medium</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_3" value="large">
      <label for="size_3">Large</label>
    </p>
  </fieldset>
</form>

With good semantic html applied, this form looks exactly the same but is now organized and accessible. For a more detailed explanation on this particular example, check out https://developer.mozilla.org/en-US/docs/Learn/Forms/How_to_structure_a_web_form

Working with good semantic html does so much for you, it gives you a good amount of functionality straight out of the box, it works well on mobile, and it’s good for SEO. Semantic html is fairly quick to learn, and going back to update websites much less efficient than building with accessibility in mind from the jump.

Additional Resources

Go through a checklist to make sure your app is accessible
https://webaim.org/standards/wcag/checklist

Checkout Flatiron’s Sylwia Vargas’ guide
https://dev.to/sylwiavargas/checklist-web-accessibility-3abl

Start learning the basics at MDN
https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders

The mothership of accessibility
https://www.w3.org/

Accessibility from the Jump

Semantic HTML

Additional Resources

Written by JD Brewer-Hofmann