個人からチームに広げるアクセシビリティ向上の輪 / Accessibility improvement expanding from individual to team

アクセシビリティ向上に向けて個人やチームそれぞれでできることがあります。

個人やチームがアクセシビリティ向上をどうやっていくかの紹介と、アクセシビリティ向上にどう向き合うかについて話します。

Transcript

1. 個人からチームに広げるア クセシビリティ向上の輪 2022年7月1日 UIT Meetup vol.16「ちゃんとやってる？アクセシビリティ」 @kubosho_
2. 自己紹介 • 株式会社AbemaTV 開発本部開発局 Webフロ ントエンドエンジニア • CyberAgent Next Experts (アクセシビリティ) • ウェブアクセシビリティ基盤委員会 (WAIC) 実装 作業部会 委員 久保田翔太 @kubosho_
3. 1. 「ちゃんとやる」のは難しい 2. 個人からチームに広げる方法 3. ABEMAのアクセシビリティについて 話す内容
4. 「ちゃんとやる」のは難しい
5. 「ちゃんと」とは ちゃんと［副］(スル) 1. 少しも乱れがなく、よく整っているさま。「部屋の中を—かたづける」 2. 確実で間違いのないさま。「言われたことは—やる」 3. 結果が十分であるさま。「朝食は—食べてくる」 4. すばやく動作をするさま。さっと 出典: 「ちゃんと」の意味や使い方 わかりやすく解説 Weblio辞書
6. 「ちゃんとやる」のは難しい　 • 確実に間違いがない状態は、アクセシビリティにはない • WCAGの最高レベル (AAA) に適合しているコンテンツでさえも、 アクセシブルではない状態・状況・環境はありえる
7. とはいえ「やらない」のは違う • 法律面 ◦ 障害者差別解消法 ◦ 障害者情報アクセシビリティ・コミュニケーション施策推進法 • 社会に対する責任 ◦ SDGs・ESG・CSR • 定性的な面 ◦ アプリストアのレビューでアクセシビリティが起因で評価が上下する ◦ 個人のやる気
8. リスク面ばかり考えても楽しくない
9. アクセシビリティ向上を自分ごと化する • 強制されてやるのは楽しくない • 自分達にも関係あるんだと思うような意義を定義することで、解 像度が上がったり楽しくアクセシビリティ向上ができたりする
10. アクセシビリティが向上すると自分も嬉しい CDNの障害で画像が見ら れない場合でも、代替テキ ストを設定しておくことで内 容が分かる。 マウスやトラックパッドの充 電が切れて使えない場合 でも、キーボード操作に対 応することで、問題なく操 作できる。 自動再生のコンテンツ が、初期状態では無音 になっていることで、ビッ クリしない。 イラスト出典: いらすとや
11. 個人からチームに広げる方法
12. アクセシビリティ向上を個人からチームに広げる方法一覧 • 始めるハードルを下げる • アクセシビリティを減点法でとらえない • アクセシビリティ向上を先導する人を決める • チャットツール上でアクセシビリティに関するチャンネルを作る • 改善事例を積み重ねる • ビジョンを決める • さまざまな職種・熟練度の人を巻き込む • 発信する • ガイドラインやポリシーを定義する
13. 始めるハードルを下げる • まずはサービスにとって大事な部分から始める ◦ 動画系のサービスであれば、動画プレイヤーなど • まずは手元のスマホでスクリーンリーダーを使ってみる ◦ VoiceOver・Talkbackなどで困りそうな部分をなんとなく把握する • 妥協する基準を事前に決めておく ◦ 納期との兼ね合い・代替コンテンツを出すために必要なデータが用意されていないな ど
14. アクセシビリティを減点法でとらえない • アクセシビリティ向上をやっていくなかで、今はできなかったり間 違った対応をしてしまったりすることもある • 減点法にするとアクセシビリティ向上に対して萎縮する • 前より良くなったという視点に立つ • 間違った対応も「惜しい点はこうすると良くなる」とオブラートに包 む表現をした上で改善案も出す言い方をしたい
15. アクセシビリティ向上を先導する人を決める • 先導するのに知識量は関係ない。先導するかしないか • 先導することを宣言すると上長や同僚が助けてくれる可能性がある • 勉強会の懇親会やブログ・SNSでアクセシビリティ向上を先導している と言うことで有志が助けてくれる可能性がある • 先導するのに大変な部分はあるので、自分の中でアクセシビリティ向 上をなぜやっていくのか言語化して心の拠り所を作る ◦ 自分がアクセシビリティ向上に力を入れる理由
16. チャットツール上でアクセシビリティに関するチャンネルを作る • 箱を用意することで、情報の共有や質問をしやすくなる • アクセシビリティを向上したときに発信する場ができる • 情報が検索可能になる、アクセシブルになる
17. 改善事例を積み重ねる • Lighthouseのアクセシビリティの点数を上げてみるなど • 使いやすくなったという声がSNSやアプリストア上で挙がる ◦ 嬉しい！！ • 発信することも踏まえて、まとまった単位でアクセシビリティ向上を やると、発信しやすくなる • 実績が積み重なることで、仲間が増えたり、より工数を要する改善 をやれる流れができたりする
18. ビジョンを決める • 個人の思いからチームとしての思いに切り替える役目を持つ • サービス特性に合わせた言葉を定義することで、チーム内でなぜやる のか共有できる • できれば人を巻き込んでからビジョンを一緒に決める作業をやっていく と各個人の価値観も見えてくる
19. アクセシビリティビジョンを企業理念やビジョンと紐づける 企業理念やビジョンに「すべての人に〜」「みんなに〜」のような言葉がある 場合はアクセシビリティと紐づけるチャンス。 ABEMAでは、FIFAワールドカップ2022全試合の無料生中継決定の告知 動画 で「いつでもどこでもワールドカップをすべてのひとに」と謳った。 結果として、言葉と紐づける形でアクセシビリティ向上の動きをより言い出し やすくなった。
20. さまざまな職種・熟練度の人を巻き込む • みんながアクセシビリティに詳しくなくても良い • いろんな立場から意見を出し合うことで多様性が生まれる • 障害当事者の方に自社サービスを触っている様子をデモしても らってそれを皆で見ることで課題を共有しやすくなる • 課題が共有された結果、人を巻き込みやすくなる
21. 発信する • 会社に関係する場所から発信できると、個人または少人数で やったとしても会社全体として取り組んでいる感が出せる • もし気がついたところからやる場合でも、改善した点をまとめて 出すことでめちゃくちゃやっている感を出せる • なぜアクセシビリティ向上をやるかという文脈も一緒に伝えること で、よりストーリーが伝わりやすくなる
22. ガイドラインやポリシーを定義する • アクセシビリティ改善はタスクの量が多くなりやすいので、チーム として取り組むことが重要になってくる • ガイドラインやポリシーを定義して社内に広く共有する • 既存の機能改善や新規の機能実装で、実際にガイドラインやポ リシーを使う • アウトプット品質が属人化するのをちょっとでも防げる
23. (再掲) アクセシビリティ向上を個人からチームに広げる方法一覧 • 始めるハードルを下げる • アクセシビリティを減点法でとらえない • アクセシビリティ向上を先導する人を決める • チャットツール上でアクセシビリティに関するチャンネルを作る • 改善事例を積み重ねる • ビジョンを決める • さまざまな職種・熟練度の人を巻き込む • 発信する • ガイドラインやポリシーを定義する
24. ABEMAのアクセシビリティについて
25. アクセシビリティタスクフォースの歴史 • 2020年初頭に設立 ◦ 最初は自分以外のアクセシビリティエキスパートが旗振り役となっ てアクセシビリティタスクフォースができた • 目的は、アクセシビリティ向上のためのプロセスや文化を作る • 全員が兼務で参加していて、以下の構成で活動中 ◦ 各クライアントアプリのエンジニア ◦ デザイナー ◦ プロジェクトマネージャー
26. ABEMAのアクセシビリティビジョン 「だれもが思い通りに楽しめる」
27. アクセシビリティタスクフォースがやっていること • アクセシビリティ改善 • アクセシビリティ関連のレビュー・質問や相談の回答 • アクセシビリティの啓蒙・教育活動
28. アクセシビリティ向上事例
29. カラーコントラスト比の向上 #51C300 #33AA22 #DDAA00 2018年3月以降のキーカラー。黒背景と組み合わせた場合は 9.16:1と いうコントラスト比になる。 2019年3月以降のキーカラー。黒背景と組み合わせた場合のコントラス ト比は6.91:1となった。白背景と組み合わせた場合は以前のキーカラー と比較してコントラスト比が上がった。 2020年4月以降のキーカラー。黒背景と組み合わせたときのコント ラスト比が9.82:1となって過去最高のコントラスト比になる。白背景 とキーカラーは組み合わせないようにした。
30. ネイティブアプリのアクセシビリティ向上事例 • iOSアプリにおけるテレビのチャンネル選択UIの改善 ◦ ABEMA iOS アプリがアクセシビリティ改善をリリースするまで • Androidアプリにおけるオンボーディングの改善 ◦ モダンな技術と開発戦略で挑む ABEMA Androidアプリのリニューアル
31. その他のアクセシビリティ向上事例 • フォーカスリングをブラウザ標準に変更した • Windows環境でUDフォントを使うようにした • 編成・広報と連携して、チャンネル画像の代替テキストの末尾に必ず 「チャンネル」を付けることにした • リンクにhover時のスタイルを定義していない場合、lintエラーになるよう にした
32. アクセシビリティのレビュー・質問や相談の回答
33. アクセシビリティのレビュー・質問・相談事例 • 新機能をアクセシビリティ観点からレビュー • サムネイルの代替テキストにこういったテキストを入れたいという質問 • 作成中の機能についてデザイナーからアクセシビリティ観点で相談
34. アクセシビリティの啓蒙・教育
35. 啓蒙・教育の事例 • 視覚障害当事者がどのようにアプリを使用しているかデモ • デザイニングWebアクセシビリティの輪読会実施 • 社内のLT会でアクセシビリティについて話す ◦ アクセシビリティーとは？ • アクセシビリティポリシーの策定と開発フローへの組み込み（組 み込みはまだ途中）
36. まとめ
37. まとめ • いきなりちゃんとやろうとせず、始めるハードルを下げる • アクセシビリティ向上を始めるときは自分事化する • 個人からチームにアクセシビリティ向上の輪を広げる
39. 参考リンク • 自社サービスのアクセシビリティ向上、良いパターンとアンチパターン （GAAD 2022） • AbemaTVのアクセシビリティ 小さな一歩｜シュンスケ ｜ABEMA｜note • Webアクセシビリティ難しすぎる問題 • Webエンジニアとしていま知っておきたいWebアクセシビリティ • 10.人や国の不平等をなくそう | SDGsクラブ