Chart : Missing alt attribute for informative image

XMLWordPrintable

    • Severity 3 - Minor

      Issue Summary

      The "alt" attribute is not provided for the "Chart" informative image.

      Steps to Reproduce

      1. Edit the page, and add "Chart" macro and update the page.
      2. Navigate to mentioned informative image.
      3. Inspect the code of the image. 
      4. Notice that the "alt" attribute is not specified for the <img> tag.

      Actual Result

      A complex image of a chart is used to display important information on the page.No text equivalent is provided for the chart image.As a result, the information conveyed using the image is not available for screen reader users.

      Expected Result

      Ensure that chart image have both, a short description which gives a title to the image, as well as a long description which explains in detail all the essential information conveyed by the image. The long description can contain headings, paragraphs, and tables as per requirement.
      For example,
      In case of complex image defined using <img> tag, use a suitable method from the following

      1. Using "aria-describedby" association for long description
      • Provide a short description for the image using the “alt” attribute.
      • Use the "aria-describedby" attribute on the <img> element. Associate the existing description about the complex image present on the page by passing its "id" value in in the "aria-describedby" attribute.
        2. Using link text with "longdesc" attribute for long description
      • Provide a short description for the image using the “alt” attribute.
      •  Provide a text link adjacent to the image that contains a complete and detailed text description of the image. The text link can refer to a separate web page or a section of the same web page.
      •  Add the "longdesc" attribute on the <img> element and with URL of the text link as its value.

       

      Screenshot

      Code snippet

      <img alt="Chart" class="conf-macro output-block" data-hasbody="true" data-macro-name="chart" draggable="false" height="300" src="/download/export/chart17446729695137473724.png" width="300">

      Workaround

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

        1. Screenshot 2023-05-24 at 4.01.56 PM.png
          533 kB
          Sameer Shaikh
        2. Screenshot 2023-08-03 at 5.16.27 PM.png
          505 kB
          Sameer Shaikh

              Assignee:
              Jake Lyell
              Reporter:
              Sameer Shaikh (Inactive)
              Votes:
              0 Vote for this issue
              Watchers:
              4 Start watching this issue

                Created:
                Updated:
                Resolved: