Download as PDF, PPTX
Uploaded byToru MOCHIDA
アクセシブルな音声・動画プレイヤーのご紹介
アクセシビリティの祭典(2016)のライトニング・トーク3にて使用したスライドです。現状HTML5のaudio要素・video要素のためにブラウザが提供する標準UIにはアクセシビリティ上の問題があるため、それを解消する手段として、ワシントン大学のプロジェクトとして開発されているAble Playerをご紹介し、その日本語化を行った成果をご説明しています。
アクセシブルな音声・動画プレイヤーのご紹介
- 1.
- 2. アクセシビリティの祭典 2016 ライトニングトーク3 2 自己紹介 2002年から個人的に 「ACRIプロジェクト」として Webアクセシビリティを研究 勉強会、講演会など開催 Web系雑誌への連載 『ウェブアプリケーションの ためのユニバーサルデザイン (一部執筆)』など
- 3. アクセシビリティの祭典 2016 ライトニングトーク3 3 音声・動画再生といえば メディア要素(audio要素、video要素)がHTML5から 仕様に含まれた controls属性を指定するとブラウザ標準の 音声・動画UI(以下「ブラウザUI」)が表示され、 再生のためのプラグインが不要になった 内包するtrack要素で、字幕、キャプション、音声ガイド、 チャプター・タイトルなど代替テキストを指定可能 HTML仕様上では、アクセシブルな音声・動画再生に 一般的に必要な機能は、ほぼ網羅されているが…
- 4. アクセシビリティの祭典 2016 ライトニングトーク3 4 ブラウザUIの現状は道半ば… (1) Firefox 46.0.1 ブラウザUIの再生ボタンなどにtabキーでフォーカス が当たらない(スペースキーで再生・一時停止、 矢印キーで早送りスキップは可能) track要素で指定したキャプションが表示されない Microsoft Edge 25.10586.0.0 ブラウザUIのコントロールにフォーカスは当たる キャプションは認識されるが表示されない 再生速度の変更はコンテキスト・メニューのみで指定
- 5. アクセシビリティの祭典 2016 ライトニングトーク3 5 ブラウザUIの現状は道半ば… (2) Internet Explorer 11.212.10586.0 ブラウザUIのコントロールにフォーカスは当たる キャプションは認識されるが表示されない Google Chrome 50.0.2661.102m ブラウザUIのコントロールにフォーカスは当たる キャプションは認識され表示される。表示切り替え可 ブラウザUIをスペースキーで操作すると、 画面スクロールしてしまう(個人的な感想)
- 6. アクセシビリティの祭典 2016 ライトニングトーク3 6 ということで 最新のWebブラウザであっても、標準UIで アクセシブルな音声・動画再生は難しいのが現状 「アクセシブルな音声・動画プレイヤー」が数多く 提供されている Accessible media player resources and demos http://www.iheni.com/accessible-media-player- resources/ ところが… “Disclaimer: I have not tested all the players below so they are self-proclaimed accessible players.”
- 7. アクセシビリティの祭典 2016 ライトニングトーク3 7 @caztcha さんも… アクセシブルな HTML5 <video> プレーヤー http://website- usability.info/2015/07/entry_150714.html そうですね… 実際に何らかの動画プレーヤーを導入するにあたっ ては、以下のアクセシビリティ要件が満たせている か、チェックするようにしましょう。
- 8. アクセシビリティの祭典 2016 ライトニングトーク3 8 本来は… アクセシブルな音声・動画プレイヤーは、どういう要件を 満たすべきか調べて機能比較表を書くべきですが… そこまではできておりませんm(_ _)m たぶんこのあたり? Media Accessibility User Requirements https://www.w3.org/TR/media-accessibility-reqs/ 名前 コントロールに tabストップするか track要素を 認識するか チャプターに 対応しているか アクセシブルか Able Player AFBB Paypal …
- 9.
- 10. アクセシビリティの祭典 2016 ライトニングトーク3 10 Able Player https://ableplayer.github.io/a bleplayer/ JavaScriptで書かれた メディアプレイヤー スクリーンリーダーで操作可能 字幕、音声解説、チャプターに 対応(再生箇所ハイライト) Youtubeにも対応 MITライセンス
- 11. アクセシビリティの祭典 2016 ライトニングトーク3 11 最新情報: 日本語化しました! プレイヤーの全てのUIと メッセージ 日本語のサンプルページ サンプル・ページ動画の キャプションと音声解説 現状developブランチで checkoutできます
- 12.
- 13. アクセシビリティの祭典 2016 ライトニングトーク3 13 今後も 機会をいただけるのであれば、アクセシビリティについて 大事なんはよくわかったけど、ほんでどうしたらええのん？ 音声や動画とか、実際どうしたらええのん? 達成基準○○○は、実際どうしたらええのん? など、制作の現場で役立つツールの調査や整備 (日本語化、ドキュメント化など)を続けていきたいと思います。