1.3.1 Info and Relationships
This document gives information about the related Acquia Optimize checks:
ARIA required context role.
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.
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.
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.
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’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 cannot move forward."
This section gives some examples of the issue.
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.
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.
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.
See the “ACT rules” section below, which includes a link to a complete technical explanation of this check.
Related accessibility conformance testing rules.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Wed Oct 30 2024 12:12:07 GMT+0000 (Coordinated Universal Time)