In scan mode Narrator is incorrectly announcing image on interactive graphs pres

[eDAD_MSFT]

Description:
This is important for users who rely on assistive technology such as a screen reader. If Narrator conveys incorrect information, it will confuse end users about the actual functionality of control.

Test environment:
Microsoft Edge: Version 105.0.1343.33 (Official build) (64-bit)
OS version (OS Build 22000.856)
Screen Reader: Narrator
URL: https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/multi-series-charts/

AT (include version number):
Narrator

Repro Steps:
1. Open given URL in Edge Dev.
2. Graph page will open. Enable Narrator using ‘Ctrl+ Win+ Enter’.
3. Turn on scan mode using ‘Caps+ Spacebar’ and navigate on graph controls.
4. Verify that screen reader is incorrectly announcing image on interactive graphs present on the page or not.

Actual Result:
In scan mode Narrator is incorrectly announcing image on interactive graphs present on the page.
Graph controls are interactive using mouse.

Expected Result:
The Narrator should announce correct information something like ‘Canavas Graphs’ on interactive graphs present on the page.

[Manoj Mohan]

@edad_msft,

CanvasJS charts plots all the chart-elements on HTML5 canvas element, which is considered as an image by the narrator. Hence it’s not possible to have accessibility for individual datapoint as of now. However, you can pass aria-label field to the entire chart to achieve accessibility. Please take a look at this JSFiddle for an example on the same.

Also, please refer to this forum thread for more information.

—-
Manoj Mohan
Team CanvasJS

[eDAD_MSFT]

Hi @Manoj Mohan, We have received reply from Product team as

“I just tested this and doesn’t seem it fixes the actual issue filed by this bug. Adding the aria-label to the entire chart has no impact when hitting the down arrow in scan mode, Narrator still announces “Image”. The aria-label description only gets announced if tab to the graph.

[eDAD_MSFT]

Hi Team,

Any update on this issue?
@Manoj, pls respond.

Thanks

[Manoj Mohan]

@edad_msft,

As aria-label was set for overlaid canvas instead of the canvas in which charts are drawn, Narrator was announcing it as “Image”. You can add aria-label to canvas and hide the overlaid canvas from the narrator by setting aria-hidden to true as shown in this updated JSFiddle.

—-
Manoj Mohan
Team CanvasJS