Accessibility rule: Container element is empty, explained
Accessibility of web content requires that widgets, structures, and behaviors are coded so, that assistive technology is able to accurately convey the right information to users. This rule is checking that any element that is supposed to contain other elements, has the correct child elements.
Example:
A container element for an unordered list, <ul>, should not exist without the list items, <li>. In other words, a list is not a list, without list items.
When a list is properly structured, assistive technology is able to correctly announce to the user, that there is an unordered list, with two list items.
<ul> <li>List item 1</li> <li>List item 2</li> </ul>
Who is impacted by this barrier?
When elements are correctly grouped, blind or low-vision screen reader users are able to easier understand the contexts and structures that are present on the website. If the content is not properly structured, navigating the website can be very confusing. For instance, if you encounter a list on the website, you would expect it to have list items. Otherwise, you might wonder if some information is hidden or missing.
How does the check work?
This rule checks that any element with a semantic role, that is required to have owned elements, has them. The long list of roles can be found in the WAI-ARIA specifications. By searching with the role, that Siteimprove flags as missing content, you can find out what the required child roles are.
Some of the common failures of this rule are:
- The children of the container element have a different role="...". This would mean that the container element does not have the right child elements and is thus considered empty by the check.
- Sometimes the container element looks empty because the child elements have display: none attributes. In this case, the container element should also be hidden.
Did you find it helpful? Yes No
Send feedback