あんちもん2.Lab

概要

念のため、もう一度おさらいします。
『onclick 属性を設定した場合は onkeypress 属性を同時に設定することがアクセシビリティ上好ましいとされています』
という情報が出回っていますが、これを文字通りに受け取って、例えば↓

<a href="javascript:void(0);" onclick="clickAction();" onkeypress="clickAction();">Click Here!</a>

のように、onclickとonkeypressに全く同じモノを指定してしまうと、却ってキーボードユーザビリティが損なわれてしまうことがあります。
（詳細は、前エントリー（【提案】onkeypressの正しい併用の仕方！）を参照してください。）

今回提供するスクリプトは、このような状態に対して、上記のような記述はそのままで、onkeypressの挙動を上書きすることによりキーボードユーザビリティの回復を図る、というモノです。

つまり！
フリーのスクリプトで、上記のようにonclickとonkeypressが同時指定されてしまっているときに、その部分を触らずに、面倒なソースの修正など一切せずに、当サイトの提案する「正しい併用の仕方」が実現できる、というワケです！

スクリプト本体

以下からダウンロードしてください。

• correctOnKeyPress.js[1,492 Bytes]

（リンクを右クリックし「名前を付けて保存」等で保存してください。）

スクリプトの使い方

1. ダウンロードしたスクリプトをお使いのWebサーバの適当な場所にコピー（アップロード）してください。
2. HTMLの最後の方、</body>の直前あたりに、以下のように記述してください：

        :
       <script type="text/javascript" src="/js/correctOnKeyPress.js"></script>
   </body>
   

   （ドキュメントルートの js フォルダにスクリプトをコピーした場合）

以上。これだけです。

お使いの「onclickとonkeypressに同じモノを指定している」スクリプトで、キーボード操作が期待通りに動作する（[Enter]キー以外で変な動作にならない）ことをご確認ください。

技術情報

このスクリプトは、概ね以下のような処理をしています。

1. 全てのHTML要素のうち、onkeypressとonclickが同時に指定されているモノを探す。
2. onclickとonkeypressに全く同じ指定がされているモノのみ抜き出す。
3. onkeypressイベントハンドラを上書きする：
   1. キーコードが10,13([Enter]キー)および32(スペースキー)以外の場合は、元々指定されていたイベントハンドラを実行しない
   2. キーコードが32(スペースキー)で、かつ対象となる要素がボタン要素(<input>, <button>)以外の場合は、元々指定されていたイベントハンドラを実行しない
   3. 上記に引っかからなかった場合に、元のイベントハンドラを実行する

こうすることにより、ボタンなら[Enter]キーかスペースキー、それ以外なら[Enter]キーが押されたときにのみ、イベントが処理されるようになります。

お約束

多くの環境で充分な検証はしておりますが、もし不具合等ありましたらぜひともご報告をお願いします。