testing-strategy

テスト戦略スキル

アクセシビリティテストの意思決定フレームワークです。自動ツールと手動テストのどちらを使うか、どのスクリーンリーダーとブラウザーの組み合わせをテストするか、アクセシビリティの受け入れ基準をどう記述するかを説明します。

---

自動テストと手動テストのカバー範囲

自動ツールで検出できること（約30～40％）	手動テストが必要なこと（約60～70％）
画像の代替テキストの欠落	代替テキストの品質と正確さ
フォームラベルの欠落	ラベルの明瞭さと有用性
色のコントラスト比（計算値）	コンテキストにおける色のコントラスト（グラデーション、画像）
lang 属性の欠落	言語の正しい識別
ID の重複	論理的な読み上げ順序
カスタムウィジェットの ARIA ロールの欠落	インタラクションパターンに適した ARIA ロール
見出し階層の違反	見出しテキストの意味の明確さ
空のリンクとボタン	リンク／ボタンのテキストの説明性
テーブルヘッダーの欠落	テーブルのキャプションとヘッダーの関連付けの品質
ARIA の構文エラー	スクリーンリーダーの読み上げが正しいか

ブラウザーとスクリーンリーダーの互換性マトリックス

主なテストの組み合わせ（必須）

スクリーンリーダー	ブラウザー	OS	優先度
NVDA	Firefox	Windows	テスト必須
NVDA	Chrome	Windows	テスト必須
JAWS	Chrome	Windows	テスト必須
VoiceOver	Safari	macOS	テスト必須
VoiceOver	Safari	iOS	テスト必須
TalkBack	Chrome	Android	テスト推奨

二次的な組み合わせ（できればテスト）

スクリーンリーダー	ブラウザー	OS
ナレーター	Edge	Windows
JAWS	Edge	Windows

テストの判断ツリー

Is it a new component or page?
├── Yes → Full test coverage (automated + manual)
│   ├── Run axe-core / Lighthouse scan
│   ├── Keyboard-only navigation test
│   ├── Screen reader announcement test (NVDA + VoiceOver minimum)
│   └── Visual check at 200% zoom
└── No → What changed?
    ├── Colors/styling → Contrast check + visual review
    ├── Interactive behavior → Keyboard + screen reader test
    ├── Content/text → Screen reader announcement check
    ├── Layout/order → Reading order + focus order test
    └── Dependencies updated → Regression scan (axe-core)

回帰テストのパターン

CI パイプラインのアクセシビリティゲート

1. axe-core スキャン：すべての PR で実行します。新たに発生した重大または深刻な違反があれば失敗させます。
2. ベースライン管理：既知の問題を .a11y-baseline.json に保存します。新規の問題だけを失敗対象とします。
3. Lighthouse スコアのしきい値：アクセシビリティスコアの最低値（例：90）を設定します。スコアが低下した場合は失敗させます。
4. ビジュアル回帰：200％ズームでスクリーンショットを撮影します。フォーカスインジケーターとレイアウトの変更を比較します。

回帰の防止

• 既存のコンポーネントテストにアクセシビリティのアサーションを追加します（testing-accessibility.instructions.md を参照）
• E2E テストスイートにキーボードナビゲーションを含めます
• アクセシビリティスコアの推移を継続的に記録します（合格／不合格だけにしません）

受け入れ基準のテンプレート

ユーザーストーリー向け

Given [context],
When [action by keyboard/mouse/screen reader],
Then [accessible outcome]:

- [ ] Component has an accessible name (via label, aria-label, or aria-labelledby)
- [ ] Component has the correct ARIA role
- [ ] Component is reachable and operable by keyboard (Tab, Enter, Space, Escape, Arrows as appropriate)
- [ ] Focus is visible when the component receives focus
- [ ] State changes are announced to screen readers (aria-expanded, aria-selected, aria-checked, etc.)
- [ ] Error messages are associated with their inputs (aria-describedby or aria-errormessage)
- [ ] Content is readable at 200% zoom without horizontal scrolling
- [ ] Color is not the only means of conveying information

主なテストツール

ツール	種類	最適な用途
axe-core / @axe-core/cli	自動	CI/CD への統合、幅広い違反のスキャン
Lighthouse	自動	パフォーマンスとアクセシビリティを組み合わせたスコア
WAVE	半自動	アクセシビリティ機能／問題の視覚的なオーバーレイ
Accessibility Insights	半自動	FastPass（自動）と Assessment（手動ガイド）
pa11y	自動	CI/CD、HTML CodeSniffer のルール
jest-axe	単体テスト	jest でのコンポーネント単位の axe スキャン
cypress-axe	E2E テスト	Cypress でのページ単位の axe スキャン
playwright + @axe-core/playwright	E2E テスト	Playwright でのページ単位の axe スキャン

スクリーンリーダーテストのクイックリファレンス

NVDA（Windows）

キー	操作
Insert + Space	フォーカスモード／ブラウズモードの切り替え
Tab	次のフォーカス可能な要素に移動
H	次の見出し
D	次のランドマーク
F	次のフォームフィールド
T	次のテーブル
Insert + F7	要素リスト（リンク、見出し、ランドマーク）

VoiceOver（macOS）

キー	操作
VO（Ctrl+Option）+ Right	次の要素に移動
VO + Space	現在の要素を有効化
VO + U	ローターを開く（種類で移動）
VO + Cmd + H	次の見出し