【フォーカスマネジメント】
フォーカスマネジメント とは？
最終更新:
💡 今いる場所と、次に進む場所を分かりやすく
Webページでキーボード入力の対象となるフォーカスの位置や移動を整えること。自然なTab順序、現在位置の見える表示、モーダルを開閉するときの移動などを設計し、操作の続きを見失いにくくする。
📌 このページのポイント
ひよこ フォーカスって、何のこと？
ひよこ モーダルを開くと、どこへ移す？
ペンギン先生 ダイアログの中の適切な場所へ移すよ。入力欄がよい場合も、見出しから読めるほうがよい場合もある。TabキーとShift＋Tabキーでは中を循環させ、背後のページを操作しないようにするんだ。
ひよこ 閉じるときはどうするの？
ペンギン先生 通常は開いたボタンへ戻すよ。そのボタンが消えた場合や、追加した行で作業を続ける場合などは、操作の流れに合う別の場所へ戻す。閉じるボタンやEscapeキーでも閉じられる設計が基本だね。
ひよこ tabindexで番号を付ければよい？
ペンギン先生 基本はHTMLを自然な順番に並べ、標準のボタンや入力欄を使おう。tabindex="0"はTab移動に参加し、"-1"はTab順序から外れてもJavaScriptのfocus()で移せる。正の値で無理に順番を変えることは避けよう。
ひよこ 枠線を消せば、見た目がすっきりする？
まとめ：ざっくりこれだけ覚えればOK！
「フォーカスマネジメント」って出てきたら「キーボード操作の現在位置と移動先を整えること」と思えばだいたいOK！
📖 おまけ：英語の意味
「Focus Management」 ＝ フォーカスの管理
💬 focusは焦点、managementは管理。Webではキーボード入力の対象や、その移動を整えることを指すよ。