この記事でわかること

  • 収録済みの動画の字幕について、WCAGの達成基準1.2.2が求めること
  • 字幕に入れるもの(話す言葉、話している人、大事な音)
  • 常に見える字幕と、利用者が表示を切り替える字幕の違い
  • HTMLのtrack要素で字幕を付けるときの書き方と、確かめる手順

サイトに説明の動画や紹介の動画を載せたとき、音声だけで内容を伝えていないでしょうか。耳が聞こえない人や聞こえにくい人には、話している内容も、場面を伝える音も届きません。この記事では、Webサイトの動画に字幕を付けるときに、何を書き、どう付けるかを紹介します。

もとにした資料は、W3CのWCAG 2.2の達成基準1.2.2と、その解説(Understanding)、技法G93・G87・H95、失敗例F8で、2026年10月25日に取得して確かめました。特定の動画サービスや字幕を作るツール、スクールはすすめません。

先に結論: 話す言葉と大事な音を、動画と同じ言語で

先に結論を書くと、収録済みの動画には、話す言葉と、誰が話しているか、意味のある音を、動画と同じ言語で書いた字幕を付けます。HTMLで動画を載せるなら、track要素のkind属性をcaptionsにして字幕のファイルを指定します。 字幕に入れるものをまとめると、次のとおりです。

入れるもの 例
話す言葉 会話や説明
話している人 誰の発言か
大事な音 効果音
音楽 曲や雰囲気

動画の字幕とアクセシビリティの基準

WCAG 2.2の達成基準1.2.2(Captions (Prerecorded))は、レベルAの基準です。映像と音声を合わせたメディアの、収録済みの音声のすべてに字幕を付けることを求めています。

W3Cの解説では、この基準の目的を、耳が聞こえない人や聞こえにくい人が、映像と音声を合わせた内容を見られるようにすることだとしています。字幕は、音声で伝えている部分の内容を、文字で伝えるものです。

例外は、その動画が、ページの文章の代わりとして作られたもので、そのことがはっきり示されている場合です。なお、生配信の字幕は、別の達成基準1.2.4(Captions (Live))で扱われています。

字幕に入れるもの

W3Cの解説では、字幕には会話だけでなく、誰が話しているかと、音で伝えている話し言葉以外の情報を入れるとしています。意味のある効果音も、その中に入ります。

解説の例では、結び方を教える動画で、話の前に「(音楽)」と書いています。演奏会の動画の例では、歌詞や話した言葉をそのまま書くだけでなく、言葉のない音楽には曲名や作曲者、曲の雰囲気を書いています。

W3Cの失敗例F8では、会話のすべてと大事な音のすべてが入っていない字幕は、本当の字幕ではないとしています。字幕にならない例として、次の2つを挙げています。

  • 会話は書いてあるが、大事な音を書いていない
  • 動画の一部の時間だけ、会話を書いていない

一方で、F8の注記では、読みやすくするために話した言葉を短くまとめることは、よくあるやり方で、字幕として認められなくなるわけではないとしています。

字幕と、訳の字幕の違い

W3Cの技法G93・G87では、この基準の字幕(captions)と、別の言語に訳した字幕(subtitles)を混同しないように注意しています。訳の字幕は、会話だけを別の言語で書いたもので、大事な音は入っていません。

技法H95では、track要素のkind属性で、字幕の種類を示すとしています。kindがcaptionsの字幕は、会話と、理解に必要なほかの音を文字にしたものです。kindがsubtitlesの字幕は会話だけなので、ほかの音が理解に必要な動画では、基準を満たすのに足りないとしています。

常に見える字幕と、切り替えられる字幕

字幕の付け方には、2つあります。

  • 常に見える字幕(技法G93): 会話と大事な音を、文字として映像の中に入れます。いつも見えるので、再生するブラウザなどに字幕の機能が無くても読めます
  • 切り替えられる字幕(技法G87): 利用者が求めたときだけ字幕が出る形です。字幕の要らない人は消したまま見られますが、再生する側に字幕の機能が必要です

技法G93の例では、利用者が再生ソフトの字幕の出し方を知らなくても見られるように、字幕を映像に直接入れている図書館の団体を挙げています。どちらの形でも、字幕に入れるものは同じです。

track要素で字幕を付ける

HTMLのvideo要素で動画を載せる場合は、技法H95のように、track要素で字幕のファイルを指定する方法があります。src属性に字幕のデータのURLを、kind属性に字幕の種類を書きます。

次の例は、技法H95の例をもとに、日本語の動画に日本語の字幕を付ける場合の書き方を示したものです。実行するコマンドではなく、HTMLの書き方の例で、ファイル名は架空のものです。ブラウザで再生して試したものではありません。

<video controls>
  <source src="shop-guide.mp4" type="video/mp4">
  <track kind="captions" label="日本語" src="shop-guide-ja.vtt" srclang="ja">
</video>

技法H95の確かめ方では、動画ごとに、動画の言語で、kindがcaptionsのtrack要素があるかを確かめるとしています。

手順: 字幕を確かめる

作った動画のページで、次の順に確かめます。W3Cの技法G87・G93と失敗例F8の確かめ方に沿った手順です。

  1. 字幕を出す: 切り替えられる字幕なら、再生する画面で字幕をオンにします。常に見える字幕なら、字幕の機能をオフにしたまま再生します
  2. 会話を見る: 会話のすべてに字幕が付いているか、途中で抜けている時間がないかを確かめます
  3. 大事な音を見る: 効果音や音楽など、内容の理解に必要な音が書かれているかを確かめます
  4. 言語を見る: 字幕が動画と同じ言語で書かれているかを確かめます
  5. HTMLを見る: track要素を使っているなら、kindがcaptionsで、動画の言語の字幕を指定しているかを確かめます

自分で直すか、相談するかの判断

判断の目安は、「字幕のファイルを、自分で作り直して差し替えられるか」です。

  • track要素の指定が違う: kindをcaptionsにする、動画の言語の字幕を指定する、といった直し方なら、HTMLを直して、もう一度上の手順で確かめます
  • 字幕に大事な音が入っていない: 字幕のファイルに、音の情報を書き足します。動画を作った人に、どの音が内容に関わるかを聞いてから足すと迷いません
  • 字幕が映像に入っていて直せない: 常に見える字幕の誤りは、映像を作り直すことになります。動画を作った人や、Webデザインの講師と、作り直すか、切り替えられる字幕を足すかを決めます

つまずきやすいところ

  • 訳の字幕だけを付ける: 外国語の動画に日本語の訳だけを付けても、大事な音が入っていなければ、この基準の字幕にはなりません
  • 音楽や効果音を書かない: 話し声がない場面でも、音が内容に関わるなら、何の音かを書きます
  • 映像の中の文字や画像の説明を忘れる: 字幕は音声のための仕組みです。ページに置く画像の内容を文字で伝える方法は、Webデザインで画像の代替テキスト(alt)を書く方法で紹介しています
  • 動画を自動で再生する: 字幕を付けても、勝手に動き出す動画は、動きを控えたい人の妨げになることがあります。止め方は、Webデザインで動きやアニメーションを控えたい人に配慮する方法で紹介しています
  • srclangの言語を確かめない: 字幕の言語は、動画の言語に合わせます。ページの言語の指定のしかたは、Webデザインのlang属性の指定方法で紹介しています

まとめ

  • WCAG 2.2の達成基準1.2.2では、収録済みの動画の音声のすべてに字幕を付けます
  • 字幕には、話す言葉だけでなく、誰が話しているかと、意味のある音を書きます
  • 訳の字幕(subtitles)は会話だけなので、大事な音が入っていなければ足りません
  • HTMLでは、track要素のkindをcaptionsにして、動画の言語の字幕を指定します