-
Type:
Bug
-
Resolution: Unresolved
-
Priority:
Medium
-
None
-
Affects Version/s: 8.20.30, 9.4.17, 9.12.2
-
Component/s: (Advanced Roadmaps) Accessibility
-
- 1.1.1
- Level-A
- a11y-triaged
- accessibility
- ax-at-JAWS
- ax-at-NVDA
- ax-at-VO
- ax-at-user
- ax-bug
- ax-desktop
- ax-high-priority
- ax-jiradc-arj
- ax-jiradc-arj-vpat2024
- ax-jiradc-vpat
- ax-jiradc-vpat-accessibilityassessmentdependenciesreport
- ax-jiradc-vpat-accessibilityassessmentroadmaps
- ax-jiradc-vpat-pg10
- ax-qa
- ril
- wcag21
-
8.2
-
1
-
Severity 3 - Minor
Issue Summary
The informative images such as "Epic", and "Task" present in the main content are defined through CSS background property that lacks a textual description.
NOTE : A similar issue is observed on the page that becomes available by activating the "Filter by issue" combobox - Refer to screenshot 3
Steps to Reproduce
- Open the "Accessibility Assessment | Dependencies Report" page.
- Navigate and select the "Team" option from the "Rollup to" expand/collapse button
- Navigate to the mentioned instance.
- Inspect the code of the mentioned images.
- Notice that there is no textual description specified for the mentioned images.
- Notice in CSS that the mentioned images are defined through the background-image property.
Screenshot 1

Screenshot 2

Screenshot 3

Actual Results
The images such as "Task", and "Epic" present in the main content, do not have textual descriptions. Moreover, the images are defined using the CSS background property.
As a result, these images are not available for users browsing the website with the Windows High Contrast setting turned on. Also, the purpose of the images is not understood by screen reader users.
Expected Results
The image should be visible in high contrast mode and textual description should be announced using a screen reader.
Implement the image using <img> element and provide descriptive alternate text using the "alt" attribute (e.g., alt="Task") in its source code.
Alternatively, use CSS content property (with ::before and ::after pseudo-elements) to define the image to ensure that the image becomes visible when the Windows High Contrast Mode is turned on. Specify textual description using visually hidden text. If hidden text is not possible, then use the "aria-label" attribute (e.g., aria-label="Task").
Workaround
Currently, there is no known workaround for this behavior. A workaround will be added here when available
Environment
MacBook Pro (13-inch, 2018)
macOs Ventura 13.3.1
Chrome - Version 109.0.5414.119 (Official Build) (64-bit)
Firefox- Version 92.0 (64-bit)
Safari- Version 16.4 (18615.1.26.110.1)
JAWS- Version 2022
NVDA- Version 2021.2
Voiceover - Version Latest
- links to