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

概要

WordPress のテーマ、ブロック、プラグイン、管理画面に対する体系的なアクセシビリティレビューです。基本原則: アクセシビリティは構造、インタラクション、状態変化に組み込むべきであり、散在した ARIA で後付けするものではありません。セマンティックマークアップ、キーボード動作、フォーカス管理、ラベル、エラーメッセージング、管理画面インタラクション、ブロック出力、および JS 駆動の UI 変化をカバーします。

使用する場合

以下の場合に使用してください:

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

以下の場合は使用しないでください:

• 実装コンテキストなしの純粋なビジュアルデザイン批評
• パフォーマンスまたはセキュリティのみのレビュー
• スクリーンショットのみからの色コントラスト測定

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

1. 対象を特定

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

2. 構造的セマンティクスをチェック

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

3. インタラクション動作をチェック

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

4. 重大度を適用

   • 重大: キーボードでコアアクション操作不可、ラベルなしの必須フォームコントロール、モーダルまたはメニューが不適切にフォーカスをトラップ
   • 警告: セマンティクス弱い、エラー関連付け悪い、ARIA 誤用、ボタン以外のクリック可能要素
   • 情報: 見出し構造、ヘルプテキスト、またはランドマーク使用を改善できる可能性

ファイルタイプ別チェック

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

• 重大: インタラクティブ要素が div/span として実装され、キーボードサポートなし
• 警告: 見出し構造またはランドマーク使用の欠落
• 警告: ラベルなしのフォーム入力
• 情報: ARIA 多用の代わりにネイティブ要素を使用できる可能性

JavaScript インタラクション

• 重大: モーダルへフォーカスが移動されない、または閉じるときに返却されない
• 警告: キーボードハンドラが不完全
• 警告: 状態変化がビジュアルのみで可視化
• 情報: 非同期更新にライブリージョンを使用できる可能性

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

• 警告: インスペクタコントロールまたはブロック UI ラベルが不明確
• 警告: 管理画面通知が適切にアナウンスされていない
• 情報: 空状態の明確さとアシスティブテキストを改善できる可能性

クイック検出用検索パターン (A11Y-21)

アクセシビリティ指向のコードスキャンを高速化するには、これらの rg コマンドを使用してください。

重大パターン

# セマンティクスなし要素のクリックハンドラ
rg -n "<(div|span)[^>]+on(click|key)" . -g '*.{php,html,js,jsx}'

# 明らかなラベル参照なしのフォームコントロール
rg -n "<input|<select|<textarea" . -g '*.{php,html}'

# ダイアログまたはモーダル実装
rg -n "dialog|modal|aria-modal|role=['\"]dialog" . -g '*.{php,html,js,jsx}'

警告パターン

# ARIA 使用候補を手動検査
rg -n "aria-|role=" . -g '*.{php,html,js,jsx}'

# ボタンのようなリンクまたはリンクのようなボタン
rg -n "<a[^>]+href=['\"]#|<button[^>]+onclick" . -g '*.{php,html}'

# フォーカス管理コード
rg -n "focus\(|tabindex|keydown|keyup" . -g '*.{js,jsx,php}'

情報パターン

# 見出しとランドマーク構造
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)

各検出項目について、重大度、ファイル参照、影響を受けるユーザーインタラクション、実装がアクセシブルでない理由、および実用的な修正を含めてください。広範なコンプライアンス表現より実装ガイダンスを優先してください。