Scrum board | Backlog: Missing text alternatives for informative images

XMLWordPrintable

    • Severity 3 - Minor
    • Accessibility

      Issue Summary

      The textual descriptions are missing for the Epic informative images.

      Test URL

      https://anu-j.jira-dev.com/jira/software/projects/SP/boards/2/backlog

      Steps to Reproduce

      1. Open the Jira Cloud homepage.
      2. Select any Scrum board and activate the "Backlog" tab within the space navigation.
      3. Navigate to the list of issues within a sprint.
      4. Observe the Epic tags displayed next to each issue (e.g., "Sample Epic", "Demo Module").
      5. Inspect the code of these images.
      6. Observe that the textual description is missing for these informative images.

      Screenshot

      Actual Results

      The Epic informative images (colored square icons within the Epic tags) that are visually displayed alongside each Epic are not announced by screen readers. This is because these informative images are rendered as <span> elements with only a background-color style, and do not have any "role" attribute or accessible name.

      As a result, screen reader users cannot identify the issue type (Epic) associated with each item.

      Expected Results

      Accurate textual description of the image should be read out by the screen reader. 

      In this case, each Epic tag icon should be programmatically identified as an Epic issue type by the screen reader, along with the Epic name. The informative image (colored square icon) within the Epic tag should have an appropriate accessible name that conveys its purpose i.e., identifying the issue type as "Epic."

      Apply the following changes ->

      • Assign an accessible name using the aria-label attribute on the <span>.
      • Add role="img" to the <span> element containing these images.

      Code Snippet:

      <span role="img" aria-label="Epic" ...></span>
      <span class="..." ...>Demo Module</span> 

      Note: This code example is intended only as a general illustration of how to address the violation and should not be considered a complete or production-ready solution. If you have any questions, please attach this ticket to a #help-accessibility request.

      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 26.5.1
      Windows - 11 pro
      Chrome - Version 148.0.7778.97 (Official Build) (arm64)
      Safari - Version 26.5 (21624.2.5.11.4)
      JAWS - Version 2026
      NVDA - Version 2024.4.2.35031
      Voiceover - Version Latest

              Assignee:
              Unassigned
              Reporter:
              Anusooya .
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

                Created:
                Updated: