Slide 1
Slide 1 text
個人からチームに広げるア
クセシビリティ向上の輪
2022年7月1日 UIT Meetup vol.16「ちゃんとやってる？アクセシビリティ」
@kubosho_
Slide 2
Slide 2 text
自己紹介
● 株式会社AbemaTV 開発本部開発局 Webフロ
ントエンドエンジニア
● CyberAgent Next Experts (アクセシビリティ)
● ウェブアクセシビリティ基盤委員会
(WAIC) 実装
作業部会 委員
久保田翔太 @kubosho_
Slide 3
Slide 3 text
1. 「ちゃんとやる」のは難しい
2. 個人からチームに広げる方法
3. ABEMAのアクセシビリティについて
話す内容
Slide 4
Slide 4 text
「ちゃんとやる」のは難しい
Slide 5
Slide 5 text
「ちゃんと」とは
ちゃんと［副］(スル)
1. 少しも乱れがなく、よく整っているさま。「部屋の中を—かたづける」
2. 確実で間違いのないさま。「言われたことは—やる」
3. 結果が十分であるさま。「朝食は—食べてくる」
4. すばやく動作をするさま。さっと
出典: 「ちゃんと」の意味や使い方 わかりやすく解説 Weblio辞書
Slide 6
Slide 6 text
「ちゃんとやる」のは難しい
● 確実に間違いがない状態は、アクセシビリティにはない
● WCAGの最高レベル (AAA) に適合しているコンテンツでさえも、
アクセシブルではない状態・状況・環境はありえる
Slide 7
Slide 7 text
とはいえ「やらない」のは違う
● 法律面
○ 障害者差別解消法
○ 障害者情報アクセシビリティ・コミュニケーション施策推進法
● 社会に対する責任
○ SDGs・ESG・CSR
● 定性的な面
○ アプリストアのレビューでアクセシビリティが起因で評価が上下する
○ 個人のやる気
Slide 8
Slide 8 text
リスク面ばかり考えても楽しくない
Slide 9
Slide 9 text
アクセシビリティ向上を自分ごと化する
● 強制されてやるのは楽しくない
● 自分達にも関係あるんだと思うような意義を定義することで、解
像度が上がったり楽しくアクセシビリティ向上ができたりする
Slide 10
Slide 10 text
アクセシビリティが向上すると自分も嬉しい
CDNの障害で画像が見ら
れない場合でも、代替テキ
ストを設定しておくことで内
容が分かる。
マウスやトラックパッドの充
電が切れて使えない場合
でも、キーボード操作に対
応することで、問題なく操
作できる。
自動再生のコンテンツ
が、初期状態では無音
になっていることで、ビッ
クリしない。
イラスト出典: いらすとや
Slide 11
Slide 11 text
個人からチームに広げる方法
Slide 12
Slide 12 text
アクセシビリティ向上を個人からチームに広げる方法一覧
● 始めるハードルを下げる
● アクセシビリティを減点法でとらえない
● アクセシビリティ向上を先導する人を決める
● チャットツール上でアクセシビリティに関するチャンネルを作る
● 改善事例を積み重ねる
● ビジョンを決める
● さまざまな職種・熟練度の人を巻き込む
● 発信する
● ガイドラインやポリシーを定義する
Slide 13
Slide 13 text
始めるハードルを下げる
● まずはサービスにとって大事な部分から始める
○ 動画系のサービスであれば、動画プレイヤーなど
● まずは手元のスマホでスクリーンリーダーを使ってみる
○ VoiceOver・Talkbackなどで困りそうな部分をなんとなく把握する
● 妥協する基準を事前に決めておく
○ 納期との兼ね合い・代替コンテンツを出すために必要なデータが用意されていないな
ど
Slide 14
Slide 14 text
アクセシビリティを減点法でとらえない
● アクセシビリティ向上をやっていくなかで、今はできなかったり間
違った対応をしてしまったりすることもある
● 減点法にするとアクセシビリティ向上に対して萎縮する
● 前より良くなったという視点に立つ
● 間違った対応も「惜しい点はこうすると良くなる」とオブラートに包
む表現をした上で改善案も出す言い方をしたい
Slide 15
Slide 15 text
アクセシビリティ向上を先導する人を決める
● 先導するのに知識量は関係ない。先導するかしないか
● 先導することを宣言すると上長や同僚が助けてくれる可能性がある
● 勉強会の懇親会やブログ・SNSでアクセシビリティ向上を先導している
と言うことで有志が助けてくれる可能性がある
● 先導するのに大変な部分はあるので、自分の中でアクセシビリティ向
上をなぜやっていくのか言語化して心の拠り所を作る
○ 自分がアクセシビリティ向上に力を入れる理由
Slide 16
Slide 16 text
チャットツール上でアクセシビリティに関するチャンネルを作る
● 箱を用意することで、情報の共有や質問をしやすくなる
● アクセシビリティを向上したときに発信する場ができる
● 情報が検索可能になる、アクセシブルになる
Slide 17
Slide 17 text
改善事例を積み重ねる
● Lighthouseのアクセシビリティの点数を上げてみるなど
● 使いやすくなったという声がSNSやアプリストア上で挙がる
○ 嬉しい！！
● 発信することも踏まえて、まとまった単位でアクセシビリティ向上を
やると、発信しやすくなる
● 実績が積み重なることで、仲間が増えたり、より工数を要する改善
をやれる流れができたりする
Slide 18
Slide 18 text
ビジョンを決める
● 個人の思いからチームとしての思いに切り替える役目を持つ
● サービス特性に合わせた言葉を定義することで、チーム内でなぜやる
のか共有できる
● できれば人を巻き込んでからビジョンを一緒に決める作業をやっていく
と各個人の価値観も見えてくる
Slide 19
Slide 19 text
アクセシビリティビジョンを企業理念やビジョンと紐づける
企業理念やビジョンに「すべての人に〜」「みんなに〜」のような言葉がある
場合はアクセシビリティと紐づけるチャンス。
ABEMAでは、FIFAワールドカップ2022全試合の無料生中継決定の告知
動画 で「いつでもどこでもワールドカップをすべてのひとに」と謳った。
結果として、言葉と紐づける形でアクセシビリティ向上の動きをより言い出し
やすくなった。
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
ABEMAのアクセシビリティについて
Slide 25
Slide 25 text
アクセシビリティタスクフォースの歴史
● 2020年初頭に設立
○ 最初は自分以外のアクセシビリティエキスパートが旗振り役となっ
てアクセシビリティタスクフォースができた
● 目的は、アクセシビリティ向上のためのプロセスや文化を作る
● 全員が兼務で参加していて、以下の構成で活動中
○ 各クライアントアプリのエンジニア
○ デザイナー
○ プロジェクトマネージャー
Slide 26
Slide 26 text
ABEMAのアクセシビリティビジョン
「だれもが思い通りに楽しめる」
Slide 27
Slide 27 text
アクセシビリティタスクフォースがやっていること
● アクセシビリティ改善
● アクセシビリティ関連のレビュー・質問や相談の回答
● アクセシビリティの啓蒙・教育活動
Slide 28
Slide 28 text
アクセシビリティ向上事例
Slide 29
Slide 29 text
カラーコントラスト比の向上
#51C300
#33AA22
#DDAA00
2018年3月以降のキーカラー。黒背景と組み合わせた場合は
9.16:1と
いうコントラスト比になる。
2019年3月以降のキーカラー。黒背景と組み合わせた場合のコントラス
ト比は6.91:1となった。白背景と組み合わせた場合は以前のキーカラー
と比較してコントラスト比が上がった。
2020年4月以降のキーカラー。黒背景と組み合わせたときのコント
ラスト比が9.82:1となって過去最高のコントラスト比になる。白背景
とキーカラーは組み合わせないようにした。
Slide 30
Slide 30 text
ネイティブアプリのアクセシビリティ向上事例
● iOSアプリにおけるテレビのチャンネル選択UIの改善
○ ABEMA iOS アプリがアクセシビリティ改善をリリースするまで
● Androidアプリにおけるオンボーディングの改善
○ モダンな技術と開発戦略で挑む
ABEMA Androidアプリのリニューアル
Slide 31
Slide 31 text
その他のアクセシビリティ向上事例
● フォーカスリングをブラウザ標準に変更した
● Windows環境でUDフォントを使うようにした
● 編成・広報と連携して、チャンネル画像の代替テキストの末尾に必ず
「チャンネル」を付けることにした
● リンクにhover時のスタイルを定義していない場合、lintエラーになるよう
にした
Slide 32
Slide 32 text
アクセシビリティのレビュー・質問や相談の回答
Slide 33
Slide 33 text
アクセシビリティのレビュー・質問・相談事例
● 新機能をアクセシビリティ観点からレビュー
● サムネイルの代替テキストにこういったテキストを入れたいという質問
● 作成中の機能についてデザイナーからアクセシビリティ観点で相談
Slide 34
Slide 34 text
アクセシビリティの啓蒙・教育
Slide 35
Slide 35 text
啓蒙・教育の事例
● 視覚障害当事者がどのようにアプリを使用しているかデモ
● デザイニングWebアクセシビリティの輪読会実施
● 社内のLT会でアクセシビリティについて話す
○ アクセシビリティーとは？
● アクセシビリティポリシーの策定と開発フローへの組み込み（組
み込みはまだ途中）
Slide 36
Slide 36 text
まとめ
Slide 37
Slide 37 text
まとめ
● いきなりちゃんとやろうとせず、始めるハードルを下げる
● アクセシビリティ向上を始めるときは自分事化する
● 個人からチームにアクセシビリティ向上の輪を広げる
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
参考リンク
● 自社サービスのアクセシビリティ向上、良いパターンとアンチパターン
（GAAD 2022）
● AbemaTVのアクセシビリティ 小さな一歩｜シュンスケ
｜ABEMA｜note
● Webアクセシビリティ難しすぎる問題
● Webエンジニアとしていま知っておきたいWebアクセシビリティ
● 10.人や国の不平等をなくそう | SDGsクラブ