適用 (対象)
機能を実装するためにスクリプトを用いる全てのコンテンツ
これは達成基準 2.1.1: キーボードに関する達成方法である。(G90: キーボードがトリガーとなるイベントハンドラを提供するの達成方法として十分)
解説
この達成方法の目的は、イベントと関連付けられたスクリプト機能を含むコードを伴った、キーボード固有及びマウス固有のイベント双方の使用を明示することである。キーボード固有及びマウス固有のイベントを一緒に用いることにより、さまざまな種類の機器でコンテンツを操作できることを保証することができる。例えば、スクリプトが keypress を認識したときに、マウスボタンをクリックしたときと同じ動作を行うことができるようにする。このテクニックにより、キーボードによるアクセスだけでなく他の機器によるアクセスの達成基準を満たすことができる。
JavaScript でよく使用されるイベントハンドラには、onblur、onchange、onclick、ondblclick、onfocus、onkeydown、onkeypress、onkeyup、onload、onmousedown、onmousemove、onmouseout、onmouseover、onmouseup、onreset、onselect、onsubmit、onunload が含まれる。いくつかのマウス固有の機能には、論理的に対応するキーボード固有の機能がある (例えば 'onmouseover' と 'onfocus' のように)。キーボード向けのイベントハンドラは、対応するマウス向けの機能とともに提供すべきである。
次の表は、マウスイベントハンドラに対応するキーボードイベントハンドラの候補である。
| マウス向け | キーボード向け |
|---|---|
| mousedown | keydown |
| mouseup | keyup |
| click [1] | keypress [2] |
| mouseover | focus |
| mouseout | blur |
1 click は基本的にはマウスのイベントハンドラであるが、ほとんどの HTML 及び XHTML 向けのユーザエージェントは、HTML のネイティブコントロール (例: ボタン又はリンク) が有効化された場合、マウス又はキーボードのどちらで有効化されたかにかかわらず、イベントを処理することができる。そのため、もともとフォーカスできる HTML 要素にハンドラを追加するときは、実際にはキーボード用のイベントを補完する必要はない。しかし、下記の事例 2 のように他のイベントにハンドラを追加するときは、必要である。
2 keypress イベントハンドラは、どのキーに対しても有効であることから、そのイベントハンドラ関数では、イベントを処理する前に、Enter キーが押されたかどうかをチェックすべきである。そうでなければ、イベントハンドラは利用者が任意のキーを押すたびに実行され、コントロールから抜けるために Tab キーを押すような場合にも実行されるので、通常は望ましくない。
(dblclick 及び mousemove のような) いくつかのマウス固有の機能には、対応するキーボード固有の機能がない。つまり、いくつかの機能は機器別に違った実装をしなければならないということである (例えば、実装されているマウス固有の機能と同等の機能を、キーボードから実行するための一連のボタン操作を含むようにする)。
事例
事例 1
この画像リンクの例では、利用者がポインタを画像に重ねると画像が変化する。キーボード利用者に同様の体験を提供するには、利用者が画像リンクに Tab キーで移動した場合に、画像を変化させればよい。
<a href="menu.php" onmouseover="swapImageOn('menu')" onfocus="swapImageOn('menu')"
onmouseout="swapImageOff('menu')" onblur="swapImageOff('menu')">
<img id="menu" src="menu_off.gif" alt="Menu" />
</a>事例 2
この事例では、マウスとキーボードの両方を用いて機能を実行できる画像のカスタムコントロールを紹介している。マウスイベントの onclick は、対応するキーボードイベントの onkeypress によって補完されている。tabindex 属性は、キーボードを用いて Tab キーで移動した際に、画像の上で停止させるためのものである。この事例では nextPage() 関数が、押されたキーボードのキーがEnterであることを確認すべきであり、そうでない場合は、画像がフォーカスを持つ間にすべてのキーボード動作に応答するが、これは期待される動作ではないことに注意する。
<img onclick="nextPage();" onkeypress="nextPage();" tabindex="0" src="arrow.gif" alt="Go to next page">
この例では img 要素に tabindex を用いている。現時点では (文法的に) 妥当ではないが、この機能を実装するための古典的なテクニックとして用いられている。このようなカスタムコントロールでは、コントロールの役割 (role) と状態 (state) を支援技術に引き渡すために WAI-ARIA も用いるべきである。
参考リソース
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
検証
手順
- 全てのインタラクティブな機能を探す。
- それらのインタラクティブな機能全てに、キーボードだけを使ってアクセスできることを確認する。
期待される結果
- 2. の結果が真である