Focus Management
フォーカス管理
ページが変更された後、フォーカス管理はキーボードのアクティブポイントを移動させます。また、一時的なサーフェスが閉じたときにフォーカスを戻します。
trigger -> place focus -> finish or close -> restore to a sensible target#edit-profile#display-nameEntertrigger -> place focus -> finish or close -> restore to a sensible targetA11Yもう一つの例
人が「プロフィール編集」を開きます。フォーカスがダイアログに入ります。「保存」で閉じた後、フォーカスは「プロフィール編集」に戻ります。
主な部分
- 01トリガー制御
- 02画面またはDOMの変更
- 03初期フォーカスターゲット
- 04アクティブ要素トレース
- 05閉じるまたは完了イベント
- 06返却またはフォールバック先
以下の場合に使用します
ダイアログを開閉する、アイテムを削除する、ルートを変更する後に使用してください。まず次に役立つターゲットを選択してください。
以下の場合は使用しないでください
小さな更新ごとにフォーカスを移動しないでください。予期しないジャンプは、キーボードやスクリーンリーダーのユーザーが現在位置を見失う原因になります。
コードで使用する名前
trigger -> place focus -> finish or close -> restore to a sensible target 出荷前に
Give assistive tools the control’s name (accessible name), purpose (role), value, and state. Check keyboard use, visible focus, target size, disabled and busy states, feedback, and recovery.
Outcome:Complete the task with フォーカス管理 (Focus Management)。 User context:人が「プロフィール編集」を開きます。フォーカスがダイアログに入ります。「保存」で閉じた後、フォーカスは「プロフィール編集」に戻ります。 Recommended pattern:フォーカス管理 (Focus Management)。 Why it fits:ダイアログを開閉する、アイテムを削除する、ルートを変更する後に使用してください。まず次に役立つターゲットを選択してください。 Do not use it when:小さな更新ごとにフォーカスを移動しないでください。予期しないジャンプは、キーボードやスクリーンリーダーのユーザーが現在位置を見失う原因になります。 Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary):その情報源にとって公式です。他のプラットフォームやチームはその用語を別の方法で使用する場合があります。 Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
このリクエストを確認する
Review how フォーカス管理 (Focus Management) is used now. Definition: ページが変更された後、フォーカス管理はキーボードのアクティブポイントを移動させます。また、一時的なサーフェスが閉じたときにフォーカスを戻します。 Release checks: Give assistive tools the control’s name (accessible name), purpose (role), value, and state. Check keyboard use, visible focus, target size, disabled and busy states, feedback, and recovery. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.