WCAG 1.2.4: 字幕（ライブ）

このルールの意味

\n

WCAG 1.2.4（キャプション — ライブ）は、同期したメディア内のすべてのライブ音声コンテンツにキャプションを提供することを求めています。同期したメディアとは、情報提示のために別の形式と同期されている、またはウェブキャスト、ライブ配信、ウェブ上のリアルタイム放送などの時間ベースのインタラクティブコンポーネントと同期されている音声または動画コンテンツと定義されています。

\n

実務的には、ニュースサイトで配信される記者会見、会社の全社会議の放送、政府公聴会、オンラインのライブ授業、スポーツ解説の配信など、ウェブサイトやウェブアプリケーション上で公開される音声を含むあらゆるライブイベントには、その場で話されている内容を正確に反映したリアルタイムキャプションを表示しなければならない、ということを意味します。

\n

合格とみなされる条件: ライブ配信は、同期され、正確なリアルタイムキャプションが再生中にユーザーに表示されている場合、この達成基準を満たします。キャプションは、すべての会話と、関連する非音声情報（「[拍手]」や「[警報音]」など）を表現していなければなりません。一般的な方法としては、プロの字幕制作者によるCART（Communication Access Realtime Translation）、適格なライブ字幕サービスによる自動音声認識（ASR）キャプション、あるいはストリーミングプラットフォームが提供するサードパーティ統合などがあります。

\n

不合格とみなされる条件: ライブ配信にキャプションがまったくない場合、キャプションが話されている音声と同期していない場合、キャプションが会話の重要な部分を省略している場合、またはキャプションの精度が非常に低く理解が著しく妨げられる場合、この達成基準は満たされません。事後にトランスクリプトを提供しても、この要件を満たしたことにはなりません。キャプションはライブ、つまりリアルタイムで利用可能でなければなりません。

\n

公式な例外: WCAGはこのルールに1つの例外を定義しています。それは、そのメディア自体がテキストのメディア代替であり、そのように明確にラベル付けされている場合です。たとえば、インタビューの詳細なテキストトランスクリプトを公開し、その同じ内容のライブ音声版を「テキストの音声代替」として明示的にラベル付けして提供する場合、キャプションは厳密には必須ではないかもしれません。ただし、この例外は範囲が狭く、実務上適用できるケースはほとんどありません。

\n

この達成基準は、ウェブ上で公開されるすべての同期したメディアに適用されます — 動画が事前に制作されたものか、本当にライブであるかを問いません。事前収録されたウェビナーの再配信をライブのようにストリーミングする場合は、依然として1.2.3または1.2.5の対象ですが、真のリアルタイム放送は明確に1.2.4の対象となります。

\n\n

なぜ重要か

\n

世界保健機関によると、世界で約430百万人が日常生活に支障をきたす難聴を抱えており、その数は2050年までに700百万人を超えると予測されています。ろう者や難聴のユーザーにとって、リアルタイムキャプションは単なる利便性ではなく、ライブコンテキストにおいて音声コンテンツへアクセスするための主な、あるいは唯一の手段です。キャプションがなければ、これらのユーザーはあらゆるライブメディアイベントへの参加や理解から完全に排除されてしまいます。

\n

ろう者や難聴にとどまらず、ライブキャプションははるかに広いユーザー層に利益をもたらします。空港、オープンオフィス、公共交通機関などの騒がしい環境では、ユーザーは音声を利用できないかもしれません。静かな環境でヘッドフォンを使わずに視聴しているユーザーや、デバイスをミュートにしているユーザーは、内容を追うためにキャプションに依存します。非母語話者は、話者が複雑な語彙、アクセント、専門用語を用いる場合、とりわけキャプションが理解に不可欠だと感じることが多いです。認知や言語処理の違いによっても、正確な理解のためにキャプションが不可欠になることがあります。

\n

具体的なシナリオを考えてみましょう。トルコのある自治体が公式ウェブサイトで市議会のライブ会議を配信しているとします。ろう者の住民が、自分の近所の用途地域変更に関する議論を追いたいと考えています。リアルタイムキャプションがなければ、その住民は市民参加から完全に排除されてしまいます。同じことは、私立学校の学習管理システム上で行われるライブオンライン授業に参加するろうの学生や、銀行のライブ製品発表ウェビナーの内容を追おうとしている顧客にも当てはまります。

\n

実務的な観点から見ると、ライブキャプションのインフラは、検索エンジンによってインデックス可能なトランスクリプトも生成し、動画コンテンツの発見性を高めます。ライブキャプションに投資する組織は、イベント後のドキュメント作成、要約、アーカイブ検索のための貴重なリソースとして、このトランスクリプトが活用できることに気づくことがよくあります。

\n\n

関連する Axe-core のルール

\n

WCAG 1.2.4には手動テストが必要です。ライブキャプションの有無や品質を確実に検出できる自動の axe-core ルールは存在せず、アクセシビリティ監査の戦略を立てる際にはこの点を理解しておくことが重要です。

\n

\n
• 手動テストが必要 — ライブキャプションの有無: axe-core のような自動ツールは、<video>要素上のkind='captions'を持つ<track>要素の存在をDOMからスキャンすることはできますが、ライブ配信はほとんどの場合、<track>付きの単純なHTMLの<video>要素で配信されることはありません。通常は、Video.js、JW Player、ネイティブプラットフォームプレーヤーなどのJavaScriptベースのプレーヤーを通じて配信されるアダプティブビットレート形式（HLS、DASH）を使用します。これらのプレーヤーは、axe-core が内部を検査できない方法でキャプションを動的にレンダリングします。ツールはライブ配信をリアルタイムで視聴したり、キャプションの精度を評価したり、同期遅延を測定したり、キャプションオーバーレイが実際に話された内容を反映しているのか、単なる静的なプレースホルダーなのかを判断したりすることはできません。
\n
• 手動テストが必要 — キャプションの品質と精度: 仮に自動ツールがキャプションフィードの存在を検出できたとしても、そのキャプションが正確で完全か、許容できる程度に同期しているかを評価する手段はありません。CARTで作成されたキャプションと品質の低い自動生成キャプションは、ツールからはどちらも「キャプションあり」と見なされるかもしれませんが、WCAG 1.2.4を満たすのはそのうち一方だけです。ライブイベント中の人によるレビューだけが、順守を検証する唯一の信頼できる方法です。
\n
• 手動テストが必要 — プレーヤー内でのキャプションのアクセシビリティ: 自動ツールは一般的に、カスタムメディアプレーヤー内のキャプションコントロールがキーボードでアクセス可能かどうか、キャプション表示をユーザーがリサイズまたはカスタマイズできるかどうか、あるいはキャプションのスタイルがユーザーのニーズを満たしているかどうかを判断できません。これらの側面は、実際のキーボード操作やスクリーンリーダーの使用によるハンズオンテストが必要です。
\n

\n\n

テスト方法

\n

\n
1. ページ上のすべてのライブメディアを特定する: ページを確認し、ライブ動画や音声ストリームがないか探します。埋め込みプレーヤー、iframe、動的に読み込まれるメディアコンポーネントをチェックします。そのコンテンツが本当にライブ（リアルタイム放送）なのか、事前収録なのかを確認します。1.2.4の対象となるのは、同期したメディア内の本当にライブな音声コンテンツのみです。
\n
2. axe DevTools または Lighthouse で自動スキャンを実行する: Chrome DevTools で axe DevTools を開き、ページ全体のスキャンを実行します。axe はライブキャプションを検証することはできませんが、メディアプレーヤーコントロールのaria-labelの欠如、アクセスできない再生/一時停止ボタン、フォーカス管理の欠如など、関連する問題を検出できます。検出された問題は補足的な証拠として記録しますが、axe のレポートに問題がないからといって、1.2.4に準拠していることが確認されたわけではないことを理解してください。
\n
3. ライブイベント中にキャプションの有無を手動で確認する: 実際の放送中にライブ配信へアクセスします。キャプションが表示されているか確認します。プレーヤーにキャプションの切り替え（CCボタン）がある場合は、それを有効にして、話者が話すのに合わせてキャプションがほぼリアルタイムで表示・更新されることを確認します。キャプションの遅延が許容範囲内であることを確認します — CARTでは通常数秒以内、ASRではやや長くなる場合があります。
\n
4. キャプションの精度を評価する: 音声を聞きながらキャプションを読みます。聞き漏らし、体系的な誤り、重大な省略がないか確認します。キャプションは逐語的である必要はありませんが、話された内容の意味を完全に伝えなければなりません。複数の話者がいる場合は、話者の識別に注意します — 誰が話しているのかが明らかでない場合、キャプションでそれを示す必要があります。
\n
5. NVDA + Firefox でテストする: Tabキーを使ってメディアプレーヤーに移動します。キャプションの切り替えを含むすべてのプレーヤーコントロールにキーボードで到達でき、操作できることを確認します。NVDA がキャプションボタンの状態（オン/オフ）をアナウンスすることを確認します。キャプションを有効にし、ユーザーがプレーヤーにタブ移動したりその周辺を移動したりしたときに、NVDA が読み上げ可能なDOM要素としてキャプションテキストが表示されることを確認します。
\n
6. VoiceOver + Safari（macOS または iOS）でテストする: VoiceOver のジェスチャーやキーボードコマンドを使ってプレーヤーを操作します。キャプションの切り替えがアナウンスされ、操作可能であることを確認します。キャプションテキストの変更が、プレーヤーのアクセシブルな領域内で適切に反映されることを確認します。
\n
7. JAWS + Chrome でテストする: Tabキーを使ってプレーヤーコントロールに移動します。JAWS がすべてのコントロールラベルを読み上げることを確認します。キャプションの切り替えが、適切なラベルと状態を持つボタンとして認識されていることを確認します。キャプションを有効にし、キャプション表示が期待どおりに更新されることを確認します。
\n
8. キャプション表示のカスタマイズを確認する: プレーヤーがユーザーによるキャプションテキストのサイズ変更、色の変更、コントラストの調整を許可しているか確認します。これは1.2.4の厳密な要件ではありませんが、ベストプラクティスとして評価すべきポイントであり、WCAG 1.4の達成基準にも関連します。
\n

\n\n

修正方法

\n

キャプショントラックのないライブ配信 — 不正

\n

<!-- キャプション設定なしで埋め込まれたライブHLSストリーム -->\n<video id='live-player' controls autoplay>\n  <source src='https://stream.example.com/live/event.m3u8' type='application/x-mpegURL'>\n  <!-- <track> 要素もプレーヤー内のキャプション設定もなし -->\n</video>

\n

統合されたCARTキャプショントラック付きライブ配信 — 正

\n

<!-- CARTサービスから供給されるライブWebVTTキャプショントラックを使用した Video.js によるライブ配信。\n     track の src はリアルタイムで更新されるライブキャプションエンドポイントを指す。 -->\n<video\n  id='live-player'\n  class='video-js vjs-default-skin'\n  controls\n  autoplay\n  aria-label='Live conference stream with real-time captions'>\n  <source src='https://stream.example.com/live/event.m3u8' type='application/x-mpegURL'>\n  <track\n    kind='captions'\n    src='https://captions.example.com/live/event.vtt'\n    srclang='tr'\n    label='Turkish captions'\n    default>\n</video>\n<script>\n  var player = videojs('live-player');\n  // アクセシビリティのため、デフォルトでキャプションを有効にする\n  player.ready(function() {\n    player.textTracks()[0].mode = 'showing';\n  });\n</script>

\n

埋め込み時にキャプションが無効化されたプラットフォームからのライブ配信 — 不正

\n

<!-- cc_load_policy=0 によってクローズドキャプションが明示的に無効化された YouTube ライブ埋め込み。\n     これによりユーザーがキャプションを有効にできなくなり、1.2.4の不適合となる。 -->\n<iframe\n  src='https://www.youtube.com/embed/live_stream?channel=CHANNEL_ID&cc_load_policy=0'\n  title='Company all-hands live stream'\n  allowfullscreen>\n</iframe>

\n

キャプションが有効化されたプラットフォームからのライブ配信 — 正

\n

<!-- デフォルトでクローズドキャプションが有効（cc_load_policy=1）な YouTube ライブ埋め込み。\n     プラットフォームのネイティブなキャプションインフラを使用し、設定に応じて\n     ライブ自動キャプションや人によるCARTレビューに対応する。\n     ホストページは、iframe と操作できないユーザーのために、\n     キャプション付きストリームへの直接リンクも提供している。 -->\n<iframe\n  src='https://www.youtube.com/embed/live_stream?channel=CHANNEL_ID&cc_load_policy=1'\n  title='Company all-hands live stream with captions enabled'\n  allowfullscreen>\n</iframe>\n<p>\n  <a href='https://www.youtube.com/watch?v=LIVE_VIDEO_ID'>\n    Watch with captions directly on YouTube\n  </a>\n</p>

\n

キーボードアクセスできないキャプション切り替えを持つカスタムプレーヤー — 不正

\n

<!-- 非インタラクティブな <div> として実装されたキャプション切り替え。\n     キーボードユーザーやスクリーンリーダーユーザーはこのコントロールを操作できない。 -->\n<div class='player-controls'>\n  <div class='cc-button' onclick='toggleCaptions()'>CC</div>\n</div>

\n

アクセシブルなキャプション切り替えを持つカスタムプレーヤー — 正

\n

<!-- 明示的なラベルと ARIA の押下状態を持つ <button> として実装されたキャプション切り替え。\n     キーボードユーザーとスクリーンリーダーユーザーがこのコントロールを見つけて\n     操作できる。状態はキャプションの切り替え時に動的に更新される。 -->\n<div class='player-controls'>\n  <button\n    class='cc-button'\n    id='captions-toggle'\n    aria-pressed='false'\n    aria-label='Toggle captions'\n    onclick='toggleCaptions(this)'>\n    CC\n  </button>\n</div>\n<script>\n  function toggleCaptions(btn) {\n    var isActive = btn.getAttribute('aria-pressed') === 'true';\n    btn.setAttribute('aria-pressed', String(!isActive));\n    // キャプショントラックの表示/非表示を切り替えるロジック\n  }\n</script>

\n\n

よくある間違い

\n

\n
• リアルタイムキャプションの代わりにイベント後のトランスクリプトを提供すること: ライブイベント終了後にテキストトランスクリプトを公開しても、1.2.4を満たしたことにはなりません。キャプションはライブ音声と同時に利用可能でなければならず、ろう者のユーザーが、視覚と聴覚を持つユーザーと同じようにリアルタイムでコンテンツを追えるようにする必要があります。
\n\n

(Content truncated due to token limit — please retry this article.)