Accessibility (a11y) Testing 完整指南

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

為什麼 QA 一定要懂 a11y

flowchart TD
    Why[為什麼 QA 該學 a11y?] --> L[法律壓力]
    Why --> M[市場規模]
    Why --> Q[品質指標]
    Why --> S[薪資溢價]

    L --> L1[EAA 2025-06 強制]
    L --> L2[美國 ADA 訴訟 2025 年破 4000 件]
    L --> L3[GDPR / 個資法 + 平等對待]

    M --> M1[全球 13% 人口有失能]
    M --> M2[銀髮族急速增加]
    M --> M3[暫時失能 - 抱小孩、滑雪斷手]

    Q --> Q1[a11y 好 = UX 好]
    Q --> Q2[語意 HTML = SEO 好]

    S --> S1[a11y QA 薪資 +20-30%]

    style L fill:#ef4444,color:#fff
    style S fill:#10b981,color:#fff

WCAG 2.2 四原則

mindmap
  root((WCAG<br>POUR))
    Perceivable 可感知
      文字替代
      時間性媒體字幕
      可調整呈現
      對比度足夠
    Operable 可操作
      鍵盤可達
      足夠時間
      不引發癲癇
      可導航
      輸入彈性
    Understandable 可理解
      可讀
      可預測
      輸入協助
    Robust 穩健
      與技術相容
      Assistive Tech 可解析

A / AA / AAA 等級

等級 範圍 適用
A 最低基本 沒人用
AA 業界標準 多數公司 / 法規要求
AAA 最高 政府 / 特殊產業

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

自動化測試（30-40% 覆蓋）

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 }
    }
  }
]

其他工具

工具 強項
axe DevTools Chrome 擴充、最完整免費
WAVE 視覺化 overlay、教育友善
Pa11y CLI 跑、CI 整合容易
Lighthouse 內建 Chrome、score 直觀
Accessibility Insights Microsoft 出、含 tab order 視覺化
Stark Figma 外掛、設計階段抓

手動測試（60% 必要）

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

鍵盤導航 checklist

flowchart LR
    Start[Tab 從頂部開始] --> Q1{每個互動元素<br>都能 focus 到?}
    Q1 -->|否| F1[❌ tabindex 不對]
    Q1 -->|是| Q2{Focus indicator<br>可見?}
    Q2 -->|否| F2[❌ outline 被砍]
    Q2 -->|是| Q3{順序合邏輯?}
    Q3 -->|否| F3[❌ DOM 順序錯]
    Q3 -->|是| Q4{Esc 關 modal?}
    Q4 -->|否| F4[❌ keyboard trap]
    Q4 -->|是| OK[✓ 通過]

    style OK fill:#10b981,color:#fff

測試方法：拔掉滑鼠、只用 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 次閃爍）

a11y 常見 bug 模式

mindmap
  root((常見 a11y bugs))
    語意錯
      div / span 當按鈕
      h1 跳到 h4
      table 拿來排版
      label 沒連 input
    Alt 漏
      圖片無 alt
      decorative 沒 alt=""
      圖示按鈕無 aria-label
    對比不夠
      placeholder 太淡
      disabled 不易讀
      focus indicator 砍掉
    Keyboard 卡
      modal 沒 trap
      下拉沒 escape
      Tab 跳過某些元素
    動態內容
      Toast 不被 screen reader 唸
      Loading 沒 announce
      Form 錯誤訊息漏
    Color only
      只用紅色標錯誤
      圖表只有顏色區分

QA 一週 a11y 工作流

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

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

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

CI 整合範例

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/

給 QA 的 5 個必學

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

法規快速對照（2026）

地區 法規 範圍
EU EAA 2025-06 所有電商 / 金融 / 通訊
US ADA Title III 公開可訪問網站
Canada AODA 安大略省
Australia DDA 任何商業
台灣 身心障礙者權益保障法 政府 + 補助業者

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

反模式

flowchart TD
    Anti[a11y 反模式] --> A1["上線前一天才測"]
    Anti --> A2["只跑 Lighthouse score"]
    Anti --> A3["放 overlay widget 就以為 OK"]
    Anti --> A4["不測 screen reader"]
    Anti --> A5["設計 / 開發完才告知 a11y"]
    Anti --> A6["AAA 全達標承諾"]
    Anti --> A7["不收集真實使用者反饋"]

    style A1 fill:#ef4444,color:#fff
    style A2 fill:#ef4444,color:#fff
    style A3 fill:#ef4444,color:#fff
    style A4 fill:#ef4444,color:#fff
    style A5 fill:#ef4444,color:#fff
    style A6 fill:#ef4444,color:#fff
    style A7 fill:#ef4444,color:#fff

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

給 QA 的 5 句

  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 策略