WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

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

達成方法に関する重要な情報

これらの達成方法(参考)の使用法及び、それらがWCAG 2.0 達成基準(規定)とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用(対象)セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用(対象)

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

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

FLASH17 に関するユーザエージェントサポートノート (英語)を参照のこと。Flash テクノロジーノートも参照。

解説

この実装方法の目的は、キーボード・フォーカスがウェブページに埋め込まれた 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 クラスが含まれている。

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

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

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

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

この事例では、Flash オブジェクトは SWFObject's 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 コンテンツの外部にタブ移動できる。

判定基準

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

Technique Information

The main component used in this technique is an external ActionScript class called "SWFFocus". This class was created by Michael Jordan (inspired by the previous work of John Norgaard of Sonokids,), and later modified by Hans Hillen from The Paciello Group and again by Michael Jordan to address browser compatibility further.