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

Source: https://easeweb.dev/learn/descriptive-transcripts
Topics: 画像とメディア > 動画に完全なテキストの代替がある (WCAG 1.2.8)
The fix: 動画が話す言葉すべてに、映る場面ごとの分量、動作、画面の文字を加えた書き起こしを作り、プレーヤーのすぐそばに置きます。または、レシピをページ自体の文章として書き、動画がその手順と同じ内容だと示します。
Test with: sound off, screen off, screen reader
References: https://www.w3.org/WAI/WCAG22/Understanding/media-alternative-prerecorded.html https://www.w3.org/WAI/media/av/transcripts/ https://www.w3.org/WAI/WCAG22/Techniques/general/G69 https://www.w3.org/WAI/WCAG22/Techniques/general/G58 https://www.w3.org/WAI/WCAG22/Techniques/failures/F74 https://www.w3.org/TR/WCAG22/#dfn-media-alternative-for-text https://github.com/ableplayer/ableplayer https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/figcaption

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

## 場面

コーヒー豆の店の淹れ方動画は、WCAGのレベルAAで求められることをすでに満たしています。字幕があり、プレーヤーのそばの「音声解説」ボタンで、[音声解説がなく、画面の情報が伝わらない動画](/ja/learn/audio-description)と同じように音声解説版に切り替えられます。プレーヤーの下には、閉じた `details` の中に「書き起こし」があります。店はこれを手早く、字幕ファイルから字幕一つにつき一段落で作りました。中身は「当店のハウスブレンドの淹れ方です。このくらい量ります。お湯は少し置きます。ゆっくり注いで、ここで止めます。［キッチンタイマーの音］」です。分量は映像の中にあります。はかりの数字が増えていく間に「豆15 g・お湯250 ml」のカードが、タイマーが減っていく間に「沸騰後、30秒冷ます」のカードが、最後に「3回に分けて注ぐ・3:00で止める」のカードが出ます。点字ディスプレイでページを読む盲ろうの人には、映像も、通常版と音声解説版のどちらの音声も届きません。届くのは書き起こしだけなので、書き起こしを開きます。そこには「このくらい」量るとしか書かれていません。

## 確認できる問題

レベルAAAの達成基準1.2.8は、音声のある収録済みの動画すべてに、時間依存メディアの代替を求めます。時間依存メディアの代替とは、動画が話す内容と映す内容を順番どおりに伝える文書のことで、せりふ、意味のある音、場面、動作、画面の文字を含みます（達成方法G69）。字幕には聞こえる内容しか入らないため、字幕から作った書き起こしは音声の書き起こしにすぎません。W3Cはこうした書き起こしを「基本の書き起こし」と呼び、映像の情報を加えた「説明付きの書き起こし」でなければ、盲ろうの人には動画の内容を届けられないとしています。書き起こしと動画を照らし合わせる仕組みは、ブラウザーにはありません。この例では字幕が1.2.2を、音声解説版が1.2.5を満たすため、動画はレベルAAのメディアの基準を満たしていても、この基準は満たしません。

WCAGが対象から外す動画が一つあります。テキストのためのメディア代替、つまりページにすでにあるテキスト以上の情報を伝えず、そうはっきり示した動画です。その表示がないことは、失敗例F74に当たります。この例外を使い、はっきり示すのが、下の二つ目の修正方法です。

## 利用者への影響

書き起こしは、検索したり、ざっと読んだり、翻訳したり、後で読み返したりするものでもあります。ページで「グラム」を検索する人や、翌朝に動画を再生し直さずにレシピを読み返す人も、同じ抜けに出会います。

## 自動チェックとAIの限界

axeの `video-caption` ルールは、`<video>` の中に字幕トラックがあるかを確かめ、この動画ではそれを見つけて合格にします。書き起こしと映像を比べるルールはありません。EaseWebの監査はすべての動画を手動確認の対象として挙げます。近くに書き起こしらしきものがあれば、映像の内容を含む場合に限りレベルAの1.2.3を満たすと示しますが、1.2.8には触れません。映像が何を加えているかは、動画を見た人にしか言えません。AIは、音声認識で言葉を、画像を理解するモデルで場面を書き出し、映像の内容を含む書き起こしの下書きを作れます。しかし「はかりで豆を量る」という下書きは正しく見えても、はかりが示す15 gが抜けているため、レシピを知っている人が動画と照らし合わせる必要があります。

## 修正前：字幕から作った書き起こし

```html
<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>
```

- 書き起こしは字幕ファイルを段落に並べただけで、話した言葉はすべてあっても、映る内容は何もありません。
- 15 g、250 ml、30秒、3回に分けて注ぐことは、映像の中にしかありません。
- テキストしか読めない人には、「このくらい」量り、「ここで」止めることしか分かりません。

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

```html
<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>
```

1. `summary` の文言を、中身が分かるように「書き起こし（映像の内容を含む）」に変えます。
2. 話した言葉はすべて順番どおりに残し、誰が話したかを書きます。
3. 映像が何かを示す箇所ごとに、その時点で映っている動作とカードの文字を、「映像：」の見出しを付けて書きます。これで分量と時間がテキストに入ります。
4. タイマーの音のように意味のある音は、角かっこ（［］）に入れて残します。

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

## 修正後：手順をページの文章として書き、動画がそれを映すと示す

```html
<h2>ハウスブレンドの淹れ方</h2>
<ol>
  <li>豆15 gとお湯250 mlを量ります。</li>
  <li>お湯を沸かし、30秒冷まします。</li>
  <li>ドリッパーの豆の上から、ゆっくり3回に分けて注ぎ、3分で止めます。</li>
</ol>
<figure>
  <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>
  <figcaption>上の三つの手順を動画にしたものです。手順にない内容は、話すことも映すこともありません。</figcaption>
</figure>
<button type="button" id="describe" aria-pressed="false">
  音声解説
</button>
<!-- 音声解説版への切り替えと再生位置の引き継ぎ。音声解説のガイドと同じもの。 -->
<script src="audio-description.js"></script>
```

1. 動画の上に、レシピを手順としてページに書きます。動画が映す、または話す分量、時間、動作をすべて入れます。
2. 動画を `figure` に入れ、`figcaption` で、どのテキストを繰り返しているか、そこに何も加えていないことを書きます。
3. 書き起こしは外します。手順がテキスト版の役目を果たし、しかも動画より先に読めます。

これで修正前の例は直り、1.2.8を満たします。動画はテキストのためのメディア代替になり、そうはっきり示したメディア代替は、WCAGのメディアの基準の対象外になるためです。ただし、動画が手順の繰り返しである間に限ります。店主が口にするコツが一つ加わったり、4枚目のカードが入ったりすれば、動画は独自の情報を持つことになり、完全なテキストの代替が必要になります。字幕と音声解説版は、動画で見たい人のために残せます。

## どの方法を選ぶか

テキストがそろっていれば、どちらも1.2.8を満たします。おすすめは映像の内容を含む書き起こしです。動画が何を加えても通用するのに対し、手順をページに書く方法は、動画が手順以上の内容を話したり映したりしない間しか通用しません。手順をページに書く方法は、文章が主で動画が補足のレシピや使い方のページに向いています。再生する前から分量がページにあるので、すべての読者の役に立ちます。動画を手順の文章に合わせて作り、文章と一緒に編集する場合に選びましょう。

## 実装の判断

W3Cが勧めるように字幕ファイルから始め、音を消して動画を見ながら、映る内容を書き加えます。内容を追うのに必要なものを書きます。画面の文字や数字、動作、誰が映っているか、場所の変化です。現在形で書き、ナレーションがすでに言っていることは繰り返しません。音声解説版があれば、その台本が役立ちます。間に入れる解説はすでに書かれていますし、書き起こしなら間の長さに収める必要がないので、さらに詳しく書けます。

映る内容と話す内容の区別は、斜体や色だけでなく、「映像：」のように点字ディスプレイでも読める言葉で付けます。角かっこ（［］）を音のためだけに使えば、読む人がどちらか迷いません。

動画をどこで再生するかで、書き起こしの出どころが変わります。

- 自分のサイトの `<video>`：上の例のように、その下に映像の内容を含む書き起こしを置きます。長ければ `details` に入れます。
- 再生に合わせて行を強調する、対話型の書き起こしを作るプレーヤー：Able Playerは字幕ファイルと解説ファイルを合わせて作るため、`<track kind="descriptions">` があれば映像の情報も入ります。YouTubeの文字起こしパネルのように字幕だけから作るものは、字幕の文を示すだけで、映像の内容は入りません。
- 埋め込んだYouTube、Vimeo、Wistiaのプレーヤー：埋め込みの下に、自分で書いた映像の内容を含む書き起こしを置きます。

動画が視聴者に操作を求める場合、たとえば表示に合わせてボタンを押す、次に見る動画を選ぶといった場合は、テキストの版にも同じことをする方法が必要です。その位置に置くリンクなどです（達成方法G69）。

テキストを繰り返すと示す動画は、そのテキストのそばに置くのが望ましく、どのテキストの繰り返しかは必ず示します。長い記事の最後にある「動画で見る」が「動画」という表示だけなら、記事を一言一句繰り返していても、F74に当たります。手順の手話通訳（レベルAAA）は、[手話通訳がない、または手話が小さすぎて読み取れない動画](/ja/learn/sign-language)で扱っています。

## 修正の確認

1. 音を消して映像を覆い、テキストだけを使います。書き起こしか、ページに書いた手順です。分量、時間、手順がすべてそろい、それだけでコーヒーを淹れられます。
2. テキストをそばに置いて動画を最後まで再生します。話した言葉がすべて順番どおりに書き起こしにあり、映像の大切な内容が、映る箇所に書かれています。手順をページに書いた場合は、手順にない内容を動画が話さず、映しもしません。
3. スクリーンリーダーで、プレーヤーの上の見出しから読み進めます。書き起こし、または動画が繰り返すテキストを示すキャプションが、プレーヤーのすぐ後（間にあるのはプレーヤーのボタンだけ）にあり、何のテキストかが分かります。

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

## 制限

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

---

このガイドをコーディングエージェントで使う: MCP https://easeweb.dev/mcp（設定は https://easeweb.dev/ja/services/developers）