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

onkeypress、乱用禁止!

| コメント(4)

Webサイト構築やブログのカスタマイズをするにあたり、参考になるサイトを見ていると、よくこんな記述を見かけます。

onclick 属性を設定した場合は onkeypress 属性を同時に設定することがアクセシビリティ上好ましいとされています。

それがなぜそうであるのか、分かってやっていれば良いのですが、「?とされています」とだけ紹介してきちんと検証していない人、けっこういます。
そもそもこの設定は、アクセシビリティよりもユーザビリティに関する提案です。
しかも。「へーそうなのかー」と何も考えずにそれに倣って設定すると、却ってユーザビリティを悪くします!

論より証拠

まずは、こちらのサイトをご覧ください。

使えない文字

HTMLで「そのままでは表示できない文字」の紹介と、それを表示する方法(=文字参照)について解説しているサイトです。
このサイト自体はとても有用なサイトで、初掲載からかなりの年月が経っている(ターゲットブラウザはIE6およびNN6、またホームページ自体は閉鎖されている模様)にもかかわらず現在でも十分通用する内容になっています。
その内容に関しては今回の本題から外れるので、またの機会に。

上記サイトの、後半過ぎあたりの「HTML 4 文字参照」という箇所をご覧ください。
入力した文字が、数値文字参照もしくは文字実体参照に変換したり、逆に数値文字参照や文字実体参照を実際の文字に変換したりできるようになっています。
(HTMLの文字参照以外に、CSS・JavaScriptの文字参照にも対応しています。)
この、「HTML 4 文字参照」の入力テキストフィールドに適当な文字を入力して、[Tab]キーを数回押してください。
一般的なブラウザなら、3?4回押すと「HTML 4 変換!」ボタンの上にフォーカスが移動します。
(ここでボタンにフォーカスが移動しないブラウザは、この現象の対象外ですので、続きは読み飛ばしていただいても構いません。ただ、大事な話になるので、IE、Firefox、Opera 等の対象ブラウザでもう一度確認することをオススメします。)

さて、この「HTML 4 変換!」ボタンの上にフォーカスがある状態で、もう一回、[Tab]キーを押してみてください。
テキストフィールド内の文字が、勝手に変換されませんでしたか?

ここで「えー、変換されないよ?」という方は、きっとWinIEをお使いですね。
Firefox や Opera といった『標準準拠ブラウザ』でもう一度見直してください。
↑これらのブラウザでは、フォーカスが隣の「リセット」ボタンに移動するとともに、ボタンを押してもいないのにボタンを押したときの動作が引き起こされてしまっているのです。
ちなみにその「リセット」ボタンにフォーカスがある状態でさらに[Tab]キーを押すと、入力文字がクリアされてしまいます。
せっかく入力し、変換してくれた文字が、消えてしまうのです(泣)

これが、「onkeypressを乱用」したことによる功罪の典型的な例です。
つまり、この「HTML 4 変換!」ボタンや「リセット」ボタンに、onclickとともにonkeypressイベントが設定されているのです。
その結果、標準的なブラウザでは、そのボタンにフォーカスがあるときに何かキーが押されたら、そのボタンをクリックしたときと同じ動作をしてしまうのです。

ここで注意すべきは、「どんなキーが押されたにもかかわらず」、ということ。

[Tab]キーは、Webブラウザでは、リンクをたどったり、フォームの各要素(テキストフィールド、チェックボックス、ボタン等)を移動したりするのに利用することのできるキーです。
これは標準的なユーザビリティです。一時的にマウスが使えない場合など、キーボードで全て操作したい場合などにとても有効です。
逆に言えば、その機能が敢えて抑えられてしまったり、別の機能が与えられてしまうと、とても不便になります。ユーザに混乱を与える、つまり、ユーザビリティが低下してしまいます。

スペースキーもそうですね。
スペースキーは、フォーカスがボタンやラジオボタン、チェックボックス等の、文字入力以外のフォーム要素の上にあるときには、クリックと同じ動作になります。文字入力要素(テキストフィールド、パスワードフィールド、テキストエリア等)の中なら文字通りスペース文字の入力。それ以外の場所の場合は、一般的なブラウザではウィンドウの一画面分下スクロール([PageDown]キーと同様の動作)に割り当てられています。
(ちなみに[Shift]+スペースキーで一画面分上スクロール(=[PageUp])。また一部ブラウザでは日本語入力をOFFにしていないと有効になりません。)
ところが。
先ほどのサイトをOperaで見てみてください。
先ほどと同じ「HTML 4 変換!」で、スペースキーを押してみてください。
文字が変換されるとともに、画面が下にスクロールしてしまいます。
しかも。ボタンが何度も押されたかのように、変換結果がおかしくなっています。
これも、「onkeypress」の功罪です。

ちなみに Opera には、標準機能としてのキーボード・ユーザビリティに独自の工夫が為されています。
[Shift]キーを押しながらカーソルキー(矢印キー)を押すと、その矢印の方向にある次に近いリンク(ボタンもしくはテキストフィールド)にフォーカスが移動するようになっています。
また各アルファベットキーにも色々な機能が割り当てられています(zで前のページ、xで次のページ、aでリンクをたどる、sで<hn>要素をたどる、等)。
onkeypressはそれらのキー押下を拾ってしまうので、「aキーで次のリンクに飛びたいけれど、サイドメニューが展開/折りたたみして先に進めないー」なんてことも起こります。

困ったモノです。
どうしたらよいかというと、長くなってしまったので次のエントリーに続きます。
【提案】onkeypressの正しい併用の仕方!

コメント(4)

なるほど、全然知りませんでした??
最近ちょっとだけ、Validさを気にするようになりまして、気にしてたんですよ。

onkeypressにvoid();とかやっちゃうのも、まずいんですかね。

>oscarさん
私はOpera愛用者なので、この問題は以前からけっこー気にしてたんですよ。
キーボード操作好きですし。フルキーボードアクセスでWeb閲覧、なれると快適ですよ。

>onkeypressにvoid();とかやっちゃうのも、まずいんですかね。
んー、多分問題になります。
onXXXイベントハンドラは、その中で最後に「return true;」とすると、そのイベントが起きたときの本来の動作が続行されて、「return false;」だと本来の動作がキャンセルされます。
明示的に「return」を書いていないときは、環境によって違うかもしれませんが多分、最後に実行した式の結果で評価されると思います。
void(); なら、戻り値は0かnullだと思われるので、falseと解釈されてそれ以降の「本来の動作」はキャンセルされると思われます。
つまり、onkeypress="void(0);"とすると、結果としてキー押下が全て無効になってしまうのではないかと。
(実験未実施m(_ _)m)

なるほど?、教えてくださってありがとうございます。
もっと、勉強しなくては・・・

訂正m(_ _)m

>明示的に「return」を書いていないときは、環境によって違うかもしれませんが多分、最後に実行した式の結果で評価されると思います。
と書きましたが、違いました。正しくは↓

イベントハンドラの最後に「return false;」と書いた場合のみ、そのイベントが起きたときの本来の動作がキャンセルされる。
(=明示的に「return」を書いていないときは、イベントハンドラの場合は「return true;」が指定されたときと同様の振る舞いをする、すなわち本来の動作が続行される)

でした。
つまり「onkeypress="void(0);"」とすると、onkeypressを指定しないのと同じように何事もなくイベントは通過し、そのキーが押されたときの本来の動作が実行されます。
しかも、Another HTML-lint の採点も上がる♪

ちなみに。
「void()」の括弧の中は空っぽではダメです。
引数に指定した式またはメソッドを評価するけれど戻り値が何もない(スクリプトには影響しない)関数、なので、何か一つ引数が必要です。
それで一番影響がなくて簡単な「0」をよく指定するワケですね。

カテゴリ

月別 アーカイブ

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

このブログ記事について

このページは、あんちもん2が2007年4月29日 16:43に書いたブログ記事です。

ひとつ前のブログ記事は「ダイナミック・パブリッシング対応 indexcontext プラグイン」です。

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

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