'Is an HTML list (ul or ol) allowed to be empty for Accessibility?
Is an HTML list allowed to have no child list items? Specifically, is this allowed:
<ul>
</ul>
The HTML validator on the W3C site does not complain when you test it with an empty list, e.g.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test with empty list</title>
</head>
<body>
<ul>
</ul>
</body>
</html>
So semantically, it's not illegal from a pure HTML perspective. However, the WAI-ARIA Recommendation section on Required Owned Elements suggests that lists must have at least one listitem:
For example, an element with the role list will own at least one element with the role group or listitem.
However, the WCAG 2 test rule for this very check suggests that the rule is inapplicable, because it does not have explicit role:
**Inapplicable Example 2**
This ul element does not have an explicit semantic role.
<ul>
<li>Item 1</li>
</ul>
One automated accessibility testing tool (SiteImprove) is throwing an error for an empty element, whereas other tools (Lighthouse, WAVE) are not.
I'm trying to get a definite answer on whether an empty list is legal or not.
Solution 1:[1]
The discrepancy between the different accessibility testing tools' report on your empty <ul> list is probably down to a different interpretation of whether the <ul> must own a required element. Based on the WCAG 2 rule for ARIA required owned elements that you referenced, this appears to hinge on the definition of whether the role of an element is implicit or explicit.
When you use the ARIA role attribute, you are assigning an explicit role to an element, such as role="list". The WAI-ARIA recommendations on required owned elements that you referenced state that the owning element contains at least one element with the associated role="listitem" or role="group". If not, then it must have the aria-busy="true" attribute if the owned items will be loaded later. (Note that an element being "owned by" another element in the accessibility tree is different from an element "owning" another element in the DOM tree - see here.)
In your example, a <ul> element without the ARIA role attribute would have an implicit role of list, but because the list is empty, the implicit role could be ignored by a screen reader and treated as role="presentation". When I tested your code in Firefox, the accessibility tree showed the <ul> as having a semantic list role, but JAWS and NVDA ignored it. Similarly, when I tried it in Chrome with JAWS and NVDA, both reported that no lists were found on the page.
Technically, there shouldn't be any difference between whether an element's role is implicit or explicit. Explicit roles are designed to help better define the accessibility tree where the DOM layout is not representative of the page information. But this is probably why you're getting different results with different accessibility testing tools.
It's worth pointing out that the WCAG 2 test rule is only a proposed rule and still needs to be approved by the Accessibiligy Guidelines Working Group (AGWG). Based on your comments, the SiteImprove tool is correct in saying that an empty <ul> list would need the aria-busy="true" attribute assigned to it until the list is populated.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 |