If you're new to accessibility, or not, using good semantic HTML is always a great foundation for accessibility. Using HTML elements as intended not only does work for you, it can slim down your code, and it helps with SEO. Below we will take a look at some examples of good and bad semantics, and how writing the solid HTML can help your code.
Remembering why
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 socioeconomic 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 in action
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 below
Now let's look at the HTML for this example, 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 the code for it could look like this
<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 renders what seems to be a usable form, but our HTML creates many issues for many users. Actually what a screen reader interprets from this code is almost useless. Additionally, keyboard only users would have a very difficult, if not impossible, time choosing the correct option.
Here’s the example again with semantically correct code
<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
In closing
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
HTML: A good basis for accessibility
https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML
Go through a checklist to make sure your app is accessible
https://webaim.org/standards/wcag/checklist
Checkout Sylwia Vargas’ checklist
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/
Top comments (0)