WCAG 1.2.5: 音声解説（事前録音）

このルールの意味

\n

WCAG 1.2.5 — 音声解説（事前録音）は、原則1「知覚可能」におけるレベルAAの達成基準です。これは、動画を含むすべての事前録音された同期メディアに対して音声解説を提供することを求めています。音声解説とは、動画の主音声に追加されるナレーション音声であり、既存のセリフや音声では伝えられていない重要な視覚情報（操作、場面転換、画面上のテキスト、表情、その他の視覚要素など）を説明するものです。

\n

この達成基準は、WCAGで同期メディアと定義されるコンテンツに適用されます。同期メディアとは、音声と動画のトラックが互いに、または時間に依存するインタラクティブなコンポーネントと同期しているコンテンツを指します。これには、ビデオチュートリアル、教育用映画、録画されたウェビナー、プロモーション動画、製品デモ、ニュース放送などが含まれます。一方で、音声のみのコンテンツ、動画のみのコンテンツ（これは1.2.1で別途扱われます）、ライブ動画配信（該当する場合はレベルAAAの1.2.6で扱われます）には適用されません。

\n

合格とするには、音声付きの事前録音動画ごとに、ユーザーが有効化できる追加の音声解説トラックがあるか、あるいはナレーターが複雑な視覚コンテンツを説明するための十分な時間を確保できるように一時停止を挿入した拡張音声解説版の動画が用意されている必要があります。別の選択肢として、既存の音声トラックだけで動画内のすべての視覚情報が完全に伝わっている場合、つまり、既存のナレーションやセリフで説明されていない意味のある視覚的な出来事が何も起きていない場合には、追加の音声解説は不要です。

\n

不合格となるのは、動画の内容理解に不可欠な視覚情報が、画像トラックだけで提示され、対応する口頭での説明がない場合です。例えば、プレゼンターが画面上でソフトウェアの操作手順をクリックして進めていくトレーニング動画で、発話は「ここをクリックして、このオプションを選択します」のような内容にとどまっている場合、これはこの達成基準に不合格となります。なぜなら、音声だけを聞いている盲のユーザーには、どのUI要素がクリックされているのか、何が選択されているのかを理解する手段がないからです。

\n

公式に認められている重要な例外が1つあります。それは、そのメディア自体がテキストのメディア代替である場合です。つまり、ある動画が、特定のテキスト文書のアクセシブルな同等物として提供されることを目的に制作されており、その旨が明確にラベル付けされている場合、そのコンテンツについては音声解説は必須ではありません。

\n\n

なぜ重要か

\n

音声解説は主に、盲または重度の視覚障害のあるユーザーのための要件です。世界保健機関によると、世界で約2.2 billion人が何らかの視覚障害を抱えています。これらのユーザーにとって、音声解説のない動画の標準的な体験は、物語が視覚的な文脈に依存している場合、混乱を招いたり、まったく情報が得られなかったりすることがあります。スクリーンリーダーに依存する盲のユーザーは、ページ上に動画が存在することは認識できますが、音声解説がなければ、聞こえるのは収録されたセリフや環境音だけであり、その結果、コンテンツが意味をなさなかったり、誤解を招いたりするような情報の欠落が生じます。

\n

具体的な実例を考えてみましょう。あるトルコの銀行が、自社のモバイルアプリで二要素認証を設定する方法を説明するビデオチュートリアルを公開したとします。動画ではアプリの各画面が順番に表示され、ナレーターは「ここで設定アイコンをタップします」や「確認メッセージが表示されます」といった説明を行います。音声解説がなければ、スクリーンリーダーを使用している盲の顧客は、設定アイコンが画面のどこにあるのか、確認メッセージに何と書かれているのか、画面がどのような見た目なのかを把握できません。彼らはセルフサービスのチュートリアルから事実上排除され、カスタマーサポートに電話する必要が生じるかもしれません。その結果、摩擦やコストが発生し、ユーザー体験も損なわれます。

\n

完全に盲のユーザー以外にも、音声解説は、情報を視覚的に示されるだけでなく口頭で説明される方が処理しやすい認知障害のある人々にも役立ちます。また、運転中など画面を見ることができない音声のみの環境にいるユーザーや、動画に表示される画面上のテキストを十分な速さで読むことが難しいユーザーにも有益です。

\n

SEOと発見性の観点からは、トランスクリプトや解説用スクリプトを含む動画コンテンツは、検索エンジンがインデックス可能なテキストを追加で提供するため、関連する検索クエリに対するランキング向上につながる可能性があります。さらに重要なのは、音声解説を提供することが、プラットフォームがインクルージョンを真剣に受け止めているというシグナルをユーザーや規制当局に対して発する点です。これは多くの市場で、ビジネス上および法的な期待としてますます重視されています。

\n\n

関連する Axe-core のルール

\n

WCAG 1.2.5 には手動テストが必要です。axe-core のような自動化ツールは、動画に含まれる音声解説が正確か、十分か、意味のあるものかをプログラム的に判断することはできません。この判断には、動画を視聴し、すべての視覚情報が音声で伝えられているかどうかを評価できる人間のレビュアーが必要です。欠落している、または不十分な音声解説トラックを自動的に検出できる axe-core のルールは存在しません。

\n

\n
• 手動レビューが必要 — 視覚コンテンツの監査: テスターは、画面を隠す（または音声解説トラックのみを有効にする）状態で動画全体を視聴し、画面上のテキスト、話者の動作、場面転換、チャート、図、非言語的な合図など、視覚のみで提示されるすべての情報が十分に伝えられているかを評価する必要があります。自動化ツールは、動画フレームの意味内容を解析したり、ナレーションが視覚的に表示されている内容と対応しているかどうかを評価したりすることはできません。
\n
• 手動レビューが必要 — トラック検出: axe-core は、<video> 要素上に kind='descriptions' を持つ <track> 要素が存在するかどうかをチェックすることはできますが、その説明トラックファイルに、実際に意味のある正確な解説が含まれているかどうかを検証することはできません。動画には descriptions トラックが存在していても、その中身が空であったり、機械生成のナンセンスであったり、単に同期していなかったりする可能性があります。これらはいずれも自動検出では合格となってしまいますが、実際にはこの達成基準に不合格となります。
\n
• 手動レビューが必要 — 代替版の確認: 実装によっては、音声解説を提供するために、メインの音声トラックに解説を組み込んだ別URLまたは別バージョンの動画を用意している場合があります。自動化ツールには、ページの別の場所にリンクされている動画アセットの代替版の存在を検出したり、その場所に移動したりする手段がありません。
\n

\n\n

テスト方法

\n

\n
1. ページ上のすべての事前録音された同期メディアを特定する。 ページ内の <video> 要素、埋め込み iframe（YouTube、Vimeo、サードパーティプレーヤー）、およびカスタム動画プレーヤーの実装を探します。音声と動画の両方のトラックを含み、ライブではなく事前録音された動画をすべて記録します。
\n
2. axe DevTools または Lighthouse で自動スキャンを実行する。 ブラウザの開発者ツールを開き、ページ上で axe DevTools を実行し、動画またはメディア要素に関連するルールに結果をフィルタリングします。自動スキャンでは、<track> 要素の欠如や、カスタム動画プレーヤー上の ARIA ロールの不足などが検出される場合がありますが、音声解説の十分性を確認することはできません。自動化された結果は、あくまで出発点として扱ってください。
\n
3. 画面を隠すか目を閉じて各動画を視聴する。 提供されている場合は音声解説トラックも含め、音声だけを聞きます。次の点を自問してください。意味のある視覚情報はすべて音声で伝えられているか。物語全体を追うことができるか。画面上のすべての操作や表示されるテキスト、グラフィックを音声だけで把握できるか。
\n
4. 音声解説トラックを確認する。 動画プレーヤーのコントロールを確認し、音声解説を有効にするボタンやメニューがないか探します。HTML5 動画の場合は、DOM を調べて <track kind='descriptions'> 要素があるか確認します。descriptions トラックを有効にし、視覚コンテンツのナレーションが正確かつ同期して再生されることを確認します。
\n
5. 音声解説付きの代替版を確認する。 動画の近くに、「音声解説付きで視聴」や「音声解説版」などと書かれた明確なラベルのリンクやボタンがないか探します。そのリンクをたどり、代替版の動画に、音声トラックに組み込まれた正確で完全な音声解説が含まれていることを確認します。
\n
6. スクリーンリーダーでテストする。 NVDA と Firefox、VoiceOver と Safari、または JAWS と Chrome を使用して動画要素に移動します。スクリーンリーダーが動画コントロールと、関連する音声解説トラックのオプションをアナウンスすることを確認します。動画を再生し、解説トラックが聞こえ、同期していることを確認します。スクリーンリーダーが解説音声を抑制したり、干渉したりしないことも確認します。
\n
7. 例外ケースを評価する。 動画がテキスト文書のメディア代替として提示されている場合、その旨が動画のすぐ近くに明確にラベル付けされていることを確認します。正しくラベル付けされており、テキストと同じ内容を完全に表現している場合、その動画には音声解説は必須ではありません。ただし、このラベル付けが存在し、曖昧でないことを確認してください。
\n

\n\n

修正方法

\n\n

音声解説トラックのない動画 — 不適切な例

\n

<!-- 重要な視覚コンテンツを含むが音声解説のないトレーニング動画 -->\n<video controls width='800'>\n  <source src='training-video.mp4' type='video/mp4'>\n  <track kind='subtitles' src='subtitles-en.vtt' srclang='en' label='English'>\n</video>\n<!-- 1.2.5 に不合格: 字幕はあるが descriptions トラックが存在しない。\n     動画内の視覚のみの情報は盲のユーザーにはアクセスできない。 -->

\n\n

音声解説トラックを追加した動画 — 適切な例

\n

<!-- 音声解説トラックが提供されているトレーニング動画 -->\n<video controls width='800'>\n  <source src='training-video.mp4' type='video/mp4'>\n  <track kind='subtitles' src='subtitles-en.vtt' srclang='en' label='English'>\n  <!-- kind='descriptions' の音声解説トラックを追加 -->\n  <track kind='descriptions' src='audio-description-en.vtt' srclang='en' label='Audio Description (English)'>\n</video>\n<!-- 1.2.5 に合格: スクリーンリーダーや音声解説対応プレーヤーは\n     descriptions トラックを有効にして、盲のユーザー向けに視覚コンテンツをナレーションできる。 -->

\n\n

音声解説付き代替版のないサードパーティ埋め込み動画 — 不適切な例

\n

<!-- アクセシブルな音声解説付き代替版のない YouTube 埋め込み -->\n<iframe\n  width='560'\n  height='315'\n  src='https://www.youtube.com/embed/VIDEOID'\n  title='Product Demo'\n  allowfullscreen>\n</iframe>\n<!-- 1.2.5 に不合格: YouTube 動画自体に音声解説トラックが\n     アップロードされていない場合、盲のユーザーが動画内の\n     視覚のみのコンテンツにアクセスする手段がない。 -->

\n\n

明確にラベル付けされた音声解説付き代替版のある埋め込み動画 — 適切な例

\n

<!-- 音声解説版へのリンクを伴う YouTube 埋め込み -->\n<figure>\n  <iframe\n    width='560'\n    height='315'\n    src='https://www.youtube.com/embed/VIDEOID'\n    title='Product Demo'\n    allowfullscreen>\n  </iframe>\n  <figcaption>\n    Product Demo — visual walkthrough of the onboarding flow.\n    <!-- 動画の直下に配置された音声解説版への代替リンク -->\n    <a href='https://www.youtube.com/watch?v=DESCRIBED_VIDEOID'>\n      Watch the audio described version of this video\n    </a>\n  </figcaption>\n</figure>\n<!-- 1.2.5 に合格: 音声解説付きの明確にラベル付けされた代替版が\n     提供されており、盲のユーザーも同じコンテンツにアクセスできる。 -->

\n\n

音声解説の切り替えがないカスタム動画プレーヤー — 不適切な例

\n

<!-- 音声解説を有効にする仕組みのないカスタム動画プレーヤー -->\n<div class='video-player' role='region' aria-label='Product Tutorial'>\n  <video id='tutorial-video'>\n    <source src='tutorial.mp4' type='video/mp4'>\n  </video>\n  <div class='controls'>\n    <button id='play-pause'>Play</button>\n    <button id='mute'>Mute</button>\n  </div>\n</div>\n<!-- 1.2.5 に不合格: descriptions トラックも AD トグルも代替版もない。 -->

\n\n

音声解説の切り替えがあるカスタム動画プレーヤー — 適切な例

\n

<!-- アクセシブルな音声解説トグルを備えたカスタム動画プレーヤー -->\n<div class='video-player' role='region' aria-label='Product Tutorial'>\n  <video id='tutorial-video'>\n    <source src='tutorial.mp4' type='video/mp4'>\n    <!-- descriptions トラックをリンク。プレーヤーの JS がトグルで有効化 -->\n    <track id='desc-track' kind='descriptions' src='tutorial-desc.vtt'\n           srclang='en' label='Audio Description'>\n  </video>\n  <div class='controls'>\n    <button id='play-pause'>Play</button>\n    <button id='mute'>Mute</button>\n    <!-- 音声解説用のアクセシブルなトグルボタン -->\n    <button id='ad-toggle' aria-pressed='false'\n            aria-label='Toggle audio description'>\n      Audio Description\n    </button>\n  </div>\n</div>\n<!-- 1.2.5 に合格: descriptions トラックが存在し、カスタムプレーヤーが\n     ユーザーがそれを有効にできるアクセシブルなトグルを提供している。\n     プレーヤーの JS は有効化時に aria-pressed='true' を設定し、トラックを有効にする必要がある。 -->

\n\n

よくある間違い

\n

\n\n

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