Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

アクセシブルな音声・動画プレイヤーのご紹介

905 views

Published on

アクセシビリティの祭典(2016)のライトニング・トーク3にて使用したスライドです。現状HTML5のaudio要素・video要素のためにブラウザが提供する標準UIにはアクセシビリティ上の問題があるため、それを解消する手段として、ワシントン大学のプロジェクトとして開発されているAble Playerをご紹介し、その日本語化を行った成果をご説明しています。

Published in: Technology
  • Login to see the comments

  • Be the first to like this

アクセシブルな音声・動画プレイヤーのご紹介

  1. 1. アクセシブルな音声・ 動画プレイヤーのご紹介 ACRIプロジェクト 持田 徹 (motchie@acri.jp) 2016年5月19日
  2. 2. アクセシビリティの祭典 2016 ライトニングトーク 3 2 自己紹介  2002年から個人的に 「ACRIプロジェクト」として Webアクセシビリティを研究  勉強会、講演会など開催  Web系雑誌への連載 『ウェブアプリケーションの ためのユニバーサルデザイン (一部執筆)』など
  3. 3. アクセシビリティの祭典 2016 ライトニングトーク 3 3 音声・動画再生といえば  メディア要素(audio要素、video要素)がHTML5から 仕様に含まれた  controls属性を指定するとブラウザ標準の 音声・動画UI(以下「ブラウザUI」)が表示され、 再生のためのプラグインが不要になった  内包するtrack要素で、字幕、キャプション、音声ガイド、 チャプター・タイトルなど代替テキストを指定可能  HTML仕様上では、アクセシブルな音声・動画再生に 一般的に必要な機能は、ほぼ網羅されているが…
  4. 4. アクセシビリティの祭典 2016 ライトニングトーク 3 4 ブラウザUIの現状は道半ば… (1)  Firefox 46.0.1  ブラウザUIの再生ボタンなどにtabキーでフォーカス が当たらない(スペースキーで再生・一時停止、 矢印キーで早送りスキップは可能)  track要素で指定したキャプションが表示されない  Microsoft Edge 25.10586.0.0 ブラウザUIのコントロールにフォーカスは当たる  キャプションは認識されるが表示されない  再生速度の変更はコンテキスト・メニューのみで指定
  5. 5. アクセシビリティの祭典 2016 ライトニングトーク 3 5 ブラウザUIの現状は道半ば… (2)  Internet Explorer 11.212.10586.0 ブラウザUIのコントロールにフォーカスは当たる  キャプションは認識されるが表示されない Google Chrome 50.0.2661.102m ブラウザUIのコントロールにフォーカスは当たる  キャプションは認識され表示される。表示切り替え可  ブラウザUIをスペースキーで操作すると、 画面スクロールしてしまう(個人的な感想)
  6. 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. 7. アクセシビリティの祭典 2016 ライトニングトーク 3 7 @caztcha さんも… アクセシブルな HTML5 <video> プレーヤー http://website- usability.info/2015/07/entry_150714.html そうですね… 実際に何らかの動画プレーヤーを導入するにあたっ ては、以下のアクセシビリティ要件が満たせている か、チェックするようにしましょう。
  8. 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. 9. 制作者の気持ち: アクセシビリティ大事なのはわかった。 動画・音声をサイトで提供するのに、 大半の用途で問題なく使えそうな プレイヤーはないだろうか
  10. 10. アクセシビリティの祭典 2016 ライトニングトーク 3 10 Able Player https://ableplayer.github.io/a bleplayer/ JavaScriptで書かれた メディアプレイヤー スクリーンリーダーで操作可能 字幕、音声解説、チャプターに 対応(再生箇所ハイライト) Youtubeにも対応 MITライセンス
  11. 11. アクセシビリティの祭典 2016 ライトニングトーク 3 11 最新情報: 日本語化しました! プレイヤーの全てのUIと メッセージ 日本語のサンプルページ サンプル・ページ動画の キャプションと音声解説 現状developブランチで checkoutできます
  12. 12. 実際に使ってみましょう
  13. 13. アクセシビリティの祭典 2016 ライトニングトーク 3 13 今後も 機会をいただけるのであれば、アクセシビリティについて  大事なんはよくわかったけど、ほんでどうしたらええのん?  音声や動画とか、実際どうしたらええのん?  達成基準○○○は、実際どうしたらええのん? など、制作の現場で役立つツールの調査や整備 (日本語化、ドキュメント化など)を続けていきたいと思います。

×