Accessibility Assessment | Dependencies Report : Informative image defined through CSS background property lacks textual description

XMLWordPrintable

    • 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

      1. Open the "Accessibility Assessment | Dependencies Report" page.
      2. Navigate and select the "Team" option from the "Rollup to" expand/collapse button
      3. Navigate to the mentioned instance.
      4. Inspect the code of the mentioned images.
      5. Notice that there is no textual description specified for the mentioned images.
      6. 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

        1. Screenshot 2024-02-02 at 10.01.13 AM.png
          575 kB
          Yash Pawar
        2. Screenshot 2024-02-02 at 11.01.44 AM.png
          620 kB
          Yash Pawar
        3. Screenshot 2024-02-02 at 9.59.59 AM.png
          629 kB
          Yash Pawar

            Assignee:
            Unassigned
            Reporter:
            Yash Pawar (Inactive)
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

              Created:
              Updated: