ABEMA のアクセシビリティータスクフォースは何をしてきて何をやるか / What ABEMA accessibility task force has done and will do

Muddy Web #2 (https://cyberagent.connpass.com/event/227974/) で発表した内容です。発表内容の概要は次の通りです。

ABEMA ではアクセシビリティータスクフォースを組織して、ABEMA 内にアクセシビリティー向上を浸透させようと試行錯誤しています。

大規模な組織にアクセシビリティー向上を浸透させるためにどのようなことに取り組んだか、またこれからどのようなことに取り組む予定なのかを話します。

この話を聞いて「アクセシビリティー向上を組織に浸透させていくために個人・チームでできる仕組み作り」や「どのようにアクセシビリティー向上を組織に浸透させていくかという実例」といったことを取得できれば幸いです。

Transcript

1. AbemaTV, Inc. All Rights Reserved
 ABEMAのa11y TFは、 何をしてきて何をやるか Muddy Web #2 - 2021 November 12th @kubosho_ 1
2. AbemaTV, Inc. All Rights Reserved
 社内にアクセシビリティー向上を浸透させたい人が、 アクセシビリティー向上を組織に浸透させていくために 個人・チームでできる仕組み作りや、アクセシビリティー向上を どのようにして組織に浸透させていくかという実例を学べる。 発表のターゲット 2
3. AbemaTV, Inc. All Rights Reserved
 • チーム紹介 • チームが作られた理由 • これまで取り組んだこと • これから取り組むこと 話す内容 3
4. AbemaTV, Inc. All Rights Reserved
 アクセシビリティータスクフォースとは？ 4
5. AbemaTV, Inc. All Rights Reserved
 「その場しのぎではない、問題を根本解決・改善できる仕組み」を 考え実践し、ABEMA にアクセシビリティー向上を広めるチーム。 アクセシビリティータスクフォースとは？ 5
6. AbemaTV, Inc. All Rights Reserved
 アクセシビリティータスクフォースは なぜいる？ 6
7. AbemaTV, Inc. All Rights Reserved
 アクセシビリティー向上が個人に依存し、プロセスや仕組みが デザインされていなかった。 その場しのぎで問題を解決するのでなく根本解決・改善できる 仕組みを考え実践し結果を発信していき、ABEMA 全体で アクセシビリティー向上に取り組む目的で組織された。 アクセシビリティータスクフォースはなぜいる？ 7
8. AbemaTV, Inc. All Rights Reserved
 取り組んだこと 8
9. AbemaTV, Inc. All Rights Reserved
 • リニューアル後アプリの お触り会 • デザイニング Web アクセシビリティの輪読会 • アクセシビリティー ガイドライン作成 • アクセシビリティー向上施策 取り組んだこと 9 • チームビルディング • OKR の策定 • ビジョン・ミッションの浸透 • アクセシビリティーの浸透 • アクセシビリティーチェック
10. AbemaTV, Inc. All Rights Reserved
 • リニューアル後アプリの お触り会 • デザイニング Web アクセシビリティの輪読会 • アクセシビリティー ガイドライン作成 • アクセシビリティー向上施策 取り組んだこと 10 • チームビルディング • OKR の策定 • ビジョン・ミッションの浸透 • アクセシビリティーの浸透 • アクセシビリティーチェック
11. AbemaTV, Inc. All Rights Reserved
 チームで議論をしやすくしたり意見を出しやすくしたりする ために、お互いのことを知る機会を設けた。 偏愛マップというフレームを使って、お互いが好きなものを 話し合った。 チームビルディング 11
12. AbemaTV, Inc. All Rights Reserved
 偏愛マップの例 12
13. AbemaTV, Inc. All Rights Reserved
 ありきたりな自己紹介と質疑応答で終わらせるより、 自分が好きなものを共有してお互い好きなものを深堀りするのが、 楽しくお互いのことを知られると思った。 なぜ偏愛マップを使った？ 13
14. AbemaTV, Inc. All Rights Reserved
 偏愛マップでお互いの好きなものについて深堀りしてみて、 「楽しかった」という声や「新たな一面が見られた」 という声が上がった。 個人的には、音楽のアーティストなど今まで知らないことを 知れたのも良かった。 偏愛マップに対する自分やチームからの感想 14
15. AbemaTV, Inc. All Rights Reserved
 • リニューアル後アプリの お触り会 • デザイニング Web アクセシビリティの輪読会 • アクセシビリティー ガイドライン作成 • アクセシビリティー向上施策 取り組んだこと 15 • チームビルディング • OKR の策定 • ビジョン・ミッションの浸透 • アクセシビリティーの浸透 • アクセシビリティーチェック
16. AbemaTV, Inc. All Rights Reserved
 目標を示すことで、パフォーマンスをより出せるようにする という考えから、各四半期ごとの OKR と中長期的な OKR を 設定している。 合わせて OKR に対するチェックインミーティングや、 ウィンセッションも週 1 回開催している。 OKR の策定 16
17. AbemaTV, Inc. All Rights Reserved
 Objective: ABEMA の組織全体にアクセシビリティー向上を浸透させる 一歩を踏み出す 今期のチーム OKR 17
18. AbemaTV, Inc. All Rights Reserved
 KeyResult: • ガイドラインのプロトタイピングを終えて、 次のアクションを決めている • 各チーム内でアクセシビリティー向上に関する施策が、 1 つ以上動いている • アクセシビリティータスクフォースの取り組みを 7 回以上 発信する 今期のチーム OKR 18
19. AbemaTV, Inc. All Rights Reserved
 Objective: ABEMA にアクセシビリティー向上のためのプロセスや文化がある 中長期のチーム OKR 19
20. AbemaTV, Inc. All Rights Reserved
 KeyResult: • ABEMA の事業 KPI とアクセシビリティー向上の関連性が 見える化されている • ABEMA のアクセシビリティーガイドラインを作成し 運用している • 各プラットフォームごとにアクセシビリティー向上に関する 施策が定期的にリリースされている 中長期のチーム OKR 20
21. AbemaTV, Inc. All Rights Reserved
 • リニューアル後アプリの お触り会 • デザイニング Web アクセシビリティの輪読会 • アクセシビリティー ガイドライン作成 • アクセシビリティー向上施策 取り組んだこと 21 • チームビルディング • OKR の策定 • ビジョン・ミッションの浸透 • アクセシビリティーの浸透 • アクセシビリティーチェック
22. AbemaTV, Inc. All Rights Reserved
 ビジョン だれもが思い通りに楽しめる ミッション ABEMA 内でより多くの人・環境・状況へコンテンツを 届ける意識が浸透する ビジョン・ミッションの浸透 22
23. AbemaTV, Inc. All Rights Reserved
 ビジョンやミッションを掲げるだけでなく、 社内のデザインシステムにあるアクセシビリティーの デザイン原則をビジョンに沿っているか評価したり、 タスクフォースの OKR をビジョンと照らし合わせて評価した。 ビジョン・ミッションの浸透 23
24. AbemaTV, Inc. All Rights Reserved
 • リニューアル後アプリの お触り会 • デザイニング Web アクセシビリティの輪読会 • アクセシビリティー ガイドライン作成 • アクセシビリティー向上施策 取り組んだこと 24 • チームビルディング • OKR の策定 • ビジョン・ミッションの浸透 • アクセシビリティーの浸透 • アクセシビリティーチェック
25. AbemaTV, Inc. All Rights Reserved
 社内にアクセシビリティー向上の基礎知識を広げるため、 まずは開発部署内の LT 会でアクセシビリティーの基礎を発表した。 発表は概ね好評で「アクセシビリティーは大事」と、 Zoom のコメントで書いてくれる人もいた。 アクセシビリティーの浸透 25
26. AbemaTV, Inc. All Rights Reserved
 発表スライド: アクセシビリティーとは？ 26 https://speakerdeck.com/kubosho/what-the-accessibility
27. AbemaTV, Inc. All Rights Reserved
 • リニューアル後アプリの お触り会 • デザイニング Web アクセシビリティの輪読会 • アクセシビリティー ガイドライン作成 • アクセシビリティー向上施策 取り組んだこと 27 • チームビルディング • OKR の策定 • ビジョン・ミッションの浸透 • アクセシビリティーの浸透 • アクセシビリティーチェック
28. AbemaTV, Inc. All Rights Reserved
 ABEMA Web チームの有志を募り、WCAG 2.1 の達成基準から いくつか項目を抽出して、ABEMA の Web アプリが 基準に適合しているかテストをした。 アクセシビリティーチェック 28
29. AbemaTV, Inc. All Rights Reserved
 • トップ ◦ https://abema.tv • リニア放送 ◦ https://abema.tv/now-on-air/abe ma-news • エピソード ◦ https://abema.tv/video/episode/ 89-123_s50_p9 テストしたページ 29 • TVOD ◦ https://abema.tv/video/episode/ 182-676_s0_p1 • PPV (ペイパービュー) ◦ https://abema.tv/payperview/D1 xJ2QcexnDsKM • アカウント管理 ◦ https://abema.tv/account
30. AbemaTV, Inc. All Rights Reserved
 • 1.1.1 非テキストコンテンツの 達成基準 • 1.3.1 情報及び関係性の達成基準 • 1.4.4 テキストサイズ変更 • 1.4.10 リフロー テストした達成基準 30 • 2.1.1 キーボードの達成基準 • 2.1.2 キーボードトラップなしの 達成基準 • 2.1.4 文字キーのショートカット • 2.4.1 ブロックスキップの達成基準 • 2.4.2 ページタイトルの達成基準
31. AbemaTV, Inc. All Rights Reserved
 • 2.4.3 フォーカス順序の達成基準 • 2.4.7 フォーカスの可視化の 達成基準 • 2.4.10 セクション見出し • 2.5.3 名前 (name) のラベル テストした達成基準 31 • 3.1.1 ページの言語の達成基準 • 3.1.2 一部分の言語 • 3.1.3 一般的ではない用語 • 3.1.4 略語 • 4.1.1 構文解析の達成基準 • 4.1.2 名前（name）役割（role） 及び値（value）の達成基準 • 4.1.3 ステータスメッセージ
32. AbemaTV, Inc. All Rights Reserved
 テスト結果 (2021 年 4 月時点) 32
33. AbemaTV, Inc. All Rights Reserved
 基準に対して不適合が割とある結果にはなった。 ただ、アクセシビリティ向上をやれる点がたくさん洗い出せた。 不適合の箇所については GitHub 上で issue を作り、 徐々に対応している。 テストした結果 33
34. AbemaTV, Inc. All Rights Reserved
 GitHub Project の様子 34
35. AbemaTV, Inc. All Rights Reserved
 • リニューアル後アプリの お触り会 • デザイニング Web アクセシビリティの輪読会 • アクセシビリティー ガイドライン作成 • アクセシビリティー向上施策 取り組んだこと 35 • チームビルディング • OKR の策定 • ビジョン・ミッションの浸透 • アクセシビリティーの浸透 • アクセシビリティーチェック
36. AbemaTV, Inc. All Rights Reserved
 リニューアルをおこなった Web・iOS・Android アプリにおいて、 複数の視点から触ってみる「お触り会」を実施した。 • Web の場合はキーボードで操作したり VoiceOver を 有効な状態で操作したりということをやった • iOS や Android の場合はそれぞれ VoiceOver や TalkBack を 有効にした状態で操作することをやった リニューアルしたアプリのお触り会 36
37. AbemaTV, Inc. All Rights Reserved
 お触り会で出てきたアクセシビリティーを向上できそうな点 37
38. AbemaTV, Inc. All Rights Reserved
 結果としてアクセシビリティーを向上できる点が複数出てきた。 その中でも対応の優先度を決めて、高い優先度のものは リニューアルしたアプリを全体へリリースする前に改善した。 リニューアルしたアプリのお触り会 38
39. AbemaTV, Inc. All Rights Reserved
 • リニューアル後アプリの お触り会 • デザイニング Web アクセシビリティの輪読会 • アクセシビリティー ガイドライン作成 • アクセシビリティー向上施策 取り組んだこと 39 • チームビルディング • OKR の策定 • ビジョン・ミッションの浸透 • アクセシビリティーの浸透 • アクセシビリティーチェック
40. AbemaTV, Inc. All Rights Reserved
 社内の UI デザイナーが主導して有志を募り、 デザイニング Web アクセシビリティという本を 1 週間おきにだいたい 1 節ずつ読んだ。 読んだ感想は主導した UI デザイナーがブログに 書いてくれるはず。 デザイニング Web アクセシビリティの輪読会 40
41. AbemaTV, Inc. All Rights Reserved
 デザイニング Web アクセシビリティで良くない例として 書かれていたものが ABEMA にもあった。 • img の alt 属性の値とその近くにある文章が同じ内容 ◦ img の alt 属性の値を空にして文章のみ読むようにした • img を a 要素で囲むと代替テキストの文字色が見づらい ◦ a 要素に対して color:inherit; のスタイル定義をした デザイニング Web アクセシビリティの輪読会 41
42. AbemaTV, Inc. All Rights Reserved
 • リニューアル後アプリの お触り会 • デザイニング Web アクセシビリティの輪読会 • アクセシビリティー ガイドライン作成 • アクセシビリティー向上施策 取り組んだこと 42 • チームビルディング • OKR の策定 • ビジョン・ミッションの浸透 • アクセシビリティーの浸透 • アクセシビリティーチェック
43. AbemaTV, Inc. All Rights Reserved
 ABEMA 内で使うアクセシビリティーガイドラインを アクセシビリティータスクフォース主導で作成中。 思わずアクセシビリティー向上をやっていきたくなるような、 楽しいアクセシビリティーガイドラインを作りたい。 アクセシビリティーガイドラインの作成 43
44. AbemaTV, Inc. All Rights Reserved
 • リニューアル後アプリの お触り会 • デザイニング Web アクセシビリティの輪読会 • アクセシビリティー ガイドライン作成 • アクセシビリティー向上施策 取り組んだこと 44 • チームビルディング • OKR の策定 • ビジョン・ミッションの浸透 • アクセシビリティーの浸透 • アクセシビリティーチェック
45. AbemaTV, Inc. All Rights Reserved
 チャンネル一覧内の各チャンネルの代替テキストを、 編成・広報と調整し末尾に「チャンネル」を付ける形で統一した。 アクセシビリティー向上施策 - 全クライアント共通 45
46. AbemaTV, Inc. All Rights Reserved
 • ホームの特集モジュールに代替テキストを追加した • テレビエリアからテレビモードへ遷移するときに VoiceOver が有効な状態でも遷移できるようにした • チャンネル選択を VoiceOver が有効な状態でも 操作できるようにした 主なアクセシビリティー向上施策 - iOS アプリ 46
47. AbemaTV, Inc. All Rights Reserved
 • ホームにある番組表へ遷移するボタンのタップ領域を広げた • テレビエリアからテレビモードへ遷移するときに TalkBack が有効な状態でも遷移できるようにした • デモグラアンケートやジャンルアンケートで使われる モーダルウィンドウの TalkBack サポートを向上した 主なアクセシビリティー向上施策 - Android アプリ 47
48. AbemaTV, Inc. All Rights Reserved
 • フッターの新規タブで開かれるリンクにアイコンを追加した • モーダルウィンドウを表示したら、モーダルウィンドウ内に フォーカスが移動するようにした • ボタンのフォーカスリングをブラウザ標準にした 主なアクセシビリティー向上施策 - Web アプリ 48
49. AbemaTV, Inc. All Rights Reserved
 ヘルプページのアイコンを各カテゴリーに関連するアイコンにした。 アクセシビリティー向上施策 - その他 49 ↓
50. AbemaTV, Inc. All Rights Reserved
 • リニューアル後アプリの お触り会 • デザイニング Web アクセシビリティの輪読会 • アクセシビリティー ガイドライン作成 • アクセシビリティー向上施策 取り組んだこと 50 • チームビルディング • OKR の策定 • ビジョン・ミッションの浸透 • アクセシビリティーの浸透 • アクセシビリティーチェック
51. AbemaTV, Inc. All Rights Reserved
 これから取り組むこと 51
52. AbemaTV, Inc. All Rights Reserved
 現状はアクセシビリティータスクフォースの各メンバーと、 各クライアントアプリチームで少しずつ熱が高まっている状況。 組織全体に熱を広げていくことで、アクセシビリティー向上を 「特別なもの」「崇高なもの」でなく、情報インフラとして 息を吸うように意識せずやっていくようにしたい。 ABEMA の組織全体にアクセシビリティー向上の浸透をする 52
53. AbemaTV, Inc. All Rights Reserved
 アクセシビリティー向上が、既成概念に囚われない新たな発想を もたらしたり、もっと役立ったり面白くなったりするという 考えを広めたい。 アクセシビリティー向上が品質を上げる一因という認識の 浸透を図るために、事業 KPI とアクセシビリティー向上の 関連性の可視化などをしていきたい。 アクセシビリティー向上で ABEMA のアプリや番組の品質を "上げる" 53
54. AbemaTV, Inc. All Rights Reserved
 アクセシビリティー向上によって品質を上げるだけでなく、 品質を守るのも大事。品質を確認し続ける体制を作りたい。 さまざまな場面でアクセシビリティー観点のチェックをして 基準を満たさない場合は差し戻しされる仕組みを入れたり、 アクセシビリティーの指標をモニタリングする仕組みを入れたり、 定期的なユーザーテストの実施もやったりしたい。 アクセシビリティー向上で ABEMA のアプリや番組の品質を "守る" 54
55. AbemaTV, Inc. All Rights Reserved
 • ABEMA の組織全体にアクセシビリティー向上の浸透をする • アクセシビリティー向上で ABEMA のアプリや番組の 品質を "上げる" • アクセシビリティー向上で ABEMA のアプリや番組の 品質を "守る" これから取り組むこと 55
56. AbemaTV, Inc. All Rights Reserved
 まとめ 56
57. AbemaTV, Inc. All Rights Reserved
 ABEMA アクセシビリティータスクフォースがこれまで 取り組んだこと、そしてこれから取り組むことを紹介しました。 この発表を受けて、あなたが所属する企業内で アクセシビリティー向上を推進していく気持ちが 高まったのならばそれは大変嬉しいです。 まとめ 57
58. AbemaTV, Inc. All Rights Reserved
 終 58