-
Type:
Bug
-
Resolution: Fixed
-
Priority:
Highest
-
Affects Version/s: 8.2.3
-
Component/s: Accessibility
-
Severity 3 - Minor
Issue Summary
The "alt" attribute is not provided for the "Chart" informative image.
Steps to Reproduce
- Edit the page, and add "Chart" macro and update the page.
- Navigate to mentioned informative image.
- Inspect the code of the image.
- 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
- 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
- mentioned in
-
Page Loading...