Easily the most comprehensive and impressive charting and data visualisation library I've come across. Graphs and charts are keyboard accessible, well-labelled, meaningfully marked up, with colour options that help ensure contrast levels and much more. Heck, there are options for a user to generate a data table (where appropriate) and it just appears below the graph, with full HTML semantics. The only shame here is the cost, but you absolutely get what you're paying for 👏
As an aside, High Charts were recommended after some quick accessibility testing of other popular React options (the following conclusions are based on examples from each respective tool's demo page, assumed to be "as good as it gets":
- Apex Charts: Nice visuals, good colour and texture options, and legend text is at least targetable, but relationships between values and labels are missing, popovers/tooltips are completely inaccessible, no keyboard support, and data values which are not visible cannot be uncovered by assistive tech. Verdict: meh.
- Chart.js: Charts are surfaced as "clickable images" with more "clickable images" nested within. Keyboard support is patchy and buggy (I could jump around some graphs, but would get stuck at times). Data and labels are not paired. In fairness, the official recommendation here is that you add your own accessibility onto the Canvas element, but that's a suboptimal hack at best. Verdict: poor.
- Google Charts (specifically the react-google-charts package): Legend is navigable with AT, but for some reason identifies as a task list. No real keyboard support. Text labels are accessible, but not paired to data meaningfully; any data points without visible labels cannot have their values surfaced, as tooltips are inaccessible. Charts have titles and at least some capability to provide accessible colour choices. Relatively well marked up and easy to skip around using AT, though (again) some values are simply impossible to get to without a mouse and visual browsing. Verdict: average but still inaccessible.
- Nivo: In my opinion, the best looking. Excellent colour and texture options. Some nice accessibility affordances. Data is still not adequately associated with labels, though these are at least all accessible as text nodes. Unfortunately, the result is gibberish without visual guidance – strings of labels, legends, data values all given in blocks with no additional context. Verdict: better but still inaccessible.
Why not "simply" provide a text alternative? Make the chart invisible to AT using ARIA and stick a label on the wrapping element? That's definitely an improvement over the examples given, and at a pinch (if you're stuck with any of the above libraries) would be my suggestion. I also think – if done well – that this would meet WCAG SC 1.1.1 requirements. But if the graph accepts user control (which it likely should, if you are relying on popovers or similar techniques) then I don't think this goes far enough, and full keyboard control, contextual labelling, etc. would be needed as well.
