【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集
この達成方法 (参考) の使用法と、この達成方法が WCAG 2.0 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.0 を満たすコンテンツを作成するために使用できることを意味するものではない。
Adobe Flash Professional バージョン MX 以降
Adobe Flex
訳注: Flash Player は、2020 年末に提供を終了する計画が Adobe 社より発表されている (Adobe Blog、窓の杜)。
WAIC での Flash に関する翻訳のメンテナンスも積極的に行う予定がないことに留意されたい。
これは、次の達成基準に関連する達成方法である:
注記: この達成方法は、達成基準 2.1.1 を満たす他の達成方法と組み合わせなければならない。詳細については、 達成基準 2.1.1 を理解するを参照すること。
注記: この達成方法は、達成基準 2.1.3 を満たす他の達成方法と組み合わせなければならない。詳細については、 達成基準 2.1.3 を理解するを参照すること。
FLASH17 に関するユーザエージェントサポートノートを参照のこと。Flash テクノロジーノートも参照。
この実装方法の目的は、キーボードフォーカスがウェブページに埋め込まれた Flash コンテンツに入ったり、Flash コンテンツから出たりできるようにすることである。Internet Explorer 以外のブラウザでは、埋め込まれた Flash コンテンツのキーボードアクセシビリティに関連した問題がある。その問題とは、Flash コンテンツとその周囲の HTML コンテンツのいずれもキーボードでアクセスが可能な場合、マウスを使用せずに Flash コンテンツと HTML コンテンツの間でキーボードフォーカスを移動させることができない点である。つまり、Flash コンテンツの内部にフォーカスがあると、キーボードの利用者はフォーカスを移動できない。同様に、HTML コンテンツ (Flash ムービーの外部) のいずれかにフォーカスがあると、Flash コンテンツにフォーカスを移動することができなくなる。
これは長い間存在している問題であり、ブラウザによる埋め込みプラグインの実装方法に関連している。この問題が修正されるまで、回避策を用意するのは Flash 開発者の義務である。この実装方法は、その回避策の一つである。この実装方法の背景にある考え方は以下のとおりである。
ドキュメント内の各 Flash コンテンツに関して、隣接する二つのフォーカス可能な HTML オブジェクト (コンテンツの前後のオブジェクト) を特定する。これらの要素は、ウェブページ内でタブ順序が適用される任意の HTML 要素である (リンクやフォームコントロールなど)。
Flash コンテンツのオブジェクト自体をドキュメントのタブ順序にも追加する。これにより、コンテンツにタブを移動することが可能になる。
Flash コンテンツの内部では、Flash Player が独自のタブ順序を管理する。通常、Flash コンテンツの中をタブ移動していて、タブ順序の先頭または最後に到達したとき、フォーカスはラップされて Flash コンテンツのタブ順序の反対側の先頭または最後に移動する。つまり、フォーカスを Tab キー (または Shift + Tab キー) によって Flash コンテンツから抜け出させることができない。しかし、この実装方法を使用することによって、「フォーカスのラップ」が検出された場合に HTML のタブ順序内の隣接する要素に移動するようになる (キーボードを使用して Flash コンテンツのタブ順序から抜け出すことが可能になる)。
Flash プロジェクトに SWFFocus クラスをインポートすると、次のようになる。
JavaScript の <script> タグが生成され、Flash コンテンツが格納されている HTML ドキュメントに追加される。この JavaScript コードは以下の処理を行う。
ページ内の各 Flash コンテンツの <object> 要素に対して、タブインデックス値 "0" を設定する。これにより、Flash オブジェクトがタブ順序に含まれるようになる。
オプションで、Flash コンテンツの前後に非表示のアンカー要素を作成する。この要素は、SWFFocus によってフォーカスを Flash コンテンツから HTML ページに戻すために使用される。または、開発者自身が、既存のフォーカス可能な HTML 要素を Flash コンテンツの前後のタブストップとして指定することもできる。
Flash コンテンツのオブジェクトのイベントハンドラを設定する。これによって、Flash コンテンツのオブジェクトがフォーカスを受け取った際に SWFFocus クラスに通知され、Flash コンテンツ内部のタブ順序を管理できるようにする。
SWFFocus クラスは Flash コンテンツ内のフォーカスの変更を監視する。コンテンツ内でフォーカスのラップが検出されたら JavaScript の関数が呼び出され、これによって隣接する HTML コンテンツにフォーカスが戻される。
上記で示したように、このテクニックの使用方法は二通りある。
HTML のタブ順序内で各 Flash コンテンツに隣接するフォーカス可能な要素を、SWFFocus クラスに生成させる (下記の事例 1 で示す)。
デフォルトでは、SWFFocus クラスは埋め込まれた Flash コンテンツの前後に非表示のリンク要素を作成する。これらの要素は、Flash コンテンツの外部にタブ移動 (または shift キーを押しながらタブ移動) する際に、フォーカスを移動するための「アンカー」として必要になる。この手法は、開発者による追加作業が必要ないため実装が最も簡単である。この手法の欠点は、非表示のリンクという意味のない要素が HTML のタブ順序の中に紛れ込むことである (これらの要素は、Flash コンテンツの外部にタブ移動する際のタブストップのみとして使用される。Flash コンテンツの内部にタブ移動する場合には使用されない)。以上の点から、この手法ではなく次の 2. の手法を使用することが推奨される。
HTML のタブ順序内における各 Flash コンテンツの前後のフォーカス可能な HTML 要素を明示的に指定する (下記の事例 2 で示す)。
この手法では、開発者は ID 値を使用することによって、HTML のタブ順序内で Flash コンテンツの前後に当たる要素を指定できる。これは、Flash コンテンツの <object> 要素に特別なクラス名を設定することによって実現される。タブ順序内に不必要な要素が入り込むことがないため、この手法を用いることがより好ましい。ただし、開発者自身がこの点を意識して追加作業を行う必要がある (ID 値を手動で設定する必要がある)。また、状況によっては、Flash コンテンツの前後にフォーカス可能な要素が存在しない場合もありうる。
Flash オブジェクトをキーボードで操作可能にして、キーボードトラップを回避する」のサンプル (英語) でこれらの二つの事例が示されている。このサンプルの HTML ファイルには二つの Flash コンテンツが埋め込まれている。最初の Flash コンテンツは事例 1 で説明されている手法によって埋め込まれており、二つ目の Flash コンテンツは事例 2 で説明されている手法によって埋め込まれている。Flash オブジェクトをキーボードで操作可能にして、キーボードトラップを回避する」のソース (英語) をダウンロードすることもできる。ソースの zip ファイルには SWFFocus クラスが含まれている。
注記: このサンプルをウェブサーバーからではなく、ローカルドライブから実行するには、Flash Player のセキュリティ設定にローカルディレクトリを追加する必要がある。
この事例では、フォーカス可能な HTML 要素を明示的に指定することなく、SWFFocus クラスを使用している。SWFFocus によって、Flash コンテンツの前後に非表示のリンクが動的に挿入される。
この事例では、Flash オブジェクトは SWFObject's SWFObject による動的なパブリッシュ手法 (英語) によって追加されている。この手法では、JavaScript (ブラウザによってサポートされる方法) により動的に object タグが生成される。これは推奨される手法ではあるが、この実装方法を使用することは必須ではない。なお、HTML ドキュメント内に object タグがハードコーディングされている場合であっても SWFFocus クラスは動作する。
以下のサンプルコードは、SWFObject を使用して動的にコンテンツをロードする方法を示している。
コード例:
<?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 クラスを追加する必要がある。これを行うための最も簡単な方法は、com/swffocus/SWFFocus.as ファイル (ネストしたディレクトリ構造も含む) をプロジェクトのルートディレクトリにコピーすることである。
コンテンツのソースパスに SWFFocus クラスを追加したら、以下のコードによってこのクラスを初期化する必要がある。
コード例:
import com.adobe.swffocus.SWFFocus;
SWFFocus.init(stage);このクラス自身のコードはソースファイル内にある。
この実装方法の大部分は事例 1 と同じである。
SWFObject による動的ロードの手法を使用して Flash コンテンツをロードする。
コンテンツのソースパスに SWFFocus クラスを追加し、Flash コンテンツ内で初期化する必要がある。
これらの手順の詳細については、事例 1 を参照のこと。
しかし、このケースでは、Flash コンテンツのオブジェクトに特別なクラス名が追加される。これらのクラス名は、HTML のタブ順序においてコンテンツの前後に置かれる要素の ID 値を示す。このクラス名は以下のようになる。
'swfPref-<previous ID>'。この '<previous element>' にはタブ順序における前の要素の ID 値が設定される。
'swfNext-<next ID>'。この '<next element>' にはタブ順序における次の要素の 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 の初期化時に属性として指定される必要がある。次のコード例はこの処理を示したものである。
コード例:
<?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 コンテンツについて:
可能であれば、Flash コンテンツのソースが SWFFocus クラスをインポートし、初期化している。
Tab キーを押してページ上のタブ移動可能なアイテム間を移動する。
Flash コンテンツの内部にタブ移動できる。
さらに Tab キーを押し、Flash コンテンツの外部にタブ移動できる。
3. および 4. を満たしている。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
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.