This document gives information about the related Monsido checks:
ARIA required context role
What
ARIA (Accessible Rich Internet Applications) roles that are only allowed in specific contexts must only be used in their correct and required context.
ARIA roles are attributes added to HTML code to improve accessibility. They define specific purposes for webpage elements that help assistive technologies like screen readers understand and interact with them. This makes websites more accessible to people with disabilities by providing extra information about the structure and function of the content.
Why
Some ARIA roles only make sense in specific required contexts. If these roles are used outside of the context they are intended for, the intended accessibility function will not work as expected. This can create complications for users of assistive technologies that rely on ARIA roles to convey content and functionality.
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 with 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 – listitem is child of list
These elements, which have the explicit role of 'listitem,' are children in the accessibility tree of an element with the required context role of 'list,' also expressed as an explicit role. This is correct because a 'listitem' must be a child of a 'list.’
<div role="list">
<div role="listitem">List item 1</div>
<div role="listitem">List item 2</div>
The consequence is that, for example, a screen reader used by blind users will be able to correctly present this as a list.
Example – listitem is not child of list
These elements, which have the role of 'listitem,' are not placed correctly in the accessibility tree. Instead of being children of an element with the required role of 'list,' they are inside a navigation landmark. This is a problem because a 'listitem' must be a child of a 'list.'
<nav>
<div role="listitem">List item 1</div>
<div role="listitem">List item 2</div>
</nav>
The consequence is that, for example, a screen reader used by blind users will not be able to correctly present this as a list.
How
How to fix it
The platform flags instances where ARIA roles are used outside of their required context. To fix this error, you need to adjust the HTML code. Look up the ARIA role that causes the issue in the WAI ARIA standard. Under the relevant role, find the section called "Required Context Role" to see what the required context role is. Adjust your code accordingly.
For more info please refer to the “ACT rules” section below, which includes a link to a complete technical explanation of this check.
Additional Resources
WCAG success criteria
ACT rules
Related accessibility conformance testing rules.