自前でキーボードショートカットを実装するウェブサイトは、キーボードでブラウジングする人のことをもっと考えてあげてください
簡単なことですが、ウェブサイトがキーボードショートを実装した場合、主にそれを使ってくれるのは、「普段からキーボードでブラウジングすることに慣れている人」です。
普段マウスを使う人は、どれだけ便利なショートカットがあったとしても、それに気付くことすらありません。
そして、キーボードでブラウジングする人が嫌うことのベスト3がこんな感じだと思います。
- Flash
- 自分のショートカットをウェブページのショートカットに乗っ取られること。
- 自分のショートカットとウェブページのショートカットが同時に働いてしまうこと。
2番目は例えば Google Maps で、「もっと下」を見ようとしてマウスのホイールを回したら、ズームしちゃってウゼー!ってのと同じです。
この場合、よっぽどそのショートカットが使いやすくない限り、積極的に使いたいと思いません。
j/k で次のページ・前のページへ移動させるブログとかありますけど、j/k を単にスクロールとして使っている人にとっては拷問です。今読んでるその記事をスクロールできないんですから。
3番目は、もし仮にホイールを回してページもスクロールするしズームもしちゃうし、いったい何が起こってんのかわららない、ってことになった場合を考えたらいいと思います。
このケースは単純に最悪で救いどころナシなので、さっさと preventDefault してください。
具体的に言うと http://b.hatena.ne.jp/js/Hatena/Bookmark.js の3895行目以降で、
keypressHandler: function(e) {
var tag = e.target.tagName.toUpperCase();
var pos = Ten.Geometry.getScroll();
if (tag == 'HTML' ||
tag == 'BODY' ||
tag == 'DIV') {
var keyCode = e.event.charCode || e.event.keyCode;
var c = String.fromCharCode(e.event.charCode || e.event.keyCode);
if (keyCode == 13) c = 'o'; // enter
switch( c ) {
case 'j':
e.stop(); //これと
if (this.y != pos.y) {
this.navigator.getNearElements();
this.navigator.moveToNear();
this.y = pos.y;
} else {
this.navigator.next();
pos = Ten.Geometry.getScroll();
}
this.y = pos.y;
break;
case 'k':
e.stop(); //これと
if (this.y != pos.y) {
this.navigator.getNearElements();
this.navigator.moveToNear();
this.y = pos.y;
} else {
this.navigator.prev();
pos = Ten.Geometry.getScroll();
}
this.y = pos.y;
break;
case 's':
e.stop(); //これと
this.navigator.globalSearch();
break;
case 'b':
e.stop(); //これと
this.navigator.showAppender();
break;
case 'o':
e.stop(); //これと
this.navigator.open();
break;
case 'e':
e.stop(); //これ
this.navigator.open(true);
break;
}
}
}
を忘れずに入れてあげてください。id:secondlife さんを指名したらいいんですかね? わかりません。
自前でキーボードショートカットを実装しているウェブサイトに入ってしまったとき、僕は必ずショートカットを無効にする方法が無いか探すのですが、ショートカットを押しつけるようなサイトがそんな方法を装備してるわけもないですね。
僕はページのショートカットというのは常にデフォルトでは無効で、「自分で有効にする」(opt-in というやつです) ことができるべきだと思います。
