Semantic HTML and Accessible Rich Internet Applications (ARIA) help create interfaces that work for everyone in the most performant, robust, and simple way possible. They add essential meaning to your content, which lets web browsers, search engines, screen readers, RSS readers, and ultimately users understand it.
And yet, many people still don’t use them. I wanted to know why, so I set up a Twitter poll. The most common reason people gave was a lack of awareness and understanding of the benefits of using semantic HTML and ARIA.
Let’s look over the benefits of using HTML and ARIA, why starting with semantic HTML is the way to go, and why ARIA ought to come in as a last resort.
Starting with raw text
<body> element of an HTML document contains the main content a user sees on a page. If content is put inside the body without any additional elements, the browser has no way of differentiating between different types of content, like paragraphs and headings.
<body> A Study of Butterflies Butterflies are little bugs with cute wings. Butterfly Habitats Butterflies live in flower houses and hang out at dank coffeeshops. </body>
If the browser can’t differentiate between pieces of content, then it can’t present that content to the user in a meaningful way. That means:
- We can’t style the headings differently from paragraphs.
- It’s harder for search engines to interpret the content, meaning it’s likely to rank poorly and be difficult for users to find.
- Screen readers and other assistive technology can’t communicate it properly to the user.
Not to mention, it’s more than a bit awkward visually:
Adding some structure with HTML
To provide some structure we could wrap the lines of text here in divs like this:
<div>A Study of Butterflies.</div> <div>Butterflies are little bugs with cute wings.</div> <div>Butterfly Habitats</div> <div>Butterflies live in flower houses and hang out at dank coffeeshops.</div>
This is slightly better because each piece of content is displayed in the browser on its own line instead of one long unbroken line …