modern-web-accessibility-for-interactive-ui

id	modern-web-a11y-interactive
name	Modern Web Accessibility for Interactive UI
description	キーボード操作 / focus 管理 / 動的コンテンツ更新 / ARIA role など、インタラクティブ UI のアクセシビリティ観点を suggestion で提示する。
version	0.1.0
category	midstream
phase	midstream
applyTo	["src/**/*.{ts,tsx,js,jsx,html,css}","app/**/*.{ts,tsx,js,jsx,html,css}","components/**/*.{ts,tsx,js,jsx,html,css}","pages/**/*.{ts,tsx,js,jsx,html,css}","styles/**/*.css","public/**/*.html"]
tags	["community","modern-web","accessibility","a11y","ui","midstream"]
severity	minor
inputContext	["diff"]
outputKind	["findings","actions"]
modelHint	balanced

Goal / 目的

• インタラクティブ UI 差分（modal / popover / menu / tabs / live updates / form interactions）に対し、キーボード操作と支援技術ユーザーの操作可能性を確保する suggestion を返す。
• accessible name（既存 a11y-accessible-name）が扱わない「動的振る舞い」「focus state」「role / state semantics」を担当する。
• 出力は suggestion 扱い。「強制」ではなく「検討すべき代替案 / 確認ポイント」として返す。

Non-goals / 扱わないこと

• accessible name（alt / aria-label）の網羅的チェック → a11y-accessible-name の担当。
• コントラスト比 / 視覚的アクセシビリティ → 別 skill / 別 audit ツールの領域。
• 完全な WCAG 等級判定。
• screen reader を直接 emulate しての挙動検証。

False-positive guards / 抑制条件

• 既に library / design system のコンポーネント (<Dialog>, <Popover>, <MenuButton> 等) を使い、a11y 振る舞いが library 内で保証されている場合は指摘しない。
• tabIndex / aria-* 属性が既に明示的に設定されている差分（意図的な制御）は指摘しない。
• 差分が CSS のみのスタイル微調整（色変更・余白調整など）で、interaction が変わらない場合は指摘しない。
• focus visibility 関連で :focus-visible / outline が既に明示制御されている場合は新たに指摘しない。

Rule / ルール

キーボード操作

• click 専用ハンドラ (onClick のみ、onKeyDown なし) を持つ generic 要素は、<button> への切り替え or onKeyDown + role="button" + tabIndex="0" セットの検討を提案する。
• ナビゲーション要素 (menu, tabs, breadcrumb) には WAI-ARIA Authoring Practices の roving tabindex / arrow key navigation 検討を促す。
• onMouseOver / onMouseOut だけで状態切替する hover-only UI は、keyboard focus でも同等の状態が出るかを確認する。
• shortcut key を追加する差分では、<kbd> 表示 / disable 手段 / 既存ショートカット重複の確認を促す。

Focus 管理

• modal / dialog / drawer を開いた時に focus が initial element に移るか、閉じた時に開いた element に戻るかを確認する。
• <dialog> の native showModal() は focus / inert を自動でやる → そちらに寄せる方が安全な suggestion を出す。
• focus trap を自前で実装している差分（querySelector で focusable elements を集める等）は <dialog> または inert 属性ベースへの寄せ替え検討を提案する。
• tabIndex="-1" で focus を奪う / tabIndex="0" 以上の正の値を追加する差分は副作用が大きいので根拠を確認する（positive tabIndex は基本的にアンチパターン）。

動的コンテンツ / live regions

• aria-live / role="status" / の選択が用途に合っているかを確認する（ vs vs ）。