# 字幕がない、または自動字幕だけのライブ配信

Source: https://easeweb.dev/learn/live-captions
Topics: 画像とメディア > ライブ映像やウェビナーにリアルタイムの字幕がある (WCAG 1.2.4)
The fix: イベント全体に、リアルタイムの字幕担当者（CART）を手配します。字幕を配信サービスの字幕の入力に送ってプレーヤーに表示し、配信と一緒に届けるか、入力がない場合は、字幕担当者のページをプレーヤーの横に表示します。
Test with: sound off, keyboard
References: https://www.w3.org/WAI/WCAG22/Understanding/captions-live.html https://www.w3.org/WAI/WCAG22/Techniques/general/G9 https://www.w3.org/WAI/WCAG22/Techniques/general/G87 https://www.w3.org/WAI/WCAG22/Techniques/general/G93 https://www.w3.org/WAI/media/av/captions/ https://support.google.com/youtube/answer/3068031

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

## 場面

ソフトウェア会社が、春のリリースをライブのウェビナーで発表します。イベントのページに埋め込んだプレーヤーで配信しています。スライドには「ゲスト席」「バックグラウンドでのエクスポート」とだけあり、それ以外はすべて声で伝えます。アレックスが、すべてのプランにゲスト席が15席付くこと、エクスポートがバックグラウンドで動くことを発表します。次にプリヤが、チャットの質問を読み上げます。「無料プランも対象ですか？」。答えは「対象外です」。プレーヤーに字幕がないため、見ているろう者の顧客には、スライドが変わるのが見えるだけです。別の版のページでは、配信サービスの自動字幕をオンにしています。字幕は数語ずつ出ますが、「ゲスト石が50席付きます」と書き、質問と答えをつなげて「無料プランも対象です対象です」と表示します。

## 確認できる問題

達成基準1.2.4は、同期したメディアに含まれるライブの音声すべてに字幕を求めます。話し声のあるライブ配信には、配信中に字幕が必要です。字幕は、話された言葉すべて、誰が話しているか、意味のある音を伝えます。字幕のないライブ配信は、そのまま満たしません。自動字幕は画面に出ますが、W3Cの解説では、自動生成の字幕は完全に正確だと確認されない限りアクセシビリティの要件を満たさないとされています。ライブでは、表示される前に誰も確認できません。この例では、数字が変わり、疑問符がなくなり、別の人が話し始めたことも示されず、「外」が抜けて答えが逆になっています。

## 利用者への影響

ライブ配信は話し手のペースで進み、ウェビナーでは追加の質問をする機会も一緒に過ぎていきます。字幕が取りこぼしたものは、そのイベントでは失われます。職場や共有の場所で音を消して見ている人も、同じ無音に出会い、音を出すより配信から離れてしまうこともあります。

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

配信前のストリームは、どの自動チェックでも見られません。axeには1.2.4のルールがなく、動画の字幕のルールは1.2.2のためのもので、`<video>` の中に `<track kind="captions">` があるかを見るだけです。EaseWebの診断は、ライブだと分かるプレーヤーを確認の対象として挙げます。チャンネルのライブ配信を埋め込むYouTubeのプレーヤー、Vimeoのライブイベントの埋め込み、Twitchのチャンネルのプレーヤー、ページ自前の、終わりのない動画です。動画IDで埋め込んだライブ配信はほかの動画と見分けがつかず、一般的な動画の確認項目の対象になります。そこでもライブ字幕を確認するよう求めています。当日に字幕があるか、正しいかは、リハーサルと本番で人が確認するしかありません。自動字幕は音声認識で、録画の字幕の下書きを作るのと同じ種類のAIです。ライブでは、直す時間がありません。

## 修正前：字幕のないライブ配信

```html event.html
<h2>春のリリース、ライブ配信</h2>
<p>木曜 16:00 UTC。約20分、最後に質問の時間があります。</p>
<!-- Captions: none -->
<iframe src="https://www.youtube.com/embed/live_stream?channel=UC…"
  title="春のリリース、ライブ配信" allow="fullscreen"></iframe>
```

配信サービスに字幕を送るものが何もないため、プレーヤーに字幕ボタンがなく、音声が聞こえない人にはスライドしか届きません。

## 修正前：配信サービスの自動字幕

```html event.html
<h2>春のリリース、ライブ配信</h2>
<p>木曜 16:00 UTC。約20分、最後に質問の時間があります。</p>
<!-- Captions: the platform's automatic captions -->
<iframe src="https://www.youtube.com/embed/live_stream?channel=UC…"
  title="春のリリース、ライブ配信" allow="fullscreen"></iframe>
```

```text captions.txt
春のリリースへようこそ製品を担当しているアレックスです
本日からすべてのプランにゲスト石が50席付きます
エクスポートはバックグラウンドで動くので旅を閉じても大丈夫です
チャットに質問が来ています無料プランも対象です
対象です無料プランのゲスト席は3席のままです
```

プレーヤーに字幕ボタンがあり、字幕も遅れずに出るため、字幕が付いているように見えます。しかし音声認識は「15席」を「50席」、「ゲスト席」を「ゲスト石」、「タブを」を「旅を」、「対象外です」を「対象です」と聞き取り、プリヤが話していることも、質問であることも示していません。この字幕に従った人は、無料プランにも新しい席が付くと考えます。二つの発表の間のデモ動画は空白のままで、音楽が流れたことも分かりません。

## 修正後：字幕担当者の字幕を、プレーヤーの字幕として表示

```html event.html
<h2>春のリリース、ライブ配信</h2>
<p>木曜 16:00 UTC。約20分、最後に質問の時間があります。
  字幕担当者によるライブ字幕付き：プレーヤーのCCでオンにできます。</p>
<!-- Captions: a live captioner, sent to the platform's captions input -->
<iframe src="https://www.youtube.com/embed/live_stream?channel=UC…"
  title="春のリリース、ライブ配信" allow="fullscreen"></iframe>
```

```text captions.txt
>> アレックス：春のリリースへようこそ。
製品を担当しているアレックスです。
本日から、すべてのプランにゲスト席が15席付きます。
［デモ動画：音楽のみ、話し声なし］
エクスポートはバックグラウンドで動くので、
タブを閉じても大丈夫です。
>> プリヤ：チャットに質問が来ています。
無料プランも対象ですか？
>> アレックス：対象外です。
無料プランのゲスト席は3席のままです。
```

イベントのために手配した字幕担当者が、話し手の声を聞き、話した内容をリアルタイムで書きます。速記の機械を使うか、自分の声に合わせて学習させた音声認識に言い直して入力します。字幕担当者のソフトウェアが配信サービスの字幕の入力に字幕を送り、プレーヤーに話し声の数秒後に表示されます。字幕は話し手が変わるたびに名前を示し、数字と「対象外」を正しく伝え、誰も話していない間の音も示します。プレーヤー自体の字幕なので、視聴者はCCボタンでオンとオフを切り替えられ、全画面表示や配信サービスのアプリにも一緒に届きます。

## 修正後：字幕担当者のページをプレーヤーの横に表示

```html event.html
<h2>春のリリース、ライブ配信</h2>
<p>木曜 16:00 UTC。約20分、最後に質問の時間があります。
  字幕担当者によるライブ字幕を、プレーヤーの横に表示します。</p>
<!-- Captions: a live captioner, on their own page beside the player -->
<div class="live">
  <iframe src="https://www.youtube.com/embed/live_stream?channel=UC…"
    title="春のリリース、ライブ配信" allow="fullscreen"></iframe>
  <iframe src="https://captions.example.com/live/spring-release"
    title="ライブ字幕"></iframe>
</div>
```

```text captions.txt
>> アレックス：春のリリースへようこそ。
製品を担当しているアレックスです。
本日から、すべてのプランにゲスト席が15席付きます。
［デモ動画：音楽のみ、話し声なし］
エクスポートはバックグラウンドで動くので、
タブを閉じても大丈夫です。
>> プリヤ：チャットに質問が来ています。
無料プランも対象ですか？
>> アレックス：対象外です。
無料プランのゲスト席は3席のままです。
```

字幕サービスは、イベントごとに字幕が書かれるそばから流れる専用のページを用意しており、それをプレーヤーの横のフレームに表示できます。字幕は同じ人が書いた同じものです。ただし、1.2.4を満たすのは、二つが一緒にあり、ずれずに続く間に限ります。プレーヤーを全画面表示にすると字幕は置き去りになり、配信サービスやそのアプリで見る人には届きません。字幕担当者は自分に聞こえる音声から書き、配信は数秒遅れて視聴者に届くため、字幕が配信の遅延の分だけ映像より先に出ることがあります。字幕担当者が視聴者と同じ配信を見ながら書けば、プレーヤーの字幕と同じく、映像の数秒後に続きます。配信サービスに字幕の入力がない場合に限って使います。

## どの方法を選ぶか

字幕担当者が書いていれば、どちらも1.2.4を満たします。字幕はプレーヤーに送ります。横に表示する字幕はページが二つを一緒に保っている間だけ基準を満たしますが、プレーヤー自体の字幕は全画面表示を含め、配信が届くところすべてに一緒に届き、配信サービスが独自の時計ではなく配信に合わせて表示します。多くの配信サービスやウェビナーのサービスには、そのための字幕の入力があります。プレーヤーの横のページは、使わざるを得ないサービスにその入力がない場合に限って使い、字幕が映像より先に出ず、後に続くよう、字幕担当者には視聴者と同じ配信から書いてもらいます。

## 実装の判断

字幕担当者は、登壇者と同じ時期に手配します。リアルタイムの字幕担当者（CARTの提供者）は、電話回線やインターネットで音声を聞いて遠隔で作業します。事前に、登壇者の名前、製品名、スライド、台本があれば台本といった資料が必要です。質問の時間も含めてイベント全体を依頼し、延長したときの扱いも決めておきます。

配信サービスごとに、字幕担当者の字幕の受け取り方が違います。

- YouTube Live：エンコーダーで配信に埋め込んだ字幕か、字幕担当者のソフトウェアが配信の設定にある字幕取り込みURLに送る字幕。
- Zoomのミーティングとウェビナー：ホストが、ミーティングのAPIトークンで外部の字幕サービスを割り当てるか、参加者に字幕の入力を割り当てる。
- Microsoft Teamsの会議：開催者が会議のオプションでCART字幕をオンにし、表示されるリンクを字幕担当者に送る。

配信サービスが自動字幕も提供している場合、字幕のメニューに両方が並ぶことがあります。サービスが許せば、視聴者が見分けられるよう字幕担当者のトラックにラベルを付けるか、自動字幕をオフにします。字幕担当者を手配していない社内の通話では自動字幕も役に立ちますが、公開の配信が1.2.4を満たす方法にはなりません。1.2.4に関するW3Cの解説は放送を対象にしており、会議アプリでの数人の通話にアプリが字幕を付けることまでは求めていません。一方、視聴者に向けて配信するウェビナーや発表会は対象です。

チャットに書かれた質問はすでに文字ですが、声で尋ねた質問はほかの話と同じく字幕が必要です。デモ動画のように登壇者が再生するものも、話し声には字幕を付け、音は［］で説明します。

配信が終わり、録画がページに残る場合、それは収録済みの動画で、[字幕のない動画と、確認されていない自動字幕](/ja/learn/video-captions)が当てはまります。字幕担当者の文章は良い出発点で、録画と照らし合わせて直し、字幕ファイルにします。手話通訳は、収録済みの動画だけを対象にしたレベルAAAの別の要件（1.2.6）で、ラジオ番組のような音声だけのライブ配信は1.2.9の対象です。

## 修正の確認

1. イベントの前に、字幕担当者が質問の時間も含めて全体を担当し、名前や用語の資料を持ち、配信サービスの字幕の入力、またはプレーヤーの横のページにつながっているか確認する。
2. 限定公開のテスト配信でリハーサルし、自社のページを開いてキーボードで字幕をオンにし、話し声の数秒以内に字幕が出るか確認する。
3. 本番中に数分間、音を消して見る。話し手が変わるたびに名前が示され、数字、名前、否定が正しく、意味のある音が［］で書かれているか確認する。
4. プレーヤーを全画面表示にし、ページをスマートフォンの幅で開いて、字幕が表示され続けるか確認する。横に表示するページの場合、全画面表示では表示されないため、スマートフォンの幅での表示と、字幕が映像よりどれだけ先や後に出るかを確認する。
5. イベントの後、ページに残す録画に、ライブの字幕そのままではなく、修正した字幕が公開前に付いているか確認する。

OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。配信サービス、会場、字幕担当者が変わると設定も変わるため、イベントごとに再度確認します。

## 制限

このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。ライブ字幕は話し声より数秒遅れ、字幕担当者も打ち間違えることがあるため、録画は修正が必要です。字幕がプレーヤーに届く仕組みは配信サービス、その契約、設定によって違い、変わることもあります。最新のドキュメントを確認し、字幕担当者とリハーサルしてください。できれば、字幕に頼る人と一緒にイベント全体を確認してください。

---

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