table提供やcsv提供による、グラフのアクセシビリティへの過渡的な対応

magi1125 commented 4 years ago

改善詳細 / Details of Improvement

現在トップページで表示されているグラフはアクセシビリティ的に4つほど大きな課題があります
1. canvasで描画されているため、スクリーンリーダーでは内容にアクセスすることができない
2. 詳細情報を得るにはマウスオーバーorタッチ、凡例を選択して内容を変更するにはマウスクリックorタッチが必須であり、いずれもキーボードでは操作できない
3. 棒グラフの幅が狭いため、操作を行うには非常に微細な操作が必要になる
4. マウスオーバーで表示した詳細情報をマウスカーソルを移動せずに消す方法がない
  - 補足：弱視の方は画面を拡大している場合があり、マウスカーソルに視野が追従するため、読みたいところを探す過程で偶然ホバーすることがあります（参考映像）。その際にEscキーなどでホバー時の追加コンテンツを消せないと、もともと見たかった箇所がいつまでも見れないということが起きます。WCAG2.1の1.4.13をご参考ください
しかし、現在すぐにグラフの改善を検討するのは難しい状況でもあるとも理解しています
そのため、ひとまずグラフの元となっているデータをtable要素として別途提供する、あるいはcsvとして提供するという代替手段が有効そうだと考えています
こういったデータが提示されていれば、ユーザーはひとまず内容は取得できるようになります

スクリーンショット / Screenshot

スクリーンショット 2020-03-11 3 08 57

期待する見せ方・挙動 / Expected behavior

グラフの下にtable要素で組まれた元データが表示される（この表は普段は折りたたんであり、「元データを表示する」的なリンクを押すと展開される、という形でもよいと考えます）。
または、グラフの下に元データのcsvへのリンクが表示される

動作環境・ブラウザ / Environment

すべて

mikkame commented 4 years ago

デフォでテーブル、グラフ描画完了後グラフに差し替えにするとテキストリーダーでも読みやすい&JSなくても読めるように思えます

magi1125 commented 4 years ago

ご意見ありがとうございます。そういう手もありますね！デフォはテーブルで、JSオンならグラフが出る＆テーブルは折りたたまれるが呼び出せる、だとよりナイスな気がしました（グラフを見つつ表を見て数字を拾うこともできるため）

magi1125 commented 4 years ago

メインコンテンツの大半に対してアクセス不能になっている点を鑑みてhelp wantedラベルをつけました。flowページリファクタと同レベルの重要度を持つ課題だと考えています。

magi1125 commented 4 years ago

ちなみに、「オープンデータを入手」としてカタログサイトにリンクが貼られている場合は一応アクセスすることは可能です。ただし以下の点で情報取得は難しそうと考えています。

一般の人が使いやすいラベルにはなっておらず、どこに情報があるかわからない可能性が高い
csvは存在するが探しにくい（データとリソースのページに異動したあとの見出し下のリンク、または「リソースに行く」ボタンだが、気づきづらい）
データエクスプローラーはtable要素ではなくdiv要素で出来ているため、行列の組み合わせで内容を読み取ることができない

ocean3fish commented 4 years ago

@KentarouTakeda さんに実装お願いできることになりました！（なぜかアサインしようとした時にアカウント出てこないのでコメントで残しておきますー）

KentarouTakeda commented 4 years ago

@magi1125

テーブルの開閉
ui追加（及びそれによる翻訳）等の作業が当方のみで解決できないため対応見送りました。
スクリーンリーダー対策としてテーブルはDOMには残し画面外に飛ばす形としました。
CSVダウンロード機能追加の適否を各所に確認する必要があると別の方にお聞きしたため対応見送りしました。途中まで作業した内容（ダウンロードは可・UIが仮）を #1464 に残してあります。

magi1125 commented 4 years ago

@KentarouTakeda 状況共有ありがとうございます！なるほど、そういう確認もあるのですね。あまりそのあたり明るくなくすみません。

Tokyo-Metro-Gov / covid19