Issue Summary

The graph present in the main content area is coded using <svg> element which lacks textual description programmatically.

Steps to Reproduce

1. Navigate to the "Analytics" option in the header and activate it.
2. Observe that "Analytics" page has been appeared on the screen.
3. Navigate to the "Overview" link and activate it.
4. Using screen reader check that there is no textual description provided for the graph.

Screenshot 1

Screenshot 2

Actual Results

The textual description is not provided for the "Data Analytics" SVG image/graph. In the absence of appropriately marked-up text alternative for the graph, the graph is not accessible for screen readers. As a result, screen reader users cannot access the information conveyed by the image.

Additionally the tooltip present on hover is also not accessible for screen reader users.

Expected Results

To make the SVG image accessible, apply the following changes:

• Add a short description of the image by using the <title> element. If required a detailed description of the image can be added by using the <desc> element.
• Define the <title> and <desc> within the <svg> tag as the first child elements.
• Specify “aria-labelledby” and “aria-describedby” attributes on the <svg> element and reference it via the “id” attributes of the <title> and <desc> elements respectively.

Provide a data in table format to make it accessible for screen reader and keyboard only users as well in this table include the tooltip content as well which is available only on mouse hover.

Code Snippet

<svg height="300" class="nvd3-svg">
<title>Activity tracking data</title>
(...)
</svg>

Workaround

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

Environment

MacBook Pro (16-inch, 2019)
macOS Ventura Version 13.3.1
Chrome - Version 114.0.5735.198 (Official Build) (x86_64)
Firefox- Version 112.0.1 (64-bit)
Safari- Version 16.4 (18615.1.26.11.23)
JAWS- Version 2022
NVDA- Version 2020.3
Voiceover - Version Latest