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
   

   View Slide

2. AbemaTV, Inc. All Rights Reserved

   社内にアクセシビリティー向上を浸透させたい人が、
   アクセシビリティー向上を組織に浸透させていくために
   個人・チームでできる仕組み作りや、アクセシビリティー向上を
   どのようにして組織に浸透させていくかという実例を学べる。
   発表のターゲット
   2
   

   View Slide

3. AbemaTV, Inc. All Rights Reserved

   ● チーム紹介
   ● チームが作られた理由
   ● これまで取り組んだこと
   ● これから取り組むこと
   話す内容
   3
   

   View Slide

4. AbemaTV, Inc. All Rights Reserved

   アクセシビリティータスクフォースとは？
   4
   

   View Slide

5. AbemaTV, Inc. All Rights Reserved

   「その場しのぎではない、問題を根本解決・改善できる仕組み」を
   考え実践し、ABEMA にアクセシビリティー向上を広めるチーム。
   アクセシビリティータスクフォースとは？
   5
   

   View Slide

6. AbemaTV, Inc. All Rights Reserved

   アクセシビリティータスクフォースは
   なぜいる？
   6
   

   View Slide

7. AbemaTV, Inc. All Rights Reserved

   アクセシビリティー向上が個人に依存し、プロセスや仕組みが
   デザインされていなかった。
   その場しのぎで問題を解決するのでなく根本解決・改善できる
   仕組みを考え実践し結果を発信していき、ABEMA 全体で
   アクセシビリティー向上に取り組む目的で組織された。
   アクセシビリティータスクフォースはなぜいる？
   7
   

   View Slide

8. AbemaTV, Inc. All Rights Reserved

   取り組んだこと
   8
   

   View Slide

9. AbemaTV, Inc. All Rights Reserved

   ● リニューアル後アプリの
   お触り会
   ● デザイニング Web
   アクセシビリティの輪読会
   ● アクセシビリティー
   ガイドライン作成
   ● アクセシビリティー向上施策
   取り組んだこと
   9
   ● チームビルディング
   ● OKR の策定
   ● ビジョン・ミッションの浸透
   ● アクセシビリティーの浸透
   ● アクセシビリティーチェック
   

   View Slide

10. AbemaTV, Inc. All Rights Reserved

    ● リニューアル後アプリの
    お触り会
    ● デザイニング Web
    アクセシビリティの輪読会
    ● アクセシビリティー
    ガイドライン作成
    ● アクセシビリティー向上施策
    取り組んだこと
    10
    ● チームビルディング
    ● OKR の策定
    ● ビジョン・ミッションの浸透
    ● アクセシビリティーの浸透
    ● アクセシビリティーチェック
    

    View Slide

11. AbemaTV, Inc. All Rights Reserved

    チームで議論をしやすくしたり意見を出しやすくしたりする
    ために、お互いのことを知る機会を設けた。
    偏愛マップというフレームを使って、お互いが好きなものを
    話し合った。
    チームビルディング
    11
    

    View Slide

12. AbemaTV, Inc. All Rights Reserved

    偏愛マップの例
    12
    

    View Slide

13. AbemaTV, Inc. All Rights Reserved

    ありきたりな自己紹介と質疑応答で終わらせるより、
    自分が好きなものを共有してお互い好きなものを深堀りするのが、
    楽しくお互いのことを知られると思った。
    なぜ偏愛マップを使った？
    13
    

    View Slide

14. AbemaTV, Inc. All Rights Reserved

    偏愛マップでお互いの好きなものについて深堀りしてみて、
    「楽しかった」という声や「新たな一面が見られた」
    という声が上がった。
    個人的には、音楽のアーティストなど今まで知らないことを
    知れたのも良かった。
    偏愛マップに対する自分やチームからの感想
    14
    

    View Slide

15. AbemaTV, Inc. All Rights Reserved

    ● リニューアル後アプリの
    お触り会
    ● デザイニング Web
    アクセシビリティの輪読会
    ● アクセシビリティー
    ガイドライン作成
    ● アクセシビリティー向上施策
    取り組んだこと
    15
    ● チームビルディング
    ● OKR の策定
    ● ビジョン・ミッションの浸透
    ● アクセシビリティーの浸透
    ● アクセシビリティーチェック
    

    View Slide

16. AbemaTV, Inc. All Rights Reserved

    目標を示すことで、パフォーマンスをより出せるようにする
    という考えから、各四半期ごとの OKR と中長期的な OKR を
    設定している。
    合わせて OKR に対するチェックインミーティングや、
    ウィンセッションも週 1 回開催している。
    OKR の策定
    16
    

    View Slide

17. AbemaTV, Inc. All Rights Reserved

    Objective:
    ABEMA の組織全体にアクセシビリティー向上を浸透させる
    一歩を踏み出す
    今期のチーム OKR
    17
    

    View Slide

18. AbemaTV, Inc. All Rights Reserved

    KeyResult:
    ● ガイドラインのプロトタイピングを終えて、
    次のアクションを決めている
    ● 各チーム内でアクセシビリティー向上に関する施策が、
    1 つ以上動いている
    ● アクセシビリティータスクフォースの取り組みを 7 回以上
    発信する
    今期のチーム OKR
    18
    

    View Slide

19. AbemaTV, Inc. All Rights Reserved

    Objective:
    ABEMA にアクセシビリティー向上のためのプロセスや文化がある
    中長期のチーム OKR
    19
    

    View Slide

20. AbemaTV, Inc. All Rights Reserved

    KeyResult:
    ● ABEMA の事業 KPI とアクセシビリティー向上の関連性が
    見える化されている
    ● ABEMA のアクセシビリティーガイドラインを作成し
    運用している
    ● 各プラットフォームごとにアクセシビリティー向上に関する
    施策が定期的にリリースされている
    中長期のチーム OKR
    20
    

    View Slide

21. AbemaTV, Inc. All Rights Reserved

    ● リニューアル後アプリの
    お触り会
    ● デザイニング Web
    アクセシビリティの輪読会
    ● アクセシビリティー
    ガイドライン作成
    ● アクセシビリティー向上施策
    取り組んだこと
    21
    ● チームビルディング
    ● OKR の策定
    ● ビジョン・ミッションの浸透
    ● アクセシビリティーの浸透
    ● アクセシビリティーチェック
    

    View Slide

22. AbemaTV, Inc. All Rights Reserved

    ビジョン
    だれもが思い通りに楽しめる
    ミッション
    ABEMA 内でより多くの人・環境・状況へコンテンツを
    届ける意識が浸透する
    ビジョン・ミッションの浸透
    22
    

    View Slide

23. AbemaTV, Inc. All Rights Reserved

    ビジョンやミッションを掲げるだけでなく、
    社内のデザインシステムにあるアクセシビリティーの
    デザイン原則をビジョンに沿っているか評価したり、
    タスクフォースの OKR をビジョンと照らし合わせて評価した。
    ビジョン・ミッションの浸透
    23
    

    View Slide

24. AbemaTV, Inc. All Rights Reserved

    ● リニューアル後アプリの
    お触り会
    ● デザイニング Web
    アクセシビリティの輪読会
    ● アクセシビリティー
    ガイドライン作成
    ● アクセシビリティー向上施策
    取り組んだこと
    24
    ● チームビルディング
    ● OKR の策定
    ● ビジョン・ミッションの浸透
    ● アクセシビリティーの浸透
    ● アクセシビリティーチェック
    

    View Slide

25. AbemaTV, Inc. All Rights Reserved

    社内にアクセシビリティー向上の基礎知識を広げるため、
    まずは開発部署内の LT 会でアクセシビリティーの基礎を発表した。
    発表は概ね好評で「アクセシビリティーは大事」と、
    Zoom のコメントで書いてくれる人もいた。
    アクセシビリティーの浸透
    25
    

    View Slide

26. AbemaTV, Inc. All Rights Reserved

    発表スライド: アクセシビリティーとは？
    26
    https://speakerdeck.com/kubosho/what-the-accessibility
    

    View Slide

27. AbemaTV, Inc. All Rights Reserved

    ● リニューアル後アプリの
    お触り会
    ● デザイニング Web
    アクセシビリティの輪読会
    ● アクセシビリティー
    ガイドライン作成
    ● アクセシビリティー向上施策
    取り組んだこと
    27
    ● チームビルディング
    ● OKR の策定
    ● ビジョン・ミッションの浸透
    ● アクセシビリティーの浸透
    ● アクセシビリティーチェック
    

    View Slide

28. AbemaTV, Inc. All Rights Reserved

    ABEMA Web チームの有志を募り、WCAG 2.1 の達成基準から
    いくつか項目を抽出して、ABEMA の Web アプリが
    基準に適合しているかテストをした。
    アクセシビリティーチェック
    28
    

    View Slide

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
    

    View Slide

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 ページタイトルの達成基準
    

    View Slide

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 ステータスメッセージ
    

    View Slide

32. AbemaTV, Inc. All Rights Reserved

    テスト結果 (2021 年 4 月時点)
    32
    

    View Slide

33. AbemaTV, Inc. All Rights Reserved

    基準に対して不適合が割とある結果にはなった。
    ただ、アクセシビリティ向上をやれる点がたくさん洗い出せた。
    不適合の箇所については GitHub 上で issue を作り、
    徐々に対応している。
    テストした結果
    33
    

    View Slide

34. AbemaTV, Inc. All Rights Reserved

    GitHub Project の様子
    34
    

    View Slide

35. AbemaTV, Inc. All Rights Reserved

    ● リニューアル後アプリの
    お触り会
    ● デザイニング Web
    アクセシビリティの輪読会
    ● アクセシビリティー
    ガイドライン作成
    ● アクセシビリティー向上施策
    取り組んだこと
    35
    ● チームビルディング
    ● OKR の策定
    ● ビジョン・ミッションの浸透
    ● アクセシビリティーの浸透
    ● アクセシビリティーチェック
    

    View Slide

36. AbemaTV, Inc. All Rights Reserved

    リニューアルをおこなった Web・iOS・Android アプリにおいて、
    複数の視点から触ってみる「お触り会」を実施した。
    ● Web の場合はキーボードで操作したり VoiceOver を
    有効な状態で操作したりということをやった
    ● iOS や Android の場合はそれぞれ VoiceOver や TalkBack を
    有効にした状態で操作することをやった
    リニューアルしたアプリのお触り会
    36
    

    View Slide

37. AbemaTV, Inc. All Rights Reserved

    お触り会で出てきたアクセシビリティーを向上できそうな点
    37
    

    View Slide

38. AbemaTV, Inc. All Rights Reserved

    結果としてアクセシビリティーを向上できる点が複数出てきた。
    その中でも対応の優先度を決めて、高い優先度のものは
    リニューアルしたアプリを全体へリリースする前に改善した。
    リニューアルしたアプリのお触り会
    38
    

    View Slide

39. AbemaTV, Inc. All Rights Reserved

    ● リニューアル後アプリの
    お触り会
    ● デザイニング Web
    アクセシビリティの輪読会
    ● アクセシビリティー
    ガイドライン作成
    ● アクセシビリティー向上施策
    取り組んだこと
    39
    ● チームビルディング
    ● OKR の策定
    ● ビジョン・ミッションの浸透
    ● アクセシビリティーの浸透
    ● アクセシビリティーチェック
    

    View Slide

40. AbemaTV, Inc. All Rights Reserved

    社内の UI デザイナーが主導して有志を募り、
    デザイニング Web アクセシビリティという本を
    1 週間おきにだいたい 1 節ずつ読んだ。
    読んだ感想は主導した UI デザイナーがブログに
    書いてくれるはず。
    デザイニング Web アクセシビリティの輪読会
    40
    

    View Slide

41. AbemaTV, Inc. All Rights Reserved

    デザイニング Web アクセシビリティで良くない例として
    書かれていたものが ABEMA にもあった。
    ● img の alt 属性の値とその近くにある文章が同じ内容
    ○ img の alt 属性の値を空にして文章のみ読むようにした
    ● img を a 要素で囲むと代替テキストの文字色が見づらい
    ○ a 要素に対して color:inherit; のスタイル定義をした
    デザイニング Web アクセシビリティの輪読会
    41
    

    View Slide

42. AbemaTV, Inc. All Rights Reserved

    ● リニューアル後アプリの
    お触り会
    ● デザイニング Web
    アクセシビリティの輪読会
    ● アクセシビリティー
    ガイドライン作成
    ● アクセシビリティー向上施策
    取り組んだこと
    42
    ● チームビルディング
    ● OKR の策定
    ● ビジョン・ミッションの浸透
    ● アクセシビリティーの浸透
    ● アクセシビリティーチェック
    

    View Slide

43. AbemaTV, Inc. All Rights Reserved

    ABEMA 内で使うアクセシビリティーガイドラインを
    アクセシビリティータスクフォース主導で作成中。
    思わずアクセシビリティー向上をやっていきたくなるような、
    楽しいアクセシビリティーガイドラインを作りたい。
    アクセシビリティーガイドラインの作成
    43
    

    View Slide

44. AbemaTV, Inc. All Rights Reserved

    ● リニューアル後アプリの
    お触り会
    ● デザイニング Web
    アクセシビリティの輪読会
    ● アクセシビリティー
    ガイドライン作成
    ● アクセシビリティー向上施策
    取り組んだこと
    44
    ● チームビルディング
    ● OKR の策定
    ● ビジョン・ミッションの浸透
    ● アクセシビリティーの浸透
    ● アクセシビリティーチェック
    

    View Slide

45. AbemaTV, Inc. All Rights Reserved

    チャンネル一覧内の各チャンネルの代替テキストを、
    編成・広報と調整し末尾に「チャンネル」を付ける形で統一した。
    アクセシビリティー向上施策 - 全クライアント共通
    45
    

    View Slide

46. AbemaTV, Inc. All Rights Reserved

    ● ホームの特集モジュールに代替テキストを追加した
    ● テレビエリアからテレビモードへ遷移するときに
    VoiceOver が有効な状態でも遷移できるようにした
    ● チャンネル選択を VoiceOver が有効な状態でも
    操作できるようにした
    主なアクセシビリティー向上施策 - iOS アプリ
    46
    

    View Slide

47. AbemaTV, Inc. All Rights Reserved

    ● ホームにある番組表へ遷移するボタンのタップ領域を広げた
    ● テレビエリアからテレビモードへ遷移するときに
    TalkBack が有効な状態でも遷移できるようにした
    ● デモグラアンケートやジャンルアンケートで使われる
    モーダルウィンドウの TalkBack サポートを向上した
    主なアクセシビリティー向上施策 - Android アプリ
    47
    

    View Slide

48. AbemaTV, Inc. All Rights Reserved

    ● フッターの新規タブで開かれるリンクにアイコンを追加した
    ● モーダルウィンドウを表示したら、モーダルウィンドウ内に
    フォーカスが移動するようにした
    ● ボタンのフォーカスリングをブラウザ標準にした
    主なアクセシビリティー向上施策 - Web アプリ
    48
    

    View Slide

49. AbemaTV, Inc. All Rights Reserved

    ヘルプページのアイコンを各カテゴリーに関連するアイコンにした。
    アクセシビリティー向上施策 - その他
    49
    ↓
    

    View Slide

50. AbemaTV, Inc. All Rights Reserved

    ● リニューアル後アプリの
    お触り会
    ● デザイニング Web
    アクセシビリティの輪読会
    ● アクセシビリティー
    ガイドライン作成
    ● アクセシビリティー向上施策
    取り組んだこと
    50
    ● チームビルディング
    ● OKR の策定
    ● ビジョン・ミッションの浸透
    ● アクセシビリティーの浸透
    ● アクセシビリティーチェック
    

    View Slide

51. AbemaTV, Inc. All Rights Reserved

    これから取り組むこと
    51
    

    View Slide

52. AbemaTV, Inc. All Rights Reserved

    現状はアクセシビリティータスクフォースの各メンバーと、
    各クライアントアプリチームで少しずつ熱が高まっている状況。
    組織全体に熱を広げていくことで、アクセシビリティー向上を
    「特別なもの」「崇高なもの」でなく、情報インフラとして
    息を吸うように意識せずやっていくようにしたい。
    ABEMA の組織全体にアクセシビリティー向上の浸透をする
    52
    

    View Slide

53. AbemaTV, Inc. All Rights Reserved

    アクセシビリティー向上が、既成概念に囚われない新たな発想を
    もたらしたり、もっと役立ったり面白くなったりするという
    考えを広めたい。
    アクセシビリティー向上が品質を上げる一因という認識の
    浸透を図るために、事業 KPI とアクセシビリティー向上の
    関連性の可視化などをしていきたい。
    アクセシビリティー向上で ABEMA のアプリや番組の品質を "上げる"
    53
    

    View Slide

54. AbemaTV, Inc. All Rights Reserved

    アクセシビリティー向上によって品質を上げるだけでなく、
    品質を守るのも大事。品質を確認し続ける体制を作りたい。
    さまざまな場面でアクセシビリティー観点のチェックをして
    基準を満たさない場合は差し戻しされる仕組みを入れたり、
    アクセシビリティーの指標をモニタリングする仕組みを入れたり、
    定期的なユーザーテストの実施もやったりしたい。
    アクセシビリティー向上で ABEMA のアプリや番組の品質を "守る"
    54
    

    View Slide

55. AbemaTV, Inc. All Rights Reserved

    ● ABEMA の組織全体にアクセシビリティー向上の浸透をする
    ● アクセシビリティー向上で ABEMA のアプリや番組の
    品質を "上げる"
    ● アクセシビリティー向上で ABEMA のアプリや番組の
    品質を "守る"
    これから取り組むこと
    55
    

    View Slide

56. AbemaTV, Inc. All Rights Reserved

    まとめ
    56
    

    View Slide

57. AbemaTV, Inc. All Rights Reserved

    ABEMA アクセシビリティータスクフォースがこれまで
    取り組んだこと、そしてこれから取り組むことを紹介しました。
    この発表を受けて、あなたが所属する企業内で
    アクセシビリティー向上を推進していく気持ちが
    高まったのならばそれは大変嬉しいです。
    まとめ
    57
    

    View Slide

58. AbemaTV, Inc. All Rights Reserved

    終
    58
    

    View Slide