Accessibility (a11y) Testing 完整指南 — WCAG / 自動化 / 手動 / 法規驅動

「我們做給所有人用」、「但盲胞用不了」。Accessibility 不是慈善、是法律 + 設計品質。歐盟 EAA 2025-06 上路 + ADA 訴訟暴增 → QA 不會 a11y = 公司開罰風險。這篇給你完整 framework。

A / AA / AAA 等級

建議目標 = AA。AAA 別輕易承諾、有條款全達標難。

axe-core（最強免費工具）

npm install --save-dev @axe-core/playwright

import { test } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

test('homepage has no a11y violations', async ({ page }) => {
  await page.goto('https://example.com');
  const results = await new AxeBuilder({ page }).analyze();
  expect(results.violations).toEqual([]);
});

// 特定區塊
test('navbar passes WCAG AA', async ({ page }) => {
  const results = await new AxeBuilder({ page })
    .include('nav')
    .withTags(['wcag2a', 'wcag2aa', 'wcag22aa'])
    .analyze();
  expect(results.violations).toEqual([]);
});

Lighthouse CI

# .github/workflows/lighthouse.yml
- uses: treosh/lighthouse-ci-action@v11
  with:
    urls: |
      https://example.com
      https://example.com/login
    budgetPath: ./lighthouse-budget.json

lighthouse-budget.json：

[
  {
    "path": "/*",
    "resourceSizes": [],
    "timings": [],
    "categories": {
      "accessibility": { "min": 95 }
    }
  }
]

其他工具

自動化只抓「規則」、抓不到「體驗」。

鍵盤導航 checklist

測試方法：拔掉滑鼠、只用 Tab / Shift+Tab / Enter / Space / Esc / 方向鍵走完整個 flow。

Screen Reader 測試

macOS — VoiceOver：

• 開啟：Cmd + F5
• 讀下一個：Ctrl + Option + 右
• 互動：Ctrl + Option + Space

Windows — NVDA（免費）：

• 下載：nvaccess.org
• 朗讀：NVDA + 上
• 瀏覽模式 / 焦點模式：NVDA + Space

測試重點：

1. 標題唸的對嗎？
2. Form label 跟著唸？
3. 按鈕 / 連結唸出來知道用途？
4. 圖片 alt 文字唸出來？
5. 動態內容變化有通知？

對比度

WCAG AA 要求：

• 一般文字 ≥ 4.5:1
• 大文字（18pt+ 或 14pt+ bold） ≥ 3:1
• UI 元件 ≥ 3:1

工具：Chrome DevTools / WebAIM Contrast Checker

動畫 / 動效

• 自動播放動畫 ≤ 5 秒
• 提供「暫停」按鈕
• 尊重 prefers-reduced-motion
• 不引發癲癇（每秒 ≤ 3 次閃爍）

Monday:
  - 跑 axe-core CI on staging
  - 跑 Lighthouse a11y score

Tuesday-Thursday:
  - 每個新功能：
    1. 自動化測 axe
    2. 鍵盤跑一次
    3. Screen reader 抽測

Friday:
  - 跨 team triage a11y bugs
  - 看 axe / Lighthouse 趨勢

name: A11y CI
on: [pull_request]

jobs:
  axe:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test tests/a11y/
      - if: failure()
        uses: actions/upload-artifact@v4
        with:
          name: a11y-results
          path: test-results/

1. WCAG 2.2 AA 標準（一週讀完官方）
2. axe DevTools 操作熟練
3. VoiceOver + NVDA 各跑過 5 次
4. 鍵盤 only 跑完 happy path 的習慣
5. 對比度 用 DevTools 即時驗

ADA 訴訟 2025 突破 4000 件、被告平均賠 $5,000-$50,000。

Overlay widget 警告：accessiBe / UserWay 等「一鍵 a11y」widget — 被告律師最愛、根本沒解決問題、只蓋紗布。別買、別裝。

1. a11y 不是慈善、是基本品質
2. 自動化 30% + 手動 60% + 真用戶 10%
3. WCAG AA 是業界標準、AAA 別輕易承諾
4. screen reader 一週測一次比 100% coverage 重要
5. Overlay widget 是雷、別碰

a11y 是 QA 領域 2026 後薪資溢價最高的技能之一（+20-30%）。歐盟 EAA 上路、訴訟暴增、業界缺人。從跑 axe-core + 學鍵盤 nav 開始、半年後你會變團隊不可缺的 a11y 專家。

延伸：

• Test Pyramid + 完整測試類型全圖
• Visual Regression Testing
• Cross-browser Testing 策略