Global: Image defined through the CSS

Issue Summary

The "Atlassian logo" image present in the footer section is defined through CSS.

Steps to Reproduce

1. Open any "Crowd dc" page.
2. Navigate to the mentioned instance in the footer section of the page.
3. Inspect the code of that image.
4. Notice in CSS that the images of these buttons are defined through the background-image property.

Screenshot

Actual Results

The footer image link such as the “Atlassian logo“ have been defined through the CSS background property.

As a result, assistive technology users will find it difficult to understand this image link as the only textual description that is provided is "Atlassian" which is not descriptive enough for screen reader users to understand it as an image.

Expected Results

Make sure when the users navigate through this image link, it should be identified as a image link by the screen reader.

Implement this image using an <img> tag nested in the <a> tag and provide "alt " text to the image such as "Atlassian logo" and remove the link text "Atlassian" from the link to avoid the redundancy of the image.

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available.

Environment

MacBook Pro (16-inch, 2021)
macOs Sonoma 14.2
Chrome - Version 120.0.6099.109 (Official Build) (arm64)
Firefox- Version 92.0 (64-bit) 
Safari- Version 17.0 (19616.1.27.211.1)
JAWS- Version 2023
NVDA- Version 2021.2 
Voiceover - Version Latest