$30 off During Our Annual Pro Sale. View Details »

東京都新型コロナ対策サイトのアクセシビリティ改善を語る

Rikiya Ihara
October 18, 2020
5

 東京都新型コロナ対策サイトのアクセシビリティ改善を語る

Rikiya Ihara

October 18, 2020
Tweet

Transcript

  1. 東京都新型コロナ対策サイトの
 アクセシビリティ改善を語る
 伊原 力也 伊藤 俊輔
 2020/10/18
 Code for Japan Summit

    2020 

  2. 自己紹介
 サイオステクノロジー株式会社 
 チーフ・デザイン・オフィサー。
 HCD-Net 認定人間中心設計スペシャリスト。
 
 主に金融系システムのユーザーインターフェイス設計・デ ザインなどを専門にしている。また、アクセシビリティ関連 として日本DAISYコンソーシアムに参加するなど、読みや

    すさ・理解しやすさに関して興味・関心があり活動をして いる。
 freee株式会社 デザイナー。 
 HCD-Net 評議委員および認定人間中心設計専門家。
 
 ウェブアクセシビリティ基盤委員会 WG1委員。共著書に 『デザイニングWebアクセシビリティ 』、監訳書に『コーディ ングWebアクセシビリティ』『インクルーシブ HTML+CSS&JavaScript』がある。
 クリエイティブユニットmokuva所属。 
 伊原 力也
 伊藤 俊輔
 @magi1125
 @shunito

  3. アクセシビリティとは
 • access + ability = アクセスできる度合い
 • 多様な状況に対する、情報にアクセスするためのルートの幅広さ
 •

    「アクセシビリティの向上」とは、利用方法の選択肢を広げ、
 使える状況を広げる取り組みのこと

  4. 東京都 新型コロナウイルス感染症 対策サイト 


  5. tokyo-metropolitan-gov/covid19: 東京都 新型コロナウイルス感染症対策サイト / Tokyo COVID-19 Task Force website 


  6. Issues · tokyo-metropolitan-gov/covid19 


  7. スクリーンリーダー利用時のデモ動画 


  8. すべてのAccessibility
 Contributorに敬意を表します


  9. 前代未聞の現場、それを伝えたい
 • 約2ヶ月で数十件のアクセシビリティIssueが提案され、高速で反映され、
 ユーザーフィードバックが寄せられる現場は前代未聞!
 • たいてい「どうしたらアクセシビリティ向上を始められるか?」からの
 議論になるのに、この現場では最初からフルアクセルだった
 • 障害当事者ユーザーも協力し、現実的なラインを議論しながらも
 どんどん改善されていく様子は、圧倒的なRe:DESIGN感を感じた


    • なぜそれができたのか?どのように進んでいったのか?
 それを共有することで他の現場でもRe:DESIGNを起こしたい

  10. きっかけのIssueと行動原則


  11. ユニバーサルデザイン対応を確認する · Issue #65 · tokyo-metropolitan-gov/covid19 


  12. サイト構築にあたっての行動原則 


  13. サイト構築にあたっての行動原則 


  14. ポイント
 • シビックテックにおいてはインクルーシブな環境と
 インクルーシブなアウトプットが必要不可欠
 • はじめから「アクセシビリティが必要だ」と宣言すると
 有識者・協力者を集めやすい
 • 後付け対応だとコストが高くなりがちなので、
 その点でも初期から巻き込むのが重要


  15. 自動テストツールの導入と改善


  16. 自動テストツール導入のきっかけ
 • 対策サイトの公開後、多くの協力者が開発に参加するようになり、日々新しい情報 や機能が追加されている状況
 • アクセシビリティ上の問題も改善のイシューが登録されるのと同時に新しい問題も 発生して、イタチごっこ
 • さらにこのコードベースから地方版も作られようとしている……
 


    なるべく多くの開発者にアクセシビリティを意識してもらい、新規の問題が生まれにくくす る仕組みが必要だと考えた。

  17. 自動テストライブラリvue-axeの導入
 • 対策サイトは、Vueのフレームワークである「NuxtJS」で開発されており、ローカルの 開発用サーバ上でビルドし開発する仕組み
 • アクセシビリティ検査ライブラリであるvue-axeを開発用ビルド設定に追加
 • アクセシビリティ上の問題があるとブラウザの「開発者ツール」のコンソールにメッ セージとして表示するように設定
 


    vue-axeのベースとなっているaxe-coreは、Deque社によりオープンソースで公開されて いるアクセシビリティチェックライブラリで、Lighthouseのアクセシビリティ項目のチェック でも利用されています。
 Deque : axe-core

  18. 背景色とテキストの
 コントラスト不足の指摘 
 ID属性の重複の指摘 
 ランドマークの
 不具合の指摘など


  19. ポイント
 • 多数のコントリビューターがいる場合に、アクセシビリティを意識してもらい、新しい 問題を作ってしまわないような仕組みとして有効
 • できれば開発の初期段階で設定し、共通認識を持ちながら進められるとよい
 • 開発が落ち着いてきたらチェック項目を減らすなど、チェック対象の見直しなどもで きるようにするとなおよい
 •

    機械的なテストで発見できないアクセシビリティ上の問題も多数あるので、有識者 による試験も組み合わせる
 
 gov.ukによる2017年の報告によれば、ツールにより特性はあるが機械的な検査により発見出来るアクセシビリティ上の問題は17% ~37%とのこと。

  20. アクセシビリティ試験
 もくもく会の開催


  21. オンラインアクセシビリティもくもく会 - 東京都新型コロナウイルス対策サイト改善 


  22. Web Content Accessibility Guidelines (WCAG) 2.1 


  23. 東京都 新型コロナウイルス対策サイト - ウェブアクセシビリティチェック 


  24. Ameba Accessibility Guidelines 


  25. 東京都 新型コロナウイルス対策サイト - ウェブアクセシビリティチェック 


  26. キーボードフォーカス時にoutlineが表示されるようにする · Issue #1147 · tokyo-metropolitan-gov/covid19 


  27. ポイント
 • 個々に改善提案を挙げるより、まず網羅的にチェックし、Issue化
 • 25人いれば、10画面を2時間+αでひと通りチェックできる
 • 達成基準ごとに分担、精度よりカバー範囲を優先
 • 読みやすいガイドラインを使い、質疑に対応できる相談役を立てる


  28. 東京都 covid-19 対策サイトにアクセシビリティ視点でコントリビュートしてみた 


  29. 検査陽性者の状況の3段階進化


  30. None
  31. 検査陽性者の状況の3段階進化
 SVG
 HTML
 HTML


  32. 検査陽性者の状況の3段階進化
 
 
 1. エクセルから起こしたSVG、読み上げや多言語対応に難あり
 2. HTML化で改善、要素増加対応やレスポンシブ対応も必要に
 3. 縦積みリストになり、上記の課題が解消されている


  33. 表の追加:検査陽性者の状況 · Issue #309 · tokyo-metropolitan-gov/covid19 


  34. 「検査陽性者の状況」コンポーネントコーディング(table組みでOK!) · Issue #860 · tokyo-metropolitan-gov/covid19 


  35. 「検査陽性者の状況」テーブルを横均等7分割から縦の積み上げにする · Issue #1520 · tokyo-metropolitan-gov/covid19 


  36. Tokyo COVID-19 Information Website - a Collection by macropygia on

    CodePen 

  37. ポイント
 • 多言語対応や要素追加を考えるとHTML化が必要になる。
 結果として機械可読性があがり、アクセシブルになる
 • ウェブの媒体特性に合った(=マテリアルオネスティな)デザインは、
 多様な状況に対応しやすく、実装コスト面でも有利
 • いっぽう、ウェブにあるだけでアクセシブル、スピードは正義でもある。
 調整コストを考えると段階的な改善という作戦も必要


  38. 相談フローの4段階進化


  39. None
  40. None
  41. 相談フローの修正 · Issue #167 · tokyo-metropolitan-gov/covid19 


  42. PC: SVG
 SP: SVG


  43. 相談フローの4段階進化
 1. パワポ絵から起こしたSVG、多言語や読み上げで難あり
 2. HTMLになり多言語対応できたが、読み上げ順に難あり
 3. スクリーンリーダーに対し常にスマホ版を提示し読み上げ順を改善
 4. デザインが改定され、多言語・読み上げ・レスポンシブに対応


  44. [/flowページ] コンポーネントコーディング · Issue #659 · tokyo-metropolitan-gov/covid19 


  45. PC: HTML


  46. SP: HTML


  47. 相談フローの4段階進化
 1. パワポ絵から起こしたSVG、多言語や読み上げで難あり
 2. HTMLになり多言語対応できたが、読み上げ順に難あり
 3. スクリーンリーダーに対し常にスマホ版を提示し読み上げ順を改善
 4. (上記3をユーザビリティテスト、見出しを追加しさらに改善)
 5.

    デザインが改定され、多言語・読み上げ・レスポンシブに対応

  48. [/flow] PC版で矢印の示す順番にコンテンツがスクリーンリーダーで読み上げられない · Issue #1440 · tokyo-metropolitan-gov/covid19 


  49. None
  50. 相談フローの4段階進化
 1. パワポ絵から起こしたSVG、多言語や読み上げで難あり
 2. HTMLになり多言語対応できたが、読み上げ順に難あり
 3. スクリーンリーダーに対し常にスマホ版を提示し読み上げ順を改善
 4. デザインが改定され、多言語・読み上げ・レスポンシブに対応


  51. aria-hiddenを指定して
 スクリーンリーダーから隠す
 PCかつスクリーンリーダーでアクセス 
 SP版のHTMLをvisually-hidden化して 
 見た目上は隠す


  52. 相談フローの4段階進化
 1. パワポ絵から起こしたSVG、多言語や読み上げで難あり
 2. HTMLになり多言語対応できたが、読み上げ順に難あり
 3. スクリーンリーダーに対し常にスマホ版を提示し読み上げ順を改善
 4. デザインが改定され、多言語・読み上げ・レスポンシブに対応


  53. [/flow][全面改修]ページマークアップ · Issue #3315 · tokyo-metropolitan-gov/covid19 


  54. PC: HTML


  55. SP: HTML


  56. ポイント
 • HTMLも線形、音声も線形である。ゆえにスクリーンリーダーには
 線形に読み上げて意味がわかる順序が必要
 • スマホ版では要素を縦に積みがちゆえに、線形な順序である可能性が高く
 スクリーンリーダーでも理解しやすい
 • 有りモノで上手くまかなえるか考えるのも1つの手段。
 永続性・メンテ性・美しさと「いま伝わるか」は天秤に掛けて考える


  57. グラフの4段階進化


  58. None
  59. グラフの4段階進化
 1. 見た目にグラフはあるが、
 スクリーンリーダーでは存在が不明
 2. スクリーンリーダーでも
 グラフの存在はわかるが、内容は不明
 3. グラフとは別に隠しテーブルがあり、
 スクリーンリーダーで内容がわかる


    4. グラフとは別に見えるテーブルがあり、
 より多くの人が内容を理解できる

  60. グラフにaria-labelを付与する · Issue #2448 · tokyo-metropolitan-gov/covid19 


  61. table提供やcsv提供による、グラフのアクセシビリティへの過渡的な対応 · Issue #1091 · tokyo-metropolitan-gov/covid19 


  62. スクリーンリーダー向け隠しtableと通常時のグラフを表示切り替えできるようにしたい · Issue #2068 · tokyo-metropolitan-gov/covid19 


  63. オープンソースで作る東京都新型コロナウイルス対策サイト。透明性が求められるサイト構築の舞台裏とは 


  64. Essential for Some, Useful for All
 今村:「障がいを持っていなかったとしても、グラフを読めない人もいるのでは?」と いうコントリビューターからの提案を受け、数字が羅列するテーブルを追加で表示さ せることにしました。
 一見グラフの方が直感的にわかりやすい気がしますが、実は今この数字がかなり

    見られていて、SNSなどでスクショされてツイートされるのはグラフより表の方が多い んです。

  65. ポイント
 • 「グラフがある」とわかるだけでも取り得る選択肢は増える、
 アクセシブルになっている
 • 隠しテーブルでも情報を取得できる人は増える。
 グラフ自体がアクセシブルになればもちろん最高だが、
 メインコンテンツがアクセス不能な期間を最短にするのが先決
 • グラフ→テーブルといった別の表現による提供は、


    特定の人(全盲、弱視、色弱等)をアクセス可能にするだけでなく、
 より多くの人にとっての理解のチャンスを増やすことにも繋がる

  66. 視覚障害当事者が
 スクリーンリーダーで使ってみる会


  67. “目が見えないエンジニア“として、多様性ある社会をつくりたい。情報アクセシビリティーの向上に取り組む中根雅文さん 


  68. 東京都コロナ対策サイトのスクリーンリーダー・ユーザビリティテスト台本 


  69. None
  70. 東京都 新型コロナウイルス感染症対策サイトをスクリーン・リーダーで使ってみる会 実況まとめ 


  71. テスト結果サマリ:OK
 • サイト全体の構成:ナビゲーション類から概ね理解できる
 • シンプルな情報ページ:見出しと本文とリンクなので問題なし
 • グラフ内容の理解:テーブルによって行と列と数字から構成を類推できる。
 ※ただし、これらのデータから何を示唆として受け取るべきかは難しい


  72. テスト結果サマリ:要改善
 • グラフ周りの構成:理解できるが、要素の出現順は改善余地あり
 • 相談フローの理解:テキストは順序通り読めるが、見出しがないので
 包含関係を理解しにくい。類推はできるが自信は持てない
 • 問い合わせの手段:電話しかないので改善の余地あり


  73. None
  74. グラフのパネルの要素出現順の検討(人数・件数と切り替えボタンとグラフ) · Issue #3115 · tokyo-metropolitan-gov/covid19 


  75. テスト結果サマリ:要改善
 • グラフ周りの構成:理解できるが、要素の出現順は改善余地あり
 • 相談フローの理解:テキストは順序通り読めるが、見出しがないので
 包含関係を理解しにくい。類推はできるが自信は持てない
 • 問い合わせの手段:電話しかないので改善の余地あり


  76. None
  77. flowページのSP版HTMLにh4見出しを立てる · Issue #3111 · tokyo-metropolitan-gov/covid19 


  78. テスト結果サマリ:要改善
 • グラフ周りの構成:理解できるが、要素の出現順は改善余地あり
 • 相談フローの理解:テキストは順序通り読めるが、見出しがないので
 包含関係を理解しにくい。類推はできるが自信は持てない
 • 問い合わせの手段:電話しかないので改善の余地あり


  79. None
  80. 電話以外のお問い合わせ方法の検討 · Issue #3113 · tokyo-metropolitan-gov/covid19 


  81. グラフの色を識別可能なものにする


  82. None
  83. 色弱者 用にチャートで使われる色を変更 · Issue #740 · tokyo-metropolitan-gov/covid19 


  84. チャートのカラーをアクセシビリティを考慮した色へ変更する · Issue #1172 · tokyo-metropolitan-gov/covid19 


  85. 拡張性と基準とトーン&マナーから導かれる要件
 • 4段階までのデータ系列を想定する:
 それぞれを塗りで見分けられ、白背景とも見分けられること 
 • 塗りの上に文字が乗ることを想定する:
 塗り色と上に載る文字とのコントラストを4.5:1確保すること 
 •

    塗り色は凡例の文字色としても使用を想定する:
 白背景と凡例文字色とのコントラストを4.5:1確保すること 
 • 「躍動、繁栄、潤い、安らぎ」のイメージを踏襲:
 生死を連想させる色(≒黒)、危険を煽るような色は回避する 
 • それぞれの数値を正しく公平に伝える:
 薄い塗り+囲み、一部模様付き、一部異なる色相などは 
 部分強調の意図が出るおそれがあるので回避する 
 🤯
  86. None
  87. 6 たいへん見分けやすい とても使いやすい
 5 見分けやすい 使いやすい
 4 つねに見分けられる 使える
 3 見分けにくいこともある 使えるが惜しい
 2 見分けにくい やめてほしい
 1 見分けられない ぜったいにやめてください


  88. チャートのカラーについての再考、パターンの提案、アンケート作成を行う · Issue #2364 · tokyo-metropolitan-gov/covid19 


  89. None
  90. None
  91. なぜ紆余曲折があったか
 1. 見分けにくいという声を受け、色の調整を開始した
 2. 同時にグラフの拡張を見据え、組み合わせる要素や段階を増やした
 3. 要素や段階が増えると、見分けられる表現は限定されていく
 4. 避けたい表現があり、そことの競合回避の優先度が高かった
 5.

    複雑な状態を前提とした配色は、シンプルなグラフでも有効とは限らない
 6. クリアできる表現の方向性は、色弱や弱視当事者でなければわかりにくい

  92. None
  93. ポイント
 • そもそもグラフを複雑にしないようにする
 • グラフの段階や要素が増えるほど、誰にとってもわかりにくくなる
 • コントラストも模様も色相も万能ではなく、面積や配置次第で
 どうやっても見分けられないケースが出てくる
 • シンプルなグラフを維持し、なるべくコントラストのみで


    差をつけるのがベターなケースが多そう
 • 色弱や弱視の当事者に見てもらうのは絶対やったほうがよい。
 シミュレーターは目安でしかない

  94. None
  95. やさしい日本語におけるruby実装


  96. 「やさしい日本語」とは日本語を習得していない子供や外国人にも分かりやすいよう、 
 簡易な表現を使ったり漢字に読み仮名をふるなど、表現をやさしくした日本語。 


  97. rubyタグ対応の開始
 • 「単語(よみ)」の連続が読みにくいという意見があり実装をスタート
 • 言語切り替えで「やさしい日本語」が選択された場合に、通常の翻訳テキスト(span タグ)ではなくルビ付きテキスト(rubyタグ)を表示するコンポーネントを開発
 • 翻訳テキストをルビ付きテキストに変換するための書式を整備
 • 影響範囲が広く、その他のIssue対応への影響を避けるため専用の検証環境とブラ

    ンチを準備
 • ページごとに担当をわけ概ね実装は終了したが、リリースに至らず

  98. [ruby] やさしい日本語 のルビタグ対応· Issue #3116 · tokyo-metropolitan-gov/covid19 


  99. None
  100. ruby実装の課題
 1. サイトの開発が活発で、多数のテキスト指定個所をルビ用コンポーネントに置き換えるにあたり コンフリクトが多数発生。
 2. ルビにより表示される要素の高さが変わり、レイアウトの崩れが各所発生したこと。また、最新 のレイアウトの適応や確認に追いつけなくなっていった。 
 3. 言語切り替えの際にブラウザ側ですべてのテキストの置き換えを行うため、ルビへの変換もそ

    のタイミングで行う必要があり、パフォーマンス面での懸念があったこと。 
 パフォーマンス面については、体感的には多少遅いものの許容範囲で動いているようでしたがス マートフォンなどでの検証の手もたりず、そのままとなっています。 
 
 初期設計時にうまく取り込むことで、より簡単に対応できる可能性がありますので、次の課題として記 憶しておきたい。

  101. 他にも数十件のIssue


  102. 他にも数十件のIssue
 • HTML文法ミス等の修正、不適切なWAI-ARIAの指定を修正
 • spanやdivを妥当な要素に変更、ランドマークやrole属性の追加
 • 見出しレベルの修正、行列見出し(th)の追加
 • 画像やアイコンにテキストラベル追加
 •

    キーボードで操作可能に、フォーカス順の修正、フォーカスの可視化
 • テキスト色のコントラスト改善

  103. Issues · tokyo-metropolitan-gov/covid19 


  104. まとめと、これから


  105. 「前代未聞の現場」からの示唆まとめ
 • 『シビックテックとアクセシビリティはズッ友』
 前提にあればすぐ協力し合える。有識者と女将を確保しよう
 • 前提が共有できる環境ならば自動チェックも有効そう。
 +なるべく初期に、荒くても網羅的にチェックするのは有効そう
 • スピード重視でも、少しずつアクセスの選択肢は増やせる。
 オープンに議論することで対応のアイデアは広がる


    • アクセシビリティを必要とする人に協力を仰ごう。
 テストしてもらって「使える」とわかることがモチベになる
 • アクセシビリティ改善はパッと取り組めるものもたくさん。
 OSSコントリビュートの入り口にぜひ!

  106. 俺たちの戦いはこれからだ!
 • まだIssueはいくつか残っています、そして…
 • いまこの瞬間においてどの程度アクセシブルなのか?再試験が必要そう
 • アクセシビリティを継続的に維持するにはどうしたら良いか?
 • 有識者や女将や改善PR出してみる人を増やすにはどうしたら良いか?
 •

    各地域ごとの対策サイトをアクセシブルするにはどうしたらいいか?
 • 今後新しく何かが生まれたり広まったりするときに、
 より効率よくアクセシビリティを高めていくにはどうしたら良いか?

  107. ありがとうございました
 @magi1125, @shunito 
 Special Thanks
 @forestgtree

  108. Code of Conduct (行動規約) と参加時のお願い
 • サミットは参加者・セッション登壇者・スタッフみ んなでつくるイベントです 
 


    • 誰もが参加しやすいサミットを「ともに考え、と もにつくる」ことを目指しています 
 
 • お互い敬意を持って、価値観を認め合いなが ら、建設的に意見を交わしましょう 
 
 • それぞれが文化的および個人的なバックグラ ウンドがあることを理解するように努めましょう 
 • Github - Code of Conduct 
 https://github.com/codeforjapan/codeofcond uct
 • HackMD - Code of Conduct https://hackmd.io/@codeforjapan/CodeOfCon duct 
 • オンライン版の注意点(抜粋) 
 ◦ それぞれが文化的および個人的なバックグラウンド があることを理解するように努めましょう 
 • 困った時は…
 ◦ メール: CoC@code4japan.org 
 ◦ Slack: jinnouchi ・ takesada_c4j
 #cfjsummit

  109. Code for Japan Summit 2020 
 特別協賛
 
 協賛
 


    
 
 
 
 協力
 #cfjsummit

  110. Code of Conduct (行動規約) と参加時のお願い
 • サミットは参加者・セッション登壇者・スタッフみ んなでつくるイベントです 
 


    • 誰もが参加しやすいサミットを「ともに考え、と もにつくる」ことを目指しています 
 
 • お互い敬意を持って、価値観を認め合いなが ら、建設的に意見を交わしましょう 
 
 • それぞれが文化的および個人的なバックグラ ウンドがあることを理解するように努めましょう 
 • Github - Code of Conduct 
 https://github.com/codeforjapan/codeofcond uct
 • HackMD - Code of Conduct https://hackmd.io/@codeforjapan/CodeOfCon duct 
 • オンライン版の注意点(抜粋) 
 ◦ それぞれが文化的および個人的なバックグラウンド があることを理解するように努めましょう 
 • 困った時は…
 ◦ メール: CoC@code4japan.org 
 ◦ Slack: jinnouchi ・ takesada_c4j
 #cfjsummit

  111. 問合せ・連絡先はこちら
 あなたがハラスメントを受けている場合、あるいは、
 誰かがハラスメントを受けていることに気づいた場合、
 その他の懸念がある場合は、すぐに各トラック常駐のスタッフ
 またはCode for Japan担当者に連絡してください。
 メール: CoC@code4japan.org 


    Slack: jinnouchi / takesada_c4j
 
 
 #cfjsummit