coastdigitalgroup/coastai-skills

フォーカスインジケーターデザインシステム

目的

フォーカスインジケーターデザインシステムは、すべてのインタラクティブ要素（ボタン、リンク、フォーム入力、カスタムトグル、複雑なウィジェット）に対して、キーボードフォーカスインジケーターを設計、仕様化、監査するための体系的な方法論を提供します。

フォーカスインジケーターは、キーボードナビゲーター、スクリーンリーダーユーザー、および代替入力装置を使用する人々にとって、主要な視覚的な道標です。デザイナーがデフォルトのブラウザフォーカスリングを「見た目が悪い」からといって非表示にしたり、コントラストの低いものに置き換えたりすると、即座に深刻なアクセシビリティ障壁が生まれます。このシステムは、フォーカスインジケーターがブランドに適合し、ハイコントラストで、適切に配置され、視覚的な美しさを損なうことなくWCAG 2.1および2.2標準に準拠することを保証します。

使用例

• デザインシステムの作成: ブランドUIキット内でグローバルなトークンベースのフォーカス状態を確立する。
• コンポーネント設計仕様: 複雑な要素（例：カスタムチェックボックス、レンジスライダー、タブグループ）のカスタムフォーカスリングを定義する。
• アクセシビリティ改善監査: 既存のWebサイト上で、見えない、またはコントラストの低いフォーカスアウトラインを特定し修正する。
• テーマと背景への適応: ライト、ダーク、ブランドカラーの背景に対してフォーカスインジケーターを標準化する。
• クロスプラットフォーム入力最適化: :focus-visible の動作を設定し、マウスユーザーには邪魔なフォーカスリングを表示せず、キーボードナビゲーターには視認性の高いインジケーターを提供する。

使用すべきでない場合

• 静的コンテンツ: 非インタラクティブ要素（例：リンクのないプレーンな段落、画像、ヘッダー、情報カード）にはフォーカスインジケーターを設計しないでください。
• ネイティブの未変更コントロール: プロジェクトが純粋にデフォルトのブラウザコントロールに依存しており、カスタムスタイリングやブランドの上書きが一切なく、ネイティブのフォーカス動作が完全に手付かずの場合。
• 代替の道案内手段: キーボードスタイルのフォーカスリングがプラットフォームの標準的なアクセシビリティアーキテクチャの一部ではない、音声制御スマートディスプレイや純タッチのネイティブモバイルアプリケーション。

入力

1. ブランドパレットと背景トークン: コアカラー、背景色（ライト、ダーク、ブランド色）、およびコンテナの境界線。
2. インタラクティブ要素一覧: フォーカス状態を必要とするすべてのインタラクティブUIコンポーネントのリスト（ボタン、リンク、テキストフィールド、ラジオボタン、カスタムオーバーレイ）。
3. 角丸システム: コンポーネントの丸みを表すトークン値（例：--radius-s、--radius-m）。フォーカスリングが要素の形状に一致するようにするため。
4. 対象WCAGレベル: 標準AA最低限準拠（WCAG 2.1/2.2）またはAAA目標。

出力

1. グローバルフォーカストークン: フォーカスリングの色、太さ、アウトラインスタイル、オフセット間隔を定義する標準化されたデザイントークン。
2. コンポーネント固有のフォーカス仕様: 内部フォーカスリング、外部フォーカスリング、複雑なネストアウトラインのための空間レイアウトルール。
3. ハイコントラスト（強制色）スタイルルール: Windowsの強制色モードとの互換性を保証するCSS仕様。
4. Focus-Visible統合ロジック: キーボードナビゲーションの手がかりをマウスクリック応答から分離する仕様。

ワークフロー

1. コンポーネントコンテキストのカタログ化

インタラクティブコンポーネントを監査し、フォーカスのコントラスト要件を決定するためにコンテナの背景でグループ化します。

• ライト背景: ダークなフォーカスリングが必要。
• ダーク背景: ライトなフォーカスリングが必要。
• ブランド背景（例：鮮やかな青）: 標準的なブランドカラーのアウトラインは背景に溶け込むため、ニュートラルホワイトまたはセカンダリのハイコントラストリングが必要になる場合があります。

2. サイズと配置モデルの定義

要素とそのフォーカスリングの幾何学的関係を選択します。

• 外側オフセットアウトライン: フォーカスリングは、透明なギャップ（オフセット）を使用して要素の境界の外側に配置されます。ボタン、タグ、リンクに推奨。
• 内側フォーカスリング: フォーカスリングは要素の境界内に配置されます。テキストフィールド、セレクトメニュー、overflow: hidden でクリップされたアイテムに推奨。
• コントラストハロー（デュアルリング）: 外側のリングを対照的なセカンダリラインで包みます（例：2pxの白いリングに1pxの黒いアウトライン）。非常に堅牢で、あらゆる背景に対して視認性を保証します。

3. WCAGコントラストとサイズトークンの確立

WCAGを満たすための最小スタイリング値を決定します。

• フォーカスリングの太さを最低 2px（推奨3px）に設定します。
• 隣接する背景、および要素のフォーカスされていない状態に対して、最小コントラスト比 3:1 を維持します。
• フォーカスインジケーターは、コントロールの周囲に2pxの実線境界線を配置した場合と少なくとも同等の表面積を持つ必要があります（WCAG 2.2 フォーカスの外観）。

4. ポインターとキーボード状態の分離

：focus-visible 疑似クラスを利用して「デザイン摩擦」を回避します。

• キーボードナビゲーション (：focus-visible): ハイコントラストで視覚的に目立つフォーカスインジケーターをトリガーします。
• マウス/タッチ操作 (：focus で ：focus-visible なし): マウスクリック時にはフォーカスリングを抑制または非常に控えめにし、デザイン上の不満を防ぎながら完全なアクセシビリティを維持します。

5. ハイコントラストモードのフォールバックを定義

フォーカスインジケーターが、支援技術によるスタイル設定（Windowsハイコントラストモード/強制色など）で消えないようにします。

• ネイティブの outline を透明色で指定すると、強制色によって自動的にマッピングされますが、カスタムの box-shadow スタイルは破棄されます。
• ハイコントラストモードで可視のアウトラインがレンダリングされるように、常に outline フォールバックを含めてください（たとえ outline: 2px solid transparent に設定するか、メディアクエリで outline-color: CanvasText を使用する場合でも）。

決定ルール

ルール 1: 内側リングと外側リングの配置

• 要素にカスタム境界線があり、オーバーフローマスク（overflow: hidden）がない場合は、外側オフセットアウトラインを使用します。
• 要素がタイトなグリッドの一部である、親コンテナに overflow: hidden がある、または外部アウトラインが隣接要素と重なるテキスト入力フィールドである場合は、内側フォーカスリング (box-shadow: inset ...) を使用します。

ルール 2: 単色リングと二色ハローの選択

• 背景が均一で予測可能（例：常にライトまたは常にダーク）であり、コントラストが >= 3:1 で確認されている場合は、単色リングを使用します。
• 要素が画像、グラデーション、ユーザー生成コンテンツの上に配置されている場合、または異なる背景の間をスライドする場合（セクション境界をスクロールするスティッキーヘッダーなど）は、二色コントラストハロー（例：内側に濃い青、外側に純白）を使用します。

ルール 3: フォーカスリングのボーダー半径

• フォーカスアウトラインは、親コントロールの border-radius を反映する必要があります。
• outline-offset が正の値（例：2px または 4px）であり、アウトラインのボーダー半径がカード/ボタンの曲率と一致することを確認するか、コンポーネントの丸みを帯びた角に自然にマッピングされる box-shadow を使用します。

正解:
[   ボタン (半径 8px)   ]
   (ギャップ: 2px)
============================== フォーカスアウトライン (半径 10px)

不正解:
[   ボタン (半径 8px)   ]
   (ギャップ: 2px)
------------------------------ フォーカスアウトライン (鋭い90度の角)

制約事項

• アクセシビリティ（コントラスト）: フォーカスリングは、周囲の背景に対して少なくとも 3:1 のコントラスト比を持つ必要があります（WCAG 2.1 SC 1.4.11 非テキストコントラスト）。
• アクセシビリティ（可視性）: インジケーターは完全に可視である必要があります。フォーカスインジケーターは、スティッキーヘッダー、フローティングチャットウィジェット、オーバーレイの背後に隠れてはなりません（WCAG 2.2 SC 2.4.11 フォーカスの非隠蔽）。
• アクセシビリティ（外観）: フォーカスインジケーターは十分な大きさである必要があります。WCAG 2.2 SC 2.4.13（フォーカスの外観）の計算を満たさなければなりません：最小幅2px、および周囲長に2pxを掛けたものと等しい最小面積。
• レスポンシブ対応: フォーカスインジケーターはコンテナを引き伸ばしたり、ページレイアウトの水平方向のオーバーフローを引き起こしたりしてはなりません。DOMレイアウトの流れを変更しない、絶対配置、絶対CSSアウトライン、またはインセットボックスシャドウを常に使用してください。

一般的な失敗パターン

• 「：focus { outline: none； }」消しゴム: 堅牢な疑似クラスの代替を提供せずにフォーカスインジケーターを完全に非表示にする。
• 低コントラストの「ゴースト」リング: 白い背景に薄灰色のアウトラインを使用し、アクティブなフォーカス状態をロービジョンユーザーから見えなくする。
• 「クリップされたアウトライン」の罠: overflow: hidden を持つコンテナ内にネストされた要素に外側のフォーカスリングを配置する。フォーカスインジケーターが左右で切り取られ、水平方向の細片だけが残る。
• 「スティッキーヘッダーによる隠蔽」: ビューポートの上部にあるアンカー要素にタブフォーカスを合わせたが、スティッキーナビゲーションバーが重なって完全に隠してしまう（WCAG 2.2 SC 2.4.11違反）。
• クリックによるフォーカスの乱雑さ: ：focus-visible を使用しないため、マウスクリックのたびに太い青いリングが点滅し、デザインチームを苛立たせ、フォーカススタイルの完全な削除を要求させる。
• 強制色モードでの消失: 透明な outline フォールバックなしに、CSSカスタムプロパティと box-shadow 値のみで美しいフォーカスリングを構築し、Windowsハイコントラストモードでフォーカスインジケーターが完全に見えなくなる。

検証基準

• すべてのインタラクティブ要素は、Tab キーで移動したときに、非常に可視性が高く、明確なフォーカスインジケーターを表示する。
• すべてのグローバルおよびコンポーネントのフォーカスインジケーターのコントラストが、背景に対して >= 3:1 であることが確認されている。
• カスタムフォーカススタイルは ：focus-visible セレクターを使用して、キーボードナビゲーション時にトリガーされるが、マウスクリック時にはクリーンな状態を保つようにしている。
• 親コンテナの overflow: hidden ルールによって、フォーカスインジケーターがクリップされたり、切り取られたりしていない（オフセットが調整されているか、インセットにシフトされている）。
• スティッキーヘッダーまたはフローティング要素の近くの要素へのキーボードナビゲーションにより、フォーカスされた要素が完全に可視のままである（scroll-margin-top オーバーライドを使用）。
• フォーカスインジケーターは、透明なアウトラインルールを使用して、ハイコントラスト/強制色モードで検証されている。
• カスタムインジケーターの周囲表面積が、WCAG 2.2 SC 2.4.13の最小計算を満たしている。