Roving tabindex
ロービングタブインデックス
ロービングタブインデックスはグループに1つのタブストップを与えます。その後、矢印キーでグループ内の項目間を移動できます。
one tabindex=0 + remaining tabindex=-1 + arrow key swaps the active itemtabindex=0イタリック-1リンク-1引用-1focus() + swap tabindexone tabindex=0 + remaining tabindex=-1 + arrow key swaps the active itemA11Yもう一つの例
ツールバーは、tabindex 0 の Bold から始まります。その他のボタンは -1 を使います。右矢印キーで 0 から Italic に移動します。
主な部分
- 01複合ウィジェット
- 02単一タブストップ
- 03非アクティブ項目
- 04矢印キーのルール
- 05更新されたアクティブアイテム
- 06タブ終了
以下の場合に使用します
矢印キーの操作が文書化された複合ウィジェットに使用してください。通常のTab順序には正確に1アイテムを保持してください。
以下の場合は使用しないでください
関連のないリンクやページ全体には使用しないでください。tabindex 0 の項目を2つ残さないでください。
コードで使用する名前
one tabindex=0 + remaining tabindex=-1 + arrow key swaps the active item 出荷前に
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 ロービングタブインデックス (Roving tabindex)。 User context：ツールバーは、tabindex 0 の Bold から始まります。その他のボタンは -1 を使います。右矢印キーで 0 から Italic に移動します。 Recommended pattern：ロービングタブインデックス (Roving tabindex)。 Why it fits：矢印キーの操作が文書化された複合ウィジェットに使用してください。通常のTab順序には正確に1アイテムを保持してください。 Do not use it when：関連のないリンクやページ全体には使用しないでください。tabindex 0 の項目を2つ残さないでください。 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 ロービングタブインデックス (Roving tabindex) is used now. Definition: ロービングタブインデックスはグループに1つのタブストップを与えます。その後、矢印キーでグループ内の項目間を移動できます。 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.