HTML Semantics and Accessibility

Preface

I have been asked on many occasions to explain why using element Y is wrong/inappropriate and should use element Z instead, therefore have decided to put this in a blog post, so many more people can benefit from my explanation.

Note: This article is intended to introduce you to the concept that semantic HTML elements include a ‘hidden’ accessibility component to them. It is not a comprehensive overview of what accessibility components are included in semantic HTML elements.

Introduction

Semantic markup is usually associated with SEO. However semantic markup plays another crucial role; a much less known role – providing the necessary information about the element to assistive technologies (AT).

This additional information informs both ATs and user agents on how-to process the particular element. e.g. user agents will generate a generic click event handler for anchors (links) when it comes across a correctly marked up anchor element.

What is a semantic element

A semantic element is an element that has an associated semantic meaning – that is usually self-explanatory. e.g. <main> is the semantic markup for the main section of your document.

Heading example

Let’s look at a simple example – a Heading element (specifically H1). This will give you a better understanding of the impact of using correct semantic HTML on accessibility.

Note: example assumes ARIA has not been used, only effort applied is styling the element to look like a H1.

Below are a few ways you can go about marking up a bit of text to look like a H1:

<h1>Heading 1</h1>

<span>Heading 1</span>
<div>Heading 1</div>
<p>Heading 1</p>

<img src="/images/heading-1.gif" />
<a>Heading 1</a>

Now let’s analyse the impact of each markup approach.

<h1> being semantically correct markup for Heading 1, have all the ‘hidden’ accessibility benefits included. Default browser styling of H1, AT announcement of Heading 1, etc.

<span>, <div> and <p> being generic elements, therefore do not have any particular semantic meaning. And as such, do not include any of the ‘hidden’ accessibility benefits. To user agents and ATs, all they see is just the text within the tags. Thus treats the ‘visually looking’ Heading 1 as plain text.

<img src="/images/heading-1.gif" /> and <a> being semantically incorrect markup for a Heading 1, they include ‘hidden’ accessibility information that is incorrect, thus greatly affects accessibility for AT users.

Conclusion

Now you understand the impact of using incorrect HTML markup on accessibility, I hope you will start using semantic HTML correctly.

If you use custom controls/widgets, you may also like to read my articles: Native HTML Controls and Accessibility and Introduction to understanding WAI-ARIA 1.0 Roles.