今回もアクセシビリティ対応で判明したのですが、jQueryのkeypressメソッドの判定がブラウザによって違うことがわかりました。
今回、アクセシビリティの改修を行うために調査したサイトで、よく見るフォントサイズを切り替えるボタンをjQueryのkeypressで実装していました。ところがこの動きがあまりよろしくなかったんです。
以下がそのサンプルです。（jQuery部分）
|
1 2 3 4 5 6 7 8 9 10 11 |
$(document).ready(function() { $("#font_s").keypress(function() { $('.content').css('font-size', '60%'); }); $("#font_m").keypress(function() { $('.content').css('font-size', '100%'); }); $("#font_l").keypress(function() { $('.content').css('font-size', '140%'); }); }) |
上記サンプルの場合、font_s（小）、font_m（中）、font_l（大）のボタンの上で何かキーを押されると反応してフォントサイズが変わります。キーが特定されていないことですでにアクセシビリティに対応していないのですが、問題はFirefoxで起こりました。
キーボードのみで操作する場合、リンクの移動はTabキーで行いますが、FirefoxはこのTabキーの操作をkeypressで拾ってしまうんです。
例えば小ボタンにいるときにTabキーを押すとボタンは中に移動するが、サイトのフォントは小に切り替わってしまいます。IEやChromeではこの現象を確認できなかったので、現象はmozilla系のブラウザで起こるのではないかと考えています。
この現象をサンプルコードで解消するにはkeypressが反応するキーを限定する必要があります。例えばEnterキーのみに反応するようにするには以下のようにします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$(document).ready(function() { $("#font_s").keypress(function() { if( event.which === 13 ){ $('.content').css('font-size', '60%'); } }); $("#font_m").keypress(function() { if( event.which === 13 ){ $('.content').css('font-size', '100%'); } }); $("#font_l").keypress(function() { if( event.which === 13 ){ $('.content').css('font-size', '140%'); } }); }) |
すみません、もっとシンプルなコードがあると思うんですが…。
13はEnterキーのキーコードです。ifでこのキーコードを受け取った時だけフォントサイズを切り替えています。
IE、Chrome、Firefoxでいろいろとキーを押してみたのですが、ブラウザによって反応が違います。文字と関係ないキー、Fn（ファンクション）やCtrlなどの制御キーは反応が異なるので注意が必要ですね。と言うかフォントサイズを切り替えるのにkeypressを使うな！ ってことでしょうか。
[tmkm-amazon asin=’486354149X’][/tmkm-amazon]
