Introduction¶
This document gives information about the related Acquia Optimize checks:
Aria required owned elements.
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.
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.
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.
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 do not work at all. One thing that often does not work is those drop-downs 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 am 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 cannot see or select anything from that list. I just get stuck and cannot 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.
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.
See the “ACT rules” section below, which includes a link to a complete technical explanation of these checks.
Related accessibility conformance testing rules.