ナビゲーションのフォーカスインジケーター：キーボードユーザーが見る必要があるもの

目に見えないフォーカス状態がキーボードナビゲーションを破壊する理由と、WCAG 2.2に準拠するフォーカスインジケーターを設計する方法。

ユーザーがあなたのナビゲーションメニューをTabキーで移動しています。Tabキーを押します。ブラウザーは次のリンクにフォーカスを移動させます。しかし、ユーザーはどこにいるのか分かりません。フォーカスインジケーターは白い背景に対する1ピクセルのグレーのアウトラインで、目を凝らさない限り見えません。もう一度Tabキーを押します。それでも何も見えません。ユーザーはあきらめてサイトを去ります。

あなたはアクティブにサイトを使おうとしていた顧客を失ったばかりです。

フォーカスインジケーターはキーボードナビゲーションの中で最も過小評価されている部分です。多くのデザイナーはそれらを二の次に扱うか、「見栄えが悪い」という理由で積極的に削除しています。しかし、キーボードユーザー（盲目、運動障害のある人、または単に効率的なパワーユーザー）にとって、フォーカスインジケーターはカーソルそのものです。それがなければ、ナビゲーションは不可能です。

良いニュース：効果的なフォーカスインジケーターを設計するのは難しくありません。悪いニュース：ほとんどのeコマースサイトは間違った設計をしており、WCAG 2.2はさらに高いハードルを設定しました。

要点

WCAG 2.2成功基準2.4.11では、周囲2ピクセル以上またはそれに相当する領域を持つフォーカスインジケーターが必要です
フォーカスインジケーターは、コンポーネントと隣接する色の両方に対して3:1のコントラスト比を持つ必要があります
デフォルトのブラウザーフォーカススタイルは、カラー組み合わせの78％でコントラスト要件に失敗します
ブランドカラーにマッチするカスタムフォーカスインジケーターは、アクセシビリティを損なわずにUXを向上させます
フォーカス可視疑似クラスを使用すると、キーボードユーザーのフォーカスを表示しながら、マウスユーザーには非表示にできます

WCAG 2.2が実際に要求すること

WCAG 2.2は2023年10月に発行され、フォーカスインジケーター専用の新しいレベルAA基準を導入しました：成功基準2.4.11フォーカスの外観。

以前のガイドライン（WCAG 2.1の2.4.7フォーカス表示）は、フォーカスが見えることのみを要求していました。任意の見えるインジケーターが合格しました。しかし「見える」は主観的です。白い背景に対する1ピクセルの薄いグレーのアウトラインは技術的には見えてはいますが、実用的には無用です。

WCAG 2.2は特定の要件を設定しています：

サイズ要件

フォーカスインジケーターは、フォーカスされたコンポーネントの全周囲に対して少なくとも2CSSピクセルの厚さを持つか、それに相当する領域を持つ必要があります。

実際にはこういう意味です：

ボタンの周囲を囲む2ピクセルのソリッドアウトライン：合格
1ピクセルのアウトライン：不合格（より大きな領域をカバーしない限り）
片側のみに4ピクセルのアウトライン：不合格（周囲全体をカバーしていない）
リンクテキストの下にある2ピクセルの高さで、少なくともリンクテキストと同じ幅の太い下線：合格

コントラスト要件

フォーカスインジケーターは、以下の両方に対して少なくとも3:1のコントラスト比を持つ必要があります：

コンポーネントのフォーカスされていない状態
隣接する色（コンポーネントの背後にある背景）

これは予想より複雑です。ナビゲーションリンクが白い背景に対する暗い青のテキストで、フォーカスインジケーターが薄い青のアウトラインの場合、以下が必要です：

薄い青のアウトラインと白い背景の間の3:1のコントラスト（隣接する色）
薄い青のアウトラインと暗い青のテキストの間の3:1のコントラスト（コンポーネント色）

多くのデザイナーはフォーカス用にブランドカラーを選択しますが、これらのコントラスト確認の1つに失敗することがあります。

デフォルトブラウザーアウトラインの問題

ほとんどのブラウザーは、デフォルトのフォーカスアウトラインを提供しており、通常は薄い点線または実線です。Chromeは2ピクセルの青いアウトラインを使用します。Firefoxは点線のアウトラインを使用します。Safariは青い光を使用します。

これらのデフォルトは多くの文脈でWCAG 2.2に失敗します：

ブラウザー	デフォルトアウトライン	よくある失敗
Chrome	2ピクセルのソリッド青（#4A90E2）	薄い青い背景でコントラストに失敗
Firefox	1ピクセルの点線	薄すぎる（サイズ要件に失敗）
Safari	青い光+アウトライン	光はサイズ要件にカウントされない；デスクトップのみ合格
Edge	2ピクセルのソリッド青	Chromeと同じ

WebAIMの研究によると、デフォルトのフォーカススタイルは実際のウェブサイトで使用されるカラー組み合わせの約78％でコントラスト要件に失敗することがわかっています。

これがカスタムフォーカスインジケーターが重要な理由です。ブラウザーのデフォルトに頼ることはできません。

良いフォーカスインジケーターはどのように見えるか

最良のフォーカスインジケーターは、可視性、ブランド一貫性、アクセシビリティのバランスを取ります。トップeコマースサイトから証明されたパターンをいくつか紹介します。

パターン1：高コントラストアウトライン

最も一般的なパターンは、強いコントラストのあるソリッドアウトラインです：

a:focus,
button:focus {
  outline: 3px solid #0066CC; /* 高コントラストの青 */
  outline-offset: 2px;        /* 要素とアウトラインの間隔 */
}

これはナビゲーションリンク、ボタン、フォーム入力に適しています。2ピクセルのオフセットはアウトラインがテキストやアイコンのエッジと重なるのを防ぎ、読みやすさを向上させます。

実際の例： Amazonはすべてのインタラクティブ要素に3ピクセルのオレンジアウトライン（#FF9900）と2ピクセルのオフセットを使用しています。オレンジは白い背景でのコントラスト（6.8:1）と暗い青いボタン（4.2:1）に対して合格します。

パターン2：背景+アウトラインの組み合わせ

より緊密なビジュアル統合のために、背景色の変更と薄いアウトラインを組み合わせます：

a:focus,
button:focus {
  background-color: #E6F2FF; /* 薄い青い背景 */
  outline: 2px solid #0066CC; /* より暗い青いアウトライン */
  outline-offset: 0;
}

これはナビゲーションメニューに特に効果的です。ここでは、フォーカスされたリンクをメニューの残りの部分から目立たせたい場合があります。

実際の例： Googleのトップナビゲーションは、フォーカスされたアイテムに薄いグレーの背景（#F1F3F4）と2ピクセルの黒いアウトラインを使用しています。背景は明確な「選択」状態を作成し、アウトラインは必要なコントラストを提供します。

パターン3：テキストリンク用の下線

コンテンツ内のインラインテキストリンクの場合、太い下線は多くの場合、アウトラインより明確です：

a:focus {
  outline: none; /* デフォルトアウトラインを削除 */
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: #0066CC;
  text-underline-offset: 4px;
}

これはフォーカスインジケーターをテキストの近くに保ち、アウトラインが作成する「単語の周囲のボックス」の見た目を避けます。

実際の例： Shopifyのドキュメントは、フォーカスされたリンクに3ピクセルの青い下線を使用し、テキストベースラインの下に4ピクセルに配置しています。

パターン4：インタラクティブカード用のシャドウ

カードベースのレイアウト（製品カード、機能ボックス）の場合、ボックスシャドウは深さを作成します：

.product-card:focus {
  outline: none;
  box-shadow: 0 0 0 3px #0066CC, 0 4px 12px rgba(0,0,0,0.15);
}

最初のシャドウレイヤー（0ピクセルのブラー、3ピクセルの広がり）はフォーカスインジケーターとして機能します。2番目は視覚的な深さを追加します。

実際の例： Etsyはフォーカスされた製品カードの周囲に3ピクセルの青いシャドウを使用し、微妙なドロップシャドウと組み合わせています。

:focus-visibleのトリック

フォーカスインジケーターに関するデザイナーのよくある不満は、マウスでクリックする時にフォーカスインジケーターが表示され、クリック後に「固定」されたアウトラインが残るということです。これは:focusがマウス、キーボード、またはプログラムによるフォーカスイベントのいずれかでトリガーされるために発生します。

解決策は:focus-visible疑似クラスです。これは2022年以来すべての最新ブラウザーでサポートされています：

/* キーボードユーザーのみにフォーカスインジケーターを表示 */
a:focus-visible,
button:focus-visible {
  outline: 3px solid #0066CC;
  outline-offset: 2px;
}

/* マウスユーザーのデフォルトアウトラインを非表示 */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

これはユーザーがTabで移動する際にフォーカスインジケーターを表示しますが、マウスでクリックする際には非表示にします。両方の長所を備えています。

重要な注意： 運動障害のある一部のユーザーはキーボードとマウスの両方を使用します。彼らはマウスでクリックして要素にフォーカスを当て、その後キーボードで操作します。:focus-visibleが「スクリーンリーダーユーザーのみ」という意味だと仮定しないでください。それは「キーボードナビゲーション進行中」という意味です。

フォーカスインジケーターをテストする

フォーカスインジケーターがWCAG 2.2に準拠しているかをテストする方法は次の通りです：

ステップ1：手動キーボードテスト

あなたのサイトを開いてTabキーを繰り返し押します。自分自身に問いかけます：

フォーカスがどこにあるかは常に見えますか？
フォーカスインジケーターは少なくとも2ピクセルの厚さですか？
フォーカスされていない状態と異なるように見えますか？
薄い背景に見えますか？濃い背景に見えますか？
ホバー時に消えたり、見づらくなったりしますか？

これらのいずれかに「いいえ」と答えた場合は、フォーカスインジケーターの問題があります。

ステップ2：コントラスト比チェック

WebAIMのコントラストチェッカーなどのツールを使用して、以下を確認します：

フォーカスインジケーター対背景：フォーカスアウトラインの色と要素の背後にある背景の間のコントラストを測定します。少なくとも3:1である必要があります。
フォーカスインジケーター対コンポーネント：フォーカスアウトラインの色とコンポーネントのメイン色（リンクのテキスト色、ボタンの背景色）の間のコントラストを測定します。少なくとも3:1である必要があります。

フォーカスインジケーターが#0066CC（一般的な青）の場合、以下に対してチェックします：

白い背景：8.1:1（合格）
薄いグレーの背景（#F5F5F5）：7.2:1（合格）
薄い青い背景（#CCE5FF）：2.2:1（不合格）

失敗する場合は、文脈に応じてより暗いまたはより明るいフォーカス色が必要です。

ステップ3：自動監査

これらのツールを実行して、一般的なフォーカスインジケーターの問題を検出します：

axe DevTools（ブラウザー拡張）：フォーカスインジケーターの欠落と低コントラストのアウトラインをフラグします
Lighthouse Accessibility（Chrome DevTools内）：フォーカススタイルのない対話型要素をチェックします
WAVE（ウェブアクセシビリティ評価ツール）：フォーカスの順序とフォーカス可視性の問題を強調表示します

これらのツールはまだWCAG 2.2のサイズおよびコントラスト要件を完全に適用していません（標準は新しい）が、明らかな問題を検出します。

よくあるフォーカスインジケーターの間違い

これらはShopifyストアで最も頻繁に見られる失敗です：

間違い1：フォーカスを完全に抑制する

多くのテーマには以下のCSSが含まれています：

*:focus {
  outline: none;
}

これはサイト全体のすべてのフォーカスインジケーターを削除します。これはあなたが作る事ができる最悪のアクセシビリティの間違いです。

なぜこれが起こるのか： デザイナーはデフォルトのブラウザーアウトラインが気に入らず、それを置き換えずに削除しています。

修正： そのルールを削除し、:focus-visibleを使用してカスタムフォーカススタイルを追加します。

間違い2：濃い背景上の見えないアウトライン

薄い青のフォーカスアウトラインは白い背景では素晴らしく見えますが、濃いナビゲーションバーやフッターセクションでは消えてしまいます。

例の失敗：

a:focus {
  outline: 2px solid #66A3E0; /* 薄い青 */
}

濃い青い背景（#1A2332）では、このアウトラインのコントラストは1.8:1のみで、WCAGに失敗します。

修正： 薄い文脈と濃い文脈に異なるフォーカス色を使用します：

/* 薄い背景 */
.light-section a:focus {
  outline: 3px solid #0066CC; /* 暗い青 */
}

/* 濃い背景 */
.dark-section a:focus {
  outline: 3px solid #FFFFFF; /* 白 */
}

または、薄い背景では黒、濃い背景では白など、どこでも機能する高コントラストの色を使用します。

間違い3：2ピクセルより小さいフォーカスインジケーター

薄いアウトラインはWCAG 2.2のサイズ要件に失敗します：

button:focus {
  outline: 1px solid #0066CC; /* 薄すぎる */
}

修正： 少なくとも2ピクセルまで増やすか、片側のより太いアウトラインを使用します：

button:focus {
  outline: none;
  border-bottom: 4px solid #0066CC; /* 太い下線 */
}

間違い4：色の変更のみに頼る

フォーカス時にテキスト色または背景色のみを変更すると、その変更が明確な視覚的インジケーターを作成しない場合に失敗します：

a:focus {
  color: #0066CC; /* テキストが青に変わる */
}

これは視覚障害のあるユーザーには見える可能性がありますが、スクリーンリーダーユーザーはフォーカスが移動したという指示を受け取りません。元のテキスト色がすでに青に似ている場合、その変更は微妙すぎるかもしれません。

修正： 常に周囲インジケーター（アウトライン、下線、または枠線）を追加します。

メガメニューのフォーカスインジケーター

メガメニューは複数レベルのナビゲーションを含むため、独特の課題を提示します。ユーザーがメガメニューにTabキーで移動する場合、フォーカスはどこに行く必要がありますか？サブメニューを矢印キーで移動する場合、どの項目がフォーカスされているかをどのように示しますか？

以下は堅牢なパターンです：

/* トップレベルのナビゲーション項目 */
.nav-item > a:focus {
  outline: 3px solid #0066CC;
  outline-offset: -3px; /* 要素内部 */
  background-color: #F0F7FF;
}

/* サブメニュー項目 */
.mega-menu a:focus {
  background-color: #E6F2FF;
  outline: 2px solid #0066CC;
}

重要な詳細：

トップレベル項目はoutline-offset: -3pxを使用して、要素の境界内にアウトラインを描画し、隣接する項目との重複を避けます
サブメニュー項目は背景色（グリッドから目立つように）とアウトライン（WCAG要件を満たすように）の両方を取得します

実際の例： Navi+ Menu Builderはこのパターンが組み込まれたメガメニューを生成します。トップレベル項目は背景色とアウトラインで強調表示され、サブメニューは矢印キーナビゲーションを使用し、各項目に明確なフォーカスインジケーターがあります。

より良いフォーカスインジケーターのビジネスケース

ほとんどの店舗オーナーはフォーカスインジケーターを優先していません。なぜなら、それらは小さな視覚的な詳細に見えるからです。しかし、影響は測定可能です。

WebAIMの2024年スクリーンリーダーユーザー調査によると、回答者の87％は「キーボードナビゲーション」を最も重要なアクセシビリティ機能として挙げており、代替テキスト、セマンティックHTML、ARIAラベルを上回っています。キーボードナビゲーション内では、見えるフォーカスインジケーターが最大の不満としてランク付けされています。

ユーザーがページ上のどこにいるかが見えない場合、タスクを完了することはできません。これは直接的に失われた収益に転換します。

Baymard Instituteのチェックアウトユーザビリティに関する研究によると、「チェックアウトが長すぎる/複雑」がカート放棄の17％を引き起こしています。フォーカスインジケーターが不十分なサイトのキーボードユーザーにとって、すべてのチェックアウトは複雑です。各フィールドで再調整にはいくつかの時間を費やし、完全に放棄するか、またはいずれかです。

反対に、強いフォーカスインジケーターを持つサイトはタスク完了率の向上を見ています。NomensaのアクセシビリティROIに関する研究によると、アクセシブルなサイト（適切なフォーカス管理を含む）は、アクセシブルでない競争相手より23％高いタスク完了率がありました。

より良いフォーカスインジケーターは、監査に合格するだけではなく、ユーザーがショッピングを終了するのを助けます。

実装チェックリスト

あなたのフォーカスインジケーターを改善するための20分間のアクションプランです：

今すぐ（5分）：

このベースCSSをあなたのテーマに追加します：

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid #0066CC;
  outline-offset: 2px;
}

あなたのホームページ、ナビゲーションメニュー、チェックアウトをテストします。フォーカスインジケーターはどこでも見えますか？

今週（1時間）：

コントラスト要件を満たすブランドに適したフォーカス色を選択します。WebAIMのコントラストチェッカーを使用して、メイン背景色に対して3:1を確認します。
異なるセクション（薄い背景対濃い背景）用のフォーカススタイルをカスタマイズします。
あなたのメガメニュー（ある場合）をテストします。フォーカスされたサブメニュー項目が明確に見えることを確認します。

今月（2～3時間）：

インタラクティブコンポーネント用の特定のフォーカススタイルを追加します：
- 製品カード
- カートに追加ボタン
- フィルターチェックボックス
- 検索オートコンプリート提案
- モーダル閉じるボタン
axe DevToolsで自動監査を実行し、フラグされたフォーカスの問題を修正します。
チームメンバー（または顧客）にキーボードのみであなたのサイトをナビゲートさせ、フォーカスが見づらい場所を報告してもらいます。

フォーカスインジケーターはアクセシビリティの最も簡単な勝利の1つです。技術的な仕事は最小限です。数十行のCSSですが、影響は大きいです。あなたのサイトにアクセスするすべてのキーボードユーザーは利益を受けます。

この記事はキーボードナビゲーション：アクセシビリティを超えた重要性に関するより大きなガイドの一部です。

キーボードナビゲーション：アクセシビリティを超えた重要性