WCAG 達成基準 · Level A
WCAG 1.2.3: 音声解説またはメディアの代替(事前録画)
WCAG 1.2.3 は、事前に録画された同期メディア(音声付き動画)について、視覚的な内容の音声解説、または完全なテキストによる代替を提供することを求めています。これにより、視覚情報によって伝えられる内容に、盲のユーザーやロービジョンのユーザーもアクセスできるようにします。
- Level A
- Wcag
- Wcag 2 2 a
- 知覚可能
- アクセシビリティ
この規定の意味
WCAG 達成基準 1.2.3 は、動画コンテンツを利用する盲人およびロービジョンのユーザーにとって最も根本的な障壁の1つ、すなわち音声としては一切伝えられない視覚情報の欠落に対処するものです。この達成基準では、すべての事前録画された同期メディア、つまり音声と組み合わされた動画コンテンツについて、ウェブ制作者は視覚トラックの音声解説を提供するか、またはテキスト形式の完全なメディア代替のいずれかを提供しなければならないと定めています。
音声解説とは、動画の音声トラックに追加されるナレーションであり、メインの音声だけでは理解できない重要な視覚的な詳細を説明するものです。これらの解説は通常、会話の自然な間に挿入されるか、複雑な視覚的イベントを説明する時間を確保するために動画を一時的に停止することもあります。例えば、トレーニング動画で、プレゼンターがホワイトボードに図を描いているのに、それについて口頭では何もコメントしない場合、音声解説は何が描かれているのか、そしてそれがなぜ重要なのかをナレーションします。
メディアの完全なテキスト代替とは、同期メディア内のすべての情報、すなわち音声コンテンツ(会話、ナレーション、効果音)と視覚コンテンツ(動作、状況、画面上のテキスト、話者の識別)をテキスト形式で伝える文書です。これは単なる文字起こしを拡張したものであり、動画を見ることも聞くこともできないユーザーでも、その動画が伝えるすべての情報を理解できるよう、視覚的な出来事を十分な精度で記述しなければなりません。
この達成基準は、特に事前録画された同期メディアに適用されます。ライブ動画配信は別の達成基準(キャプションに関する 1.2.4)で扱われており、音声のみのコンテンツは 1.2.1 の対象です。重要なのは、動画トラックが純粋に装飾的な場合、例えば情報を一切伝えないアニメーション背景などの場合、この達成基準は適用されないという点です。同様に、動画の音声トラックがすでにすべての意味のある視覚情報を完全に説明している場合(「同等の音声」と呼ばれることもあります)、追加の音声解説は不要です。
1.2.3 における適合には、事前録画された各同期メディアについて、次のいずれかが真であることが必要です。すなわち、音声解説が提供されているか、またはすべての音声および視覚情報を伝えるテキスト代替がメディアにリンクされているか、もしくはメディアのすぐ近くに配置されていることです。失敗となるのは、動画コンテンツに意味のある視覚要素(画面上のテキスト、グラフィカルなデータ、重要な感情を伝える表情、手順のデモなど)が含まれているにもかかわらず、それらが音声やテキストの代替手段によって一切伝えられていない場合です。
1.2.3 はレベル A の要件であり、ベースラインの期待値である点に注意してください。より強固なレベル AA の達成基準 1.2.5(音声解説 — 事前録画)は、必要な場合には常に音声解説を要求しますが、1.2.3 はレベル A においてテキスト代替を代替手段として認めています。
なぜ重要か
世界保健機関によると、世界中で約 22 億人が何らかの視覚障害を抱えています。盲人ユーザーにとって、音声解説やテキスト代替のない動画コンテンツは、視覚情報の情報源としては完全にアクセス不能です。スクリーンリーダーは動画要素の存在を知らせ、関連するキャプションを読み上げることはできますが、動画フレームの視覚コンテンツ自体を解釈することはできません。音声解説やメディア代替がなければ、ユーザーは動画が「見せているが、話してはいない」ものをそのまま見逃してしまいます。
具体的なシナリオを考えてみましょう。あるトルコの e コマースプラットフォームが、スマートホームデバイスの製品デモ動画を公開しています。動画では、プレゼンターがデバイスをスマートフォンアプリとペアリングし、両方の画面でメニューを操作し、特定のポートにケーブルを接続する様子が映し出されます。プレゼンターのナレーションはデバイスの利点に焦点を当てており、どのボタンが押されているのか、どのメニュー項目が選択されているのかは説明しません。スクリーンリーダーを使ってこの動画を見る盲人ユーザーは、ナレーションしか聞くことができず、自宅でセットアップを再現するために必要な手順の視覚情報を一切得られません。音声解説や詳細なテキスト代替があれば、そのユーザーも同じ説明コンテンツに完全にアクセスできるようになります。
盲人ユーザー以外にも、詳細なテキスト代替は、動画のようなテンポの速いコンテンツよりも書かれた手順の方が処理しやすい認知障害のあるユーザーに役立ちます。また、動画をストリーミングできない帯域幅制約のある環境のユーザー、動画がブロックされている企業ネットワーク上のユーザー、特定の動画形式をサポートしていないデバイスやブラウザを使用しているユーザーにも有益です。検索エンジンはテキスト代替もインデックス化するため、それを提供することで、動画コンテンツを全文検索で発見可能にし、SEO を改善します。これはアクセシビリティ上の価値に加え、ビジネス上も意味のある利点です。
動画コントロールを正確に操作できない運動障害のあるユーザーにとっては、テキスト代替があれば、一時停止や巻き戻し、再生コントロールに苦労することなく、自分のペースでコンテンツを利用できます。要するに、音声解説とメディア代替は幅広いユーザー層に役立ち、これらを必要とするユーザーにとどまらず、動画コンテンツ全体の品質とリーチを大きく向上させます。
関連する axe-core のルール
WCAG 1.2.3 には手動テストが必要です。この達成基準の違反を自動的に検出する axe-core のルールは存在せず、その理由を理解することは、テスターが手動で何を確認すべきかを明確にする助けになります。
- 手動テストが必要 — 視覚コンテンツの分析: 自動ツールは、
<video>要素や<track>要素、関連するトランスクリプトへのリンクの存在を検出することはできますが、音声解説やテキスト代替の内容が十分かどうかを評価することはできません。十分かどうかは、すべての意味のある視覚情報が伝えられているかどうかに依存し、その判断には人間が動画を視聴し、代替コンテンツを読み、両者を比較することが必要です。axe のスキャンは<track kind='descriptions'>要素の存在を確認することはできますが、その解説が動画内のすべての重要な視覚イベントを実際にカバーしているかどうかを検証することはできません。 - 手動テストが必要 — 同等性の評価: メインの音声トラックがすでにすべての視覚情報を説明しているかどうか(追加の音声解説が不要かどうか)を判断することは、本質的にコンテンツに関する判断です。レビュアーは動画を視聴し、盲人ユーザーが音声だけを聞いた場合に意味のある情報を見逃さないかどうかを評価しなければなりません。この判断を信頼できる形で行える自動ルールは存在しません。
- 手動テストが必要 — テキスト代替の完全性: 音声解説の代わりにテキスト代替(完全なメディア代替)が提供されている場合、レビュアーはテキスト代替を読み、動画と比較して、すべての視覚的な出来事、画面上のテキスト、意味のある動作が反映されているかを確認しなければなりません。自動ツールはトランスクリプトへのリンクの存在を確認することはできますが、そのトランスクリプトが完全かつ正確かどうかを評価することはできません。
テスト方法
- 自動スキャンによるベースライン: 動画を含むページに対して axe DevTools または Google Lighthouse を実行します。どちらのツールも 1.2.3 の違反を直接は検出しませんが、
<track>要素の欠如(キャプションに関する 1.2.2 の下で検出)や、画像ベースのメディアに対するテキスト代替の欠如など、関連する問題を表面化させることができます。ページ上に存在する動画要素をメモしておき、1.2.3 の下でどれが手動レビューの対象となるかを把握します。 - 同期メディアの特定: ページ上のすべての
<video>要素(または YouTube や Vimeo の iframe などの埋め込みサードパーティプレーヤー)を探します。各動画が事前録画されているかつ同期メディア(つまり意味のある音声トラックと動画トラックの両方を持つか)を確認します。動画が音声のみである場合や、動画トラックが装飾的である場合は、1.2.3 の対象外です。 - 音声をオンにして動画を視聴: 通常どおり動画を視聴し、音声では説明されていないが視覚的に伝えられている情報に細心の注意を払います。よくある例としては、画面上のテキストオーバーレイ、描画される図やチャート、物理的なプロセスのステップごとのデモ、感情的な意味を持つ表情やボディランゲージ、複数の人物が画面に登場する場合の話者の識別などがあります。
- 音声解説トラックの有無を確認: 動画要素のマークアップを確認し、
<track kind='descriptions'>要素があるかどうかを調べます。存在する場合は、動画プレーヤーで解説を有効にする(またはそれを表示できるブラウザを使用する)うえで動画を再視聴します。ステップ 3 で特定したすべての意味のある視覚イベントが、適切なタイミングで音声解説トラック内で説明されていることを確認します。 - 完全なテキスト代替の有無を確認: 音声解説トラックが存在しない場合は、動画の近くまたは直後に配置されたトランスクリプトや完全なメディア代替へのリンクを探します。リンク先の文書またはインラインテキストが、すべての音声コンテンツ(会話、ナレーション、関連する効果音)とすべての視覚コンテンツ(動作、画面上のテキスト、状況の説明、話者の識別)を説明していることを確認します。
- スクリーンリーダーによる検証(NVDA + Firefox): NVDA を起動した状態でページを開きます。動画要素に移動し、NVDA が動画の存在と関連するコントロールをアナウンスすることを確認します。テキスト代替がインラインまたはリンクで提供されている場合はそこへ移動し、NVDA が内容を省略なくすべて読み上げることを確認します。注意: NVDA は動画フレームの視覚コンテンツを読み取ることはできません。このことは、ステップ 3 における人間による比較が不可欠である理由を裏付けています。
- スクリーンリーダーによる検証(VoiceOver + macOS の Safari): VoiceOver を有効にし、動画へ移動します。VoiceOver のローターを使って動画要素および関連する track 要素やリンク要素を探します。説明トラックが存在する場合、それが Safari のメディアコントロールを通じて利用可能であることを確認します。
- サードパーティプレーヤー: YouTube の埋め込みについては、その動画に音声解説版(多くの場合、説明欄からリンクされた別動画)があるか、または関連するトランスクリプトが存在し、埋め込みページからリンクされているかを確認します。Vimeo の場合は、動画のアクセシビリティ設定を確認します。サードパーティプレーヤーを使用しているからといって自動的に 1.2.3 を満たすわけではなく、ページ制作者が代替手段を提供またはリンクする責任を負います。
修正方法
シナリオ 1: 音声解説のない HTML5 動画 — 不適合
<!-- A product demo video with meaningful visual content but no audio description or text alternative -->
<video controls width='800'>
<source src='product-demo.mp4' type='video/mp4'>
<track kind='captions' src='captions-en.vtt' srclang='en' label='English' default>
</video>
シナリオ 1: 音声解説トラック付き HTML5 動画 — 適合
<!-- Audio description track added using kind='descriptions'.
The VTT file contains timed narrations of visual events
that are not conveyed through the main audio. -->
<video controls width='800'>
<source src='product-demo.mp4' type='video/mp4'>
<track kind='captions' src='captions-en.vtt' srclang='en' label='English' default>
<track kind='descriptions' src='descriptions-en.vtt' srclang='en' label='Audio Descriptions'>
</video>
シナリオ 2: テキスト代替のない HTML5 動画 — 不適合
<!-- Tutorial video with on-screen steps and diagrams; no transcript provided -->
<section>
<h2>How to Configure Your Router</h2>
<video controls width='800'>
<source src='router-setup.mp4' type='video/mp4'>
<track kind='captions' src='captions-tr.vtt' srclang='tr' label='Turkish' default>
</video>
</section>
シナリオ 2: 完全なメディア代替付き HTML5 動画 — 適合
<!-- Full media alternative linked immediately after the video.
The linked page contains both transcript text (all dialogue and narration)
and descriptions of all visual steps shown in the video. -->
<section>
<h2>How to Configure Your Router</h2>
<video controls width='800'>
<source src='router-setup.mp4' type='video/mp4'>
<track kind='captions' src='captions-tr.vtt' srclang='tr' label='Turkish' default>
</video>
<p>
<a href='router-setup-full-transcript.html'>
Full text alternative for this video (includes all dialogue and visual descriptions)
</a>
</p>
</section>
シナリオ 3: 追加の代替手段がない YouTube 埋め込み — 不適合
<!-- Embedded YouTube video; the video on YouTube has no audio description
and no transcript is linked on this page -->
<iframe width='560' height='315'
src='https://www.youtube.com/embed/XXXXXXXXXXX'
title='Annual Report Highlights 2024'
allowfullscreen>
</iframe>
シナリオ 3: テキスト代替へのリンク付き YouTube 埋め込み — 適合
<!-- Embedding page provides a link to a full text alternative.
The linked document describes all visual content in the video
(slides, charts, on-screen data) in addition to the spoken content. -->
<figure>
<iframe width='560' height='315'
src='https://www.youtube.com/embed/XXXXXXXXXXX'
title='Annual Report Highlights 2024'
allowfullscreen>
</iframe>
<figcaption>
<a href='annual-report-2024-full-transcript.html'>
Read the full text alternative for Annual Report Highlights 2024
</a>
</figcaption>
</figure>
シナリオ 4: 音声がすでにすべての視覚コンテンツを説明している動画(例外) — 適合
<!-- This video features a narrator who explicitly describes every action
being performed on screen: 'I am now clicking the blue Settings button
in the top-right corner and selecting Account from the dropdown menu.'
Because the audio fully conveys all visual information, no separate
audio description is required under 1.2.3. -->
<video controls width='800'>
<source src='fully-described-tutorial.mp4' type='video/mp4'>
<track kind='captions' src='captions-en.vtt' srclang='en' label='English' default>
</video>
<!-- Document the rationale in an internal accessibility conformance note -->
よくある間違い
- 音声解説の代わりにキャプションを提供すること: キャプションは、ろう者ユーザーのために話し言葉の音声を文字化するものであり、盲人ユーザーのために視覚情報を説明するものではありません。
<track kind='captions'>要素を追加することは 1.2.2 を満たしますが、1.2.3 を満たすことにはなりません。これは、異なる障害グループに対応する別個の要件です。 - 会話だけをカバーするトランスクリプトへのリンク: 1.2.3 のテキスト代替は、画面上のテキスト、図、物理的な動作、話者の識別など、すべての意味のある視覚コンテンツを説明しなければなりません。スクリプトだけを文字起こししたトランスクリプトは、動画に視覚のみの情報が含まれている場合、この達成基準に不適合となるのが一般的です。
- テキスト代替へのリンクを動画から離れた場所に配置すること: 完全なメディア代替へのリンクが脚注に埋もれていたり、明確な隣接リンクなしに別ページに置かれていたりすると、ユーザーがそれを見つけられない可能性があります。リンクは動画要素の直前または直後に表示し、スクリーンリーダーユーザーが自然な読み順で出会えるようにすべきです。
- YouTube の自動生成トランスクリプトが達成基準を満たすと想定すること: YouTube の自動生成トランスクリプトは話し言葉の音声のみをカバーします。視覚コンテンツを説明せず、また不正確であることも多いため、1.2.3 における十分な完全メディア代替とは見なされません。
<track kind='descriptions'>要素を使用しながら、VTT ファイルを空または不完全のままにすること: track 要素の存在だけでは不十分であり、VTT ファイルにはすべての意味のある視覚イベントについて、正確でタイミングの合った解説が含まれていなければなりません。空の、または骨組みだけの VTT ファイルでは、この達成基準を満たしません。- 画面上のテキストオーバーレイの説明を怠ること: マーケティング動画では、統計情報、製品名、行動喚起のテキストなどがアニメーションオーバーレイとして頻繁に表示されます。これらのオーバーレイがナレーターによって読み上げられない場合、音声解説またはテキスト代替に含める必要がありますが、制作者はしばしばこれを見落とします。
- あいまいすぎる音声解説を書くこと: 「プレゼンターがプロセスを実演します」といった説明は不十分です。効果的な解説は、具体的な動作、インターフェース要素、意味のある場合の色、空間的な関係を明示します。例: 「プレゼンターはツールバー右側の赤い Delete ボタンをクリックし、ダイアログボックスで OK を選択して確認します。」
- 情報を含む自動再生または背景動画に代替手段を提供しないこと: 自動再生され、製品機能をテキストオーバーレイで表示するヒーローセクションなど、重要な情報を表示する動画は、依然として同期メディアであり、意味のあるコンテンツを伝える場合にはこの達成基準への適合が必要です。
- 検証せずに動画を装飾的とみなすこと: チームが要件を回避するために動画を「装飾的」とラベル付けする一方で、実際には製品情報や説明コンテンツを伝えていることがあります。装飾的例外が適用されるのは、動画が本当に、隣接するテキストで既に提供されている以上の意味のある情報を一切追加しない場合に限られます。
- 動画を更新した際に音声解説やテキスト代替を更新し忘れること: 動画コンテンツが変更された場合、例えば製品手順が改訂されたり価格データが更新されたりした場合には、音声解説とテキスト代替もそれに合わせて更新しなければなりません。元の代替が正確であったとしても、内容が古くなった代替は適合失敗となります。
トルコのアクセシビリティ規制との関係
トルコの大統領通達 2025/10 は、2025 年 6 月 21 日付官報第 32933 号で公布され、トルコで事業を行う幅広い公的・民間組織に対して、ウェブアクセシビリティ基準の遵守を義務付けています。この通達は国際的に認められたアクセシビリティ標準を参照しており、WCAG 2.2 レベル A およびレベル AA が適合の技術的ベースラインとして位置付けられています。WCAG 1.2.3 はレベル A の要件であるため、この通達の下で最も基本的な義務の1つであり、これを無視することを認めるような、より低い適合レベルは存在しません。
通達は幅広い組織種別を対象としています。省庁、自治体、国立大学、その他の公的機関を含む公的機関および政府機関は、通達の公布日から1 年以内に適合を達成しなければなりません。通達の対象となる民間部門には、e コマースプラットフォーム、銀行および金融機関、病院および民間医療提供者、20 万人以上の加入者を有する通信会社、認可旅行代理店、民間輸送会社、国民教育省(MoNE)により認可された私立学校が含まれます。これらの民間組織は、公布日から2 年以内に適合を達成する必要があります。
今日では事実上すべての主要なトルコの機関や企業が動画コンテンツを公開していることを踏まえると、動画コンテンツを公開するすべての対象組織にとって、WCAG 1.2.3 は具体的で執行可能な義務を生み出します。モバイルアプリの使い方を説明する動画チュートリアルを公開する銀行、患者登録の手順を説明する動画ガイドを掲載する公立病院、画面上の料金プラン比較を含むプロモーション動画を共有する通信事業者、製品デモ動画を掲載する e コマースサイトなどは、すべての事前録画された同期メディア資産について、音声解説または完全なテキスト代替を付与しなければなりません。
通達の要件に従わない場合、規制当局による監視や評判の低下を招く可能性があり、トルコにおけるデジタルアクセシビリティの執行が成熟するにつれて、対象組織にとって法的リスクも生じます。組織は WCAG 1.2.3 を任意の改善ではなく、法的なベースライン義務として扱うべきです。実務的には、すべての動画コンテンツの棚卸しを行い、どの動画が視覚のみの情報を含んでいるかを評価し、そのような動画について体系的に音声解説または完全なテキスト代替を作成することを意味します。新たな動画制作ワークフローには、キャプションや字幕と並んで、解説用スクリプトやテキスト代替といったアクセシビリティ成果物を標準的なアウトプットとして組み込む必要があります。
出典と参考資料
- W3C Understanding 1.2.3 Audio Description or Media Alternative (Prerecorded)
- W3C Techniques for 1.2.3
- WebAIM: Captions, Transcripts, and Audio Descriptions
- MDN: HTMLTrackElement kind attribute
- MDN: The HTML track element
- W3C Technique G78: Providing a second, user-selectable, audio track
- W3C Technique G69: Providing an alternative for time-based media
