WCAG 2.0 実装方法集

メインコンテンツへスキップ

-

FLASH17: Flash オブジェクトをキーボードで操作可能にして、キーボードトラップを回避する

適用(対象)

これは、次の達成基準に関連する実装方法である:

ユーザーエージェント及び支援技術によるサポート

ユーザーエージェントによるサポートに関する全般的な情報は、Flashのユーザーエージェントによるサポートを参照のこと。

この実装方法が対象としている問題は、Internet Explorer 以外のブラウザのみで発生する。ただし、現時点では、この実装方法で対処できるのは、Firefox(WindowsとMac OSX)、Google ChromeとSafari 5(いずれもMac OSXのみ)である。ChromeとSafariのWindows版は、今のところプラグインの中へフォーカスを移動させたり、プラグインから外へフォーカスを移動させたりすることができない。また、この実装方法が動作するためには JavaScript を有効にする必要がある。

解説

この実装方法の目的は、キーボード・フォーカスがウェブページに埋め込まれた Flash コンテンツに入ったり、Flash コンテンツから出たりできるようにすることである。Internet Explorer 以外のブラウザでは、埋め込まれた Flash コンテンツのキーボード・アクセシビリティに関連した問題がある。その問題とは、Flash コンテンツとその周囲の HTML コンテンツのいずれもキーボードでアクセスが可能な場合、マウスを使用せずに Flash コンテンツと HTML コンテンツの間でキーボードフォーカスを移動させることができない点である。つまり、Flash コンテンツの内部にフォーカスがあると、キーボードのユーザーはフォーカスを移動できない。同様に、HTML コンテンツ(Flash ムービーの外部)のいずれかにフォーカスがあると、Flash コンテンツにフォーカスを移動することができなくなる。

これは長い間存在している問題であり、ブラウザによる埋め込みプラグインの実装方法に関連している。この問題が修正されるまで、回避策を用意するのは Flash 開発者の義務である。この実装方法は、その回避策の一つである。この実装方法の背景にある考え方は以下のとおりである。

Flash プロジェクトに SWFFocus クラスをインポートすると、次のようになる。

上記で示したように、このテクニックの使用方法は二通りある。

  1. HTML のタブ順序内で各 Flash コンテンツに隣接するフォーカス可能な要素を、SWFFocus クラスに生成させる(下記の事例 1 で示す)。

    デフォルトでは、SWFFocus クラスは埋め込まれた Flash コンテンツの前後に非表示のリンク要素を作成する。これらの要素は、Flash コンテンツの外部にタブ移動(または shift キーを押しながらタブ移動)する際に、フォーカスを移動するための「アンカー」として必要になる。この手法は、開発者による追加作業が必要ないため実装が最も簡単である。この手法の欠点は、非表示のリンクという意味のない要素が HTML のタブ順序の中に紛れ込むことである(これらの要素は、Flash コンテンツの外部にタブ移動する際のタブストップのみとして使用される。Flash コンテンツの内部にタブ移動する場合には使用されない)。以上の点から、この手法ではなく次の 2. の手法を使用することが推奨される。

  2. HTML のタブ順序内における各 Flash コンテンツの前後のフォーカス可能な HTML 要素を明示的に指定する(下記の事例 2 で示す)。

    この手法では、開発者は ID 値を使用することによって、HTML のタブ順序内で Flash コンテンツの前後に当たる要素を指定できる。これは、Flash コンテンツの <object> 要素に特別なクラス名を設定することによって実現される。タブ順序内に不必要な要素が入り込むことがないため、この手法を用いることがより好ましい。ただし、開発者自身がこの点を意識して追加作業を行う必要がある(ID 値を手動で設定する必要がある)。また、状況によっては、Flash コンテンツの前後にフォーカス可能な要素が存在しない場合もありうる。

事例

「Flash オブジェクトをキーボードで操作可能にして、キーボードトラップを回避する」のサンプル(英語)でこれらの二つの事例が示されている。このサンプルの HTML ファイルには二つの Flash コンテンツが埋め込まれている。最初の Flash コンテンツは事例 1 で説明されている手法によって埋め込まれており、二つ目の Flash コンテンツは事例 2 で説明されている手法によって埋め込まれている。「Flash オブジェクトをキーボードで操作可能にして、キーボードトラップを回避する」のソース(英語)をダウンロードすることもできる。ソースの zip ファイルには SWFFocus クラスが含まれている。

注記: このサンプルを Web サーバからではなく、ローカルドライブから実行するには、Flash Player のセキュリティ設定にローカルディレクトリを追加する必要がある。

事例 1: 自動生成されるリンクを使用する

この事例では、フォーカス可能な HTML 要素を明示的に指定することなく、SWFFocus クラスを使用している。SWFFocus によって、Flash コンテンツの前後に非表示のリンクが動的に挿入される。

Flash コンテンツをロードする

この事例では、Flash オブジェクトは SWFObject による動的なパブリッシュ手法(英語)によって追加されている。この手法では、JavaScript (ブラウザによってサポートされる方法)により動的に object タグが生成される。これは推奨される手法ではあるが、この実装方法を使用することは必須ではない。なお、HTML ドキュメント内に object タグがハードコーディングされている場合であっても SWFFocus クラスは動作する。

以下のサンプルコードは、SWFObject を使用して動的にコンテンツをロードする方法を示している。

事例 1 の HTML および Javascript のサンプルコード

コード例:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml
<head>
<title>Keyboard Trap Fix Example</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<script src="swfobject_2_1.js" type="text/javascript"/>
<script type="text/javascript">
var flashvars = {};
var params = {};
params.scale = "noscale";
var attributes = {};
attributes.id = "FlashSample1SWF";
attributes.name = "FlashSample1SWF";
swfobject.embedSWF("keyboard_trap_fix_custom_as3.swf", "flashSample1", \
"150", "200", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>
</head>
<body>
<p>The following Flash content automatically generates invisible
links before and after the flash content, allowing keyboard focus
to move out of the Flash content.</p>
<div id="flashSample1">
<a href="http://www.adobe.com/go/getflashplayer">
<img alt="Get Adobe Flash player"
src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
/>
</a>
</div>
</body>
</html>

Flash 内に SWFFocus クラスをインポートし初期化する

Flash プロジェクトのソースパスに SWFFocus クラスを追加する必要がある。これを行うための最も簡単な方法は、com/swffocus/SWFFocus.as ファイル(ネストしたディレクトリ構造も含む)をプロジェクトのルートディレクトリにコピーすることである。

コンテンツのソースパスに SWFFocus クラスを追加したら、以下のコードによってこのクラスを初期化する必要がある。

コード例:

import com.adobe.swffocus.SWFFocus;  
SWFFocus.init(stage);

このクラス自身のコードはソースファイル内にある。

事例 2: 既存のフォーカス可能な HTML の要素を明示的に指定する

この実装方法の大部分は事例 1 と同じである。

これらの手順の詳細については、事例 1 を参照のこと。

しかし、このケースでは、Flash コンテンツのオブジェクトに特別なクラス名が追加される。これらのクラス名は、HTML のタブ順序においてコンテンツの前後に置かれる要素の ID 値を示す。このクラス名は以下のようになる。

以下に HTML コードの例を示す(object タグに追加されたクラス名に注目)。

コード例:

<a href="http://www.lipsum.com/" id="focus1">test 1</a>

<object class="swfPrev-focus1 swfNext-focus2"
  data="keyboard_trap_fix_as3.swf" tabindex="0"
  type="application/x-shockwave-flash"/>
<a href="http://www.lipsum.com/" id="focus2">test 2</a>

この事例では SWFObject の動的ロードが使用されているため、このクラス名は SWFObject の初期化時に属性として指定される必要がある。次のコード例はこの処理を示したものである。

事例 2 の HTML および Javascript のサンプルコード

コード例:


<?xml version="1.0" encoding="UTF-8"?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Keyboard Trap Fix Example </title>
   <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
   <script src="swfobject_2_1.js" type="text/javascript"/>
   <script type="text/javascript">
      var flashvars = {};
      var params = {};
      params.scale = "noscale";
      var attributes = {};
      attributes.id = "FlashSample2SWF";
      attributes.name = "FlashSample2SWF";
      attributes["class"] = "swfPrev-focus1 swfNext-focus2";
      swfobject.embedSWF("keyboard_trap_fix_as3.swf", "flashSample1", "150", 
      "200", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
   </script>
</head>
<body>
   <a href="http://www.lipsum.com/" id="focus1">lorem</a>
   <p>The following Flash content uses existing links in the document
   to move focus to when (shift) tabbing out of the Flash content.
   The existing links are defined by placing special classnames on
   the Flash object.</p>
<div id="flashSample2">
   <a href="http://www.adobe.com/go/getflashplayer">
   <img alt="Get Adobe Flash player"
   src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"/>
   </a>
</div>
   <a href="http://www.lipsum.com/">lorem</a>
</body>
</html>

注記: この事例では、Flash コンテンツの挿入で SWFObject が呼び出される時点で、フォーカス可能な HTML 要素が既に存在し、ID 値が設定されているものと想定している。ただし、Flash コンテンツが作成される時点ではまだこれらの要素が存在しないこともありうる。また、後になってこれらの要素が動的に削除されることもありうる。こうした状況であっても、前後のフォーカス可能な要素に ID 値の再割り当てを行うことで対応できる。これを行うには、Flash コンテンツのオブジェクト上で SWFsetFocusIds() メソッドを呼び出す。以下にその例を示す。

コード例:

var o = document.getElementById("FlashSample1SWF");
o.SWFsetFocusIds('prevId', 'nextId');

以降は、Flash コンテンツの外部にタブ移動する際にフォーカスを移動するために、更新された ID が使用される。

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

チェックポイント

ウェブページ上の Flash コンテンツについて:

  1. 可能であれば、Flash コンテンツのソースが SWFFocus クラスをインポートし、初期化している。

  2. Tab キーを押してページ上のタブ移動可能なアイテム間を移動する。

  3. Flash コンテンツの内部にタブ移動できる。

  4. さらに Tab キーを押し、Flash コンテンツの外部にタブ移動できる。

判定基準

注意: この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。

関連情報

この実装方法で用いられているメインのコンポーネントは、"SWFFocus" と呼ばれる外部 ActionScript クラスである。このクラスは、Michael Jordan が John Norgaard(Sonokids)からアイデアを得て開発したもので、後に Hans Hillen(The Paciello Group)が改善したものである。

日本語訳における注記:

この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。