Issue Summary

The CSS background-image conveys information and is a missing text alternative for assistive technology users.

Element Name: reviewed approved tick mark icon image.
Location of the element: Located inside the "Deployment projects" data table.

Steps to Reproduce

1. Open the home page.
2. Navigate to the "Deploy" link and activate it.
3. Navigate to the "All deployment projects" link and activate it.
4. Navigate to the mentioned instance and inspect the code.
5. Observe that image is defined through CSS and the textual description is missing.

Actual Results

The reviewed approved tick images present in the table are defined through CSS.
As a result, screen reader users cannot access the information conveyed by the image.
Additionally, the textual description is not provided for the mentioned images. As a result, screen reader users will not understand the purpose of the images.

Expected Results

1. All informative images must be implemented with the HTML <img> element rather than as CSS background images. If the above solution is not feasible, ensure the text describing the purpose of the images is included in the HTML mark-up and the text becomes visible when the high-contrast option is enabled.
2. Provide a descriptive textual description for the images using the 'alt' attribute. For the screen reader user, the "alt" should be announced as "Reviewed and Approved by user name"

Screenshot

Workaround

Not Available

Bug Ref: 462588