アクセシビリティ監査

概要

WCAG 2.1/2.2 AA/AAA準拠のアクセシビリティ監査と改善を包括的に支援するスキルです。

実行フロー

Step 1: 監査計画

スコープ確認

• 監査対象（Web、モバイル、ドキュメント）
• 準拠基準（WCAG 2.1 AA、Section 508等）
• 対象とする支援技術

監査アプローチ

Phase 1: 自動スキャンによる基礎チェック
Phase 2: 手動テストによる詳細評価
Phase 3: 支援技術を使用したユーザビリティテスト
Phase 4: レポートと優先順位付き推奨事項

Step 2: 自動スキャン

ツール

• axe-core: Chrome/Firefox拡張機能
• Pa11y: CI/CD統合向けCLI
• WAVE: 視覚的フィードバック
• Lighthouse: アクセシビリティスコア

Step 3: WCAG手動監査

知覚可能（Perceivable）

• 代替テキスト
• 時間依存メディア（字幕、音声解説）
• 適応可能（セマンティックHTML）
• 判別可能（コントラスト4.5:1以上）

操作可能（Operable）

• キーボードアクセシブル
• 十分な時間
• 発作防止
• ナビゲーション

理解可能（Understandable）

• 読みやすさ（言語属性）
• 予測可能
• 入力支援（エラーメッセージ）

堅牢（Robust）

• HTML妥当性
• ARIA属性の正しい使用

Step 4: 支援技術テスト

スクリーンリーダー

• NVDA（Windows）
• VoiceOver（macOS/iOS）
• TalkBack（Android）

テスト観点

• 全情報の音声読み上げ
• ランドマーク/ヘッディングナビゲーション
• フォームのアナウンス
• 動的コンテンツの変更伝達

Step 5: エンタープライズ対応

• VPAT作成
• CI/CDへのテスト統合
• 開発者トレーニング

出力成果物

1. 監査レポート: 問題一覧と優先度
2. 修正提案: コード例付きの具体的な改善方法
3. 実装計画: フェーズ別の修正スケジュール
4. テスト手順: 自動/手動テストチェックリスト

ベストプラクティス

1. セマンティックHTML優先: div/spanより適切な要素
2. ARIAは最後の手段: ネイティブHTML要素を優先
3. キーボードナビゲーション: すべてをキーボードで操作可能に
4. 色とコントラスト: 4.5:1以上、色だけに依存しない
5. 継続的改善: CI/CDへの統合、定期監査

関連ファイル

• CHECKLIST.md - WCAG準拠チェックリスト
• TOOLS.md - 推奨ツール一覧