Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Shota Kubota
November 12, 2021

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

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

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

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

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

Shota Kubota

November 12, 2021
Tweet

More Decks by Shota Kubota

Other Decks in Technology

Transcript

  1. AbemaTV, Inc. All Rights Reserved

    ABEMAのa11y TFは、
    何をしてきて何をやるか
    Muddy Web #2 - 2021 November 12th
    @kubosho_
    1

    View full-size slide

  2. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  3. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  4. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  5. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  6. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  7. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  8. AbemaTV, Inc. All Rights Reserved

    取り組んだこと
    8

    View full-size slide

  9. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  10. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  11. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  12. AbemaTV, Inc. All Rights Reserved

    偏愛マップの例
    12

    View full-size slide

  13. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  14. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  15. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  16. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  17. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  18. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  19. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  20. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  21. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  22. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  23. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  24. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  25. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  26. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  27. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  28. AbemaTV, Inc. All Rights Reserved

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

    View full-size 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 full-size 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 full-size 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 full-size slide

  32. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  33. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  34. AbemaTV, Inc. All Rights Reserved

    GitHub Project の様子
    34

    View full-size slide

  35. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  36. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  37. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  38. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  39. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  40. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  41. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  42. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  43. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  44. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  45. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  46. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  47. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  48. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  49. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  50. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  51. AbemaTV, Inc. All Rights Reserved

    これから取り組むこと
    51

    View full-size slide

  52. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  53. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  54. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  55. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  56. AbemaTV, Inc. All Rights Reserved

    まとめ
    56

    View full-size slide

  57. AbemaTV, Inc. All Rights Reserved

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

    View full-size slide

  58. AbemaTV, Inc. All Rights Reserved


    58

    View full-size slide