Focus Ring
フォーカスリング
今キーボードの入力を受け取っているコントロールの周りにある、線やハイライトのことです。
Tab を押してフォーカスを追跡
実際の例
チェックアウトでTabキーを押すと、ページのレイアウトを変更せずに各フィールドとボタンの周りにクリアリングが表示されます。
主な部分
- 01可視ラベル
- 02Interaction target
- 03Current state
- 04Keyboard behavior
以下の場合に使用します
キーボードフォーカス可能なすべてのコントロールで表示。すべての背景と状態でテストする
以下の場合は使用しないでください
同等に明確な代替がない限り、ブラウザのアウトラインを削除してはいけません。ホバースタイルはキーボードフォーカスを表示しません。
コードで使用する名前
:focus-visible outline 出荷前に
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome：Complete the task with フォーカスリング (Focus Ring)。 User context：チェックアウトでTabキーを押すと、ページのレイアウトを変更せずに各フィールドとボタンの周りにクリアリングが表示されます。 Design concept to apply：フォーカスリング (Focus Ring)。 Why it fits：キーボードフォーカス可能なすべてのコントロールで表示。すべての背景と状態でテストする。 Do not use it when：同等に明確な代替がない限り、ブラウザのアウトラインを削除してはいけません。ホバースタイルはキーボードフォーカスを表示しません。 Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary)：その情報源にとって公式です。他のプラットフォームやチームはその用語を別の方法で使用する場合があります。 Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
このリクエストを確認する
Review how フォーカスリング (Focus Ring) is used now. Definition: 今キーボードの入力を受け取っているコントロールの周りにある、線やハイライトのことです。 Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.