recharts: Accessibility regression related to element roles

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

https://master–63da8268a0da9970db6992aa.chromatic.com/?path=/story/api-chart-barchart–simple

Steps to reproduce

Create a chart that includes a Bar, Line, Scatter or Sector.

What is expected?

The chart elements should have correct aria roles.

What is actually happening?

Individual chart elements have an "img" role, which based on the WCAG spec should only be used for entire graphics that are single, indivisible elements.

Environment	Info
Recharts	v2.4.3
React	all
System	all
Browser	all

---

We recently updated the version of Recharts we were using to fix a security vulnerability, and have found that our test suite (which uses axe for some automated accessibility testing) has started failing, with errors like the below:

Expected the HTML found at $('.recharts-bar.recharts-layer:nth-child(6) > .recharts-bar-rectangles.recharts-layer > .recharts-bar-rectangle.recharts-layer[role="img"]:nth-child(1)') to have no violations:

<g class="recharts-layer recharts-bar-rectangle" role="img"><path name="Previous year" fill="#BABBBD" width="19" height="348.5" x="139" y="21.500000000000007" radius="0" class="recharts-rectangle" d="M 139,21.500000000000007 h 19 v 348.5 h -19 Z"></path></g>

Received:

"<svg> elements with an img role must have an alternative text (svg-img-alt)"
Fix any of the following:
  Element has no child that is a title
  aria-label attribute does not exist or is empty
  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  Element has no title attribute

You can find more information on this issue here:
https://dequeuniversity.com/rules/axe/4.4/svg-img-alt?application=axeAPI

After some looking I can see that "img" roles were added in #2960, with good intentions, but from some research into chart accessibility I gather that this is the wrong role to use for individual svg elements in charts, or at least is used incorrectly as it is currently implemented. One reason, as the test failure above notes, is that the "img" role suggests to a browser that there should be some alt text.

A fix for this (if you want to keep the "img" role) would be to add alt="" to these elements so that assistive technology can ignore them, as illustrated by point H67 of the WCAG spec.

A more appropriate fix, from what I understand, would be to use the ARIA "graphics-symbol" role, which is for atomic units within a "graphics-document" (the implicit role for an svg element). As well as this, elements that are more group-like, such as axes, could be given a "graphics-object" role. This would be a more involved change, and I’m certainly open to other ideas, as I may have misunderstood some of the information I’ve been reading.

I should also note that this change is only related to the role of the elements, which on it’s own doesn’t really improve the accessibility of the charts, as correct titles, labels and relationships need to be added. I understand there has already been some conversation on these points, so in the interest of a narrower discussion for this issue, I’ve focused only on roles.

Sources:

1. https://www.w3.org/TR/graphics-aria-1.0/#graphics-object
2. https://www.w3.org/TR/graphics-aria-1.0/#graphics-symbol
3. https://blog.tenon.io/accessible-charts-with-aria/