独自デザインのボタンでフォーカスが見えない
CSSリセットでフォーカスの枠を消したまま、代わりの表示を用意していません。
問題
キーボード利用者が、ページ上の現在位置を確認できません。
独自の背景色を使った画面で、Tabキーを押して操作要素を順に選択します。フォーカスは移動していますが、表示が変わるのはマウスを重ねたときだけで、選択中の位置が分かりません。
outline: none でフォーカスの枠を消しています。明るいページと暗いバナーのどちらでも見える、代わりの :focus-visible スタイルがありません。
どの要素が選択されているか分からず、Enterキーを押した結果を予測できません。削除ボタンや、同じ操作が複数並ぶ画面では、特に操作が難しくなります。
HTMLの構造が正しくても、フォーカス表示が見えるとは限りません。自動チェックでは、すべての背景や枠の欠けまで確認できません。生成された枠の色が白い背景では見えても、サイト独自の背景色に埋もれることがあります。
試してみる
Tabキーを押して、ボタンを見てください。
Tabキーで、両方の背景のボタンを順に移動してください。
再現デモです。「問題あり」は意図的にアクセシブルでない状態にしています。
修正方法
リセットを削除し、背景ごとに見えるフォーカス枠を加えます。
- 1
:focus-visibleを使い、キーボード操作のときだけ枠を表示する。 - 2背景とのコントラスト比を3:1以上にする。
- 3影だけに頼らず、強制配色でも輪郭線を残す。
*:focus { outline: none;}.brand-button:hover { background: var(--brand-dark);}.brand-button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px;}/* 暗いバナーの上では、背景と区別できる色に切り替えます。 */.banner .brand-button:focus-visible { outline-color: var(--focus-ring-on-dark);}@media (forced-colors: active) { .brand-button:focus-visible { outline-color: Highlight; }}このリセットは、すべての操作要素からブラウザーのフォーカス表示を消し、代わりの表示もありません。ホバーのスタイルはポインターにしか反応しないため、キーボード利用者には何も変化が見えません。
要素ごとに上書きするのではなく、リセット自体を削除してから、見えるフォーカス表示を追加します。
:focus-visible は、キーボードでフォーカスしたときに枠を表示し、マウスでクリックするたびには表示しません。枠は、置かれた背景に対して3:1以上のコントラストが必要です。明るいページと暗いバナーの両方で見える色は少ないため、背景ごとに色を決めるか、どちらの背景でも見える2色の枠を使います。
outlineは、親要素の overflow: hidden によって欠けることがあります。必要な余白を確保するか、親要素のスタイルを調整します。影だけでフォーカスを示すと、強制配色では表示されない場合があるため、影を加える場合もoutlineは残します。固定ヘッダーやCookieバナーがフォーカス中の要素を覆うことがあるため、固定要素には scroll-padding-top を指定します。
スクリーンショットだけで判断せず、実際のページで、その要素が置かれるすべての背景を操作して確認してください。
修正の確認
マウスを使わない4つの確認
確認方法： キーボード、スクリーンリーダー、ズーム、強制配色
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。共通のテーマやコンポーネントのスタイルを変更した際は、再度確認します。
制限
このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。コード内のトークン名は、実際のデザイントークンに置き換えてください。実際の背景で、操作全体を確認してください。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
コードを更新しても、使いやすさを保つために
ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。