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

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

自己紹介  サイオステクノロジー株式会社   チーフ・デザイン・オフィサー。  HCD-Net 認定人間中心設計スペシャリスト。    主に金融系システムのユーザーインターフェイス設計・デザインなどを専門にしている。また、アクセシビリティ関連として日本DAISYコンソーシアムに参加するなど、読みや
すさ・理解しやすさに関して興味・関心があり活動をしている。  freee株式会社デザイナー。   HCD-Net 評議委員および認定人間中心設計専門家。    ウェブアクセシビリティ基盤委員会 WG1委員。共著書に『デザイニングWebアクセシビリティ』、監訳書に『コーディングWebアクセシビリティ』『インクルーシブ HTML+CSS&JavaScript』がある。  クリエイティブユニットmokuva所属。   伊原力也  伊藤俊輔  @magi1125  @shunito 

アクセシビリティとは  • access + ability = アクセスできる度合い  • 多様な状況に対する、情報にアクセスするためのルートの幅広さ  •
「アクセシビリティの向上」とは、利用方法の選択肢を広げ、  使える状況を広げる取り組みのこと 

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

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

Issues · tokyo-metropolitan-gov/covid19  

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

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

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

きっかけのIssueと行動原則 

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

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

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

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

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

自動テストライブラリvue-axeの導入  • 対策サイトは、Vueのフレームワークである「NuxtJS」で開発されており、ローカルの開発用サーバ上でビルドし開発する仕組み  • アクセシビリティ検査ライブラリであるvue-axeを開発用ビルド設定に追加  • アクセシビリティ上の問題があるとブラウザの「開発者ツール」のコンソールにメッセージとして表示するように設定   
vue-axeのベースとなっているaxe-coreは、Deque社によりオープンソースで公開されているアクセシビリティチェックライブラリで、Lighthouseのアクセシビリティ項目のチェックでも利用されています。  Deque : axe-core 

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

ポイント  • 多数のコントリビューターがいる場合に、アクセシビリティを意識してもらい、新しい問題を作ってしまわないような仕組みとして有効  • できれば開発の初期段階で設定し、共通認識を持ちながら進められるとよい  • 開発が落ち着いてきたらチェック項目を減らすなど、チェック対象の見直しなどもできるようにするとなおよい  •
機械的なテストで発見できないアクセシビリティ上の問題も多数あるので、有識者による試験も組み合わせる    gov.ukによる2017年の報告によれば、ツールにより特性はあるが機械的な検査により発見出来るアクセシビリティ上の問題は17% ～37%とのこと。 

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

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

Web Content Accessibility Guidelines (WCAG) 2.1  

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

Ameba Accessibility Guidelines  

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

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

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

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

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

検査陽性者の状況の3段階進化  SVG  HTML  HTML 

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

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

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

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

Tokyo COVID-19 Information Website - a Collection by macropygia on
CodePen  

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

相談フローの4段階進化 

相談フローの修正 · Issue #167 · tokyo-metropolitan-gov/covid19  

PC: SVG  SP: SVG 

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

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

PC: HTML 

SP: HTML 

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

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

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

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

PC: HTML 

SP: HTML 

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

グラフの4段階進化 

グラフの4段階進化  1. 見た目にグラフはあるが、  スクリーンリーダーでは存在が不明  2. スクリーンリーダーでも  グラフの存在はわかるが、内容は不明  3. グラフとは別に隠しテーブルがあり、  スクリーンリーダーで内容がわかる 
4. グラフとは別に見えるテーブルがあり、  より多くの人が内容を理解できる 

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

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

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

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

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

ポイント  • 「グラフがある」とわかるだけでも取り得る選択肢は増える、  アクセシブルになっている  • 隠しテーブルでも情報を取得できる人は増える。  グラフ自体がアクセシブルになればもちろん最高だが、  メインコンテンツがアクセス不能な期間を最短にするのが先決  • グラフ→テーブルといった別の表現による提供は、 
特定の人（全盲、弱視、色弱等）をアクセス可能にするだけでなく、  より多くの人にとっての理解のチャンスを増やすことにも繋がる 

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

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

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

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

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

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

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

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

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

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

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

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

拡張性と基準とトーン&マナーから導かれる要件  • 4段階までのデータ系列を想定する：  それぞれを塗りで見分けられ、白背景とも見分けられること   • 塗りの上に文字が乗ることを想定する：  塗り色と上に載る文字とのコントラストを4.5:1確保すること   •
塗り色は凡例の文字色としても使用を想定する：  白背景と凡例文字色とのコントラストを4.5:1確保すること   • 「躍動、繁栄、潤い、安らぎ」のイメージを踏襲：  生死を連想させる色（≒黒）、危険を煽るような色は回避する   • それぞれの数値を正しく公平に伝える：  薄い塗り＋囲み、一部模様付き、一部異なる色相などは   部分強調の意図が出るおそれがあるので回避する   🤯

６　たいへん見分けやすい　とても使いやすい  ５　見分けやすい　使いやすい  ４　つねに見分けられる　使える  ３　見分けにくいこともある　使えるが惜しい  ２　見分けにくい　やめてほしい  １　見分けられない　ぜったいにやめてください 

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

なぜ紆余曲折があったか  1. 見分けにくいという声を受け、色の調整を開始した  2. 同時にグラフの拡張を見据え、組み合わせる要素や段階を増やした  3. 要素や段階が増えると、見分けられる表現は限定されていく  4. 避けたい表現があり、そことの競合回避の優先度が高かった  5.
複雑な状態を前提とした配色は、シンプルなグラフでも有効とは限らない  6. クリアできる表現の方向性は、色弱や弱視当事者でなければわかりにくい 

ポイント  • そもそもグラフを複雑にしないようにする  • グラフの段階や要素が増えるほど、誰にとってもわかりにくくなる  • コントラストも模様も色相も万能ではなく、面積や配置次第で  どうやっても見分けられないケースが出てくる  • シンプルなグラフを維持し、なるべくコントラストのみで 
差をつけるのがベターなケースが多そう  • 色弱や弱視の当事者に見てもらうのは絶対やったほうがよい。  シミュレーターは目安でしかない 

やさしい日本語におけるruby実装 

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

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

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

ruby実装の課題  1. サイトの開発が活発で、多数のテキスト指定個所をルビ用コンポーネントに置き換えるにあたりコンフリクトが多数発生。  2. ルビにより表示される要素の高さが変わり、レイアウトの崩れが各所発生したこと。また、最新のレイアウトの適応や確認に追いつけなくなっていった。   3. 言語切り替えの際にブラウザ側ですべてのテキストの置き換えを行うため、ルビへの変換もそ
のタイミングで行う必要があり、パフォーマンス面での懸念があったこと。   パフォーマンス面については、体感的には多少遅いものの許容範囲で動いているようでしたがスマートフォンなどでの検証の手もたりず、そのままとなっています。     初期設計時にうまく取り込むことで、より簡単に対応できる可能性がありますので、次の課題として記憶しておきたい。 

他にも数十件のIssue 

他にも数十件のIssue  • HTML文法ミス等の修正、不適切なWAI-ARIAの指定を修正  • spanやdivを妥当な要素に変更、ランドマークやrole属性の追加  • 見出しレベルの修正、行列見出し(th)の追加  • 画像やアイコンにテキストラベル追加  •
キーボードで操作可能に、フォーカス順の修正、フォーカスの可視化  • テキスト色のコントラスト改善 

Issues · tokyo-metropolitan-gov/covid19  

まとめと、これから 

「前代未聞の現場」からの示唆まとめ  • 『シビックテックとアクセシビリティはズッ友』  前提にあればすぐ協力し合える。有識者と女将を確保しよう  • 前提が共有できる環境ならば自動チェックも有効そう。  ＋なるべく初期に、荒くても網羅的にチェックするのは有効そう  • スピード重視でも、少しずつアクセスの選択肢は増やせる。  オープンに議論することで対応のアイデアは広がる 
• アクセシビリティを必要とする人に協力を仰ごう。  テストしてもらって「使える」とわかることがモチベになる  • アクセシビリティ改善はパッと取り組めるものもたくさん。  OSSコントリビュートの入り口にぜひ！ 

俺たちの戦いはこれからだ！  • まだIssueはいくつか残っています、そして…  • いまこの瞬間においてどの程度アクセシブルなのか？再試験が必要そう  • アクセシビリティを継続的に維持するにはどうしたら良いか？  • 有識者や女将や改善PR出してみる人を増やすにはどうしたら良いか？  •
各地域ごとの対策サイトをアクセシブルするにはどうしたらいいか？  • 今後新しく何かが生まれたり広まったりするときに、  より効率よくアクセシビリティを高めていくにはどうしたら良いか？ 

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

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

Code for Japan Summit 2020   特別協賛    協賛   
        協力  #cfjsummit 

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

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

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

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

More Decks by Rikiya Ihara / magi

Featured

Transcript