[Bug] Legend Item Buttons Not Keyboard Accessible (SVG Chart)

[meganthecoder]

Version

5.6.0

Link to Minimal Reproduction

https://codepen.io/meganthomas/pen/YPXEOgX

Steps to Reproduce

1. Load the SVG chart.
2. Turn on a screen reader.
3. Attempt to use all the same functionality via keyboard that you would use via mouse. For example, clicking on one of the legend items, such as "Email" in the codepen, to remove it from the chart.

Current Behavior

1. I can't navigate to the legend items via keyboard. I can't toggle the legend items on/off with a keyboard.

Expected Behavior

1. I should be able to navigate to the legend items via keyboard. They should be button elements with a name, role, and value.
2. Any other parts of the chart that are clickable by mouse should also be activable by keyboard.

Environment

- OS: macOS Sequoia
- Browser: Chrome 137.0.7151.69
- Screen Reader: VoiceOver

Any additional comments?

Accessibility Information from Deque: How to make interactive charts accessible

• anything a mouse user can do (activate buttons, toggle on and off parts of charts) must be accessible by keyboard as well
• all buttons must have a name and role. Buttons with selected states must also have a value.
• what is visually seen but be read by a screen reader - either as is or in another format like a table
• ensure all color contrast requirements are met
• avoid using color alone to convey information

[helgasoft]

duplicate of #14706
legend item buttons are keyboard accessible - Demo
📌 please close issue if problem solved.

[meganthecoder]

duplicate of #14706 legend item buttons are keyboard accessible - Demo 📌 please close issue if problem solved.

Hi @helgasoft ,

It looks like the demo you added is for a canvas, whereas my codepen is for an svg. Apologies for not clarifying that in the ticket. I'll update that.

Is there keyboard support (with screen reader) for SVGs?

[helgasoft]

When the Demo is run in the Editor, there is a top button "Render" to toggle between Canvas and SVG.
There is no difference in behavior, both work the same with keyboard keys.
I have never used a screen reader, so I cannot comment on that.

[meganthecoder]

@helgasoft I see the svg rendered now, but this is still not accessible by WCAG standards. Please look back at my description where I call out that the legend items should be button elements (or other elements with role=button) with name and value properties. They should also be tabbable, which you get for free if you use the button element. Here are the W3C docs for a button and you can specifically see the callout for the "toggle button" that applies in our case: https://www.w3.org/WAI/ARIA/apg/patterns/button/

Accessibility can't be fully tested without a screen reader so I'd encourage you to try it out:

• VoiceOver on Mac: https://support.apple.com/guide/voiceover/welcome/mac
• NVDA for Windows: https://www.nvaccess.org/

[helgasoft]

@meganthecoder, do you have a code example for SVG or some inner element (path, rect, text, etc) being defined as role='button' ?
There are other tags available, but I could not find any ARIA svg button role examples...
Buttons could be defined as HTML items enclosing SVG, but that is irrelevant to the ECharts SVG chart structure.
Ultimately, we can conclude that ECharts allows aria tags for the chart as a whole, but not for inside elements.

[meganthecoder]

@meganthecoder, do you have a code example for SVG or some inner element (path, rect, text, etc) being defined as role='button' ?

Hi @helgasoft ,

Here's an example that I threw together: https://codepen.io/meganthomas/pen/gbpqwmJ . I tested it on the latest Chrome, Firefox and Safari on Mac, but you might want to double check support for all browsers that you support.

Alternatively, if that doesn't work, you could pull the legend out of the SVG and create it with divs and buttons like Highcharts does.

[helgasoft]

@meganthecoder, thank you for the example.
It proves that SVG paths can indeed become buttons for screen readers. Which means ECharts legend items (SVG paths) could be made accessible by WCAG standards.
Here is a slightly modified PoC example. A strange observation however - tabindex numbering has to start in reverse (last to first legend item) in order to work. I'm using a screen reader extension for Chrome for testing.

create it with divs and buttons like Highcharts does

ECharts is canvas and SVG based, so HTML is not supported for base items.