Improve accessibility for assistive technologies

[iManu]

Is your feature request related to a problem? Please describe.

• Accessibility feels correct at most Nivo graphs for some kinds of disabilities, like mental disorder, color perceptions or DYS troubles.
• You recently add some aria attributes features and focus options on bar charts, that is a huge work for the better.
• However there is large scope of blockers that made accessibility not optimal for assistive technologies.

Describe the solution you'd like

If we consider that graphs are most of time data in primitive tables there is probably a simple way to optimise accessibility in a row:

• A valid accessibility way to improve experience on web UI is to propose alternatives if a component is really too complex.
• Tabular representations of graphs are a real good and functional alternative.

Could you made possible to generate a hidden (like "sr-only" css hide technique) table for each type of graphs when possible, and set a aria-hidden="true" attribute on main graphs container ?

Describe alternatives you've considered

• This feature can be optional, but I recommend not.
• As an other alternative, the table could maybe be downloaded in csv or other formats ?

Additional context

This work could be inspirational for you : https://myaccessible.website/blog/highcharts/data-chart-table-accessibility-highcharts

• Note a valid HTML table may use thead, tbody, tfooter, caption…
• I guess dynamic behaviors could be managed with aria 'live' features in table

---

(With love from an ancient front dev at Fullsix/Ekino 😄 actually a11y referent guy for Scaleway UI)

Best regards

[plouc]

I definitely agree that tabular representations of graphs are a real good and functional alternative, but embedding this in the lib would add a lot of complexity IMHO, then you need to support CSS, potential extra classes, handle sizing, scrolling...

Having the ability to download the data could be simpler, but still broaden the responsibilities of the lib, which is mainly for data visualization. Also while figuring out a common tabular format for a bar chart might be relatively straightforward, it can be quite challenging when dealing with hierarchical data, sankey or chord diagrams...

Another thing I'm considering here is time, unfortunately a limited resource, especially to work on side projects, that's why I'm a bit reluctant to add such features. There's already plenty of work to do to reach a v1, such as completing the migration to TypeScript, completely replacing react-motion with react-spring, removing recompose for good and improving the documentation.

The features I've recently added were made for the upcoming state of CSS survey results, in order to try to improve a11y (although I'm fully aware it's still far from complete 😅), where we implemented data tables, but outside of the lib.

It's probably not the answer you were looking for, but I'm afraid I cannot help with this at the moment.

Happy to see nivo being integrated in another design system!

[iManu]

Thank you for the reactivity.

I would like to specify that the table is visually hidden, so there is no style or scroll behaviors to take in charge, it is pure only html table for screen readers and other assistive user-agent.

We are all in the same case, resources are a must have I totally agree. I hope this little seed I planted today is going to grow in your or the contributors mind for the future.

We try to be as much as possible valid with accessibility recommandation in our design system. I guess the charts could be augmented by our side or through a PR at nivo that we could perhaps submit ? Despite everything we continue to dig solutions ;)