この記事の目次 開く・閉じる
今回の仕上がり
自作の練習画面で「ゲーム」からTabで「ツール」へ移動し、Enterで選びました。「ツールを選びました」と表示され、黄色い輪郭も残っています。下の実画面は、その操作後に撮影しました。ページ内の作例では同じ操作を試せます。
下の画面は、実際に触れる作例です。静止画で動きを再現したものではありません。
作例を別画面で開く → · サンプル一式をダウンロード（ZIP）
必要なものと、試す順番
PCとキーボード、ブラウザだけで試せます。登録やインストールは不要です。スマホで外付けキーボードを使う場合のキー動作は、今回は確認していません。
- 「作例を別画面で開く」を押します。以後はマウスを置き、Tabで「操作エリアへ移動」を選び、Enterを押します。
- 続けてTabを押すと「ゲーム」「ツール」「素材」へ順に進みます。ツールでEnterを押し、選択結果を読みます。
- ツールからShift＋Tabでゲームへ戻ります。Spaceでも選択できるか試します。スクロールが動くだけにならないかも見てください。
- 記事内の埋め込みでも操作できます。ただしTabは記事と作例の間を移動します。順序だけを調べるなら、別画面の方が分かりやすくなります。
仕組みを知る
輪郭があると、選んだ場所を見失いにくい
フォーカスは、キーボード操作を受け取る場所です。マウスを重ねたときの変化とは違います。ボタンの色が変わるだけでは、似た配色や暗い背景で見落とすことがあります。今回は黄色い輪郭と余白で示しました。
W3C WAIのEasy Checksも、キーボードで操作しながらフォーカスが見えるか確認するよう案内しています。自分のページでは、背景が明るい場所と暗い場所の両方で輪郭を見直してください。公式資料は末尾から読めます。
見た目を直す前に、操作する要素を選ぶ
クリックできるdivに後からキー処理を足すより、実行にはbutton、移動にはaを使う方が出発点として分かりやすくなります。この作例の選択肢はbuttonなので、EnterとSpaceの処理を一から書いていません。
Tabの順番を数値のtabindexで組み替えると、画面の並びとずれやすくなります。まずHTMLの順序を整えましょう。先頭の移動リンクは、操作エリアへ飛ぶためのものです。移動先だけにtabindex="-1"を付け、通常の巡回には混ぜていません。
コードの要点
:focus-visible {
outline: 3px solid #ffd06b;
outline-offset: 5px;
}
<button type="button">ツール</button>輪郭を消すoutline: noneを無条件で使わないこと。このCSSの色を別の背景へ移すときは、そこでの見え方を再確認します。
自作のHTML・CSS・JavaScriptはCC0です。ZIP内のREADMEと、共通のサンプル利用条件をご確認ください。
できたかの確認と、よくあるつまずき
- ゲームからTabでツールへ移動し、Enterで結果が変わる。
- Shift＋Tabで戻れる。Spaceでも選択できる。
- 輪郭が切れず、文字や隣のボタンを隠さない。
ここに注意。押せない見出しや飾りまでTabの対象にしない。操作対象が増えると、目的のボタンまで遠くなります。
ここに注意。画面の並びが変わるスマホ用レイアウトでも、HTMLの順序はそのままです。視線の順番と操作順を別々に見直します。
出典と、確認した範囲
作例の確認日：2026年10月3日。個別の条件と未確認範囲は以下の通りです。共通の検証方法も公開しています。
PCのブラウザでTab・Shift＋Tab・Enter・Spaceを確認しました。スクリーンリーダー、各OSの組み合わせ、サイト全体のWCAG適合は未検証です。
W3C WAI：Easy Checks — キーボード操作とフォーカス表示の初期確認。完全な監査ではありません。