Accessibility issue with aria-labelledby: ARIA attribute unsupported or prohibited #199
Description
Without further ado, here is what the SiteImprove accessibility tool says
An ARIA attribute has been specified that is either not supported or is prohibited, on this type of element.
Occurrences (2)
For an example with the Git lesson - Episode 7, see this SiteImprove report. Notice how this episode in particular has subsections, triggering two occurrences.
In particular, I see SiteImprove is flagging two instances of the use of aria-labelledby. One for the entire Collapsible navigation menu with id="flush-collapseEleven", and another time for the selected episode when it has subsections (with id="flush-headingcurrent").
<div id="flush-collapseEleven" class="accordion-collapse show collapse" aria-labelledby="flush-headingEleven" data-bs-parent="#accordionFlush11">
<div id="flush-collapsecurrent" class="accordion-collapse collapse show" aria-labelledby="flush-headingcurrent" data-bs-parent="#accordionFlushcurrent">
In only see one occurrence of this issue in pages of episodes where there are not subsections.
Why is this an issue?
ARIA attributes provide information about the behavior of interactive elements. For example, they can be used to tell screen-reader users whether a checkbox is checked (aria-checked=true) or unchecked (aria-checked=false).
Unsupported ARIA attributes will not deliver the intended user experience and may even break the usability of your site.
WCAG 2.2: Understanding Success Criterion 4.1.2: Name, Role, Value
WCAG 2.2: Technique ARIA5: Using WAI-ARIA state and property attributes to expose the state of a user interface component
Siteimprove Alfa: Technical documentation for rule SIA-R18