O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

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

930 visualizações

Publicada em

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

Publicada em: Tecnologia
  • Entre para ver os comentários

  • Seja a primeira pessoa a gostar disto

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

  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 今後も 機会をいただけるのであれば、アクセシビリティについて  大事なんはよくわかったけど、ほんでどうしたらええのん?  音声や動画とか、実際どうしたらええのん?  達成基準○○○は、実際どうしたらええのん? など、制作の現場で役立つツールの調査や整備 (日本語化、ドキュメント化など)を続けていきたいと思います。

×