Interactive Graph controls present on the page are not accessible using keyboard

[eDAD_MSFT]

Description:
Keyboard users who try to access this site will feel blocked if graph functionality only works for mouse users, they won’t be able to work on this application. This will highly impact them.

Test Environment:
Microsoft Edge: Version 105.0.1343.33 (Official build) (64-bit)
OS version (OS Build 22000.856)
URL: https://canvasjs.com/docs/charts/chart-options/axisx/viewport-minimum/

Repro Steps:
1. Open given URL in Edge.
2. Try to access the graph controls present on the page.
3.Verify that Interactive Graphs controls present on the page are accessible via tab key or not.

Actual Result:
Interactive Graphs controls present on the page are not accessible using keyboard.
Controls are only accessible using a mouse.

Expected Result:
Interactive Graphs controls present on the page should be accessible using keyboard.
All functionalities should be accessible for keyboard users.

[Adithya Menon]

@edad_msft,

Accessibility for individual datapoints using “Tab” key is not available as of now. However, you can provide a chart-description for a chart container by adding aria-label and tabindex, which can be read using the screen reader like windows narrator when the focus is kept on the chart. Please check the below code snippet for adding aria-label and tabindex –

var chartDescription = "A Funnel  Chart showing Company Recruitment Process where in which 63 percent of candidates cleared the aptitude test, 35 percent cleared the technical interview, 15 precent went through the HR interview and out of which 5 percent candidates were recruited";
    
chart.container.setAttribute("aria-label", chartDescription);
chart.container.setAttribute("tabindex", "0");

___________
Adithya Menon
Team CanvasJS

[eDAD_MSFT]

Hi Team,

Any update on this issue?

[eDAD_MSFT]

Hi @adithya Menon,
As discussed this issue with internal team. Charts should be accessible using keyboard and user should be navigate inside the chart using arrow key and able to access all the information present in chart.

Reference: Comparison column chart – Categorical data | Chart Chooser (highcharts.com)