Descriptive alt text is not defined for the graphs present in the page.

[JamesFerebee]

Note: Same issue replicates throughout the application for similar pages.

Impact on a Person with Disability (PWD):
Visually challenged users who rely on screen readers are getting misguided or losing the information when normal text is aligned as image with no alternate way to identify the content as, Image of text is used rather than real text to convey the information present in the home page.

Test Environment:​

OS: Windows 11 [Version 22H2 (OS Build 22621.2283)].

Desktop application: SQL Nexus.

Tool: Narrator, JAWS (2022.2110.6).

Prerequisite:

1. Install SQLNexus application on the desktop.
2. Enable Narrator/JAWS.

Repro Steps:
Step 1: Open the SQL Nexus app on the desktop.
Step 2: Connect to server Dialog gets displayed. Connect to the server by invoking connect button.
Step 3: Navigate to SQL Perf Main and invoke it->Navigate to perform summary->Navigate to memory metrics.
Step 4: Verify whether descriptive alt text is not defined for the graphs present in the page. or not.

Actual Result:
Descriptive alt text is not defined for the graphs present on the page.
Observation:
Narrator announces as 'Chart image' when focus lands on 'Top 10 memory metrics graph'

Note: JAWS focus is not moving to the main section present in the page, while navigating in focus/cursor mode.

Expected Result:
Descriptive alt text should be defined for the graphs present on the page.
Ensure that:
Text should be used to convey information rather than image of text. Below the graph a tabular format of the data should be there denoting all the information present inside the graph.
Screen reader should narrate the graph information descriptively like "Available Mbytes.......time 2023-12-06 14:44:52.727 available Mbytes dropped from 1200 to 850."

Suggestive Fixes:

For informative images add the proper "alt" value or "aria-label" or "aria-labelledby" attributes.
For decorative images provide the empty "alt" or aria-hidden="true" or role="presentation" or role="none" attribute.
In HTML, the ALT text is inserted into the ALT attribute within the IMG tag. For other image modern tag like svg, g, icon, picture or area tags you can use "aria-label" or "aria-labelledby" along with role="image" attribute.
The text alternative for an image must be no more than 100 characters in length.
If a text alternative requires more than 100 characters, consider using the aria-describedby, title or longdesc attribute for a longer, more detailed description of the image, along with shortening the text alternative content.
Use the LONGDESC attribute to provide descriptive information for images whose meaning cannot be conveyed with only a title. The LONGDESC attribute links to a file that contains only the descriptive information relating to the image. It can be any length necessary to accurately convey meaning.

[JamesFerebee]

1712511