表示サンプル： このページの修正箇所は次のように表示されます。
機能を実装するためにスクリプトを用いる全てのコンテンツ
これは、次の達成基準に関連する実装方法である：
この実装方法の目的は、イベントと関連付けられたスクリプト機能を含むコードを伴った、キーボード固有及びマウス固有のイベント双方の使用を明示することである。キーボード固有及びマウス固有のイベントを一緒に用いることにより、さまざまな種類の機器でコンテンツを操作できることを保証することができる。例えば、スクリプトが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以外のユーザーエージェントで問題があるときのためである。
2 keypressイベント・ハンドラは、どのキーに対しても有効であることから、そのイベント・ハンドラ関数では、イベントを処理する前に、Enterキーが押されたかどうかをチェックすべきである。そうでなければ、イベント・ハンドラは利用者が任意のキーを押すたびに実行され、コントロールから抜けるためにTabキーを押すような場合にも実行されるので、通常は望ましくない。
（dblclick及びmousemoveのような）いくつかのマウス固有の機能には、対応するキーボード固有の機能がない。つまり、いくつかの機能は機器別に違った実装をしなければならないということである（例えば、実装されているマウス固有の機能と同等の機能を、キーボードから実行するための一連のボタン操作を含むようにする）。
この画像リンクの例では、利用者がポインタを画像に重ねると画像が変化する。キーボード利用者に同様の体験を提供するには、利用者が画像リンクに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="メニュー" />
</a>[ここから変更] この事例では、マウスとキーボードの両方を用いて機能を実行できる画像のカスタム・コントロールを紹介している。[変更ここまで]マウスイベントのonclickは、対応するキーボードイベントのonkeypressによって補完されている。tabindex属性は、キーボードを用いてTabキーで移動した際に、画像の上で停止させるためのものである。この事例ではnextPage()関数が、キーボードのキー押下がEnterキーであるかどうかをチェックしていることに注目してほしい。もしチェックしなければ、画像にフォーカスがあるときには、どのキーが押下されても常に反応してしまうため望ましくない。
コード例：
<img onclick="nextPage();" onkeypress="nextPage();" tabindex="0" src="arrow.gif"
alt="次のページへ移動"> 注記：この例ではimg要素にtabindexを用いている。現時点では（文法的に）妥当ではないが、この機能を実装するための古典的なテクニックとして用いられている。[ここから追加] このようなカスタム・コントロールでは、コントロールの役割（role）と状態（state）を支援技術に引き渡すためにWAI-ARIAも用いるべきである。[追加ここまで]
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
全てのインタラクティブな機能を探す。
それらのインタラクティブな機能全てに、キーボードだけを使ってアクセスできる。
2.を満たしている。
注意： この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。
日本語訳における注記：
この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。