キーボードでは表示できないグラフのツールチップ

ネットショップの管理画面に、先週の日別の注文数を表す棒グラフがあります。棒には数字が書かれていません。土曜日の件数を知るには、土曜日の棒にポインターを重ねます。すると小さな黒いツールチップが開き、「土」と「注文数: 31」が出ます。棒から外れると閉じます。Chart.js では、ショップ側でコードを書かなくても、初めからこう動きます。

マウスを使わずにTabキーを押すと、フォーカスはカードより前にある要素から、グラフの下の「すべての注文を見る」へ一気に移ります。グラフにはフォーカスを受け取るものがなく、ツールチップを開くキーもないため、件数は一度も表示されません。キーボード利用者には、土曜日が一番多かったことは見えても、31件だったことや、火曜日が15件か14件かは分かりません。頼りになるのは、5件ごとに引かれた目盛りの線だけです。

グラフにはテキストの代替もあります。スクリーンリーダーで数値が伝わらないグラフの一つ目の修正のとおり、名前にすべての曜日の件数が書かれているので、スクリーンリーダー利用者には件数が聞こえます。ただ、その文字は画面には出ないため、目で見ながらキーボードを使う人には届きません。

WCAG 2.1.1「キーボード」は、ポインターでできることはすべてキーボードでもできるよう求めています。棒の件数を表示するのはこのグラフの機能の一つですが、それができるのはポインターだけです。Chart.js はツールチップをキャンバスに描き、events オプションに並ぶブラウザーのイベントで開きます。初期値は mousemove、mouseout、click、touchstart、touchmove で、どれもポインターか指によるものです。初期設定では、ツールチップが開くのはポインターが重なっている棒だけです。キャンバスは初期状態ではフォーカスを受け取らず、グラフはキー入力も受け付けていないので、キーボードでできることが何もありません。これは失敗例F54にあたります。値を表示するという機能を、ポインター専用のイベントハンドラーだけに結び付けているからです。

問題になるのは、件数を表示する場所がツールチップしかないことです。棒の上や、グラフの横の表にすでに書かれている数字をツールチップが繰り返しているだけなら、キーボード利用者が見られないものは何もありません。

管理画面を開くのは、正確な数字を知るためです。土曜日の31件と金曜日の24件の差は、週末がまずまずだったか、忙しかったかの違いになります。Chart.js はタッチにも反応するため、タッチ画面では問題なく使えます。件数を一つも見られないのは、キーボードで操作する人と、キーボードの操作に置き換えて動く道具を使う人です。

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

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

• 手の操作が限られる キーボードやスイッチの利用者がTabキーを押すと、グラフを通り過ぎてその下のリンクに移り、どのキーでもツールチップは出ません。各曜日の件数は、目盛りの線から見当をつけるしかありません。音声操作の利用者は、マウスグリッドや音声でポインターを棒まで動かして、一本ずつ出すしかありません。

ツールチップは、ポインターを重ねている間だけキャンバスに描かれる絵なので、ページの中にチェックツールが調べられるものはありません。axe には role="img" と名前の付いたキャンバスが見えるだけで、ホバーもしないため、合格にします。この診断は、ライブラリーが描いたグラフの中に、フォーカスを受け取るものが一つもなければ、確認候補として出します。棒にポインターを重ねてから、同じことをキーボードで試すのは人の役割です。ツールチップの中身が、ほかの場所に書かれていない値かどうかは、ページからは判断できません。ツールチップ付きの棒グラフをAIのアシスタントに頼むと、ライブラリーの初期設定をそのまま使い、この修正前のコードと同じものになることがあります。