サイト制作
フォーカス表示を消してはいけない理由｜キーボード操作の確認方法
2026-10-29
この記事には広告・アフィリエイトリンクが含まれます。
フォーカス表示は、キーボードで今どのリンクやボタンを操作しているかを示す目印です。標準の枠を変えるなら、見える代替表示を用意。背景の違う場所や固定ヘッダー付近でも、移動先を追えるか確認します。
フォーカス表示はキーボードの操作対象を示す
Tabキーでサイトを移動してみると、リンクやボタンに枠が出ることがあります。これは邪魔な飾りではなく、キーボードの操作対象を示すフォーカス表示です。見た目をすっきりさせるために消すと、次に実行される場所が分からなくなる人がいます。
操作中の目印を時間で消さない
マウスならポインターで場所を追えますが、キーボードでは選択中の部品が見えることが重要です。W3CのWCAG 2.2の解説は、フォーカスを受けた項目に視覚的な目印を設ける目的を説明しています。表示された直後だけ光って消えるようなものでは、考えながら操作する人の現在地を保てません。
背景や固定ヘッダーに隠れない表示を確認
標準の枠をそのまま使う方法も、独自の表示へ変える方法もあります。ただし、薄い背景では見えても、写真や濃いボタンの上では見えないことがあります。デザインを変えたら、本文中のリンク、カード、フォーム、メニューなど、背景が違う場所を一つずつ確認します。フォーカス表示のある部分が固定ヘッダーなどに隠れないかも見たいですね。
Tabキーで順方向・逆方向の移動を試す
Tabキーで進み、逆順にも戻り、目的の操作までたどれるかを試します。私は、作る人だけが場所を知っているサイトにはしたくありません。小さな枠でも、読む人の現在地を守る役割があります。見た目に合う形へ整えつつ、必要な目印は残したいですね。
