WCAG 2.2 ガイドライン「1.2.2 字幕（事前録画）」Level A について

はじめに

WCAG 2.2の「1.2.2 字幕（事前録画）」は、同期メディア（音声と映像が同期しているコンテンツ）において、すべての事前録画された音声コンテンツに字幕を提供することを求めています。これにより、聴覚に障害のある方や音声が聞き取りにくい環境にいる方も、コンテンツを利用できるようになります。

この記事では、HTML、CSS、JavaScriptを学び始めた方に向けて、字幕の重要性とその具体的な実装方法について詳しく解説します。

1. 「1.2.2 字幕」の基本ルール

この基準において、事前録画された音声付きの同期メディアには必ず以下の要件を満たす字幕を用意する必要があります：

• 音声内容を正確に反映したテキストが提供されること。
• 音声と同期して表示されること。

字幕は、会話だけでなく、重要な音や効果音（例: 拍手やドアの音）も含む必要があります。

2. 字幕の実装方法

HTMLで字幕を実装する際は、<track>要素を使用します。この要素は、動画に字幕ファイルを追加するために使用されます。

基本的な実装

HTMLの例

<video controls>
  <source src="example.mp4" type="video/mp4">
  <track src="example.vtt" kind="subtitles" srclang="ja" label="日本語">
  このブラウザは動画を再生できません。
</video>

解説

• <track>要素で字幕ファイルを指定します。
• kind="subtitles"は字幕を意味し、srclangで字幕の言語（日本語の場合はja）を指定します。
• src属性には、字幕の内容を記載したVTTファイル（例: example.vtt）のパスを記載します。

VTTファイルの作成

VTTファイルは、WebVTT（Web Video Text Tracks）形式で作成します。以下はその例です。

VTTファイルの例（example.vtt）

WEBVTT

00:00:00.000 --> 00:00:05.000
こんにちは、これはウェブアクセシビリティの説明動画です。

00:00:05.001 --> 00:00:10.000
字幕は、聴覚障害のある方を含むすべての人に役立ちます。

解説

• 各セクションは「開始時間 –> 終了時間」の形式でタイムスタンプを指定します。
• テキストは、話される内容や重要な音を記載します。

カスタマイズ（CSSによるデザイン調整）

HTMLで動画に字幕をつけた場合、ブラウザによってはデフォルトのスタイルが適用されます。CSSを使って字幕の見た目をカスタマイズすることも可能です。

CSSの例

video::-webkit-media-text-track-display {
  background-color: rgba(0, 0, 0, 0.7); /* 背景を半透明の黒に */
  color: white; /* 字幕の文字色を白に */
  font-size: 16px; /* 字幕の文字サイズ */
  text-shadow: 1px 1px 2px black; /* 字幕の影を追加して読みやすく */
}

JavaScriptを使った字幕の切り替え

JavaScriptを使えば、複数の言語の字幕を動的に切り替える機能を実装できます。

HTML & JavaScriptの例

<video id="video" controls>
  <source src="example.mp4" type="video/mp4">
  <track id="track" src="example-ja.vtt" kind="subtitles" srclang="ja" label="日本語">
  <track src="example-en.vtt" kind="subtitles" srclang="en" label="English">
</video>

<select id="languageSelector" onchange="changeSubtitle()">
  <option value="ja">日本語</option>
  <option value="en">English</option>
</select>

<script>
  function changeSubtitle() {
    const video = document.getElementById("video");
    const track = document.getElementById("track");
    const selectedLang = document.getElementById("languageSelector").value;

    track.src = selectedLang === "ja" ? "example-ja.vtt" : "example-en.vtt";
    video.load();
  }
</script>

解説
ユーザーが言語を選択すると、字幕が切り替わる仕組みです。これにより、多言語対応のアクセシブルな動画を提供できます。

3. 字幕を提供することで得られるメリット

「1.2.2 字幕」を遵守することで、次のようなユーザーに配慮できます：

• 聴覚障害を持つ方：音声を聞き取ることができなくても、字幕で情報を得られる。
• 音声を聞けない環境にいる方：騒音の多い場所や音を出せない静かな場所で利用可能。
• 言語学習者：字幕があることで、聞き取れない部分を文字で補える。

例えば、教育機関のオンライン講座で字幕を提供することで、さまざまな背景を持つ受講者が平等に学べる環境を整えられます。

まとめ

WCAG 2.2の「1.2.2 字幕（事前録画）」は、同期メディアをアクセシブルにするための基本的な基準です。動画に字幕をつけることで、より多くのユーザーがコンテンツを楽しみ、利用できるようになります。

HTMLの<track>要素やVTT形式の字幕ファイルを使えば、簡単に実装できます。これからウェブ制作を始める方も、字幕の提供を意識してアクセシブルなサイト作りに挑戦してみましょう！

当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティウィジェットツールをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。