妥当なonkeypressは?

このQ&Aのポイント
  • W3Cのアクセシビリティ指針に従い、onclick属性と共にonkeypress属性を使用することが一般的です。
  • しかし、単純にonkeypress属性を追加するだけでは、すべてのキーに反応してしまう可能性があります。
  • 一般的な対処方法としては、スペースキー以外のキー入力を無視する処理を追加したり、onkeypress属性のみにreturn false;を記述する方法があります。
回答を見る
  • ベストアンサー

妥当なonkeypressは?

以前に似たような質問をさせていただきましたが(http://okwave.jp/qa2486538.html)、 W3Cのアクセシビリティ指針「onclick属性を指定するならonkeypress属性も指定せよ」に準拠するため、 <a href="~" onclick="func()" onkeypress="func()">TEXT</a> などと、両方にまったく同じ属性値を書いている例を大変よく見かけます。 しかし、これでは「すべてのキー」に反応してしまいますよね(少なくともIEやFirefoxなど)。 アンカーにフォーカスがある状態では、(一部を除き)とにかくキーが押されたらクリックされたのと同じ動作をしてしまう。 たとえばエスケープキーを押したユーザーには「キャンセル」的な意思があったのであって、クリックと同義の意思ではない、まったく逆だろう、と思うわけです。 まぁ個人的には、このW3Cの指針がどうも理解できず、装置依存への対処なんてのは文書の責任じゃなくてクライアントアプリ(ブラウザ)の役目だろう、と思うのですが、それはさておき… ネット上の様々なコードを見てみると、onkeypressのほうだけは「return false;」を書いているパターンもある程度あるようで、言ってみれば本来の目的「装置依存~」を殺してでもエラーを回避しようとする、あるいは別のパターンとしては別の関数を呼んで押されたキー(スペースキー以外は無視)というような処理を入れているパターン、など。 そこでお聞きしたいのですが、一般的に妥当な、というか、皆さんはどのように対処していますか? もちろん、最も動作的に理想なのは押されたキーを調べてスペースキーだけ…という処理なんでしょうけど、見たところこのような対処をしているケースは少ないのと、現実には、ほんのちょっとしたことをしたいだけなのに、わざわざそんなコードを入れるのもどうか、ということもあり、 むしろW3Cの理念的なことよりも現実的に、ほとんどすべての現行ブラウザはキーでもonclickが発生するので「return false;」が最も妥当なのかな、とも思ったりもしています。 実際のところ、どうなんでしょう。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.3

> DTD上は#IMPLIEDで、空文字を許可していない? あえてから文字列を指定する<a title="">という使い方をしたい場合もあると思いますが、、、 W3CのValidatorをエラーなしで通りますよ。 #IMPLIEDな属性を書くときはその内容を省略しては行けない、というルールは見あたらなかったのですが、探し方が悪いんですかね。 定義としては「書かれていない場合はブラウザ独自のデフォルト値をその値とする」のようですが、それ以上のことは書かれてなさそうですが。。。 return falseはよく見かけますが、return trueというのは見かけない、だからその書き方に気づかなかった、 で、使わず(使えず)に不都合なreturn falseを使う、という人が多いのではないでしょうか。 ""も同様だと思います。 私自身、return trueには気づかなかったわけで、、、(^^; もちろん、何もしないという意味の空白行を入れることよりも、属性だけを書くというのを嫌ってのことかも知れませんが。 > なので、やはり指針の「onkeypressも書け」だけが厄介です… 私はそうしなければならない状況でなければ、 自分の判断で、現代の状況、または作成するサイトの状況に合わないと思う指針などについては無視してます。 古いブラウザや、メジャーなブラウザとは異なる動作をするブラウザが存在する限り、 W3Cの指針は残ると思いますし、その利用者のために、その指針を守るのは良いことだと思いますが。 まぁ、フレームやインラインフレームをよく使う人の言うことですから(^^;

taseki
質問者

お礼

ご回答ありがとうございます。 空文字列の件は、そのように考えるのが妥当のようですね。 いろいろ探したり試したりしましたが、特に他の方法も見当たらず、問題も無さそうなので、これで良しとしようと思います。もし問題があるようなら空文字列とreturn trueを使い分けても良さそうです。 > 私はそうしなければならない状況でなければ、 > 自分の判断で、現代の状況、または作成するサイトの状況に合わないと思う指針などについては無視してます。 おっしゃるとおり私も、意図的に従わないことはあります^^; 指針ではダメだとされる<a href~ target="_blank">とか、 指針の言う「理屈」は解るんですが、現実的にはtarget="_blank"が適切であるケースは多いですね。まぁこれは、実際にメジャーなサイトでも良く使われてますが…。 それでは、あらためて、 何度も御丁寧にご回答いただきまして、ありがとうございました。

その他の回答 (2)

回答No.2

では、onkeypress=""ではだめなんですかね? 画像のファイル名が表示されるのを防ぐという意味で<img alt="">を使ったりすると思いますので、 まぁ、みための統一性は出てくるんじゃないかと。 どっちにしても古いブラウザで動かないのは変わらないと思いますし、個人的には好きじゃないです。 書かないなら書かない、書くならキーコードの判断をしつつonclickと同じ処理を、でしょうか。 ブラウザ側でサポートしてくれると嬉しいのは確かです。 たとえばLynxと同じように、右やじるしキーでアンカーを移動するブラウザもあるかも知れませんし、 キー操作方法をカスタマイズしている人もいると思います。 そう言うブラウザでは一般的なキーコードの判断では操作できなくなりますしね。

taseki
質問者

お礼

ご回答ありがとうございます。 確かにonkeypress=""でも、return trueと同じ効果になり、見た目も書く手間も楽で良さそうですよね。 ただ気になるのは、onkeypress=""と書いてあるのを見かけないのは、なぜでしょうね? DTDを見るとon~属性は#IMPLIEDになっていますね。imgタグのaltは#REQUIREDで、非グラフィカルUAのためには空文字にも意味があることも理解できますが。 DTD上は#IMPLIEDで、空文字を許可していない? あるいはアクセス指針の趣旨的に「何かを指定しなければならない」という解釈なんですかね? それともブラウザによっては挙動が違ってしまうとか?… もしくは、おっしゃるように単なる好みの問題ということでしょうか。確かにalt=""には意味があるがonkeypress=""は、いかにも文法を合わせるためだけのようで、心情的になんだか…、という。なので、妥協案としてreturn trueなどをとりあえず書いておくのがマシということかな。 > ブラウザ側でサポートしてくれると嬉しいのは確かです。 おっしゃるとおりですよね。 むしろそうすべきで、実際にすでにサポートされている、と言っていいでしょうね。 なので、やはり指針の「onkeypressも書け」だけが厄介です…

回答No.1

同じ関数をそのまま呼び出しているのは、たぶん、タブキーで操作することを想定せずに、 onkeypressも書けという指針をそのまま真に受けてしまったんじゃないでしょうか。 とりあえず現状では、あえて動作を停止させたい理由がない限り、onkeypress="return false;"と書いては行けません。 Firefoxでキー操作できなくなります。 > ほんのちょっとしたことをしたいだけなのに、わざわざそんなコードを入れるのもどうか、 ほんのちょっとの便利さと、制作の多大な面倒臭さを天秤に掛けるのが一般的じゃないでしょうか。 私はメジャーなブラウザがサポートしていることを理由にonkeypressは書かなくていいと思いますが、 古いブラウザやマイナーなブラウザをサポートするかどうか、というところを基準にしてもいいと思いますし、 文法チェッカーでエラーが出ないことを優先してもいいと思います。 > このW3Cの指針がどうも理解できず、 指針には書かれてなかったと思いますが、 たとえば、onmouseoverで説明文を表示する様なスクリプトの場合。 キーボード操作をする人にも親切な設計にするなら、onmouseoverと一緒にonfocusなどを入れるのがいいと思います。 onmosueover、onclick、onfocusそれぞれに絡んだ問題が出てくると思いますが。 マウスを使っている人の特権にしたいのでなければ、 キーボード操作でも同様のことができるようにするほうが良いというのが、この指針の指しているところだと思います。 指針が作られた後にもブラウザはアップデートされていきますから、実情と異なることもたくさんあると思います。 > 装置依存への対処なんてのは文書の責任じゃなくてクライアントアプリ(ブラウザ)の役目だろう さて、どうなんでしょうか(^^; W3Cは文書・文法の管理はしてますが、ブラウザを管理してるワケじゃないですからね。 ブラウザがサポートしてくれると、JavaScriptを作る人としては楽できますね。 ブラウザを作る人は大変でしょうけど。

taseki
質問者

お礼

ありがとうございます。 その後様々試したり検討したりして,"return true"が妥当かなと今のところ考えているのですが,どうでしょう。 ご指摘のように現実的な天秤に載せてみれば,押されたキーを判別なんていうのはおよそ現実的ではないと思われ,そもそもスクリプトが動作しない環境への考慮も加味すれば,それこそキーの処理は無意味になります。 そこで, ●事実上ほとんど全ての現行ブラウザでは,マウス以外の操作機能はブラウザ自身が持っている ●なので,処理はブラウザに任せてしまう="return true"でデフォルトの動作をさせる,そしてスクリプト自身は何もしない すなわち  ・アンカー上でエンターキーが押されればブラウザがonclickを発生させる  ・ボタンエレメントなど上でエンター/スペースキー(以下同上) などとブラウザが(多少差異があっても)何らかの代替処理をしてくれるはず という考えです。 ま,簡単に言えば"onkeypressを書かない"のと同じことなんですが。 現在の状況に見合い,かつ指針にも則している そしてhttp://okwave.jp/qa2486538.htmlのような多重処理も回避できる最善策かと。 様々なソースを見ると"return true"は少なく,最も多いのはonclickと同じものを入れているケースです。 そういう意味では,やはりあまり考えずに書いてしまっている人が多く,"return false"と書いた人はある程度考えただけか妥協した,"return true"と書いている人は,私と同じように悩み考えた末の策なのかな… > W3Cは文書・文法の管理はしてますが,ブラウザを管理してるワケじゃないですからね。 > ブラウザがサポートしてくれると,JavaScriptを作る人としては楽できますね。 > ブラウザを作る人は大変でしょうけど。 W3Cは文書だけでなくブラウザ(ユーザー・エージェント)の挙動なども指針を作っています。 そしてそれを読むと,入出力デバイスに依存しないインターフェースを実装するよう勧めているんです…。 で,実際に各主要ブラウザはすでにサポートしていますよね。おっしゃるように大変だったとしても,現実にはサポートされています。 つまりHTMLのアクセシビリティ指針"onkeypressも書け"だけが,どうもシンクロしていない矛盾しているところがあるのは確かです。 しかしこれらは更新され続けている言わば途上のものですから,将来的に改善されることを願います…

taseki
質問者

補足

↓文字数制限のため、句読点をカンマにしたりあの手この手で…大変読みにくくなってしまいました…。どうぞご了承ください。

関連するQ&A

  • onclickとonkeypressの重複

    W3Cのアクセシビリティ指針によれば、onclick属性を指定するならonkeypress属性も指定せよ、とのことですが、たとえば<input type="button">にこの両方を指定すると、IEなどの場合、このボタンにフォーカスがある状態でスペースキーを押すと、onkeypressイベント→onclickイベントというように両方とも発生してしまいます。 本来、ポインティングデバイスの代替の操作のためであるにもかかわらず、これでは逆にアクセシビリティは低下するばかりでなく、処理によっては2回行って欲しくない場合もあり、なんとも面倒です。 考えられる対策としては、たとえば、ほとんどのブラウザではキーでもonclickが起きるようになっているため、あえてonkeypressのほうはダミーを指定しておく、などでしょうか。 これに対してのお考えや、対策など御教授いただけたらと思います。 よろしくお願いいたします。

  • onClickで関数呼出し後に、結果に応じてsubmitを実行する方法

    JavaScriptで、 function func() {  if (a==0) {   alert("処理しない");   return false;  }  return true; } と、a=0ならfalseを返し、それ以外ならtrueを返す関数を定義しています。 そして、FORMタグで <FORM NAME="FormName" ACTION="next.html"> <INPUT TYPE="button" VALUE="next" NAME="button1" onClick="return func();submit();"> </FORM> と記述しています。 要は、ボタンを押下した際にfunc関数がtrueを返せば、next.htmlに 遷移させたいのですが、上記記述では、遷移しません・・・ onClick部分にonClick="return func(),submit();"と記述した場合、 func関数の実行結果がtrueでもfalseでも遷移してしまいます。 そこで、なんとなくonClick="return func()&&submit();"と記述してみたところ、 func関数がtrueの時のみうまく遷移するようになりました。 これは偶然そう動作しているのでしょうか、それとも上記は正しい記述方法なのでしょうか? 正しい記述方法ならいいのですが、上記以外に正式な記述方法があれば 教えていただけないでしょうか? ※TYPE="submit"にすればいいとは思うのですが、buttonで実現したいと 考えております。

  • Aタグでサブミットさせない方法

    以下のようにjavascriptでサブミットを制御したい場合、 return falseとしてもサブミットしてしまいます。 Aタグにおいてサブミットさせないためには どうすればよいのでしょうか。よろしくお願いします。 <a href="xxx/yyy" onclick="func();"> function func(){ var ret = confirm("xxxxxxxxx"); if(ret == false) { return false; } }

  • javascript イベント属性

    javascriptには、イベント属性としてondblclickや、onkeydown等があると思います。 W3CのDOM HTML(アドレス:http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html) 内で見つけることが出来ませんでした。 ⇒click、select、focusという用語は、見つけたのですが、メソッドなので違うと思っています。 onclick、ondblclick、onkeypress等のイベント属性の情報を調べるために、 W3CのHPを見るということ自体が間違っているのでしょうか? ※Eventのほうも見てみましたが、 http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-eventgroupings-keyevents ⇒onclickではなく、clickだったので分からなくなっています。 javascriptには、イベント属性としてondblclickや、onkeydown等のイベント属性に対する情報は どこで調べることが出来るのでしょうか。 ご教授お願いします。

  • jQueryのイベントに引数を渡したい

    例えば以下のような既存のJavaScriptのコードをjQueryのイベントで書き直したい場合、関数の引数で渡していた値は、どうやって渡すのでしょうか? 【html】 <a href="" onclick="func_a('abc'); return false;"></a> 【JavaScript】 faunction func_a(param_a){ alert(param_a); } 以下のようにすれば渡せないことはありませんが、かなり強引な感じがします。 【html】 <a href="" class="abc"></a> 【jQuery】 $(function() { $("a").click( function(){ var param = $(this).attr("class"); alert(param); return false; } ); }); こういう場合はjQeuryであっても、onclick属性で関数を呼び出すのが普通なのでしょうか? ご存知の方がいらっしゃいましたら教えてください。 よろしくお願い申し上げます。

  • [C#/.NET2.0] 状況によりスレッドを実行しないで終える方法

    [C#/.NET2.0] 状況によりスレッドを実行しないで終える方法 こんにちは、お世話になってます。C#と.NETでプログラムを組み始めて2週間程度の初心者です。C/C++カテ違いっぽくてごめんなさい。 マルチスレッドの制御で悩んでいます。ファンクション(func)が、複数のスレッド(a,b,c,…)で起動されます。スレッドは、デバイス入力を処理し起動されるため、順不同で非同期(というのかな?)です。この時、あるスレッドによりfuncが処理中であれば、他のスレッドは待機しないで終了する。というような排他的処理を作りたいと考えています。たとえば、bが起動されているときは、aやcのスレッドが起動されても、待機せずに終了するような感じです。 試しに下記のような仕組みを考えてみました。 01:object key_syncer = new object(); 02:volatile bool key_locked = false; 03: 04:void func() { 05:  //===== Gate ===== 06:  lock(key_syncer) { 07:    if(key_locked) return; 08:    key_locked = true; 09:  } 10: 11:  //===== Function Body ===== 12:    /* Some behavior */ 13: 14:  //===== Exit ===== 15:  lock(key_syncer) { 16:    key_locked = false; 17:  } 18:} とりあえずは動いているのですが、マルチスレッドの作法に未熟で自信が無いです。スレッドセーフを意識したり、「普通こう書くだろ?」というような作法もわかっていません(汗)。上記の様な書き方の良否や、異なる書き方などありましたら、アドバイスいただけるとうれしいです。よろしくお願いいたします。

  • HTML table内文字のonclick抑止

    HTMLの書き方について質問です。 tableのtdにonclick処理を設定し、 さらに、そのtd内の文字列にもonclick処理を設定したいのですが、 文字列をクリックしたときに、同時にtdに設定したonclick処理も実行されてしまいます。 文字列をクリックしたときは、その文字列に設定してある処理だけ実行するようにはできないのでしょうか? 具体的なサンプルは下記の通りで、 text_funcだけを実行させたいのです。 ---------------------- <html> <head> <script language="JavaScript" type="text/javascript"> <!-- function td_func(){ 折りたたまれている文字を表示する処理; } function text_func(){ TD(セル?)の背景色を変える処理; } //--> </script> </head> <body> <table border="1"> <tr> <td style="padding:10px;" onclick="td_func()"> <a href="#" onClick="text_func();return false;">test_td</a> </td> </tr> </table> </body> </html>

    • ベストアンサー
    • HTML
  • 自作DLLの引数について、ポインタ渡しが??

    VS2005 VC++環境でMFCスマートデバイスDLLを作成しています(アプリ側もVS2005 VC++)。 テスト用のアプリからDLL内の文字列を引数とする関数を呼び出すと、 呼ばれた関数に正しく文字列が渡りません。 以下の場合、func1のw1はデバッガで正しく見れません。 でもw2にtcscpyは成功しw2には正しく値がセットされます。 このときにw1のアドレスがなぜか変更されます。 以下の例では引数が1つですが、2つ以上引数がある時には その他の引数のアドレスもとびます。 func2のl1は正常に見れます。 func3のl1は正常に見れません。 ポインタ渡しするときに異常になるのですが、 原因がさっぱりわかりません。 同じことをWindowsXP用のプロジェクトを作り、 XPで確認するとどれも正常に見れます。 どなたかアドバイスをお願いします。 ----------------------------------------DLL側---------------------------------------- extern "C" __declspec(dllexport) void func1(WCHAR * w1) { WCHAR w2[16] ; _tcscpy(w2,w1); return; } extern "C" __declspec(dllexport) void func2(long l1) { long l2 ; l2 = l1 ; return; } extern "C" __declspec(dllexport) void func3(long *l1) { long l2 ; l2 = *l1 ; return; } ----------------------------------------アプリ側---------------------------------------- extern "C" __declspec(dllimport) void func1(WCHAR *); extern "C" __declspec(dllimport) void func2(long ); extern "C" __declspec(dllimport) void func3(long *); ・・・・中略・・・・ WCHAR a[16] ; _tcscpy(a,_T("ABC")); func1(a); func2(123); long l3 = 123 ; func3(&l3);

  • ’と”が混在するhtml中にphpの変数を埋め込み

    調べてもキーワードがわからず質問させていただきます。 下記のような’と”が混在するhtml中にphpの変数を埋め込みたいのですが キーワードとなるような言葉がわからず見つけられませんでした。 <a href="#" onclick="document.getElementById('.'"captcha"'.').src = '.'"./***/***.php?"'.' + Math.random(); return false" target="$phphensuu"> htmlタグの属性を動的にしたいです。 よろしくお願いします。

    • ベストアンサー
    • PHP
  • ポップアップウィンドウが出来ないです

    ポップアップウィンドウをつくりたいのですが、 head内に <script type="text/javascript"> function openWin(theURI) { PopUpWin=window.open(theURI,'theWin','scrollbars=0, width=250,height=320,resizable=1,directories=0, toolbar=0,status=1,location=0'); PopUpWin.focus(); } </script> と書いて body内に <a onclick="openWin('bgm.html');return false;" onkeypress="openWin('bgm.html');return false;"> と書きました 初心者がどうにか書いたものなので、全体的に間違っているかも知れないですが、どこを直せばいいか教えてください (サーバの都合で現在アップデートできないので、オフラインで動作確認しましたがポップアップしません。 オフラインでは動作しないのですか?)

専門家に質問してみよう