フォーカスと選択中は同じ？キーボードで今いる場所を見失わない確認

カテゴリのボタンに色が付いている。それは「現在見ているカテゴリ」なのか、「キーボードで次に操作する場所」なのか、見分けられるかな。

ここではフォーカスと選択状態を区別し、画面の案内を確認する。用意するのはブラウザとキーボード。削除や送信を試す必要はなく、メニューやリンクなど元へ戻れる場所を使おう。

次の操作を受け取る場所

フォーカスは、キーボード入力などの対象となっている場所。Tabキーで移動したとき、枠や下線などの見た目で示されることがある。

選択状態は、タブや項目のどれを選んでいるか。現在地は、今表示しているページやカテゴリのこと。部品によって関係は違うけれど、三つを常に同じ意味として扱わないようにしよう。

現在地の強調が残っていても、キーボードの対象は別のリンクへ移動できる。その移動先も分かる必要があるよ。

枠の見た目と、案内の役割を分ける

W3CのFocus Visibleの基準は、キーボードで操作する際にフォーカスの位置が見えることを扱っている。すべてのボタンへ同じ太い枠を常時付ける指定ではない。

見た目を整えることと、案内をなくすことは別。選択中の塗りとフォーカスの線を使い分けるなど、対象が分かる表現を考える。複雑な部品では、矢印キーでの移動と選択の動作も公式パターンを確認しよう。

キーボードで一周してみる

1. ページを開き、Tabキーで次の操作対象へ進む。
2. 今どこにいるか、画面を見るだけで分かるか確かめる。
3. ShiftとTabで戻っても、対象を見失わないか見る。
4. 現在地とは別の項目へ移った状態で、二つを区別できるか確認する。
5. メニューを閉じたあとも、操作を続けられるか確かめる。

期待する結果は、選んだ内容を変えずに移動しても、次の操作対象が分かること。押せば実処理が起きる場所では、移動の確認だけにとどめよう。

見つからないときの記録

画面、移動の順番、消えた位置を控える。色が付いているから問題ないと判断せず、背景や固定表示で目印が隠れていないかも見る。

操作の大きさは押せる範囲と間隔も参考になるよ。

参照した公式資料

• W3C：Focus Visible
• W3C：Keyboard Interface Practices

確認日：2026年10月24日。