アクセシブルな HTML5 <video> プレーヤー

HTML5には <video> 要素があり、標準仕様としてウェブページに動画を埋め込むことができます。動画再生のコントロールも、ブラウザ側が標準的なプレーヤーを自動生成してくれるので、わざわざ制作する必要がありません。

ただ、ウェブアクセシビリティの観点で見ると、ブラウザ標準の動画プレーヤーでは、キーボード操作ができなかったり、クローズドキャプション (字幕) が表示されなかったり、スクリーンリーダーによる読み上げができなかったり…といったものもあり、残念ながら不十分な感が否めません。

Windows 版 Chrome の標準動画プレーヤーは、キーボード操作、クローズドキャプションの表示/非表示の切り替えなど、わりとアクセシブルにできていますが、PC ユーザーがみんな Chrome を使っているわけではありませんし、スクリーンリーダーとの併用 (各操作子にフォーカスが当たったときの音声読み上げ) まで含めると、現状では若干課題を感じます。

すべてのブラウザ標準動画プレーヤーのアクセシビリティ対応を期待したいところですが、現実的な解決策として、アクセシブルな動画プレーヤーを導入する、という手もあります。たとえば「Accessible media player resources and demos - iheni)」を見ると、多くの動画プレーヤーがリストアップされています。実際に何らかの動画プレーヤーを導入するにあたっては、以下のアクセシビリティ要件が満たせているか、チェックするようにしましょう。

上記は最低限のアクセシビリティ要件ですが、願わくば各ブラウザの標準動画プレーヤーも、上記のアクセシビリティ要件を満たすようになってくれたら...と期待したいところです。


なお、モバイルデバイス (iOS や Android) においては、こうした動画プレーヤーを導入していても、再生時には OS 標準の動画プレーヤーが開くことでしょう。これについては、OS レベルでアクセシビリティが十分に担保されていればよいと思います。現状でも、VoiceOver や TalkBack による動画のコントロールはできますし、クローズドキャプションも表示されます。これに加えて、クローズドキャプションの表示/非表示の切り替えや、複数のキャプションがある場合の選択が可能になれば、機能的には理想的と言えそうです。

記事を共有

Twitter に投稿 Facebook に投稿 はてなブックマークに投稿 Pocket に追加