YouTube埋め込み動画のアクセシビリティ（キーボード操作）

オプションではセキュリティやプライバシーに関する設定もできますが、ここでは「以前の埋め込みコードを使用する」についてのみ検証します。その他のオプションについてはYouTubeヘルプのYouTube 動画を埋め込むには(support.google.com)を参照ください。

<iframe width="420" height="315" src="http://www.youtube.com/embed/TSk76nP9Dl4" frameborder="0" allowfullscreen></iframe>

「以前の埋め込みコード」（object要素）

§

「以前の埋め込みコードを使用する」にチェックを入れると、object要素を使用したコードになります。

<object width="420" height="315">
  <param name="movie" value="http://www.youtube.com/v/TSk76nP9Dl4?version=3&amp;hl=ja_JP"></param>
  <param name="allowFullScreen" value="true"></param>
  <param name="allowscriptaccess" value="always"></param>
  <embed src="http://www.youtube.com/v/TSk76nP9Dl4?version=3&amp;hl=ja_JP" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

このコードの場合、ほとんどのブラウザでは param name="movie" で指定したURLではなく、embed要素のsrc属性値を参照するようです。

改めて言うまでもなく、embed要素は長らくW3Cの仕様では規定されていない独自要素でした。HTML5では晴れて仕様に組み込まれましたが、allowscriptaccessやallowfullscreenの属性はありません。実際には、object要素にtype属性とdata属性を指定することで、ほとんどのブラウザでは再生することができるので[2]、HTML5であってもembed要素を書く必要は無いでしょう。

また、param要素は内容モデルがEMPTYなので、HTML4.01では閉じタグを書いてはいけません。XHTMLの場合もHTML互換性ガイドラインに従い、最小化の記述が良いでしょう。

さらに、このコードではFlashによる再生となるため、Flashに対応していないiPhoneやiPadなどでは再生できません。YouTubeのページへのリンクを貼っておくと良いでしょう。再生できる環境ではリンクを見せたくない場合は、object要素の中に記述します。

<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/TSk76nP9Dl4?version=3&amp;hl=ja_JP" width="420" height="315">
  <param name="movie" value="http://www.youtube.com/v/TSk76nP9Dl4?version=3&amp;hl=ja_JP" />
  <param name="allowFullScreen" value="true" />
  <param name="allowscriptaccess" value="always" />
  <a href="http://www.youtube.com/watch?v=TSk76nP9Dl4">YouTubeで見る</a>
</object>

埋め込み動画にはiframe要素とobject要素の2種類のコードが用意されていること、さらにvalidにするために後者を改造してembed要素を記述しないコードも含めた3パターンを紹介しました。採用しているHTMLのバージョンやFlash未対応環境への対応可否によって、どれを使うか決定することになりますが、もうひとつ、キーボード操作を行うユーザーに対応できるかを考慮する必要もあります。

通常、リンクやフォームコントロールの移動にはTabキーが使われます。（Operaは特殊で、Ctrl + ↓ と Ctrl + ↑ でアンカー移動(help.opera.com)します。）

動画を埋め込んだページにおいて、マウスを使わずキー操作のみで再生が行えるか検証してみました。結果は下表の通りです。

IEはどのコードであっても、Tabキーにより動画にフォーカスをあてることができ、キーボードのみで基本的な操作が可能でした。

一方、他のブラウザは厳しい結果となっています。動画にフォーカスがあたれば、どのブラウザでもスペースや「K」キーで再生、上下の矢印キーで音量調整などのキー操作が可能なのですが、そもそもフォーカスをあてることができません。

なお、Firefoxはobject要素（embed要素なし）の場合のみフォーカスをあてることができますが、逆にフォーカスを外すことができない状況です。しかも、この状態になると Alt + ← でページを戻ったり、F5でリロードしたり、Ctrl + W でタブを閉じることも不可になってしまいます。 Alt + F4 でブラウザごと終了させることはできますが、ちょっとひどいですね。

YouTubeには開発中の新機能としてHTML5 動画プレーヤーが用意されています。まだ試用版とのことでいくつか制限事項もありますが、ユーザーはこの画面から「HTML5 試用版を有効にする」ことでvideo要素による再生が可能になり、先に挙げたフォーカスの問題点も見当たりません。

埋め込み動画をHTML5動画プレーヤーで再生するには、以下の条件が必要なようです。

• ユーザーのブラウザがvideo要素に対応していること （IE8やFirefox3.6などの古いブラウザではないこと）
• ユーザーが「HTML5 試用版を有効にする」にしていること （Windows版Safariの場合は、QuickTime(www.apple.com)がインストールされている必要があるようです）
• 埋め込み動画がデフォルトのコード（iframe要素）になっていること

以上のことから、埋め込み動画自体をアクセシブルに提供するのはまだ難しいものの、YouTubeサイトでの再生についてはハードルは低くなっています。

すなわち、次のような対応を行えば現段階では最善であると思います。

• 「以前の埋め込みコード」は使用せず、iframe要素によるコードにする。
• 埋め込み動画の前後にYouTubeのページへのリンクを設定し、キーボード操作で再生したいユーザーはそちらへ誘導する。
• （可能ならば）「HTML5 動画プレーヤー」の存在を紹介する。