動画にまつわるアクセシビリティ要件を探る
https://gyazo.com/6fc896bd1a716f9e794408cf0b216368
この資料はアクセシビリティカンファレンス福岡 前夜祭のLT資料です。
https://gyazo.com/5510d4e88c34b7dc94f91817952946e7
メニューのドキュメントアイコンより「Start presentation」クリックでプレゼンテーションが始まります
自己紹介
yamanoku.icon @ yamanoku
大山奥人, おおやまみちのく a.k.a やまのく
X（旧Twitter）
GitHub
2024年6月より株式会社Schooにてフロントエンドにまつわるお仕事をしています
得意領域
マークアップ・フロントエンド・UIデザイン・アクセシビリティ
既婚で1児の父と猫🐈🐈🐈と犬🐶の飼い主
福岡に来るのは2019年ぶり
PR：株式会社Schoo
https://gyazo.com/5f0d1d66932e276b39ec6dbbc7e2014b
社会人向けのオンライン学習ツール「Schoo」運営
法人向けオンライン研修サービス・高等教育機関向けDXプラットフォーム
地方創生にまつわる新規事業
オンライン学習に「動画」を用いたサービス
日常の中に潜む「動画」
エンターテイメント
Abema TV、TVer
SNS、マーケティング
YouTube、TikTok、Instagram
学習・eラーニング
Udemy、Schoo
会議
Zoom、Google Meet
勉強会、カンファレンスの配信
アクセシビリティカンファレンス福岡 2024でもある模様
動画におけるアクセシビリティってどういうものがあったっけ？
「動画にまつわるアクセシビリティ要件を探る」
WCAGにおける動画・音声の達成基準
ガイドライン 1.2: 時間依存メディアを理解する
1.2.1 音声のみ及び映像のみ (収録済)
1.2.2 キャプション (収録済)
1.2.3 音声解説、又はメディアに対する代替 (収録済)
1.2.4 キャプション (ライブ)
1.2.5 音声解説 (収録済)
1.2.6 手話 (収録済)
1.2.7 拡張音声解説 (収録済)
1.2.8 メディアに対する代替 (収録済)
1.2.9 音声のみ (ライブ)
動画の種類
収録済→オンデマンド配信
事前に録画されたものの配信、アーカイブ動画
ライブ→ライブストリーミング配信
リアルタイムで配信されているもの
収録（オンデマンド配信）に切り替わることがある
Media Accessibility User Requirements
https://gyazo.com/4d26e5a521bff25e6972be6654b3f32f
メディア関連のユーザーのアクセシビリティ要求まとめ
ワーキンググループによるドラフト
2021年で止まってる
Making Audio and Video Media Accessible
https://gyazo.com/3ef7a9329819909a152f3785305a93fa
W3C Web Accessibility Initiativeによるまとめページ
合計8章によるまとめ
WCAGの達成基準にも触れている
今回はこちらを参照してみる
ユースケースを理解する
障害のある人たちがどのように動画や音声を使っているのかを知る
アクセシブルなメディアがどのように役立つかを知る
組織としてのベネフィット、ビジネスでの活用を知る
コンテンツからアクセシブルにできないか計画する
要件定義から考える
ビジネス要件としてどうメリットがあるか
コスト面を考えて優先順位をつける
社内で開発できるのか・外注すべきなのかにも触れている
どういうメディアの場合はどのWCAGの達成基準があるのかのチェックリスト
音声のみ
動画のみ
音声と動画が含まれる場合
動画コンテンツでの配慮
発作を引き起こさないようにする
点滅の回避（ポケモンショック）
話し手の視認性を考慮する
話し手の顔がよく見えるように明るい場所で話す
視覚情報の記述を考慮する
ビデオに表示されるテキストを含め、コンテンツを理解するために必要な視覚的情報を説明する
オーバーレイテキストを読みやすくする
字幕背景でのコントラスト比の考慮
手話を考慮する (WCAG AAA)
視覚情報の代替手段
統合型（Integrated description）
音声解説をメインの音声トラックに自然に組み込む方法
トレーニングビデオや教育コンテンツ、料理動画など
動画が1つで済むため、シンプルで使いやすい
別バージョン型（Alternative video）
音声解説付きと音声解説なしの2つの動画を用意する方法
職場に必要なのは、あなたのやさしさです？ | SmartHR ACCESSIBILITY（スマートHR アクセシビリティ）｜仕組みで解決できることを、やさしさで解決しない。
解説を追加することでメインの内容が聞き取りにくくなる場合や、音声解説が作品の雰囲気に影響を与える場合に利点
ファイル分離型（Separate file）
解説は別の音声トラックや、タイミング付きのテキストファイル（例: 字幕）で用意しておく方法
視聴者が解説の有無を自由に選択できる点で利点
字幕
オープンキャプション
動画自体に載っている字幕
消すことはできない
翻訳などができない
クローズドキャプション
動画プレイヤーによる機能
消すことができる
翻訳が可能（データがあれば）
テキストデータとして存在する（トランスクリプトとも関連）
キャプションのカスタマイズ性
文字色を変えられる
背景色を変えられる
発話しているタイミングで特定の場所をハイライトする
リアルタイム配信
Communication Access Realtime Translation（CART）ツール
UDトーク
https://www.youtube.com/watch?v=ecFKsXnMAgw
トランスクリプト
音声内容の書き起こし（どちらかというと音声寄り）
https://gyazo.com/d4056b8838832f2cfde119f0442f1bab
UIT INSIDE
言語が違う場合、翻訳を通して確認できる
生成AIによる書き起こしサービスも増えてきている
各種サービス
AmiVoice
Amazon Transcribe
Speech-to-Text（Google）
Microsoft Teams
字幕エディター for YouTube & ファイル | UDトーク
https://gyazo.com/d36d98cb3aa6467f5d4b4c1c8212d2ed
手話
手話を収録するための手引について触れている
撮影時のコツ
全身が映るように
重要な内容を隠さないようにする
余談
技術からの解決も考えたい
SureTalk | 手話と音声の円滑なコミュニケーション！
2025年のデフリンピックで活用
ブラジル手話のツール「VLibras」
VLibras — Governo Digital
https://gyazo.com/3c76986ac2d84a23ffa5feb60d262e23
Unity製
選択した文字に対してCGのキャラクターがブラジル手話をしてくれる
React VLibrasReact.js.icon
vue-vlibrasVue.js.icon
angular-vlibrasAngular.icon
動画プレイヤーのアクセシビリティ
さまざまなUIが存在する複雑GUIなのではないか
全画面表示
シークバー
音声
一時停止・再生
〇〇秒進む・戻る
再生スピード（倍速・低速）
画質調整
チャット欄
ストリームでのコメント表示
ライブストリーミングでのチャットにおけるアクセシビリティ
Web Chat accessibility considerations - craigabbott.co.uk
音声・動画のコンテンツを再生しつつ通知してしまうと煩わしくなってしまいそう…
などなど
https://gyazo.com/0d16b5270115e7eff5e1800d9ec81d42 https://schoo.jp/class/2697/archive/
まとめ
動画にまつわるアクセシビリティについて
日常における動画は必要不可欠な存在になった
WCAGの達成基準をさらいつつ、Making Audio and Video Media Accessibleを参考にしていく
労力がかかる部分は生成AIの力を借りれないか探ってみる
動画プレイヤーは複雑GUI
つぎはどうする？！？！？！
動画プレイヤーUIでの最低限の操作（マウス・キーボード操作）ができるようになっている
動画配信というドメインを深ぼり、特性を理解する
当事者へのユーザーインタビューやりたい
「俺の」シリーズ
Making Audio and Video Media Accessibleの翻訳活動
俺たちの動画アクセシビリティ道はこれからだ！
Thank you for listening !
https://gyazo.com/4c1d0df4903765cc351797c10f903ba1