Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

ABEMA のアクセシビリティータスクフォースは何をしてきて何をやるか / What ABEM...

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
 • チーム紹介 • チームが作られた理由 •

    これまで取り組んだこと • これから取り組むこと 話す内容 3
  2. AbemaTV, Inc. All Rights Reserved
 • リニューアル後アプリの お触り会 • デザイニング

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

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

    Web アクセシビリティの輪読会 • アクセシビリティー ガイドライン作成 • アクセシビリティー向上施策 取り組んだこと 15 • チームビルディング • OKR の策定 • ビジョン・ミッションの浸透 • アクセシビリティーの浸透 • アクセシビリティーチェック
  5. AbemaTV, Inc. All Rights Reserved
 目標を示すことで、パフォーマンスをより出せるようにする という考えから、各四半期ごとの OKR と中長期的な OKR

    を 設定している。 合わせて OKR に対するチェックインミーティングや、 ウィンセッションも週 1 回開催している。 OKR の策定 16
  6. AbemaTV, Inc. All Rights Reserved
 KeyResult: • ガイドラインのプロトタイピングを終えて、 次のアクションを決めている •

    各チーム内でアクセシビリティー向上に関する施策が、 1 つ以上動いている • アクセシビリティータスクフォースの取り組みを 7 回以上 発信する 今期のチーム OKR 18
  7. AbemaTV, Inc. All Rights Reserved
 KeyResult: • ABEMA の事業 KPI

    とアクセシビリティー向上の関連性が 見える化されている • ABEMA のアクセシビリティーガイドラインを作成し 運用している • 各プラットフォームごとにアクセシビリティー向上に関する 施策が定期的にリリースされている 中長期のチーム OKR 20
  8. AbemaTV, Inc. All Rights Reserved
 • リニューアル後アプリの お触り会 • デザイニング

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

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

    Web アクセシビリティの輪読会 • アクセシビリティー ガイドライン作成 • アクセシビリティー向上施策 取り組んだこと 27 • チームビルディング • OKR の策定 • ビジョン・ミッションの浸透 • アクセシビリティーの浸透 • アクセシビリティーチェック
  11. AbemaTV, Inc. All Rights Reserved
 ABEMA Web チームの有志を募り、WCAG 2.1 の達成基準から

    いくつか項目を抽出して、ABEMA の Web アプリが 基準に適合しているかテストをした。 アクセシビリティーチェック 28
  12. 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
  13. 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 ページタイトルの達成基準
  14. 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 ステータスメッセージ
  15. AbemaTV, Inc. All Rights Reserved
 • リニューアル後アプリの お触り会 • デザイニング

    Web アクセシビリティの輪読会 • アクセシビリティー ガイドライン作成 • アクセシビリティー向上施策 取り組んだこと 35 • チームビルディング • OKR の策定 • ビジョン・ミッションの浸透 • アクセシビリティーの浸透 • アクセシビリティーチェック
  16. AbemaTV, Inc. All Rights Reserved
 リニューアルをおこなった Web・iOS・Android アプリにおいて、 複数の視点から触ってみる「お触り会」を実施した。 •

    Web の場合はキーボードで操作したり VoiceOver を 有効な状態で操作したりということをやった • iOS や Android の場合はそれぞれ VoiceOver や TalkBack を 有効にした状態で操作することをやった リニューアルしたアプリのお触り会 36
  17. AbemaTV, Inc. All Rights Reserved
 • リニューアル後アプリの お触り会 • デザイニング

    Web アクセシビリティの輪読会 • アクセシビリティー ガイドライン作成 • アクセシビリティー向上施策 取り組んだこと 39 • チームビルディング • OKR の策定 • ビジョン・ミッションの浸透 • アクセシビリティーの浸透 • アクセシビリティーチェック
  18. AbemaTV, Inc. All Rights Reserved
 社内の UI デザイナーが主導して有志を募り、 デザイニング Web

    アクセシビリティという本を 1 週間おきにだいたい 1 節ずつ読んだ。 読んだ感想は主導した UI デザイナーがブログに 書いてくれるはず。 デザイニング Web アクセシビリティの輪読会 40
  19. AbemaTV, Inc. All Rights Reserved
 デザイニング Web アクセシビリティで良くない例として 書かれていたものが ABEMA

    にもあった。 • img の alt 属性の値とその近くにある文章が同じ内容 ◦ img の alt 属性の値を空にして文章のみ読むようにした • img を a 要素で囲むと代替テキストの文字色が見づらい ◦ a 要素に対して color:inherit; のスタイル定義をした デザイニング Web アクセシビリティの輪読会 41
  20. AbemaTV, Inc. All Rights Reserved
 • リニューアル後アプリの お触り会 • デザイニング

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

    Web アクセシビリティの輪読会 • アクセシビリティー ガイドライン作成 • アクセシビリティー向上施策 取り組んだこと 44 • チームビルディング • OKR の策定 • ビジョン・ミッションの浸透 • アクセシビリティーの浸透 • アクセシビリティーチェック
  22. AbemaTV, Inc. All Rights Reserved
 • ホームの特集モジュールに代替テキストを追加した • テレビエリアからテレビモードへ遷移するときに VoiceOver

    が有効な状態でも遷移できるようにした • チャンネル選択を VoiceOver が有効な状態でも 操作できるようにした 主なアクセシビリティー向上施策 - iOS アプリ 46
  23. AbemaTV, Inc. All Rights Reserved
 • ホームにある番組表へ遷移するボタンのタップ領域を広げた • テレビエリアからテレビモードへ遷移するときに TalkBack

    が有効な状態でも遷移できるようにした • デモグラアンケートやジャンルアンケートで使われる モーダルウィンドウの TalkBack サポートを向上した 主なアクセシビリティー向上施策 - Android アプリ 47
  24. AbemaTV, Inc. All Rights Reserved
 • リニューアル後アプリの お触り会 • デザイニング

    Web アクセシビリティの輪読会 • アクセシビリティー ガイドライン作成 • アクセシビリティー向上施策 取り組んだこと 50 • チームビルディング • OKR の策定 • ビジョン・ミッションの浸透 • アクセシビリティーの浸透 • アクセシビリティーチェック
  25. AbemaTV, Inc. All Rights Reserved
 • ABEMA の組織全体にアクセシビリティー向上の浸透をする • アクセシビリティー向上で

    ABEMA のアプリや番組の 品質を "上げる" • アクセシビリティー向上で ABEMA のアプリや番組の 品質を "守る" これから取り組むこと 55