tabindex とフォーカス2006年09月18日 20時12分

レイアウトを動的に変更する際にはアニメーションをつけたほうがいいかもしれないけど面倒くさいといっていたのだが、物は試しとつけてみた。JavaScript が有効ならば pre 要素の幅切り替えのサンプルや右に出ている「メニューを本文の右側に表示」チェックボックスでその効果を確認できる (IE 5.5 以前など古いブラウザでは表示されない) 。わかりやすくなったのかうっとうしくなったのか、はたまたそんな機能自体いらないと思われているのか。

ところで、こういったことを実現するにあたって問題になってくるのがクリック可能な、すなわち onclick にイベントハンドラが結び付けられた項目を HTML でどう表現するかだ。具体的にいうと a 要素を使って href 属性には無意味な値を設定するか、span 要素などその他の要素を使うかで、これに関しては「Googleがonclickにはhref="javascript:void(0)"も付ける理由?」「フォーカスとjavascript:void(0)の話・2」(指向性メモ)で取り上げられている。私としてはリンクでないものに a 要素は使いたくないし、かといってキーボードによるアクセスを無視する気にもなれなず、さりとて livedoor Reader ほどの規模ならともかくこんなところで独自にショートカットキーを実装したところで誰も覚えてはくれないだろう。そこで今回は div 要素に tabindex 属性を使うことにした。

tabindex 属性は HTML 4 ではリンク関連要素やフォームコントロール要素にしか存在しないが、HTML 5 とも呼ばれる Web Applications 1.0 の草案ではすべての HTML 要素につけられるようになってり、とりうる値も 0 以上の整数から任意の整数へと拡張されている。この値が正である場合は小さい値を持つ要素から大きい値を持つ要素に、0 である場合は要素が文書に登場した順にタブによるフォーカスの移動が起こり、負である場合はタブによるフォーカスを受け取らない (クリックなどでフォーカスを与えることはできる) のだが、注目すべきは普段フォーカスを受け取らない要素に指定した場合、その要素がフォーカスを受け取れるようになるという点である。

とはいえ現在メジャーなブラウザで tabindex 属性による任意の要素へのフォーカスの付与に対応しているのは IE 5.01 以降 (IE の仕様を WHATWG が追いかけたのだろう) と Firefox 1.5 (Gecko 1.8) 以降のみなのだが、Opera に関しては Shift + 矢印キーで click イベントにハンドラが割り当てられた要素にも移動できるし、D / E キーを使えば任意の要素にアクセス可能だ。Safari でも要望は挙がっているもののまだ誰も作業に取り掛かっていない様子。

ちなみに span 要素などにフォーカスがある状態で Enter キーを押した場合、Opera 9 では keypress イベントと click イベントが発生するが、その他のブラウザでは keypress イベントしか発生しない。よって a 要素の場合とは異なり keypress イベントにも適宜ハンドラを割り当てておく必要がある (a 要素の場合も万全を期すならば keypress イベントにハンドラを割り当てておくべきだろうが) 。詳しくは (といってもあまり詳しくないが) span 要素に tabindex 属性を指定した場合に発生するイベントのテストを確認のこと。

ということで対応ブラウザが少ない (といっても 8 、9 割はカバーしているような気がするが) というのもこの方法の欠点のひとつだが、もうひとつの欠点として HTML 4 / XHTML 1 として妥当でなくなるということがある。DOM 2 HTML の HTMLElement インターフェースには tabIndex プロパティなど存在しないから、DOM から tabIndex プロパティを設定する分には tabindex 属性とは関係ないという詭弁も頭をよぎったが、それでも getAttribute で取得できてしまうし。

そんなこんなで Firefox 1.0 以下 (確認していないがおそらく Safari も) などではキーボードによるアクセスができなくなってしまうが、ホイールスクロールやミドルクリックしてしまったときの混乱を考えるに、クリック可能な項目にはそれが適切な場合を除き a 要素を使わず、tabindex によるフォーカスの付与を選択するというのもありなのではと思った次第。

コメント

コメントをどうぞ

※メールアドレスとURLの入力は必須ではありません。 入力されたメールアドレスは記事に反映されず、ブログの管理者のみが参照できます。

※投稿には管理者が設定した質問に答える必要があります。

名前:
メールアドレス:
URL:
次の質問に答えてください:
「ハイパーテキストマークアップ言語」をアルファベット4文字でいうと?

コメント:

トラックバック

このエントリのトラックバックURL: http://nanto.asablo.jp/blog/2006/09/18/528706/tb

_ 【えぬ】〜Theme of えぬ〜 にまつわるはてダ - 2008年05月29日 21時24分

<a href=”javascript:void(0)”>click</a> という書き方が未だに使われているのが気になる <span onclock=””>click</span>を代わりに使うべきだろという意見に納得 「span使ったらTabでフォーカスしないから良くない」って意見があったなぁ