auditing-wcag

日本語版 (Japanese)

WCAG 適合性監査

WCAG 2.2 AA の適合性監査を実施します。各達成基準について、根拠とともに Pass／Fail／NT／NA を報告します。

このスキルを使用する場合

観点	reviewing-a11y	auditing-wcag
目標	問題を見つけて修正案を提示	適合性を体系的に検証
出力	重大度別の問題一覧	各達成基準の Pass／Fail／NT／NA
範囲	実用上の問題に重点	WCAG 2.2 A/AA を網羅

振り分けルール

• auditing-wcag：「audit」、「compliance」、「conformance」、または正式なレポートを求める依頼に使用します。
• reviewing-a11y：「review」、「find issues」、「improvements」、または開発者向けのフィードバックを求める依頼に使用します。
• 意図が不明な場合は、適合性レポートと問題のレビューのどちらを希望するか確認します。

ワークフロー（6 ステップ）

1. 入力の受け付け

• URL またはローカルファイルのパスを受け付けます。
• 複数ページの場合は、対象ページの一覧と開始点を確認します。
• ローカルファイルの場合は、利用可能なファイル読み取り機能を使用します（実行時の動作は実行できません）。

2. 対象範囲の合意

以下を確認し、合意を得ます。

• 対象レベル（A/AA。既定値は WCAG 2.2 AA）
• ページの範囲（全ページ／代表的なページ／指定された URL）
• 制限事項（支援技術によるチェックは対象外。動的な動作の確認は Playwright に依存）
• 出力形式（各達成基準の Pass／Fail／NT／NA）

3. 自動チェック

• Playwright でページに移動し、アクセシビリティツリーを取得します。
• references/automated-checks.md を適用します。
• ブラウザーを操作できない場合は、a11y-audit CLI でチェックを実行します（下記の「自動チェック CLI」を参照）。
• CLI も実行できない場合は、利用可能なウェブ機能で HTML を取得し、それに応じて判断範囲を限定します。
• A/AA の網羅性を確保するため、references/coverage-matrix.md を使用します。

ナレッジベース（a11y-knowledge）を使って結果を仕分けます。

• @a11y-skills/audit 0.14.0 以降の page-snapshot も実行します（--checks を絞り込む場合も含めてください）。判定結果は出しませんが、2.4.1／2.4.2／3.1.1 の確認や複数ページの比較に使用します。
• checks-axe.md と checks-audit.md のルールに従い、結果を「確定／要レビュー」に仕分けます。適合（Pass）とみなせるのは、そこに記載された axe ルールの合格結果のみです。それ以外の合格結果が示すのは、「そのルールが確認する範囲では問題がない」ことにとどまります。
• レビューが必要な達成基準については、判断する前に ../a11y-knowledge/references/criteria/<number>.md の「判断基準」と「確認時の留意点」を読みます。「断定しないこと」に該当する内容は NT のままとし、確定に必要な情報を記載します。
• 複数ページを監査する場合は、まず cross-page.md の共通判断ルールを読みます。
• references/automated-checks.md と項目が重複する場合は、ナレッジベースのルールを優先します。ナレッジベースは相対パス ../a11y-knowledge/ で参照します（プラグインとしてインストールした場合は解決されます。個々のスキルディレクトリをシンボリックリンクでインストールする場合は、a11y-knowledge もリンクしてください）。

4. インタラクティブチェック

• Playwright でキーボード操作とフォーカスの動作を確認します。
• references/interactive-checks.md に従います。
• 実行が妨げられる場合は、該当する達成基準を NT とします。

5. 手動チェック項目

• references/manual-checks.md と references/content-checks.md の項目を提示します。
• 根拠を得られない場合は NT のままとし、項目を明示します。
• ユーザーから提供された根拠を反映します。

6. レポートの作成

• references/output-format.md に従います。
• A/AA のすべての達成基準にステータス（Pass／Fail／NT／NA）を割り当てます。
• 対象範囲、制限事項、ツール、未解決の項目を要約します。

自動化の対象範囲と制限事項

• Playwright が提供するのは、計算済みのアクセシビリティツリーのシグナル（ロール／名前／状態）のみです。
• 自動テストの結果だけでは、監査結果は保証されません。
• スクリーンリーダーによる検証と、支援技術とブラウザーの互換性テストは対象範囲外です。
• 推測せず、根拠がない場合は NT を使用してください。

参考ガイド

• references/automated-checks.md
• references/interactive-checks.md
• references/manual-checks.md
• references/content-checks.md
• references/output-format.md
• references/coverage-matrix.md
• ナレッジベース（../a11y-knowledge/）：references/checks-axe.md、references/checks-audit.md、references/cross-page.md、references/criteria/<number>.md

自動チェック CLI

自動チェックは、npm パッケージ @a11y-skills/audit に含まれる a11y-audit CLI を使って実行します（Node 18 以降が必要です。ピア依存関係は npm 7 以降で自動的に取得されます）。

セットアップ（初回のみ）：

npx playwright install chromium

すべてのチェックを実行：

npx -y @a11y-skills/audit --url "https://example.com"

特定のチェックを実行：

npx -y @a11y-skills/audit --url "https://example.com" --checks axe-audit,focus-indicator-check,page-snapshot

--checks で絞り込む場合も、page-snapshot（0.14.0 以降）を含めてください。これは 2.4.1／2.4.2／3.1.1 の判定材料であり、複数のページを比較する際にも使います。

注釈付きスクリーンショットを使う場合（focus-indicator）：

npx -y @a11y-skills/audit --url "https://example.com" --checks focus-indicator-check --screenshot

出力ディレクトリを指定する場合（デフォルト：./a11y-audit-results）：

npx -y @a11y-skills/audit --url "https://example.com" --output-dir ./results

終了コード： 0 = 違反なし／1 = 違反が見つかった／2 = 実行時エラー

チェック名	達成基準	説明
axe-audit	複数	axe-core による包括的なチェック
reflow-check	1.4.10	320px 幅での横スクロール
text-spacing-check	1.4.12	テキスト間隔の上書きによるクリッピング
zoom-200-check	1.4.4	200％ズーム時のコンテンツ損失
orientation-check	1.3.4	画面の向きのロックを検出
autocomplete-audit	1.3.5	autocomplete の欠落または無効な設定
time-limit-detector	2.2.1	タイマー／meta refresh を検出
auto-play-detection	1.4.2, 2.2.2	自動再生コンテンツを検出（視覚的な変化と <audio>／<video> の再生状態。実際に音が聞こえるかどうかは手動で確認する必要があります）
focus-indicator-check	2.4.7	フォーカスインジケーターの視認性
target-size-check	2.5.5, 2.5.8	ターゲットサイズの測定
keyboard-trap-check	2.1.2	キーボードトラップを検出
keyboard-reachability-check	2.1.1	キーボードでの操作可能性（Tab、矢印キー、activedescendant）
redundant-entry-check	3.3.7	同じ情報を尋ねる重複フィールド（候補を検出。確認が必要）
motion-actuation-check	2.5.4	デバイスの動き／向きに反応するリスナー（候補を検出。確認が必要）
change-on-input-check	3.2.2	フォームコントロールを変更しただけで発生するナビゲーション、新しいウィンドウ、フォーカス移動、ダイアログ（候補を検出。確認が必要）
accessible-authentication-check	3.3.8	パスワード／コードフィールドでの貼り付けのブロックや autocomplete="off"、CAPTCHA のような要素（候補を検出。確認が必要）
pointer-gesture-check	2.5.1, 2.5.7	ドラッグ、スワイプ、複数の指で操作する可能性が高いコンポーネント（候補を検出。確認が必要）
focus-order-check	2.4.3	Tab 順序と視覚的な順序の比較（上への移動、行内での逆方向への移動、迂回）、およびモーダルダイアログの開閉時のフォーカス（候補を検出。確認が必要）
pointer-cancellation-check	2.5.2	down イベントだけで動作するコンポーネント（ナビゲーション、新しいウィンドウ、ダイアログ、DOM の変更）と、press リスナーのみを持つ要素（候補を検出。確認が必要）
non-text-contrast-check	1.4.11	入力欄、チェックボックス、ラジオボタン、スイッチの枠線または塗りつぶしと周囲の色とのコントラスト、およびアイコンのみのボタン内のアイコンのコントラスト（3:1 未満、または測定不能。確認が必要）
character-key-shortcut-check	2.1.4	ページ本体にフォーカスがある状態でキーを1つずつ押したときに、ナビゲーション、新しいウィンドウ、ダイアログ、フォーカス移動、DOM の変更、スクロール、または preventDefault() を引き起こすキー（候補を検出。確認が必要）
content-on-hover-check	1.4.13	ホバーまたはフォーカスで表示されるコンテンツ（CSS の :hover／:focus ルールとリスナーから検出）のうち、Escape で閉じられないもの、ポインターをその上に移動すると消えるもの、または自動的に消えるもの（候補を検出。確認が必要）。委譲されたリスナーは報告のみ
page-snapshot	2.4.1／2.4.2／3.1.1／3.2.3／3.2.4／3.2.6 の判定材料	判定は行いません。body の aria スナップショット、タイトル、<html> の lang、URL、各 iframe の aria スナップショットを書き出します（内容を読んで判定してください。複数のページを扱う場合は、ページごとに別の --output-dir を使って比較してください）

詳しいドキュメントについては、@a11y-skills/audit README をご覧ください。