-
Bug
-
Resolution: Fixed
-
Minor
-
4.1.6, 4.2.3
-
MOODLE_401_STABLE, MOODLE_402_STABLE
-
MOODLE_402_STABLE, MOODLE_403_STABLE
-
MDL-80183-403 -
-
WP Sprint 2024-I1.2 (Clones)
This issue was detected during accessibility audit on learner-facing pages in Workplace performed in August-September 2023 by AbleDocs.
There are two issues here actually but since they are both very small and in the same piece of code, I joined them in one issue.
Problem 1: Icon with no alt text
There is no alternative text for the green dot that indicates online status in the messages sidebar.
Informative images require descriptive alt text.
See Fig.0.01
People with difficulty perceiving visual content use assistive technology to read text aloud or convert it to braille. Text alternatives help people who use these technologies.
The purpose of the icon is missed by those users of assistive technology.
Recommendation:
Interface elements such as icons require alt text to give meaning to that interface.
1.1.1 Text Alternative (A) https://www.w3.org/TR/WCAG21/#non-text-content
1.3.6 Identify Purpose (AAA) https://www.w3.org/TR/WCAG21/#identify-purpose
Problem 2: Incorrect use of ARIA label
aria-label has been applied to an element that is not interactive, or is a child element within an interactive code block.
Specifically, the quantity indicator in each accordion within the messages sidebar
See Fig. 0.01
Content within the aria-label is not read out by assistive technology and subsequently missed by users who rely on this technology to navigate web pages.
Recommendation:
Avoid using ARIA unnecessarily. Semantic HTML should be the first solution.
Use ARIA-LABEL only on interactive elements, or elements that have been made interactive using ARIA roles.
Use ARIA-LABELLEDBY or ARIA-DESCRIBEDBY for non-interactive elements.
NOTE:
Removing the "aria-label" from the "section-total-count-container" data region, and "aria-hidden" from the "section-total-count" data region immediately below appears to resolve this issue.