通常 Tabによるフォーカスはページ先頭のオブジェクトから始まります。 例えばページロード後に下方へスクロールしたとします。 その後Tabキーを押すとページ内の先頭リンクがフォーカスされます。

一般にフォーカス対象のリンクが表示エリア外だと ブラウザはスクロールしてそのリンクを表示させます。 そのためスクロール位置が先頭に戻ってしまいます。

これを避けるにはTabフォーカスを開始したい位置でマウスによる クリック操作が必要です。

他方、KeyNaviによるフォーカスの開始位置は表示エリア内の オブジェクトを優先させています。 そうしてスクロール位置がずれないよう工夫しています。

【首相官邸ページでのFocus移動順】

Tabによる移動は必ずしも「上→下」或いは「左→右」となるとは限りません。 HTMLソース内でのオブジェクトの順番に従います。 商用サイトなどで左右にメニュー列がある場合や イメージマップがある場合は予想外の順番でフォーカスしていきます。

Tab入力ではフォーカス位置を直接上下左右に移動できません。

移動先のオブジェクトが真横や直下にあったとしても HTMLソース内での順番では 途中に他のオブジェクトがあると それらを経由する必要があります。

その結果「Tab」の入力回数は増えます。

レイアウトによっては 何回Tabを押せば目的のオブジェクトに到達するのか事前に予想できません。 やってみないと分からずストレスになっています。

【Flashはキー入力を トラップしてしまう】

マウスクリック以外にも TabによりFlashにフォーカスできます。 しかし一度Flashにフォーカスするとその後 Tabを押しても次へ進みません。 例えばIE6.0では Flashオブジェクトの周りが黄色の線で縁取りされたまま先に進みません。 Shift-Tabを入力しても戻れません。

Flashにフォーカスすると 矢印キーやSpace、PageUp、PageDownが無視されるためスクロールできません (バージョン7含む)。 キー入力はトラップされFlash内部のイベント処理に使われます。

Tabでフォーカスを移した場合、 或いはうっかりFlashのある部分をクリックした場合はこの現象が起こるので ユーザは注意する必要があります。

radio1 radio2 radio3 check1 check2 check3

【ラジオボタンとチェックボックス】

フォームのラジオボタンでは name属性値が同じのものはまとめて一回しかフォーカスしません(Windows版IE)。 特定のラジオボタンを選択するには フォーカス後 矢印キーを使う必要があります。

一方CheckBoxでは他のフォーム要素と同じく全てにフォーカスします。 このように形が○か□かだけによって動作が異なる ためユーザが混乱します。

KeyNaviのフォーカス機能では ラジオボタンの場合も 全ての要素にフォーカスし 両者の違いを意識させません。