本文へ移動
easeweb
ご相談
トピックを検索

画面に映る内容が抜け落ちた動画の書き起こし

コーヒーの淹れ方を紹介する動画で、書き起こしを字幕ファイルからそのまま作ったため、画面のカードにしか出ない分量が、書き起こしを読む人には伝わらない

WCAG 2.2
SC 1.2.8AAA
必須とする規格
Section 508、EN 301 549、JIS X 8341-3 では必須ではない
問題あり <p>このくらい量ります。</p>
アクセシビリティの問題を示した図: 全盲:何グラム量ればいい?
01

問題

動画を見ることも聞くこともできない人が書き起こしを読んでも、分量が分からない

02

試してみる

音と映像をオフにして、豆を何グラム量るか調べてみましょう

スイッチは、動画を見ることも聞くこともできない人の代わりです。プレーヤーと「音声解説」ボタンは使えますが、届くのはテキストだけです。書き起こしを開いてください。

修正を適用すると、映像の内容を含む書き起こしか、ページに書いた手順を読めます。手順の場合、動画にはその手順を映したものだと書き添えてあります。

問題あり 修正できますか?

問題字幕から作った書き起こし

ハウスブレンドの淹れ方

書き起こし

当店のハウスブレンドの淹れ方です。

このくらい量ります。

お湯は少し置きます。

ゆっくり注いで、ここで止めます。

[キッチンタイマーの音]

再現デモです。「問題あり」は意図的にアクセシブルでない状態にしています。

03

修正方法

話す内容も映る内容も、動画のすべてをテキストで伝える

修正前
問題字幕から作った書き起こし
<h2>ハウスブレンドの淹れ方</h2><video id="brew-video" controls preload="metadata"  src="brew-guide.webm" poster="brew-guide.jpg"  data-described="brew-guide.described.webm">  <track kind="captions" srclang="ja" label="日本語"    src="brew-guide.ja.vtt" data-described="brew-guide.described.ja.vtt"></video><button type="button" id="describe" aria-pressed="false">  音声解説</button><details>  <summary>書き起こし</summary>  <p>当店のハウスブレンドの淹れ方です。</p>  <p>このくらい量ります。</p>  <p>お湯は少し置きます。</p>  <p>ゆっくり注いで、ここで止めます。</p>  <p>[キッチンタイマーの音]</p></details><!-- 音声解説版への切り替えと再生位置の引き継ぎ。音声解説のガイドと同じもの。 --><script src="audio-description.js"></script>
問題点3点
  • 書き起こしは字幕ファイルを段落に並べただけで、話した言葉はすべてあっても、映る内容は何もありません。
  • 15 g、250 ml、30秒、3回に分けて注ぐことは、映像の中にしかありません。
  • テキストしか読めない人には、「このくらい」量り、「ここで」止めることしか分かりません。
修正後

プレーヤーのそばに置く、映像の内容を含む書き起こし

<h2>ハウスブレンドの淹れ方</h2><video id="brew-video" controls preload="metadata"  src="brew-guide.webm" poster="brew-guide.jpg"  data-described="brew-guide.described.webm">  <track kind="captions" srclang="ja" label="日本語"    src="brew-guide.ja.vtt" data-described="brew-guide.described.ja.vtt"></video><button type="button" id="describe" aria-pressed="false">  音声解説</button><details>  <summary>書き起こし(映像の内容を含む)</summary>  <p><b>映像:</b>キッチンの台にやかんとカップ。    カードに「コーヒーの淹れ方」。</p>  <p><b>ナレーション:</b>当店のハウスブレンドの淹れ方です。</p>  <p><b>ナレーション:</b>このくらい量ります。</p>  <p><b>映像:</b>はかりに載せた器にスプーンで豆を入れ、はかりが15 gを示す。    隣に250 mlまで入った計量カップ。カードに「豆15 g・お湯250 ml」。</p>  <p><b>ナレーション:</b>お湯は少し置きます。</p>  <p><b>映像:</b>やかんから湯気が上り、タイマーが30秒から減っていく。    カードに「沸騰後、30秒冷ます」。</p>  <p><b>ナレーション:</b>ゆっくり注いで、ここで止めます。</p>  <p><b>映像:</b>やかんからカップの上のドリッパーへ3回に分けて注ぎ、    タイマーが3:00まで進む。カードに「3回に分けて注ぐ・3:00で止める」。</p>  <p>[キッチンタイマーの音]</p></details><!-- 音声解説版への切り替えと再生位置の引き継ぎ。音声解説のガイドと同じもの。 --><script src="audio-description.js"></script>
修正の手順4ステップ
  1. summary の文言を、中身が分かるように「書き起こし(映像の内容を含む)」に変えます。
  2. 話した言葉はすべて順番どおりに残し、誰が話したかを書きます。
  3. 映像が何かを示す箇所ごとに、その時点で映っている動作とカードの文字を、「映像:」の見出しを付けて書きます。これで分量と時間がテキストに入ります。
  4. タイマーの音のように意味のある音は、角かっこ([])に入れて残します。

これで修正前の例は直り、1.2.8を満たします(達成方法G69)。プレーヤーのすぐ下にある普通のテキストなので、点字ディスプレイで読め、ページ内検索で「15 g」が見つかり、動画と同じ変更の中で直せます。字幕と音声解説版は、見る人や聞く人のためにそのまま残します。

04

修正の確認

3項目、マウス不要

確認方法: 音を消して視聴、画面を見ずに視聴、スクリーンリーダー

3件中0件を確認済み

OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。動画やナレーション、テキストを差し替えるたびに確認し直してください。

制限

これは出発点となる実装例であり、すべてのアプリケーションでの適合を保証するものではありません。書き起こしに何が必要かは動画によって変わり、このガイドが代わりに判断することはできません。話し声の字幕は字幕のない動画と、確認されていない自動字幕で、映像の音声解説は音声解説がなく、画面の情報が伝わらない動画で扱っています。ポッドキャストのクリップや無音の動画は、レベルAの1.2.1として書き起こしのないポッドキャストと無音の動画で扱っています。点字ディスプレイを使う人も含め、実際に読む人と、動画が実際に再生されるプレーヤーやプラットフォームで、一連の流れ全体をテストしてください。

よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。

EaseWebのサービス

修正した問題を、次のリリースで再発させない

このガイドのような修正方法を、コーディングエージェントが従うルールと、CIのチェックに組み込みます。あわせて定期的に、キーボードとスクリーンリーダーで手動の再テストを行います。

サービス内容を見る