アクセシビリティパス
参照: ${CLAUDE_PLUGIN_ROOT}/docs/accessibility.md と ${CLAUDE_PLUGIN_ROOT}/docs/design-systems.md。
WCAG 2.2 AA はすべての機能の完了基準に含まれています。このパスはその上で行う完全なスイープです。
1. セットアップ
- ツールを製品の外部に固定してインストール:
npm i --prefix <folder> playwright@<pinned> axe-core@<pinned>;A11Y_TOOLS=<folder>. - スクラッチデータベースと独自ポートでアプリをローカル実行。
tests/a11y/pages.jsonに すべての主要ページ(ダイアログはopenで指定)と、ページごとのlang、 サインインページ用のsignInモジュールをリストアップ。- 他のエージェントがほとんど実行していないときにパスを実行。共有コンポーネントへの小さな修正を目的とする。
2. 測定(「before」)
node tests/a11y/axe-pages.mjs --probes --json scratch/a11y-before.json
node tests/a11y/axe-pages.mjs --probes --widths 320 --page <wide pages>
node --test "tests/contracts/*.test.mjs" # ライト/ダークのテーマコントラスト
さらに、アプリのパターンに対応するキーボードスクリプト(スキップリンク→メイン、ダイアログトラップとフォーカス戻し、最上位 Escape、タブリスト内の矢印キー、クリック可能行の Enter)と手動チェック: テキスト間隔 (1.4.12)、200% ズーム、ドラッグ代替 (2.5.7)、冗長エントリ (3.3.7)、アクセシブル認証 (3.3.8)、表付きグラフ、メール(lang、プレゼンテーション表、代替テキスト、ダーク)。
3. 所見と修正
表: # | 基準 | 場所 | 重大度(重大/中/軽微) | 修正済み?。修正は共有コンポーネント単位で行う(フォーカスリングトークン 1 つ、ダイアログキーヘルパー 1 つ、クリック可能行、複合キー、スクロール領域、ライブリージョン、scroll-padding)。新しいアクセシブル名はすべて設定済みの言語に翻訳。新しい色の組み合わせにはコントラストペアを追加。
4. ガード
- 共有コンポーネントの契約テスト(名前、メッセージ前のライブリージョン存在、トークンペア、reduced-motion、スキップリンク)。
- 残りの所見は
tests/a11y/known.jsonに 理由付き で記録。これは アクセシビリティステートメント ページの既知制限と同一(対象 WCAG 2.2 AA、制限、連絡先; 設定済み全言語で; 全フッターからリンク)。
5. レポート
Before → After の画面別違反数、重大度別カウント(修正済み/未修正)、スクリーンショット、未実施項目(スクリーンリーダー、ネイティブシェル、外部監査)。What's new エントリ 1 件。STATE.md セクション。