Element is Empty

This week I'd like to talk about a couple of different accessibility violations that you may see on your Siteimprove report (or just about any other accessibility tool, as this is very easy to determine programmatically). While there are several ways it may be reported, they all essentially say that the "XX element is empty." This could be headings, sections, containers, or other elements, but in the end, they all roughly mean the same thing—an HTML element that has meaning, but does not have any content within it might be detected by assistive technology.

First, a little bit of background about semantics

Almost all elements in HTML, just by their very inclusion on the page, tell the web browser that they are meaningful. There are two common elements that don't: <div> and <span>. These two elements don't carry any meaning and can be left empty without issue or concern.

All other elements, there are about 140 of them, depending on who you ask, require content within them. Their very presence on the page conveys to the browser that it exists for a reason and, therefore, should have content. For example, an element says that this is a paragraph of content, while an element says that this is a heading of the top level. This can look very different depending on your code, but the most common variation of this violation is simply to have an empty element like these examples:

<h3></h3>
<p><span>&nbsp;</span></p>
<ul></ul>

Most accessibility tools will not flag the <p> being empty as most users of assistive technology will ignore this (technically, it also shouldn't be empty). However, this is quite an issue for headings and other elements because one of the primary ways a user can navigate the page is by jumping directly to headings. So, in the case of that first empty heading above, the user is informed there is a heading, can navigate directly to it, but is then given no information about where they are on the page.

Generally, when you have something like the above, it's a simple solution to delete the offending element within your content management system. However, this issue can be a lot more complex. For example, take the following code:

<h3><img src="picture.png" alt=""></h3>

While it is possible to only have a picture within a heading tag (not always advisable, but permissible in some cases), and it is possible to mark an image decorative using null alt text, when you combine both it makes it so that there is no textual content within the heading. In contrast, this is perfectly acceptable:

Using ARIA role

Just to make things slightly more confusing, ARIA roles may come into play (if you ever edit the HTML). On the one hand, you can add a role to a <div> or <span> that gives the element meaning, such as this:

<div role="heading" aria-level="3"></div>

By adding the role to the <div> you have given meaning to an element that had no meaning. To assistive technology, this is identical to <h3></h3> and therefore must contain content.

This can cause issues in the other direction too. Adding a role of presentation or none to an item removes the semantic meaning of the element, turning a meaningful element into a non-meaningful one like a <div>. Take, for example, the following:

<ol>
    <li role="presentation">List Item 1</li>
    <li role="presentation">List Item 2</li>
    <li role="presentation">List Item 3</li>
</ol>

Here we have an ordered list (<ol>) which is meaningful to assistive technology and should have list items (<li>) within it, but we have added the role of presentation to the list items, so now, according to assistive technology, there are no list items as the meaning has been removed.

So be mindful of any issue that relates to empty containers as the container will be reported to assistive technology.