WCAG 2.2 ガイドライン「1.2.9 音声のみ（ライブ）」Level AAA について
はじめに
WCAG 2.2の「1.2.9 音声のみ（ライブ）」は、ライブの音声コンテンツに対して、その内容を等しく伝えるためのテキスト代替を提供することを求めています。このガイドラインは、聴覚に障害がある方や、音声を聞けない状況にいる方に向けて、ライブ音声の内容をアクセス可能にすることを目的としています。
この記事では、初心者でも理解しやすいように、HTML、CSS、JavaScriptを使った具体的な実装方法を詳しく解説します。
1. ライブ音声コンテンツに対するテキスト代替の必要性
ライブ音声コンテンツとは、リアルタイムで配信される音声情報を指します。例としては以下のようなものがあります：
- ラジオ放送
- ライブのポッドキャスト
- オンライン会議でのスピーチ音声
テキスト代替を提供することで、以下のようなユーザーがコンテンツを利用しやすくなります：
- 聴覚障害を持つ方：音声の内容を読むことで情報を得られる。
- 音声を聞けない環境にいる方：騒音の多い場所や音声再生が制限されている状況でも利用可能。
2. テキスト代替の提供方法
a. 事前準備されたスクリプトを提供する
スピーチや講義であらかじめ原稿（スクリプト）が用意されている場合、そのスクリプトをテキストとして提供します。
HTMLの例
<audio controls>
<source src="live-audio.mp3" type="audio/mpeg">
このブラウザは音声を再生できません。
</audio>
<p>
このライブ放送の内容を以下のリンクからテキストでご覧いただけます：<br>
<a href="prepared-script.html">放送内容（スクリプト）を読む</a>
</p>
解説
- スクリプトがある場合は、別ページやリンクを使って提供します。
- テキスト代替は音声コンテンツの近くに配置するとユーザーが見つけやすくなります。
b. ライブ音声キャプションをリアルタイムで提供する
リアルタイムの音声を自動または手動でテキスト化し、画面上に表示する方法です。
HTMLとJavaScriptの例
<div id="liveAudioContainer">
<audio controls>
<source src="live-audio-stream.mp3" type="audio/mpeg">
このブラウザは音声を再生できません。
</audio>
<div id="liveCaptions" style="margin-top: 10px; padding: 10px; background-color: #f0f0f0; border: 1px solid #ccc;">
ライブキャプションがここに表示されます...
</div>
</div>
<script>
// 簡単なキャプション更新の例
const captions = [
{ time: 0, text: "こんにちは、ライブ放送が始まりました。" },
{ time: 10, text: "本日はウェブアクセシビリティについてお話しします。" },
{ time: 20, text: "質問があればチャットでお送りください。" },
];
setInterval(() => {
const currentTime = Math.floor((new Date().getTime() / 1000) % 30); // 仮のタイマー
const currentCaption = captions.find(caption => caption.time === currentTime);
if (currentCaption) {
document.getElementById("liveCaptions").textContent = currentCaption.text;
}
}, 1000);
</script>
解説
captions配列で時間とテキストを定義し、リアルタイムで更新。- この例では固定データを使用していますが、音声認識APIを活用することで自動生成も可能です。
c. 専門のライブキャプションサービスを利用する
大規模なイベントや重要なライブ放送の場合、専門のライブキャプションサービスを利用すると精度の高いテキスト代替を提供できます。
3. 実装における注意点
- タイミングを正確に
音声の進行とキャプションの表示タイミングを合わせることで、ユーザーの理解を助けます。 - 可読性を考慮
キャプションの文字サイズや色のコントラストを調整し、読みやすいデザインにします。
CSSの例
#liveCaptions {
font-size: 16px;
line-height: 1.5;
color: #333;
background-color: #fff;
padding: 10px;
border-radius: 5px;
max-width: 600px;
margin: auto;
}
4. アクセシビリティのメリット
「1.2.9 音声のみ（ライブ）」を遵守することで、以下のようなユーザーに配慮できます：
- 聴覚障害を持つ方：リアルタイムで音声の内容を把握可能。
- 多言語ユーザー：キャプションを翻訳して、多国籍な視聴者にも対応。
- 騒音や静寂の環境下の利用者：音声を聞けない状況でもコンテンツを利用可能。
5. 実装のステップ
- 音声のスクリプトを準備
可能であれば、事前にライブ音声のスクリプトを用意し、リンクとして提供します。 - リアルタイムキャプションの仕組みを構築
小規模な場合は手動で、大規模な場合は音声認識APIや専門サービスを活用します。 - アクセシビリティを考慮したデザインを採用
キャプションの見やすさを重視したスタイリングを行います。
まとめ
WCAG 2.2の「1.2.9 音声のみ（ライブ）」は、ライブ音声コンテンツを聴覚障害のある方や音声を聞けない状況にいる方が利用できるようにするための重要なガイドラインです。
- テキストスクリプトやリアルタイムキャプションの提供を行うことで、より多くの人に配慮したウェブコンテンツを提供できます。
- HTML、CSS、JavaScriptを使えば、簡単に実装を開始できます。
アクセシブルなライブコンテンツを目指して、ぜひ取り組んでみてください！
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティウィジェットツールをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。