WCAG 2.2 ガイドライン「1.2.6 手話（事前録画）」Level AAA について
はじめに
WCAG 2.2の「1.2.6 手話（事前録画）」は、事前録画された同期メディア（音声と映像が同期しているコンテンツ） に対して、手話通訳を提供することを求めています。この基準は、聴覚障害を持つ方が情報を理解しやすくするための、最高レベル（Level AAA）のアクセシビリティ基準です。
この記事では、HTML、CSS、JavaScriptを学び始めた方にもわかりやすいように、具体例や実装方法を交えて手話通訳の提供方法について詳しく解説します。
1. 手話通訳を提供する目的
聴覚障害を持つ方の中には、書かれたテキストや字幕を読むよりも手話を理解しやすい方が多くいます。手話通訳を動画に組み込むことで、以下のようなメリットがあります：
- 手話を主要なコミュニケーション手段とするユーザーに配慮。
- 視覚的な情報と手話を同時に提供することで情報の理解を向上。
2. 手話通訳の提供方法
a. 動画に手話通訳者を埋め込む
手話通訳者を動画の一部として録画し、元の動画に埋め込む方法がもっともシンプルで一般的です。この方法では、動画全体に手話通訳が含まれるため、ユーザーは特別な操作をする必要がありません。
HTMLの例
<video controls>
<source src="example-with-sign-language.mp4" type="video/mp4">
このブラウザは動画を再生できません。
</video>
解説
- 手話通訳者が映像内に表示される形式で制作された動画を使用します。
- 編集ソフトで元の動画に手話通訳を合成します。
b. 手話通訳を別のビューで提供する
手話通訳者の動画を別のウィンドウやオーバーレイで表示する方法です。ユーザーが手話通訳の表示をオン/オフできる柔軟性があります。
HTMLとJavaScriptの例
<video id="mainVideo" controls>
<source src="example.mp4" type="video/mp4">
このブラウザは動画を再生できません。
</video>
<video id="signLanguageVideo" controls style="display: none; width: 200px; position: absolute; bottom: 10px; right: 10px;">
<source src="sign-language.mp4" type="video/mp4">
</video>
<button id="toggleSignLanguage">手話通訳を表示</button>
<script>
document.getElementById("toggleSignLanguage").addEventListener("click", () => {
const signVideo = document.getElementById("signLanguageVideo");
signVideo.style.display = signVideo.style.display === "none" ? "block" : "none";
});
</script>
解説
- 手話通訳を別の動画として提供し、ユーザーが必要に応じて表示を切り替えられるようにします。
style="display: none;"で非表示にし、JavaScriptで表示状態を管理します。
c. 手話通訳をSMIL（Synchronized Multimedia Integration Language）で同期
SMILを使って、元の動画と手話通訳動画を同期させて表示する方法もあります。ただし、SMILは現代のウェブではあまり一般的ではなく、HTML5やJavaScriptを使う方法が推奨されます。
3. 手話通訳のデザインと配置
手話通訳者の表示を効果的に行うために、次の点に注意してください：
- 手話通訳者の動画は十分な大きさで表示する
- 通訳者の手や表情が視認しやすい大きさに設定します。
- ユーザーが表示位置を調整できるようにする
- オーバーレイで提供する場合、ユーザーが位置やサイズを調整できる機能を追加すると便利です。
CSSによるスタイル例
#signLanguageVideo {
width: 200px;
position: absolute;
bottom: 10px;
right: 10px;
border: 2px solid black;
background-color: white;
}
4. 多言語対応と拡張性
手話にも国ごとの言語が存在します（例: 日本手話、アメリカ手話）。動画に複数の手話通訳を提供する場合、ユーザーが言語を選択できるようにする必要があります。
HTMLとJavaScriptの例
<video id="mainVideo" controls>
<source src="example.mp4" type="video/mp4">
</video>
<select id="languageSelector">
<option value="none">手話なし</option>
<option value="japanese">日本手話</option>
<option value="asl">アメリカ手話</option>
</select>
<div id="signLanguageContainer"></div>
<script>
const signLanguages = {
japanese: "japanese-sign-language.mp4",
asl: "asl-sign-language.mp4"
};
document.getElementById("languageSelector").addEventListener("change", (event) => {
const container = document.getElementById("signLanguageContainer");
container.innerHTML = ""; // 既存の手話動画を削除
if (event.target.value !== "none") {
const video = document.createElement("video");
video.src = signLanguages[event.target.value];
video.controls = true;
video.style.width = "200px";
container.appendChild(video);
}
});
</script>
解説
selectタグで手話言語を選択するドロップダウンを提供します。- ユーザーが選択した言語の動画を動的に表示します。
5. アクセシビリティのメリット
手話通訳を提供することで、以下のユーザー層に対応できます：
- 聴覚障害者：手話を主要なコミュニケーション手段とする方が動画の内容を理解しやすくなります。
- 多国籍なユーザー：多言語の手話を提供することで、グローバルなアクセシビリティが向上します。
たとえば、教育用の動画コンテンツに手話通訳を追加することで、聴覚障害を持つ生徒も平等に学べる環境を提供できます。
まとめ
WCAG 2.2の「1.2.6 手話（事前録画）」は、手話通訳を通じて視聴覚的にアクセシブルなコンテンツを実現するための最高レベル（Level AAA）の基準です。
- 手話通訳を動画に埋め込む方法や別のウィンドウで表示する方法を使って実装できます。
- 初心者でもHTMLやJavaScriptを使えば、柔軟な手話通訳の提供を簡単に取り入れることが可能です。
これを参考に、誰にでも優しいウェブコンテンツを目指して実践してみましょう！
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。