Cleaner More Accessible Code With HTML

We have all been that new developer on a web development team that is overwhelmed and little anxious to get started. New teammates, new team norms, and even the thought 'will I fit in'. All of these are totally valid feelings transitioning to any new web development team, but the one thing that is even worse than all of that? Learning a new code base!

One of the most difficult things in learning a new web application code base is all the JavaScript! In this age of web development, JavaScript has taken over and made learning new code bases a tedious process.

In turn, this has put the focus on learning JavaScript over the basics such as HTML. This only adds to the problem of learning a new code base because HTML is full of <div> and <span> with a load of events, custom data attributes, and of course ARIA for accessibility.

Value Semantic/Native HTML

If you want to make your HTML be the easiest part of your code base to understand, then learn to value semantic and native HTML. Enforcing such makes it easier to understand the markup, builds in accessibility by default and also make the code fit for longer term sustainability.

Don't believe me? Let's take a look at couple of examples where HTML markup can be much simpler to understand!

List Components

Let's compare two lists, one that is made with <div> and <span> and is filling in the gaps using ARIA, and the second that is just using native HTML.

ARIA List

<div role="list">
<div class="row">
    <span class="dot"></span>
    <div class="li" role="listitem">
       {this.props.descOne} 
    </div>
</div>
<div class="row">
    <span class="dot"></span>
    <div class="li" role="listitem"> 
           {this.props.descTwo}
    </div>
</div>
<div class="row">
    <span class="dot"></span>
    <div class="li" role="listitem">
          {this.props.descThree}
     </div>
</div>
</div>

HTML List

    <ol class="list">
        <li>{this.props.descOne}</li>
        <li>{this.props.descTwo}</li>
        <li>{this.props.descThree}</li>
    </ol>

As you can see, the ARIA based component is using loads of ARIA to make up for the fact that it has to be a list, while also adding a <span> to create the dots for the list items.

If we just use native HTML, it literally is 5 lines of code to make it and it is much easier to see the data that goes into each list item.

Expand/Collapse Component

Another example would be using semantic HTML to create an expand/collapse component. There are developers who don't even realize you can achieve this using HTML alone (for the most part).

This example will show how much ARIA, and custom attributes and events are used to create a button that expands and collapses vs the clean output of semantic HTML.

No Native HTML Expand/Collapse

<div role="button" tabindex="0" 
onClick="doClick()" onKeyUp="doClick()" 
aria-expanded="false" aria-controls="expanded-section" 
aria-label="More information on your car">
  <span aria-hidden="true" class="toggle"></span>
</div>
  <div class="expanded-section" aria-hidden="true">
    <p>The car has all wheel drive and contains some of the best brakes out there.</p>
  </div>

Native HTML Expand/Collapse Section

<details class="expCol" id="summarySection">
  <summary class="sum" tabindex="0" role="button" aria-expanded="false">
    More information on your car
  </summary>

  <div class="expanded-section">
    <p>The car has all wheel drive and contains some of the best brakes out there.</p>
  </div>
</details>

As you can see, the amount of ARIA attributes and events tied to the expand/collapse using ARIA makes it very difficult to follow what all the markup is doing. Whereas the <detail> and <summary> is clean and concise and easy to understand.

Build For The Future

As you have seen the in above examples, using semantic and native HTML is the way to make your markup cleaner and more accessible for any developer to pick up and use.

One thing that tends to plague the development community is sustainable code that is future proof. Many teams get to a point where their code base is switched out for a new library after a few years. This in turn is why most teams do not put the effort in to learning the basics of HTML.

Using HTML can help make it so your development team can be ready for any changes such as this and the addition of new teammates! It also can ensure your code is much more accessible for all to use since semantic and native HTML has the accessibility built in. All in all, HTML is the way to go!