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

by Shota Kubota

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Slide 43

Slide 43 text

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Slide 46

Slide 46 text

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Slide 49

Slide 49 text

Slide 50

Slide 50 text

Slide 51

Slide 51 text

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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