私たちが所属する富士通アプリコ株式会社デザインプロダクトソリューション部では、90年代後半の「ホームページ制作」と呼ばれていた頃からWebに携わるようになり、一時はプロバイダーサービスなど行いながら、現在ではWebコンテンツの企画・コンサルティングから、デザイン、運用まで、様々なサービスを展開しています。その活動の一つとして取り組んでいるのが、「リッチコンテンツにおけるアクセシビリティの向上」です。

動画コンテンツは、昨今のWebのリッチ化における代表的なコンテンツです。YouTubeやニコニコ動画といった動画共有サイトの登場により、「ネットで動画を見る」という行為は広く浸透し、企業サイトにおいても動画掲載のニーズは高まっており、よりユーザーに響くアピールメディアとして注目されています。

現状、動画配信を行う場合、Windows Media PlayerやQuickTime Player、Flashベースの動画プレーヤ（以降、Flash Video Player）など、さまざまなスタイルで配信されています。これらのスタイルは動画配信に非常に適したものであり、読者のみなさんは閲覧する上でストレスを感じたことがあまりないでしょう。しかし、例えばキーボード操作を利用してブラウジングするユーザー、音声読み上げなどの支援技術を利用しているユーザーに対しては、みなさんと同じようにストレスなく閲覧できる程、十分な機能が提供されているとは言えません。Webがリッチ化し、よりユーザーにとって利用価値のあるコンテンツが増えていく中で、その体験を共有できないユーザーがいるというのは非常に残念なことです。

富士通グループでも動画コンテンツを利用しています。例えば、以下の会社案内ページ「映像で見る富士通」があります。私たちは、こうした動画コンテンツを提供する上で、動画閲覧環境における問題点を改善し、どのようなユーザーでも利用できるように取り組んでいます。本記事では、その取り組みについて説明します。

映像で見る富士通
http://jp.fujitsu.com/about/corporate/profile/material/

動画プレーヤが抱えるアクセシビリティ面での問題点

私たちの取り組みを紹介していく前に、動画プレーヤが抱えるアクセシビリティ面での問題点を見てみましょう。現在、Windows Media PlayerやQuickTime Player、Flash Video Playerなど、さまざまなスタイルで動画が配信されていますが、それらを利用してみると、改善すべき点として、大きく以下の問題が挙げられます。

1. キーボードを利用した操作。
2. ボタンなど、操作部分のスクリーンリーダーによる読み上げ。
3. 動画の音声に代わる情報の提供。

まずは、1と2について。キーボードを利用してブラウジングするユーザーは、主にTabキー、Enterキーを使って移動・選択を行います。さらに、スクリーンリーダーを利用しているユーザーは、キーボード操作に加えて、音声による支援（自分が今どこを閲覧していて、何の操作を行なおうとしているのかなど）を受けて閲覧します。このようなユーザーが快適に閲覧できるようにするには、キーボードによる操作が可能であり、操作可能なボタン部分などはスクリーンリーダが読み上げられるように設定されていなければなりません。

3については、動画プレーヤの問題ではなく、動画提供者側の意識の問題です。「視覚からの情報のみを利用しているユーザーは、動画の内容を正しく把握できない」ということを認識していれば、ページ内にテキスト版を設置するなど、代替となる情報の提供手段はいくらでもありますし、既存の動画プレーヤで、字幕によるテキスト情報の提供が可能なものもあります。

Flash Video Playerを選択した理由

先ほど紹介した富士通グループの動画コンテンツ「映像で見る富士通」を見ていただけるとわかるように、私たちは動画プレーヤとしてFlash Video Playerを採用しています。その理由として、主に以下の点が挙げられます。

• 技術的にアクセシブルに開発可能。
• Flash Playerの高い普及率。
• テンプレート（コンポーネント）化が可能（富士通グループのサイト全体において、均一的かつアクセシブルなナビゲーションに統一していくため）

技術的な面でみると、キーボード操作やスクリーンリーダーへ対応させるには、動画プレーヤのUIを設計する段階から考えておく必要があります。しかし、Windows Media PlayerやQuickTime Playerの場合、そのUIをカスタマイズすることは困難です。一方、Flash Video Playerの場合、スクリプトを使ってアクセシビリティに関する設定を細かく指定できるため、アクセシビリティとの親和性は非常に高いと言えます。

また、Flashでは一度開発したUIをコンポーネントとして登録し、使い回すことが可能です。富士通グループでは、上記の「映像で見る富士通」ページ以外にも各サイトで動画コンテンツを提供しています。コンポーネント化しておけば、毎回UI設計から検討しなければならない手間を省くことができ、動画（映像）部分のみを制作すればいいので、開発コストの削減にもつながります。

富士通アプリコ製Flash Video Playerのアクセシビリティのポイント

それでは、私たちが開発したFlash Video Playerの特徴について説明していきましょう。

キーボード操作に対応

下図は、コントローラ部分におけるTabキーによるフォーカス順序です。

特に注目してほしいのは、再生状況を示す「シークバー」と「音量調節」の部分です。通常、スライダーなどのマウスドラッグ操作に依存したUIを実装していることが多いと思いますが、キーボードではドラッグ操作は不可能です。そこで、富士通アプリコ製Flash Video Playerでは、左右に調節ボタンを設け、キーボードで操作できるようにしています。また、スライダー部分はキーボードで操作できないため、Tabキーでフォーカスが当たらないようにしています。

左右のどちらかにフォーカスした状態でEnterキーを押すと、±5秒間隔で再生位置が移動する

左右の+、-ボタンにフォーカスした状態でEnterキーを押すと、1段階ずつ音量が変 化する

MEMO； このように富士通アプリコ製Flash Video Playerでは、すべての操作をキーボードで行うことが可能です。「キーボードですべての操作を可能とする」ことは、WCAG2.0および改正JIS X8341-3において定められています。富士通アプリコ製Flash Video Playerは、現時点で、この基準に適合することができる世界で唯一の実装例だと思われます。

• WCAG2.0 Guideline 2.1 Keyboard Accessible: Make all functionality available from a keyboard
• JIS X8341-3:2009改正原案 7.2.1 キーボード操作可能に関するガイドライン

拡大表示、フルスクリーン表示に対応

最近のブラウザは、視力が弱い方などでも閲覧しやすくするように、ページの拡大縮小（ズーム）機能を実装するようになりました。また、フルスクリーン表示モードを用意することが多くなってきています。こうした機能を利用してユーザーが動画を拡大した際に問題となるのは、コントローラ部分です。動画部分は拡大されても、コントローラ部分はデフォルトのサイズのままという状況をみかけます。それでは、操作性が損なわれてしまいます。

そこで、富士通アプリコ製Flash Video Playerでは、動画コンテンツの拡大表示に合わせて、コントローラ部分も拡大するようにしています。

また、フルスクリーン表示モードの解除時についても配慮しています。Flash Playerのセキュリティ上の制限により、フルスクリーン表示時には、Escキー以外のキーボード操作が無効になってしまいます。通常は、動画再生前に「フルスクリーンモードを解除するにはEscキーを押して下さい」などと警告文を画面上に掲載しますが、そうした視覚情報だけではスクリーンリーダーを使うユーザーには伝わりません。

その解決方法として、富士通アプリコ製Flash Video Playerでは、フルスクリーンボタンにフォーカスした際に、スクリーンリーダーのユーザーのみが確認できる警告文「フルスクリーンモードを終了するには、キーボードのエスケープキーを押してください」を仕込んでいます。

ツールチップの多言語対応

通常、コントローラ部分のボタンにはアイコンを使用します。家電製品でも利用されているアイコンだけに馴染みのあるマークですが、すべての人がそのアイコンからボタンの機能を理解できるとは限りません。また、Web動画特有の「キャプション」「フルスクリーンモード」などの機能もあり、そうしたボタンのアイコンは広く浸透しているとは言えません。

その解決方法としては、各ボタンにマウスオーバーした際に「ツールチップ」が表示されるようにします。さらに、富士通アプリコ製Flash Video Playerでは、世界中からアクセスされることを考慮して、閲覧環境の国・地域ごとの言語に合わせ自動的に翻訳されて掲載されるようにしています。どの言語を表示するかは、閲覧しているコンピュータのOSの利用言語で判別しています。

また、このツールチップは、スクリーンリーダーのユーザーにとっても役に立ちます。各ボタンで読み上げられる内容とツールチップに表示される内容は同期しており、読み上げられる内容も多言語に対応できるようなっています。例えば、ツールチップが英語で表示される環境では、読み上げられる内容も英語となります。

キャプションを簡単に掲載

聴覚障害者の方も動画コンテンツの内容を把握できるようにするには、「キャプション（字幕）」が必要です。Flashの場合は、字幕提供のためのCaptioningコンポーネントが用意されているので、これを利用して動画に応じた字幕を設置できるように実装しています。実装にはXMLを編集して、あとは指定の場所にアップロードするだけで、音声の代替情報を誰でも簡易に掲載できるようになっています。

動画プレーヤをページに埋め込む際の注意点

動画プレーヤのアクセシビリティを改善しただけでは十分ではありません。ユーザーは、動画コンテンツに直接アクセスして閲覧するわけではなく、ページ内の1つのコンテンツとして利用するので、ユーザーアクションを妨げないように動画コンテンツを組み込むことも大切です。Flash Video Playerに限った話ではない部分もありますが、以下の点に注意しています。

1. 自動再生しない。
2. キーフォーカスがFlashの中でループしないようにする。
3. ブラウザの持つズーム機能などと正しく連動するようにする。

最近の動画プレーヤは、最初停止している状態で、再生ボタンを押すなどのアクションがあった後に再生されるものが主流ですが、少し前まではページに訪問した際に自動的に再生されるものが多かったと思います。動画コンテンツは音声が付いているものが多く、自動再生すると驚いてしまうユーザーがいたり、スクリーンリーダーを利用しているユーザーにとってはノイズとなり正常な閲覧を阻害してしまう可能性があります。そういった、「ユーザーが意図しない動作」をさせないという意味で2や3についてもFlashを制作する上で常に心掛けています。

●今後の予定
現在のプレーヤの状態が完全形というわけではありません。これからも、業界のトレンドやお客様のニーズを察知しながら、少しずつ継続した改善を実施していきたいと考えています。

アクセシブルな動画コンテンツが普及することは喜ばしいことです。富士通アプリコ製Flash Video Playerの実装技術を利用したいという需要があれば、前向きに検討していきたいと考えています。

著者について