【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集
この達成方法 (参考) の使用法と、この達成方法が WCAG 2.0 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.0 を満たすコンテンツを作成するために使用できることを意味するものではない。
HTML 及び XHTML、スクリプト
これは、次の達成基準に関連する達成方法である:
SCR29 に関するユーザエージェントサポートノートを参照のこと。
この達成方法の目的は、 div や span などの静的な HTML 要素により実行されるユーザインターフェース コントロールにキーボードアクセスを提供する方法を示すことである。この達成方法は tabindex 属性を設定することで要素をフォーカス可能にし、onclick ハンドラに加えて onkeyup 又は onkeypress ハンドラを提供することでキーボードから動作を実行することができるようにするものである。
tabindex 属性の値が 0 の際、要素はキーボードでフォーカス可能であり、文書のタブ順序に含まれる。tabindex 属性の値が -1 の際、要素はタブ移動できないが、element.focus() を使用することによりフォーカスをプログラムで制御できる。
静的な HTML 要素にはそれらに関連した動作がないため、スクリプトが利用できない環境に対する、代替としての実装又は説明を提供することはできない。この達成方法はクライアントサイド スクリプティングが利用できる環境でのみ使用されるべきである。
注記: そのようなユーザインターフェース コントロールは SC 4.1.2 を達成しなければならない。ユーザインターフェース コントロールの役割、名前及び状態についての情報がないままこの達成基準を適用する場合、失敗例 F59 に該当し、スクリプトを用いて、HTML の div 要素又は span 要素をユーザインタフェースのコントロールにしたことによる達成基準 4.1.2 の失敗例となる。
ページにある div 要素には一意の id 属性及び値が 0 の tabindex 属性が付与されている。スクリプトはドキュメントオブジェクトモデル (DOM) を利用し、id によって div 要素を見つけ onclick ハンドラ及び onkeyup ハンドラを追加する。onkeyup ハンドラは Enter キーが押下された際、アクションを実行する。div 要素を見つけて変更するには、div 要素が DOM の中に読み込まれた状態でなければならないことに注意する。これは、通常、body 要素の onload イベントでスクリプトを呼び出すことで達成される。イベントハンドラを追加するスクリプトはユーザエージェントが JavaScript をサポートし、かつ有効にしている場合にのみ実行される。
コード例:
...
<script type="text/javascript">
// これはアクションを実行する関数である。このシンプルな例はメッセージを開閉する。
function doSomething(event) {
var msg=document.getElementById("message");
msg.style.display = msg.style.display=="none" ? "" : "none";
// リンクのhref属性が実行されないよう、関数からfalseを返す
return false;
}
// これは Enter キーが押された際にアクションが実行される関数である。
function doSomethingOnEnter(event) {
var key = 0;
// window.event 又はイベントオブジェクトが使用されているかに応じて押されたキーを判定する。
if (window.event) {
key = window.event.keyCode;
} else if (event) {
key = event.keyCode;
}
// Enter キーが押されたか？
if (key == 13) {
return doSomething(event);
}
// イベントが処理されなかったため、trueを返す
return true;
}
// このsetUpActions()関数は存在するdiv要素にonclick及びonkeyupイベントハンドラを設定するために呼び出されなければならない。
// この関数はid="active"の付与されたdiv要素がDOMに読み込まれた後に呼び出されなければならない。
// この例では、setUpActions()関数はbody要素のonloadイベントから呼び出されている。
function setUpActions() {
// divオブジェクトを取得する
var active=document.getElementById("active");
// onclickハンドラをオブジェクトに割り当てる
// 関数が返された後、href属性を止めるため、onclickハンドラからfalseを返すことが重要である
active.onclick=doSomething;
// onkeyupハンドラをオブジェクトに割り当てる
active.onkeyup=doSomethingOnEnter;
}
</script>
<body onload="setUpActions();">
<p>Here is the link to modify with a javascript action:</p>
<div>
<span id="active" tabindex="0">Do Something</span>
</div>
<div id="message">Hello, world!</div>
...
このコードの実装例: JavaScriptによる制御を用いてdiv要素を作成する。
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
HTML 4.01 Scripts
HTML 4.01 Giving focus to an element
Accessible Rich Internet Applications (WAI-ARIA) Version 1.0 Global States and Properties
WAI-ARIA Primer, Provision of the keyboard or input focus
Internet Explorer, HTML and DHTML Reference, tabIndex Property
訳注 1: HTML 4.01 は Superseded Recommendation としてマークされ、廃止された仕様である。上記はそれぞれ、HTML 5.2§4.12. Scripting、HTML 5.2§5.4.3. The tabindex attribute を代わりに参照できる。
訳注 2: 「WAI-ARIA Primer, Provision of the keyboard or input focus」が挙げられているが、WAI-ARIA 1.0 Primer は作成が破棄されている。代わりに、WAI-ARIA Authoring Practices 1.1 §5. Developing a Keyboard Interface を参照できる。
訳注 3: DOM 仕様は現在、WHATWG で策定されている。DOM Standard も参照のこと。
訳注 4: MSDN のページ「Internet Explorer, HTML and DHTML Reference, tabIndex Property」が MDN にリダイレクトされているが、これは MSDN の文書が MDN に統合されたためである。このリダイレクト処理の詳細については、Microsoft Edge Dev Blog 及びマイナビニュースを参照されたい。
スクリプトをサポートするユーザエージェントで:
マウスを用い、コントロールをクリックする。
スクリプトのアクションが適切に実行されることを確認する。
キーボードでコントロールに移動して、フォーカスを与えることが可能であることを確認する。
キーボードのフォーカスをコントロールに設定する。
Enter キーを押すことで、スクリプトのアクションを呼び出すことを確認する。
手順全ての結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。