JavaScript、Ajax、HTML5(API)、Ruby…Web及び関連技術の実験&情報公開&制作物紹介。

onkeypressをお行儀良くする追加スクリプト

前エントリー(【提案】onkeypressの正しい併用の仕方!)からの続きです。
ご用とお急ぎでない方は、前エントリーからお読みいただくと、今回このスクリプトを提供する経緯がお分かりになると思います。

onclickとonkeypressの両イベント属性を併用している場合に、onkeypressの挙動をお行儀よく修正する追加スクリプトを提供します。
このスクリプトは、前エントリーで分類した、以下のパターンに対して有効に作用するモノです:

  1. onclick と onkeypress が同時に指定され、その内容が同じの場合

またその時に、そのような箇所を以下のように修正します:

  1. onkeypressイベントハンドラにフィルターをかける

概要

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

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

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

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

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

スクリプト本体

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

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

スクリプトの使い方

  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]キーが押されたときにのみ、イベントが処理されるようになります。

お約束

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

カテゴリ

月別 アーカイブ

OpenID対応しています OpenIDについて

このブログ記事について

このページは、あんちもん2が2007年5月 1日 22:41に書いたブログ記事です。

ひとつ前のブログ記事は「【提案】onkeypressの正しい併用の仕方!」です。

次のブログ記事は「PHPizeプロジェクトについて」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。