This document gives information about the related Monsido checks:
Aria required owned elements
What
For some ARIA roles, it is specified that they can only contain certain other roles, known as "required owned elements". Elements that use a role with required owned elements must include at least one of these defined roles and cannot contain elements with any other roles.
Why
If the rules defined in ARIA for required owned elements are not followed, the intended accessibility features may not work correctly. This can affect users who rely on assistive technologies, as they depend on accurate ARIA code to convey the website's content and functionality properly.
Affected Users
This check affects the following users who have:
Visual impairments; Who access the site contents with a screen reader or screen magnification software.
Mobility impairments; Who navigate the page using speech recognition software.
User Story
Bridgit is a blind mother to a five-year-old girl and an 11-year-old boy:
"There are some things that are just tricky, and then there are things that don’t work at all. One thing that often doesn’t work is those dropdowns where you have to search for something. You know, where you type in text and then a list of suggestions pops up, and you have to choose from that list instead of just typing what you want. This happens a lot when I'm booking flights. The field where I have to choose which airport I’m flying from and to—sometimes I can type in the text, and the screen reader will tell me there are, say, 3 or 10 results on the list. But I can’t see or select anything from that list. I just get stuck and can’t move forward."
Examples
This section gives some examples of the issue.
Example – list including listitem
In this example, a list contains 'listitem' elements, which is good because 'listitem' is a required owned element for elements with the list role.
<div role="list">
<span role="listitem">Item 1</span>
<span role="listitem">Item 2</span>
</div>
Example – list not including listitem
In this example, a 'listitem' is missing from the list element, which is required for the list role.
<div role="list">
<span >Item 1</span>
<span >Item 2</span>
</div>
Because the rules for using the "required owned elements" are not followed in this code, it is likely that assistive technologies, such as screen readers used by blind users, will not be able to present this list correctly to the user.
How
How to fix it
The platform flags instances where elements have required owned elements but where none of the defined required owned elements are present.
To fix this issue, you need to look up the role causing the error in the WAI-ARIA standard. Check the section on required owned elements for the relevant role and adjust your code according to the description provided there.
For more info please refer to the “ACT rules” section below, which includes a link to a complete technical explanation of these checks.
Additional Resources
WCAG success criteria
ACT rules
Related accessibility conformance testing rules.