How do we make our charts more accessible if possible?

[SaptakS]

I have few concerns regarding the accessibility of the charts. Firstly, I think the way Vertical bar Charts is really much more accessible compared to what we have for our homepage, since we have a separate field for the description of the svg chart. That helps the screenreader users to get an idea about the visualization. I think we should have a similar <desc> element in homepage with dynamic content (since it's a little bit more dynamic, but if someone has idea for static content, I am fine with that).

But there are few other points that bugs me, mainly because our charts are interactive:

• The homepage charts are interactive in 2 ways - the chart itself, filters based on years and tags.
  • The year and tag filters are actually keyboard navigable and actually update the chart. This is good for keyboard users (and similar AT users) since they can see the updated result, but not so much for screenreader users. The screenreader users problem would be solved if we had dynami <desc> for each of the charts.
  • The chart itselves work only with mouse and touch right now. That's bad because we are ignoring almost all other AT users, since they can't really navigate to the incident database page using the same way a mouse and touch user can.
• I think for all the other charts as well, they are only interactive with mouse and touch, and not interactive at all for any AT users, including keyboard
• If we do plan to make them interactive for keyboard and screen reader users, we might not be able to get away with just a <desc> and each of those interactive components should have accessible name/description
• For a visualization like we have in home page, if we do make it interactive with keyboard, I think we should add a "Skip visualization" link so a user can skip the visualization instead of having to tab through the entire visualization.

These are some of the points that come to my mind. There can obviously be more discussion points. I feel at the very least, we should definitely have a <desc> for the homepage visualization, even if it's a static one.

[harrislapiroff]

I have one example of an accessible chart I attempted from the pre accurat days (specifically the US map on that page and not the bar chart). There were two specific things I did for this:

1. Used actual <a> link elements for the interactive components and
2. Added aria roles and labels to the marks on the chart in order to get a screenreader to read them in a human-friendly way

I bet we could achieve these with React Animated Dateset, but we may have to coerce it a bit or fork it.

[harrislapiroff]

Part of the work here is being done in #1651. Let's keep this ticket open for ongoing assessment of how we're doing here.