1.3.1 Info and Relationships
This document provides 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 am 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 cannot see or select anything from that list. I just get stuck and cannot move forward."
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>Example: listitem is not a child of a list
listitem elements are not placed correctly in the accessibility tree. They should be children of an element with the required role of list, and not located inside of a navigation landmark. Any 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 platform flags instances in which ARIA roles are used outside of their required context. To fix this error, adjust the HTML code. Look up the ARIA role that causes the issue in the WAI ARIA standard
Under the relevant role, locate the section Required Context Role. Adjust your code accordingly.
Visit the ACT rules section below for 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.
Fri Mar 28 2025 08:59:23 GMT+0000 (Coordinated Universal Time)