1.3.1 Info and Relationships
This document gives information about the related Acquia Optimize checks:
ARIA required ID references exist.
When the aria-controls attribute is used on an expanded combobox or a scrollbar, the value of the aria-controls attribute must include the ID of at least one element in the same shadow tree or document.
If the aria-controls attribute is used without its value pointing to a valid ID, it is likely that the intended accessibility function will not work as expected. This can impact users of assistive technologies who rely on correct ARIA to understand the content and functionality of the page.
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 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 am 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."
This section gives some examples of the issue.
The value of the aria-controls attribute for this expanded combobox matches the ID of the <ul> element in the same document, which is good.
<label for="fly_from_combo">From</label>
<input type="text" id="fly_from_combo"
role="combobox"
aria-expanded="true"
aria-controls="popup_listbox"
aria-activedescendant="selected_option"
</input>
<ul role="listbox" id="popup_listbox">
<li role="option" id="selected_option">Copenhagen - Kastrup (CPH)</li>
<li role="option">Wroclaw - Copernicus (WRO)</li>
</ul>Because the aria-controls attribute correctly refers to the list's ID, assistive technologies can establish the correct link between the combobox's text input and the dropdown list of suggestions. If there were no valid reference from the aria-controls attribute, users of assistive technologies, like screen readers, might not be able to read the options in the list, and that would make the function unusable for them.
The Optimize platform flags instances of aria-controls attributes that do not reference a valid ID on the page. For any cases where your aria-controls attributes do not refer to a valid ID, you should correct your code to ensure that the value in the aria-controls attribute points to a valid, existing ID on the page.
For more information, refer to 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.
Mon Nov 04 2024 12:18:51 GMT+0000 (Coordinated Universal Time)