In the last article we talked about one of the assistive technologies designed to help people with disabilities access the web: screen readers. If you remember, we said that screen readers translate the info they see on the screen into audio and/ or Braille output. But in order for this to work, developers need to make sure the HTML can be read and translated by the screen readers.

One of the simplest steps a developer can take in order to make their page/ application accessible for everyone is to use semantic HTML as much as possible. But what is that? Is it any different from regular HTML?

The answer is no. Semantic HTML is markup that describes its meaning very clearly. For example, elements like header, table, section or article are very clear about their content while div or span say nothing about what they might have inside. Since 2014, HTML4 got upgraded to HTML5. With the new version, many semantic elements were added so writing accessible code become so much simpler than before. Unfortunately, even today we can see lot of non-semantic markup in the wild. Consider the following example:

<div>
   <div>This is a list</div>
    <br>
     <span>First item</span>
      <br>
     <span>Second item</span>
      <br>
     <span>Third item</span>
   </div>
</div>

This is of course an exaggeration but a very clear example of not so friendly screen readers code. Although we wrote valid tags, they're not used for the purpose they're intended (we're trying to create a list using divs and brs instead of using the correct elements). Now look at the correct example:

<section>
  <h2>This is a list</h2>
   <ul>
     <li>First item</li>
     <li>Second item</li>
     <li>Third item</li>
   </ul>
</section>

When the screen reader encounters the second example, it's very clear that the user it's looking at a section of a web page and that inside the section we have an unordered list - things that are impossible to understand from the first example.

Semantic HTML doesn't require any additional effort compared to non-semantic HTML, especially if you use it right from the beginning of your project. A quick list of semantic elements:

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

This doesn't mean we should never use divs or spans or other elements that don't convey their meaning very clearly, but if you care about making your application accessible to everyone, you should definitely use HTML5 as much as possible. Besides a larger number of users, other advantages of semantic HTML is that the code is simpler, easier to read and more maintainable (think about only about all the ids and classes you could avoid using while trying to make non-semantic elements be more specific; for example, someone could write something like <div id=header></div> instead of <header></header>).

Image source: Goran Ivos/ @goran_ivos on Unsplash