GrahamTheDevRel
commented
2 weeks ago There are a few options here.
Keep role="application"
role="application" is always a dangerous role to use as it means all interactions, navigation etc. must be recreated by code.
If that is to be kept, then it would need to handle announcing the chart when it is focused / navigated to (aria-labelledby is probably best here), plus navigation in the element needs to be announced with an aria-live region as the selected item changes.
As you should try and keep the number of aria-live regions to a minimum on a page, due to bugs introduced having more than one or two, this could possibly require a messages queue to be added so that all updates across all charts on a page are funnelled through a single region.
While this would offer the closest "like for like" experience, it is also likely to be the most fragile and complex.
Add a table view
Another option that is probably more robust and easier to implement is to present a toggle / button group (either permanently visible or shown on hover and focus) that allows to switch to a <table> view of the data.
This should work for all the charts as far as I can tell, but could be difficult if more complex charts are added in the future.
Add a hidden table.
The final option would be to create a table once again, but this time make it visually hidden. The chart could then be hidden from assistive technology via aria-hidden and the table would be how data was presented to a screen reader.
The previous option is preferable (as then everyone benefits from the tabular data), but this may be an option to keep the visual design the same.
Describe the bug
When navigating via a screenreader the charts do not announce anything other than "application".
Affected component/components
All charts
How to reproduce
Codesandbox/StackBlitz link
No response
Logs
No response
System Info
Before submitting