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