Open aardrian opened 12 months ago
After some digging, this chart uses our "HorizontalBarChart.tsx" component, however the accessibility issue actually lies in Nivo's ResponsiveBar.
@SachaG this is the kind of thing you plan to move to HTML + CSS maybe?
@aardrian I am able to remove the "img" role and change it to "table", do you think it would be ok even if we don't set more precise roles for nested elements (column headers, cells etc.)? I think I can also give a role to each bar "rect" element but the priority is to solve this accessibility issue.
Edit: after more digging I can indeed only alter the main svg
tag role to use "table" instead of "img" but I can't introduce more precise roles for column and tables. Is it enough to consider the interactivity issue solved?
I am able to remove the "img" role and change it to "table", do you think it would be ok even if we don't set more precise roles for nested elements (column headers, cells etc.)?
No. Without all the required roles that make up a table, this will be broken in a different way. The reverse order of the nodes, the lack of proximity between the names and numbers, and the axes without context makes this little more than a lot of noise with no way to parse it.
Given the Data tab has a table with proper associations, a short term workaround might be to direct users to the data table.
Describe the bug
Links in the chart views are inoperable by some screen readers. This is because of invalid nesting of roles. This affects a plurality (and almost definitely majority) of screen reader users.
Screen Reader / Browser
Steps to reproduce the bug
Expected Behavior
Actual Behavior
Related code
The chart is made up of this elided HTML:
The chart has an
img
role. That means it cannot have child content, and it definitely cannot have interactive descendants.Additional Context
NVDA / Firefox and TalkBack / Firefox allow me to navigate into the links. This is a courtesy on Firefox's part.
The code as shown violates the following WCAG 2.1 Success Criteria:
Firefox recently fixed a bug that prevented table roles from working in SVGs. With that fix in the current release, you may want to explore adding table roles and removing the
img
role. You can test the example I used for that bug report. Use the editable pen to play with it more easily.