実践Webアクセシビリティ

ビデオ/オーディオプレイヤーのアクセシビリティ対応：実装のステップと注意点

Tags: アクセシビリティ, メディア, ビデオ, オーディオ, HTML, WebVTT, ARIA, WCAG

はじめに

ウェブコンテンツにおけるビデオやオーディオは、情報伝達やエンターテイメントにおいて重要な役割を担っています。しかし、これらのメディアプレイヤーがアクセシブルでない場合、聴覚障害のある方、視覚障害のある方、運動機能に制約のある方などがコンテンツにアクセスすることが困難になります。

この記事では、ウェブサイトに埋め込むビデオおよびオーディオプレイヤーをアクセシブルにするための具体的な実装方法に焦点を当て、必要なマークアップ、機能、およびテスト方法について解説します。ネイティブな<video>および<audio>要素の活用から、字幕や代替音声の提供、キーボード操作への対応まで、実践的なステップをご紹介します。

なぜメディアプレイヤーのアクセシビリティ対応が必要か

メディアプレイヤーのアクセシビリティ対応は、WCAG（Web Content Accessibility Guidelines）の各基準において求められています。対応を怠ると、以下のような状況が生じ得ます。

アクセシブルなメディアプレイヤーを提供することは、より多くのユーザーにコンテンツを届けるための基本的な要件と言えます。

アクセシブルなメディアプレイヤーの実装方法

1. ネイティブな<video> / <audio> 要素の活用

HTML標準の<video>および<audio>要素は、基本的なアクセシビリティ機能を備えています。controls属性を付与することで、ブラウザが提供するデフォルトのコントロールUI（再生/一時停止、シークバー、音量、全画面など）が表示されます。これらのデフォルトコントロールは、多くの場合キーボード操作やスクリーンリーダーに対応しています。

<!-- ビデオプレイヤーの例 -->
<video controls width="600" height="400" poster="/path/to/poster.jpg">
  <source src="/path/to/video.mp4" type="video/mp4">
  <source src="/path/to/video.webm" type="video/webm">
  <!-- 代替コンテンツ -->
  <p>お使いのブラウザはHTML5ビデオをサポートしていません。動画をダウンロードしてご覧いただけます:</p>
  <ul>
    <li><a href="/path/to/video.mp4" download>MP4形式</a></li>
    <li><a href="/path/to/video.webm" download>WebM形式</a></li>
  </ul>
</video>

<!-- オーディオプレイヤーの例 -->
<audio controls>
  <source src="/path/to/audio.mp3" type="audio/mpeg">
  <source src="/path/to/audio.wav" type="audio/wav">
  <!-- 代替コンテンツ -->
  <p>お使いのブラウザはHTML5オーディオをサポートしていません。音声をダウンロードして聴くことができます:</p>
  <p><a href="/path/to/audio.mp3" download>MP3形式</a></p>
</audio>

controls属性を使用することで、ブラウザのデフォルト実装に任せられる部分が多くなります。可能な限りこれを活用することが推奨されます。代替コンテンツを提供することも忘れないでください。

2. 字幕・キャプションと代替音声

ビデオコンテンツにとって、字幕（Captions/Subtitles）と代替音声（Audio Description）は不可欠なアクセシビリティ機能です。これらは<track>要素を使用して実装します。<track>要素は<video>要素の内部に記述します。

<video controls width="600" height="400">
  <source src="/path/to/video.mp4" type="video/mp4">
  <!-- 字幕（日本語、キャプション） -->
  <track kind="captions" label="日本語キャプション" srclang="ja" src="/path/to/captions-ja.vtt" default>
  <!-- 字幕（英語、サブタイトル） -->
  <track kind="subtitles" label="English Subtitles" srclang="en" src="/path/to/subtitles-en.vtt">
  <!-- 代替音声解説（日本語） -->
  <track kind="descriptions" label="日本語音声解説" srclang="ja" src="/path/to/audio-description-ja.vtt">
</video>

WebVTT (Web Video Text Tracks Format) は、時間指定されたテキストやメタデータをメディアに追加するためのフォーマットです。字幕やキャプション、音声解説のテキストはこの形式で記述します。

WebVTTファイル (captions-ja.vtt の例):

WEBVTT

00:00:01.000 --> 00:00:03.500
[鳥の鳴き声]
森の中を歩いています。

00:00:04.000 --> 00:00:07.000
美しい景色ですね。
（風の音）

00:00:08.000 --> 00:00:12.000
この道の先に何があるか楽しみです。

字幕だけでなく、音声解説トラックも適切に提供することが重要です。映像のみで伝えられる情報を音声で補足します。

3. カスタムプレイヤーコントロールの実装

デザインの要件などでデフォルトのcontrolsを使えない場合、独自のプレイヤーUIを実装する必要があります。この場合、すべてのアクセシビリティ対応を自分で行う必要があります。

カスタムコントロールを実装する際は、以下の点に注意してください。

カスタム再生/一時停止ボタンの例:

<button id="play-pause-button" aria-label="再生">
  <svg role="img" aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24">
    <!-- 再生アイコンのパス -->
  </svg>
</button>

const video = document.getElementById('my-video');
const playPauseButton = document.getElementById('play-pause-button');
const playIcon = '...'; // 再生アイコンのSVGパス
const pauseIcon = '...'; // 一時停止アイコンのSVGパス

playPauseButton.addEventListener('click', () => {
  if (video.paused) {
    video.play();
    playPauseButton.setAttribute('aria-label', '一時停止');
    playPauseButton.querySelector('svg').innerHTML = pauseIcon; // アイコンを切り替える
  } else {
    video.pause();
    playPauseButton.setAttribute('aria-label', '再生');
    playPauseButton.querySelector('svg').innerHTML = playIcon; // アイコンを切り替える
  }
});

// video要素自体の状態変化に合わせてボタンの表示やARIA属性を更新するイベントリスナーも必要です
video.addEventListener('play', () => {
  playPauseButton.setAttribute('aria-label', '一時停止');
  playPauseButton.querySelector('svg').innerHTML = pauseIcon;
});

video.addEventListener('pause', () => {
  playPauseButton.setAttribute('aria-label', '再生');
  playPauseButton.querySelector('svg').innerHTML = playIcon;
});

4. その他の考慮事項

実装時の注意点とよくある落とし穴

テスト方法

実装したアクセシビリティ機能を検証することは非常に重要です。

  1. キーボード操作テスト: マウスを使わずに、Tabキー、Shift+Tabキーでプレイヤー上の全ての操作可能な要素にフォーカスできるか確認します。EnterキーやSpaceキー、方向キーで各コントロールが意図通りに動作するか確認します。
  2. スクリーンリーダーテスト: NVDA (Windows), VoiceOver (macOS/iOS), TalkBack (Android) などのスクリーンリーダーを使用して、プレイヤーの状態（再生中/一時停止）、現在の再生位置、音量などが正しく読み上げられるか確認します。カスタムコントロールに設定したARIA属性が有効に機能しているか検証します。字幕や代替音声トラックが選択・表示できるか確認します。
  3. 字幕/WebVTTファイルの検証: WebVTTファイルが正しいフォーマットで記述されているか、字幕が表示されるタイミングや内容が適切かを確認します。
  4. 色のコントラストチェック: プレイヤーUIの色について、コントラスト比を測定ツール（例: WebAIM's Contrast Checker）で確認します。
  5. コードの静的解析: アクセシビリティ評価ツール（Lighthouse, axe DevTools, WAVEなど）を使用して、ARIA属性の誤用や不足、キーボード操作の問題などを検出します。

これらのテストを組み合わせることで、プレイヤーのアクセシビリティレベルを向上させることができます。

まとめ

ビデオおよびオーディオプレイヤーのアクセシビリティ対応は、多くのユーザーがコンテンツにアクセスするために不可欠です。ネイティブな<video>/<audio>要素とcontrols属性の活用、<track>要素による字幕・代替音声の提供が基本的なステップとなります。カスタムプレイヤーを実装する場合は、キーボード操作、ARIA属性、色のコントラストなどに細心の注意を払う必要があります。

ここで紹介した具体的な実装方法やテスト手順を参考に、あなたのウェブサイト上のメディアプレイヤーをより多くの人にとって使いやすいものにしてください。アクセシビリティ対応は継続的なプロセスであり、様々なユーザーからのフィードバックを取り入れながら改善を進めることが重要です。