フォーカスリングCSSジェネレーターとは
フォーカスリングはキーボードで現在どの要素がフォーカスされているかを示す視覚的なインジケーターです。WCAG 2.4.7ではすべてのインタラクティブ要素に可視のフォーカスインジケーターが必要です。CSS :focus-visibleはマウスクリック時にリングを表示せずにキーボードフォーカスを特に対象とします。適切なフォーカスリングは背景に対して十分なコントラスト（最低3:1）を持っています。
クイックアンサー
アクセシブルなキーボードフォーカスリングのCSSルールを生成します。キーボードナビゲーションの場合のみリングを表示するには:focus-visibleを使用します。フォーカスカラーと背景の間で最低3:1のコントラストを確保します。丸いフォーカスリングが必要な場合はbox-shadowフォールバックを追加します。
Last updated: 2026-05-28
制限事項
- Outlineはすべてのブラウザでborder-radiusに従うわけではありません。ChromeとSafariは丸い要素に角が四角いアウトラインを描画します。丸いフォーカスインジケーターにはbox-shadowをフォールバックとして使用してください。
- フォーカスリングのコントラストチェックは簡略化された相対輝度計算を使用します。実際の知覚コントラストは周囲のUIに依存するため実際のコンテンツで視覚的にテストしてください。
- 一部のオペレーティングシステムのハイコントラストモードは作成者のフォーカススタイルを上書きします。WindowsのハイコントラストモードとmacOSのコントラストを上げる設定を有効にして常にテストしてください。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- フォーカスリングの幅、オフセット、色、スタイルを設定するかbox-shadowをフォールバックとして選択します。
- CSSセレクターを指定します。キーボードのみのフォーカスには:focus-visible、すべてのフォーカスには:focusを使用します。
- 背景色フィールドを使用する場合ツールはコントラスト比をチェックしWCAGのしきい値を下回ると警告します。
- CSSルールをコピーしてグローバルまたは特定のコンポーネントに適用します。
主な用途
- WCAG 2.4.7の可視フォーカス要件を満たすグローバルなキーボードフォーカススタイルを作成します。
- アクセシビリティを維持しながらサイトのカラーパレットに合ったブランドに合わせたフォーカスリングをデザインします。
- 丸い要素で機能するカスタムbox-shadowフォーカスインジケーターでデフォルトのブラウザアウトラインを置き換えます。