[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.

[meganthecoder]

Hi @helgasoft , Can you provide an update on when this fix will be released? Thank you!

[helgasoft]

I'm a voluteer not involved in development, so cannot provide an estimate, sorry. To recap - legend items in SVG should get the following additional parameters:

<text ... id="btn-text1">
<path ... role="button" tabindex="0" aria-labelledby="btn-text1">

[meganthecoder]

@helgasoft Yes, that's correct. Thanks for your help. Do you know who I can reach out to about the timeline?

[meganthecoder]

I'm working on a PR for this.

[meganthecoder]

Sorry for the belated update. I don't have the time to contribute a fix for this after all, but I wanted to share my discoveries from looking into it:

1. The button role, tabindex, and aria attributes won't be enough to make the buttons keyboard accessible. It will also require adding a keyboard event listener to mimic the click event. (Since <path> isn't an element where that happens by default).
2. It's unclear to me whether a solution can be done completely in the echarts repo without zrender. The echarts team may want to discuss the desired architecture and where to add keyboard events and accessibility attributes, since it appears that this would be net-new functionality.

Thank you! I look forward to this update, and please feel free to let me know if there are any questions.