Worldwide, over 285 million individuals live with some sort of visual impairment.
This is according to the U.S. Health and Human Services Department. Introduction to Section 508 Compliance and Accessibility (hhs.gov)
They require screen-readers to help them navigate the web.
The problem is that not all websites are structured with appropriate semantic markup for accessibility.
For more information on why web accessibility is important in general, you can check out my previous blog post here.
But today, I’m going to discuss this common accessibility mistake web developers make when designing the structure of their websites.
<h2>Why is semantic HTML important for accessibility?</h2>
You can think of the HTML markup of your page as a road map, with each tag acting as a landmark to let you know where you are. For a lot of developers, it can be easy to just use <div> tags for everything.
But not only is this lazy, it can be harmful as well.
For those who are visually impaired, screen readers help users to navigate through a page and provide context. Using the proper semantic tags and using proper naming conventions for labels makes navigation much more accessible for all users.
With the release of HTML5, it’s also really easy to add more descriptive tags, including:
- <article>
- <aside>
- <details>
- <embed>
- <header>
- <footer>
- <nav>
- and more…
For an individual using just the keyboard to tab through a page, having an appropriate HTML structure with clearly labeled tags provides the user with the ability to more easily scan through a page.
And again, accessibility helps everyone. Future developers going through your work (or maybe just your future self) will also have an easier time navigating your page.
<h2>What are some other examples of poor semantic markup?</h2>
Overusing the ARIA labels.
The ARIA labels were designed to add accessibility for elements that didn’t have a textual description. But many developers started using the ARIA labels to compensate for their <div> soup, instead.
The changes listed above in HTML5 provide a better way to add description to your markup and make it clearer to screen-readers the purpose of the content. A good rule is to use ARIA only as last resort.
Placeholder text is not enough.
Someone with a visual impairment cannot see placeholder text and neither can all screen readers. They rely on the label attached to the input.
But let’s be frank, even if you didn’t have a visual impairment and you just walked away for second, you might forget what inputs you needed and why if there were no labels to tell you.
<h2>What you should do instead?</h2>
- Make it scannable. Add clear and descriptive html tags throughout the page so that users can quickly tab to the section most relevant to them, no matter what device they’re using.
- Only use ARIA labels as necessary. Use the ARIA semantic labels only when there is no alternative tag that would better clarify the section.
- Always add labels to input fields. Label your form fields so that all users can see and understand the reason for your input field.
Adding the appropriate semantic markup to your website’s structure can greatly improve your site’s accessibility for those who utilize screen-readers. For more information on web accessibility check out the Web Content Accessibility Guidelines (WCAG) 2.0.
But of course, adding accessibility features improves the user experience of all users. Poor semantic markup is just one of a few common accessibility mistakes that are creating a barrier to fair and equal use of the world wide web.
In my next post, I’ll be discussing another common mistake: using incorrect or no alt-text at all.
If you’ve enjoyed reading about this topic and want to hear more, leave a comment below.
