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

1. アクセシブルな音声・
動画プレイヤーのご紹介
ACRIプロジェクト
持田 徹 (motchie@acri.jp)
2016年5月19日

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