>ホーム [1] >ユーザビリティ論考:トップ [9] >Tabフォーカス:微妙に使いにくい サイト情報 資料請求・お問合せ
     ホーム [1]       新着情報 [2]       KeyNavi [3]       技術紹介 [4]       FAQ [5]       サイトマップ [6]     
−ホームページユーザビリティ論考−
   

Tabフォーカス:微妙に使いにくい

− ユーザの期待通りに動作してくれない場合があります。
Tabフォーカスの弱点

「Tab」キーによってリンクやフォームへの フォーカスを順番に移動させることが出来ます。 しかし「Tab」は以下で見ていくように使いにくい点があります。

  初回入力時にスクロール位置がずれる

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

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

スクロールを矢印キーやSpaceキーなどキー操作で行う場合に発生しやすいです。

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

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

以下、「Tab/Shift-Tab」と「Ctrl-矢印・I/K/J/L」を押して実験できます。

ホーム [1] 新着情報 [2]
KeyNavi使い方 [Shift-Q] KeyNavi対応方法 [Shift-T]
FAQ [5] サイトマップ [6]

  フォーカスの移動順が予想外

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

このページでもリンクFocusは左のメニュー列から始まり それが最後まで行ってから右列の「先頭」に移動します。 Tabを連続的に押して試してみて下さい。

目的のオブジェクトに辿り着くのに遠回りする
Tab入力ではフォーカス位置を直接上下左右に移動できません。

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

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

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

  Flashがあるとキー操作中断

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

解除するにはFlash以外の場所をクリックする必要があります。 なお、最近のFlashではこの問題の修正が行われたようです(バージョン7)。

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

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

KeyNaviのフォーカス機能では Flashにフォーカスさせないので上記の問題はありません。 逆にKeyNavi使用時にFlashにフォーカスさせたい場合は Flashの近くのオブジェクトをフォーカス後Tabでフォーカスを移して下さい。

  その他の問題

RadioボタンとCheckBoxで動作が異なる
radio1 radio2 radio3
check1 check2 check3
【ラジオボタンとチェックボックス】
フォームのラジオボタンでは name属性値が同じのものはまとめて一回しかフォーカスしません(Windows版IE)。 特定のラジオボタンを選択するには フォーカス後 矢印キーを使う必要があります。

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

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


 上位ページ[Shift-U] 先頭へ [W or O] 

リンククリック [Shift-B] | 次のページへ [Shift-C] | Tabフォーカス:微妙に使いにくい | スクロール [Shift-E]
2点間往復 [Shift-F] | 任意位置指定 [Shift-G] | AccessKey [Shift-H] | フレーム [Shift-I] | どこから読むか [Shift-J]
フォーム入力 [Shift-K] | 現在位置把握 [Shift-L] | お年よりにとって [Shift-M] | その他 [Shift-O]

ユーザビリティ論考:トップ [Shift-A]

ホーム [1]