WCAG 2.2 ガイドライン「1.2.4 字幕（ライブ）」Level AA について
はじめに
WCAG 2.2の「1.2.4 字幕（ライブ）」は、ライブ音声を含む同期メディアに対してリアルタイムで字幕を提供することを求めています。このガイドラインは、ライブイベントや放送、ウェビナーなどのコンテンツを聴覚に障害のある方や騒音の多い環境で視聴する方にも配慮することを目的としています。
この記事では、初心者向けにHTML、CSS、JavaScriptを用いた具体的な方法や実装例を交えながら、ガイドライン「1.2.4 字幕（ライブ）」をわかりやすく解説します。
1. ライブ字幕の必要性
ライブ字幕は、ライブ配信中に発生する音声をリアルタイムでテキスト化して表示します。これにより、以下のようなユーザーを支援できます：
- 聴覚障害を持つ方：音声を聞く代わりにテキストで情報を得られる。
- ノイズの多い環境にいる方：音声が聞き取りにくい状況でも内容を理解可能。
- 音声なしで視聴する方：静かな場所で音声を再生できない場合に役立つ。
2. ライブ字幕の種類
ライブ字幕には主に次の2種類があります：
-
オープンキャプション
- 常に表示されている字幕。
- ユーザーが字幕のオン・オフを切り替える必要がない。
-
クローズドキャプション
- 必要に応じてオン・オフを切り替えられる字幕。
- 動画プレイヤーの機能として提供されることが多い。
3. HTMLとJavaScriptによるライブ字幕の基本実装
a. シンプルなライブ字幕表示
HTMLとJavaScriptでリアルタイムに字幕を更新する方法を示します。
HTMLとJavaScriptの例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ライブ字幕の例</title>
<style>
#caption {
position: absolute;
bottom: 10px;
left: 10px;
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 10px;
font-size: 16px;
border-radius: 5px;
}
</style>
</head>
<body>
<video id="liveVideo" controls autoplay>
<source src="live-stream.mp4" type="video/mp4">
このブラウザはライブ映像をサポートしていません。
</video>
<div id="caption">字幕がここに表示されます...</div>
<script>
// 簡単な字幕更新ロジックの例
const captions = [
{ time: 0, text: "ようこそ！本日のテーマはウェブアクセシビリティです。" },
{ time: 10, text: "まずは基本的なガイドラインを紹介します。" },
{ time: 20, text: "質問があればチャットで送信してください。" },
];
const captionDiv = document.getElementById("caption");
setInterval(() => {
const currentTime = Math.floor(document.getElementById("liveVideo").currentTime);
const currentCaption = captions.find(caption => caption.time === currentTime);
if (currentCaption) {
captionDiv.textContent = currentCaption.text;
}
}, 1000);
</script>
</body>
</html>
解説
- 配列
captionsに時間とテキストを定義します。 - 動画の再生時間に応じて、リアルタイムで字幕を更新します。
b. クローズドキャプションの実装
クローズドキャプションでは、字幕を表示・非表示に切り替える機能を提供します。
例：字幕のオン/オフを切り替え
<button onclick="toggleCaptions()">字幕の切り替え</button>
<script>
function toggleCaptions() {
const captionDiv = document.getElementById("caption");
captionDiv.style.display = captionDiv.style.display === "none" ? "block" : "none";
}
</script>
4. ライブ字幕を提供する技術
a. SMIL（Synchronized Multimedia Integration Language）
SMILを使えば、ライブ字幕を同期して表示するテキストストリームを提供できます。ただし、現在はHTML5の普及に伴い、SMILを直接使用するケースは減少しています。
b. Web Speech API を活用したリアルタイム音声認識
JavaScriptのWeb Speech APIを使用して、ライブ音声をリアルタイムでテキスト化し表示することも可能です。
簡単な実装例
const recognition = new webkitSpeechRecognition();
recognition.lang = "ja-JP";
recognition.continuous = true;
recognition.onresult = (event) => {
const transcript = event.results[event.results.length - 1][0].transcript;
document.getElementById("caption").textContent = transcript;
};
recognition.start();
注意
Web Speech APIはブラウザの対応状況に依存するため、すべての環境で動作するわけではありません。
5. アクセシビリティへのメリット
ライブ字幕を提供することで、多くのユーザーに配慮したコンテンツが実現します：
- 聴覚障害を持つ方：ライブイベントやウェビナーをリアルタイムで理解可能。
- 多言語対応が必要な場面：複数の言語で字幕を提供することで、国際的な視聴者にも対応。
- 騒音が多い場所での視聴者：音声を聞き取れない場合でもコンテンツを楽しめる。
まとめ
WCAG 2.2の「1.2.4 字幕（ライブ）」は、ライブ音声を含むコンテンツをアクセシブルにするための重要なガイドラインです。
- HTMLとJavaScriptを活用することで、簡単にライブ字幕を提供できます。
- クローズドキャプションやWeb Speech APIを使った応用例も考慮し、ユーザー体験をさらに向上させましょう。
アクセシブルなライブ配信を実現し、すべての人が利用できるウェブコンテンツを作成する第一歩を踏み出してください！
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。