アルファサード株式会社 代表取締役 野田 純生のブログ


JavaScript and Accessibility (3).


公開日 : 2006-06-18 14:13:31


イベントハンドラは装置に依存しないよう論理イベントをあわせて指定する。WCAG1.0

ガイドライン9. 装置に依存しないように設計する 件について。 以前のエントリーではウェブ・アクセシビリティについての問題提起を少々「煽った」ような文章で書いてみたわけだが、コメントにも2chのエントリーにも「はてブ」のコメントにも「マイノリティ」がどうというような指摘が結構あった(Old Macユーザーであることを指して)。そもそもアクセシビリティに関する議論においては「少数派」と「開発コスト」みたいな話題がついてまわるものであるが、例えばマウスを使わずに他のデバイス(ボタン装置やキーボード等)を使っているケースというのはどういうケースだろう。

そもそもノートPCでマウスを使えない時、トラックパッドが扱いづらくてキーボード操作する時が(僕の場合は)ある。TabキーとEnterキーでリンクを移動するのだ。

(注1)
IBMのパソコンのキーボードの真ん中にある(何と言う名前かは知らないが)赤いボタン(マウスポインタを移動させることができる)を口にくわえたペンのようなもので操作しているところを見学させていただいたことがある。この場合はキーボードやボタン装置ではなく、マウス前提のイベントハンドラでの操作となる。
(注2)
WCAG2.0(ワーキング・ドラフト) にあるように、将来のことも見据えておかねばならない。
ということで mouseover 等の物理イベントには onfocus 等の論理イベントをあわせて指定する必要がある。
併記すべきイベントハンドラの例
物理イベント論理イベント
onmousedownonkeydown
onmouseuponkeyup
onclickonkeypress (注3)
onmouseoveronfocus
onmouseoutonblur
(注3)
Mozilla系のブラウザでは、フォーカスされた状態で Tabキーを押すと onkeypress イベントが発生してしまう。最近のブラウザではフォーカスされた状態で Enter(Return)キーを押すとマウスクリックと同等の動作をするから(MacIEでは動作しない)onkeypress は敢えて指定しないか Tabキーが押された時を例外として処理する等の検討が必要。
具体的には以下のようになる。

サンプル

長い、美しくない、面倒くさいとかいう話も出るだろうし、ここで「JavaScript and Accessibirity (1). - JavaScriptが前提の機能はJavaScriptで提供する」の考え方を適用する。 JavaScriptで実行したいイベント属性自体をJavaScriptでセットする方向で検討する。 参考:IE の getAttribute / setAttribute: Days on the Moon JavaScript:

var isIE = (document.documentElement.getAttribute("style") ==document.documentElement.style); // ブラウザ判別 function focusin(){ document.getElementById("status").innerHTML="Focus In"; } function focusout(){ document.getElementById("status").innerHTML="Focus Out"; }

HTML:

サンプル

bodyのonloadイベントでも良いし、適当な箇所でも良いので、イベント属性をセットするJavaScriptを追加。 JavaScript:

var tgt=document.getElementById('tgtElement'); if (isIE){ tgt.setAttribute("onmouseover", new Function("focusin()")); tgt.setAttribute("onfocus", new Function("focusin()")); tgt.setAttribute("onmouseout", new Function("focusout()")); tgt.setAttribute("onblur", new Function("focusout")); }else{ tgt.setAttribute("onmouseover", "focusin()"); tgt.setAttribute("onfocus", "focusin()"); tgt.setAttribute("onmouseout", "focusout()"); tgt.setAttribute("onblur", "focusout()"); }

function eventSet(tgt,fnction1,fnction2,fnction3,fnction4,ev1,ev2) として関数を作っておくとか、function eventSet(tgt,fnction,ev1,ev2) として、mouseover指定したら mouseout, onfocus, onblur を自動的に併せて指定するようなものを用意しておくとシンプルになるだろう。 別にイベント指定をXHTMLの中に直接書いても良いのだが、物理イベントと論理イベント両方を指定するのは面倒だという場合は、ページ内の全てのリンク(document.anchors)をチェックして、マウス前提の mouseover / mouseout 等だけが指定されているリンクに論理イベントを追加するものを作ってやれば、特に意識しなくても気配りできるようになる。 どうせマウス前提のコードをゴリゴリ書いているのだから、こういったスクリプトを一つ書いておけば実装のコストは殆どかからないだろう?
Posted by Junnama (I'm in the Minority)



このブログを書いている人
野田純生の写真
野田 純生 (のだ すみお)

大阪府出身。ウェブアクセシビリティエバンジェリスト。 アルファサード株式会社の代表取締役社長であり、現役のプログラマ。経営理念は「テクノロジーによって顧客とパートナーに寄り添い、ウェブを良くする」。 プロフィール詳細へ