適用 (対象)
HTML 及び XHTML、スクリプト
これは達成基準 2.1.1: キーボードに関する達成方法である。（参考）
解説
この達成方法の目的は、 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 の失敗例となる。
事例
事例 1: div 要素に JavaScript によるアクションを追加する
ページにある div 要素には一意の id 属性及び値が 0 の tabindex 属性が付与されている。スクリプトはドキュメントオブジェクトモデル (DOM) を利用し、id によって div 要素を見つけ onclick ハンドラ及び onkeyup ハンドラを追加する。onkeyup ハンドラは Enter キーが押下された際、アクションを実行する。div 要素を見つけて変更するには、div 要素が DOM の中に読み込まれた状態でなければならないことに注意する。これは、通常、body 要素の onload イベントでスクリプトを呼び出すことで達成される。イベントハンドラを追加するスクリプトはユーザエージェントが JavaScript をサポートし、かつ有効にしている場合にのみ実行される。
...
<script type="text/javascript">
// this is the function to perform the action. This simple example toggles a message.
function doSomething(event) {
var msg=document.getElementById("message");
msg.style.display = msg.style.display=="none" ? "" : "none";
//return false from the function to make certain that the href of the link does not get invoked
return false;
}
// this is the function to perform the action when the Enter key has been pressed.
function doSomethingOnEnter(event) {
var key = 0;
// Determine the key pressed, depending on whether window.event or the event object is in use
if (window.event) {
key = window.event.keyCode;
} else if (event) {
key = event.keyCode;
}
// Was the Enter or Space key pressed?
if (key == 13 || key == 32) {
return doSomething(event);
}
// The event has not been handled, so return true
return true;
}
// This setUpActions() function must be called to set the onclick and onkeyup event handlers onto the existing
// div element. This function must be called after the div element with id="active" has been loaded into the DOM.
// In this example the setUpActions() function is called from the onload event for the body element.
function setUpActions() {
// get the div object
var active=document.getElementById("active");
// assign the onclick handler to the object.
active.onclick=doSomething;
// assign the onkeyup handler to the object.
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" role="button" >Do Something</span>
</div>
<div aria-live="polite">
<div id="message">Hello, world!</div>
</div>
...
このコードの動作例: JavaScriptによる制御を用いてdiv要素を作成する。
参考リソース
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
- HTML 4.01 Scripts
- HTML 4.01 Giving focus to an element
- Accessible Rich Internet Applications (WAI-ARIA) Global States and Properties
- WAI-ARIA Primer, Provision of the keyboard or input focus
- Document Object Model (DOM) Technical Reports
- Internet Explorer, HTML and DHTML Reference, tabIndex Property
HTML 4.01 は Superseded Recommendation としてマークされ、廃止された仕様である。上記はそれぞれ、HTML§4.12 Scripting、HTML§6.5.3 The tabindex attribute を代わりに参照できる。
「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 を参照できる。
DOM 仕様は現在、WHATWG で策定されている。DOM Standard も参照のこと。
MSDN のページ「Internet Explorer, HTML and DHTML Reference, tabIndex Property」が MDN にリダイレクトされているが、これは MSDN の文書が MDN に統合されたためである。このリダイレクト処理の詳細については、Microsoft Edge Dev Blog 及びマイナビニュースを参照されたい。
検証
手順
スクリプトをサポートするユーザエージェントで:
- マウスを用い、コントロールをクリックする。
- スクリプトのアクションが適切に実行されることを確認する。
- キーボードでコントロールに移動して、フォーカスを与えることが可能であることを確認する。
- キーボードのフォーカスをコントロールに設定する。
- Enter キー又はスペースキーを押すことで、スクリプトのアクションを呼び出すことを確認する。
期待される結果
- 手順全ての結果が真である。