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

YouTubeは公式に動画埋め込みコードを提供しています。

動画の下部にある「共通」ボタンを押下するとパーマリンク用のURLが表示されますが、さらに「埋め込みコード」ボタンを押下すると埋め込み用のHTMLコードが表示されます[1]

オリジナル画像
図1YouTubeの埋め込みコードを表示したところ

しかし、そのままコピペするとHTMLがvalidになりません。また、閲覧環境やコードの書き方によってはキーボード操作ができないこともあります。ここでは、どのような記述にすればよりアクセシブルになるか検証してみたいと思います。

HTMLをvalidにする

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

デフォルトのコード(iframe要素)

デフォルトの埋め込みコードはiframe要素によるもので、こんな感じになっています。

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

まず、iframe要素はHTML4.01やXHTML1.0のStrict DTDとXHTML1.1には存在しません。これらのHTMLを採用している場合は後述のobject要素によるコードを使うしかありません。

一方、Transitional DTDやHTML5ではiframe要素が使えますが、allowfullscreenという属性は存在しません。これはフルスクリーン表示の可否を指定するもののようですが、実際は指定しなくとも効果は変わらない(フルスクリーン許可)ので削除して問題ないと思います。もしフルスクリーン再生を許可したくない場合は、後述のobject要素のコードを使い、 <param name="allowFullScreen" value="false" /> と指定することで無効にできるようです。

また、frameborder属性はHTML5には存在しません(www.w3.org)。境界線を消したい場合はCSSで iframe { border: none;} などと指定しましょう。

「以前の埋め込みコード」(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互換性ガイドライン(www.w3.org)に従い、最小化の記述が良いでしょう。

さらに、このコードでは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)します。)

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

ブラウザiframe要素object要素object要素(embed要素なしの改造版)
Firefox 12× フォーカスあたらない× フォーカスあたらない× キー操作可能(ただし脱出できず)
Google Chrome 18× フォーカスあたらない× フォーカスあたらない× フォーカスあたらない
Internet Explorer 9○ キー操作可能○ キー操作可能○ キー操作可能
Opera 11.6× フォーカスあたらない× フォーカスあたらない× フォーカスあたらない
Safari 5.1× フォーカスあたらない× フォーカスあたらない× フォーカスあたらない

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

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

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

「HTML5 動画プレーヤー」はどうか

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

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

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

まとめ

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

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

  • 「以前の埋め込みコード」は使用せず、iframe要素によるコードにする。
  • 埋め込み動画の前後にYouTubeのページへのリンクを設定し、キーボード操作で再生したいユーザーはそちらへ誘導する。
  • (可能ならば)「HTML5 動画プレーヤー」の存在を紹介する。
  • [1]埋め込みを許可しない設定となっている動画の場合は、コードは表示されません。
  • [2]Firefox3.6と12, Google Chrome18, IE6~9, Opera11.6, Safari5.1で確認。