スクリーンリーダーで数値が伝わらないグラフ

ネットショップの管理画面を開くと、最初に「日別の注文数」という見出しのカードがあります。見出しの下に「先週」とあり、その下に、月曜日から日曜日まで1日1本ずつ棒が並ぶ棒グラフがあります。見れば、一番多かったのは土曜日の31件、一番少なかったのは月曜日の12件だと、すぐに分かります。

スクリーンリーダーでカードを読むと、「日別の注文数、見出し」「先週」と読んだ後、カードの次の内容へ進みます。グラフには一言も触れません。よくあるもう一つの作り方では、グラフに名前が付いていて、スクリーンリーダーは「Orders chart、画像」と読みます。グラフがあることは分かっても、何を示しているのかは分かりません。一番多かった曜日も、7日分の件数も一つも伝わりません。

このグラフは、Chart.js が canvas 要素に描いたものです。ライブラリーの入門の例 <canvas id="myChart"></canvas> と同じ作りです。canvas はピクセルを描くための面で、棒も曜日のラベルも目盛りの数字も、その上に絵として描かれます。どれも、ブラウザーがスクリーンリーダーに渡せるテキストとしては存在しません。Chart.js のドキュメントにも、canvas の内容はスクリーンリーダーからは利用できないとあり、テキストの代替は、canvas にARIAを付けるか、canvas の中に代わりの内容を置くかして、ページの側で用意するよう求めています。この canvas にはそのどちらもないため、読むものが何もありません。

達成基準1.1.1「非テキストコンテンツ」は、情報を伝える非テキストコンテンツのすべてに、同じ目的を果たすテキストの代替を求めています。グラフはデータと、そこから読み取れることを示すためにあるので、テキストの代替もそれを伝える必要があります。二つ目の作り方では role="img" と aria-label="Orders chart" を付けています。これでグラフに名前は付きますが、あるのは名前だけです。この名前はグラフであることを言うだけで、何を伝えているかは言いません。Highcharts も、アクセシビリティモジュールを読み込まないと、グラフの SVG にタイトルだけを名前として付けます。こうした名前は、グラフと同じ目的を何も果たさないため、名前がない場合と同じように1.1.1を満たしません。

管理画面は、ショップの運営者がその週の売れ行きを確かめる場所です。その件数がページに出ているのは、グラフの中だけということもよくあります。

10グループ中2グループに影響

• 全盲 （影響あり）
• 弱視 （影響あり）
• 色覚 （影響なし）
• ろう （影響なし）
• 難聴 （影響なし）
• 発話 （影響なし）
• 手の操作 （影響なし）
• 筋力・可動域 （影響なし）
• 認知 （影響なし）
• 光過敏 （影響なし）

• 視覚を使わない スクリーンリーダーはカードの見出しと期間を読んだ後、グラフについては何も読まないか、「Orders chart、画像」と読むだけです。一番多かった曜日も、各曜日の件数も伝わらず、点字ディスプレイにも何も表示されません。
• 視覚が限られる 画面を拡大して見る人には、グラフの一部しか一度に見えません。件数は棒の先から目盛りの線までたどって読むしかなく、時間がかかり、読み違えやすくなります。テキストがなければ、手がかりは棒だけです。

axe には中身のない canvas を調べるルールがないため、一つ目の作りは axe を通ります。axe の role-img-alt は、role="img" があるのに名前のない要素を報告します。react-chartjs-2 の canvas は、名前を渡さない限り role="img" だけを付けるため、これに当たります。ところが aria-label="Orders chart" を付ければ、このルールは何も言わなくなります。どれほど中身のない名前でも同じです。手で直しても、AIのアシスタントに直させても、この程度の修正で終わってしまうことがあります。この診断は、Chart.js、Highcharts、Recharts、ApexCharts、ECharts、Plotly が描いたグラフを見分けます。テキストの代替がまったくないか、名前が「chart」のような言葉だけで、そばに表もないグラフは、問題として報告します。それ以外に見つけたグラフは、付いている名前やキャプションを引用した確認候補として出し、棒と見比べるのは人に任せます。名前が棒の示す内容を伝えているかどうかは、グラフが見える人にしか判断できません。