keypressはブラウザによって反応するキーが違う

今回もアクセシビリティ対応で判明したのですが、jQueryのkeypressメソッドの判定がブラウザによって違うことがわかりました。

今回、アクセシビリティの改修を行うために調査したサイトで、よく見るフォントサイズを切り替えるボタンをjQueryのkeypressで実装していました。ところがこの動きがあまりよろしくなかったんです。

以下がそのサンプルです。(jQuery部分)

 サンプルを別ウィンドウで見る

上記サンプルの場合、font_s(小)、font_m(中)、font_l(大)のボタンの上で何かキーを押されると反応してフォントサイズが変わります。キーが特定されていないことですでにアクセシビリティに対応していないのですが、問題はFirefoxで起こりました。
キーボードのみで操作する場合、リンクの移動はTabキーで行いますが、FirefoxはこのTabキーの操作をkeypressで拾ってしまうんです。
例えば小ボタンにいるときにTabキーを押すとボタンは中に移動するが、サイトのフォントは小に切り替わってしまいます。IEやChromeではこの現象を確認できなかったので、現象はmozilla系のブラウザで起こるのではないかと考えています。

この現象をサンプルコードで解消するにはkeypressが反応するキーを限定する必要があります。例えばEnterキーのみに反応するようにするには以下のようにします。

 

すみません、もっとシンプルなコードがあると思うんですが…。
13はEnterキーのキーコードです。ifでこのキーコードを受け取った時だけフォントサイズを切り替えています。

IE、Chrome、Firefoxでいろいろとキーを押してみたのですが、ブラウザによって反応が違います。文字と関係ないキー、Fn(ファンクション)やCtrlなどの制御キーは反応が異なるので注意が必要ですね。と言うかフォントサイズを切り替えるのにkeypressを使うな! ってことでしょうか。

[tmkm-amazon asin=’486354149X’][/tmkm-amazon]

ページ内リンクを無効にしてタブメニューを動かす(jQueryのpreventDefault)

Webサイトでよく目にするタブメニュー。実装自体は難しくないのですが、最近アクセシビリティというものの対応案件がありマークアップでかなり四苦八苦しました。

はじめタブ部分はaタグで囲まず、cssでカーソルを手マーク(pointer)に変えていたのですが、それではTabキーでリンクを移動してきた際にタブにフォーカスが当たらずアクセシビリティとしてNGをくらいました。

そこでタブ部分をaタグで囲むようにマークアップを変更したのですが、ある問題が勃発!それはページ内リンクとして機能してしまい、タブをクリックするとページ内で表示位置が動いてしまうこと。
それをjQueryで回避する方法を調べました。

まずはダメな場合

恥ずかしいソースコードなのはご愛嬌
上記のコードのサンプル

大丈夫な場合

JSのみ更新
上記のコードのサンプル
return false;を使ってリンクを無効化する方法もあるのですが、その場合タブで切り替える部分も機能しなくなってしまいます。ページ内リンクのみを無効化したいためpreventDefaultを使用しました。

参考サイト
TAM Technical Team Tips Note
jQuery のバブリング、preventDefault() や stopPropagation() の使用例

ふじこのプログラミング奮闘記
jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」について

[tmkm-amazon asin=’4048913913′][/tmkm-amazon]