wp-accessibility-review

WordPress アクセシビリティレビューのスキル

概要

WordPress のテーマ、ブロック、プラグイン、管理画面のインターフェースを体系的にアクセシビリティレビューします。基本原則： アクセシビリティは、ARIA をあちこちに追加して後から補うのではなく、構造、インタラクション、状態変化に組み込む必要があります。レビューでは、セマンティックなマークアップ、キーボード操作、フォーカス管理、ラベル、エラーメッセージ、管理画面でのインタラクション、ブロックの出力、JS による UI の変更を確認します。

使用するタイミング

次の場合に使用します：

• テーマテンプレートやブロックのマークアップをレビューするとき
• 管理画面のフォームやカスタムプラグイン UI を監査するとき
• モーダル、タブ、アコーディオン、メニューのインタラクションを確認するとき
• フォームのラベル、エラー、フォーカスの動作をレビューするとき
• リリース前にアクセシブルな実装かどうかを検証するとき

次の場合は使用しないでください：

• 実装のコンテキストを伴わない、純粋なビジュアルデザインの評価
• パフォーマンスのみ、またはセキュリティのみのレビュー
• スクリーンショットだけを使った色のコントラスト測定

コードレビューワークフロー

1. 対象を特定する

   • フロントエンドのテンプレート
   • ブロックの出力
   • 管理画面のインターフェース
   • インタラクティブな JS コンポーネント

2. 構造上のセマンティクスを確認する

   • 見出しの順序
   • ボタンとリンクの使い分け
   • フォームラベルの関連付け
   • テーブル／リストのセマンティクス

3. インタラクションの動作を確認する

   • キーボード操作への対応
   • フォーカスの可視性とフォーカスの復帰
   • 必要に応じたライブリージョンまたはステータスメッセージ
   • 該当する場合のダイアログ／アコーディオン／タブのセマンティクス

4. 重要度を設定する

   • CRITICAL： キーボードで主要な操作を実行できない、必須フォームコントロールにラベルがない、モーダルまたはメニューがフォーカスを不適切に閉じ込める
   • WARNING： セマンティクスが不十分、エラーとの関連付けが不適切、ARIA の誤用、ボタン以外の要素をクリック可能にしている
   • INFO： 見出し構造、ヘルプテキスト、ランドマークの使い方を改善できる

ファイルタイプ別の確認項目

テンプレートとマークアップ

• CRITICAL：インタラクティブ要素が、キーボード操作に対応しない div／span として実装されている
• WARNING：見出し構造またはランドマークの使用が不十分
• WARNING：フォーム入力にラベルがない
• INFO：ARIA に過度に依存した代替要素ではなく、ネイティブ要素を使用できる

JavaScript のインタラクション

• CRITICAL：モーダルを開いたときにフォーカスが移動しない、または閉じたときにフォーカスが戻らない
• WARNING：キーボードハンドラーが不完全
• WARNING：状態の変化が視覚的にしか確認できない
• INFO：非同期の更新にライブリージョンを使用できる

ブロックと管理画面 UI の出力

• WARNING：インスペクターコントロールやブロック UI のラベルが不明瞭
• WARNING：管理画面の通知が適切に読み上げられない
• INFO：空の状態の明確さや支援テキストを改善できる

すばやく検出するための検索パターン（A11Y-21）

アクセシビリティを意識したコードスキャンをすばやく行うには、以下の rg コマンドを使用します。

CRITICAL パターン

# Click handlers on non-semantic elements
rg -n "<(div|span)[^>]+on(click|key)" . -g '*.{php,html,js,jsx}'

# Form controls without obvious label references
rg -n "<input|<select|<textarea" . -g '*.{php,html}'

# Dialog or modal implementations
rg -n "dialog|modal|aria-modal|role=['\"]dialog" . -g '*.{php,html,js,jsx}'

WARNING パターン

# ARIA usage candidates to inspect manually
rg -n "aria-|role=" . -g '*.{php,html,js,jsx}'

# Button-like links or link-like buttons
rg -n "<a[^>]+href=['\"]#|<button[^>]+onclick" . -g '*.{php,html}'

# Focus management code
rg -n "focus\(|tabindex|keydown|keyup" . -g '*.{js,jsx,php}'

INFO パターン

# Headings and landmark structure
rg -n "<h[1-6]|<main|<nav|<aside|<header|<footer" . -g '*.{php,html}'

参考ファイル

• references/semantic-and-form-patterns.md - ネイティブなセマンティクス、ラベル、エラーメッセージ、フォーム構造
• references/interactive-a11y-patterns.md - モーダル、メニュー、アコーディオン、タブ、フォーカス管理、キーボード操作

出力形式（A11Y-23）

各指摘には、重要度、ファイル参照、影響を受けるユーザーインタラクション、実装にアクセシビリティ上の問題がある理由、実践的な修正方法を含めてください。幅広いコンプライアンス用語より、具体的な実装ガイダンスを優先してください。