ISO Lab

要素のフォーカス

「フォーカスされている要素」とは、値を入力できるとか、ボタンをクリックできるなど、ユーザから入力可能な状態にある要素のことをいいます。

ユーザは、フォーカス可能な要素をマウスでクリックするか、もしくはTabキーを押すことで、フォーカスを移動することができます。また、Shiftキーを押しながらTabキーを押すことで、前の要素に戻ることができます。Tabキーでのフォーカスの移動順は、標準ではHTML文書における要素の記述順となっており、基本的にはページの上から下へと移動します。このようなTabキーによるフォーカスの移動を、シーケンシャル・フォーカス・ナビゲーション（sequential focus navigation）といいます。

次の要素は、何も設定しなくともはじめからフォーカス可能な要素です。

• href属性の指定されたa要素・link要素
• button要素（disabledでない場合）
• input要素（type属性値がhiddenでなく、disabledでない場合）
• select要素（disabledでない場合）
• textarea要素（disabledでない場合）
• draggable属性（ドラッグ可能）が指定されている要素
• 編集可能な要素の内、親が編集不可能もしくは親がいないもの
• ブラウジング・コンテキストのコンテナである要素（iframe要素など）
• ソート可能なth要素（複数列にまたがらないth要素）

更に、全ての要素は、次に述べるtabindex属性を指定することでフォーカス可能にすることができます。

タブによるフォーカス移動順を変更する［ tabindex属性 ］

tabindex属性を使うと、シーケンシャル・フォーカス・ナビゲーションにおけるフォーカスの移動順を指定することができます。tabindex属性はグローバル属性であり、全ての要素に対して指定することができます。このため、はじめからフォーカス可能でない要素でも、tabindex属性を指定することでフォーカスすることが可能となります。

tabindex属性の値は任意の整数値をとることができます。tabindex属性の値に応じて、Tabキーを押す毎に次の様にフォーカスが移動します。

• tabindex属性の値が正の整数値である場合は、値が小さい数値から大きい数値の要素の順にフォーカスが移動する。
• tabindex属性の値が0である要素は、正の値を持つ要素の次にフォーカスされる。
• tabindex属性の指定されていないフォーカス可能な要素は、tabindex属性の値が0である要素の次にフォーカスされる。
• tabindex属性の値が0以上で等しい値を持つ要素は、HTMLツリーでの記述順にフォーカスされる。
• tabindex属性の値が負の整数の場合は、その要素はマウスでクリックしてフォーカスすることはできるが、Tabキーではその要素にフォーカスを移動できなくなる。

例えば、次のように指定すると、Tabキーを押す毎にユーザ名のボックス → パスワードのボックス → 送信ボタン → リセットボタンの順番にフォーカスが移動していきます。この際、「パスワードを忘れた場合」へはTabキーでフォーカスは移動しません。

例をブラウザで表示する

キーボードによるフォーカス・実行の指定［ accesskey属性 ］

accesskey属性を使うと、特定のキーボードのキー（ショートカットキー）と文字キーの組み合わせで、直接要素をフォーカスしたり、ボタンを実行することができます。選択するか実行するかは、要素やWebブラウザによって異なります。accesskey属性はグローバル属性であり、全ての要素に対して指定することができます。accesskey属性の値は任意の１文字となります。accesskey属性の値は複数の文字を半角スペースで区切って複数指定することができます。

ショートカットキーは、端末の種類やWebブラウザによって異なります。パソコンの場合は次の表のようになります。

例えば、次のように指定すると、「ショートカットキー+N」で直接ユーザ名のボックスをフォーカスすることができます。また、「ショートカットキー+X」でリンクが実行されリンク先のforgotpassw.htmlが開かれます。

例をブラウザで表示する