インターフェース コア B · 公式のガイダンス プラットフォーム: ウェブ

Focus Management

フォーカス管理

ページが変更された後、フォーカス管理はキーボードのアクティブポイントを移動させます。また、一時的なサーフェスが閉じたときにフォーカスを戻します。

仕組みを見る
そう呼ぶかもしれません Focus Managementプログラム的なフォーカスフォーカス配置フォーカス復元

仕組みを見る

元の作業例フォーカス管理
アクセシブルUIルールフォーカス管理trigger -> place focus -> finish or close -> restore to a sensible target
プロファイルダイアログfocus: #display-name
開封者プロフィールを編集#edit-profile
ダイアログを開く
1表示名初期の焦点#display-name
2変更を保存完了して閉じるEnter
ダイアログ閉鎖focus → #edit-profile
合格フォーカスはダイアログに入り、開いた要素に戻ります。避ける削除された要素やページ本体にフォーカスを残さないでください。
trigger -> place focus -> finish or close -> restore to a sensible targetA11Y
フォーカス管理アクセシブルインターフェイス実践

もう一つの例

人が「プロフィール編集」を開きます。フォーカスがダイアログに入ります。「保存」で閉じた後、フォーカスは「プロフィール編集」に戻ります。

主な部分

  1. 01トリガー制御
  2. 02画面またはDOMの変更
  3. 03初期フォーカスターゲット
  4. 04アクティブ要素トレース
  5. 05閉じるまたは完了イベント
  6. 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.

B
この用語はどれくらい公式か?

公式のガイダンス

指定されたプラットフォーム、フレームワーク、プロジェクト、または専門グループには、この用語に関する公式ガイドがあります。

その情報源にとって公式です。他のプラットフォームやチームはその用語を別の方法で使用する場合があります。

範囲
ソースがカバーするもののみ:正式名、定義、相互作用、キーボードの動作、アクセシビリティ
ドキュメントステータス
安定
チェックオン
2026-07-30

証拠の情報源と範囲

権威のある情報源 + 用語参照 · W3C WAI · 安定 Discernible and Predictable Keyboard Focus 範囲: 正式名、定義、相互作用、キーボードの動作、アクセシビリティ ここでの役割: 直接用語参照 ソースの範囲: 正式名, 定義, 相互作用, キーボードの動作, アクセシビリティ 背景ソース W3C WAI-ARIA APG — Modal Dialog Pattern ここでの役割: 定義ではなく有用な背景情報

自分でコピーする

ブラウザはこれをコピーできませんでした。下のリクエストを選択して自分でコピーしてください。