Reactのチャートライブラリのアクセシビリティ調査
まえがき
Reactでチャート（グラフ描画）ライブラリの選定をするにあたって、アクセシビリティ（以下a11y）の対応について調査したのでまとめます。
対象とするのは以下の記事で紹介されていた11個のライブラリです。
とりあえずザッとふるいにかけたいので、今回調べるのは以下の二点にとどめます。
- キーボードだけでマウスと同等の操作ができるか(WCAG2.1 SC2.1.1)
- スクリーンリーダーのことが考慮されているか(WCAG2.1 SC1.1.1)
色の使いかたなどはある程度実装側でカバーする予定です。
Recharts
v2時点ではa11yの考慮はほとんどされていなさそう（？）
しかし、v3（記事執筆時点ではalpha版）でaccessibilityLayerというのが導入されるようです。これによってキーボード操作とスクリーンリーダー対応が入りそうです。
ドキュメントサイトのStorybookの/API/Accessibilityに詳細が記載されています。
ドキュメントではtitle要素でチャートの説明を記載していますが、チャートにマウスオーバーしたときにツールチップと表示が被ることがありました。
少し気になってしまうので、自分が実際に使うときはtitleではなくaria-属性あたりを使うかもしれません。
ともかく、v3でかなりの改善がありそうなので正式リリースが楽しみです！
Nivo
一部（Bar Chart）にはキーボード操作、スクリーンリーダー読み上げの対応が入っています。しかし、それ以外のチャートはまだ未対応な模様。
詳細は以下のIssueにまとまっています。
Nivoはコンポーネント数も多いしデザインも好きなのでおしい
Victory
読み上げるラベルとか、どの要素をフォーカス可能にするかをちゃんと自分で指定していく感じ。
特定の要素をグルーピングしてキーボードフォーカスの順番を管理できるので、機能的には問題なさそう。
ドキュメント↓に実装例があります。
Ant Design Charts
v2はドキュメントサイトがほとんど中国語で読めませんでした、、。
v1は軽くみた感じだと特に考慮なさそう？
billboard.js
ドキュメントにa11yについての記載は見当たらず。
描画のhookにひっかけて自分で頑張って各要素を修正しろ、という方針に見える。
react-chartjs-2(Chart.js)
Chart.jsのラッパーなのでChart.jsのほうを調べます。
canvasにチャートを書き込む都合上、自分でaria-labelなりフォールバックコンテンツに適切な説明を書けとのこと。
方針は分からなくはないものの、データ量増えると大変そう。
上記ドキュメントで言及のある以下のサイトで紹介されているように、実際にはテーブルなどを併記してそちらで説明をする方が良いかも。
なお、キーボード操作についての説明は見つけられませんでした。
MUI X Charts
特にa11yについての全般的な記述は見つからず。
サンプルもキーボードフォーカス効かなかったので考慮されていない？
Issueはありました。
unovis
v1.2でaria-系がサポートされたとのこと。
キーボード操作はまだ未対応っぽい。
なお、ロードマップにはちゃんとキーボード操作含めたa11yの記載があるので、対応は予定されていそう。
react-plotly.js(plotly.js)
plotly.jsのラッパーなのでplotly.jsのほうを調べます。
キーボード操作未対応。2016年からIssueがあり趣を感じる。
AG Charts
今回調べた中で一番しっかりa11yが考慮されていると感じた。
キーボード操作、スクリーンリーダーでの読み上げにちゃんと対応している。
ギャラリーに載っているチャートもキーボード操作できますし、さすがに有償版も提供されているだけのことはある。
無償版でもよく使うチャートは用意されているので、もっと流行っても良いのではという印象。
Charts.css
HTMLとCSSで構築するので実装者次第というように思う。
おわりに
よりアクセシブルなWebを目指して
Discussion