---
title: Accessibility (a11y) Testing 完整指南 — WCAG / 自動化 / 手動 / 法規驅動
description: 給 QA 的 accessibility 測試完整指南。WCAG 2.2 等級、自動化工具（axe / Lighthouse）、手動 checklist、Screen reader 測試、法規（EAA / ADA / EU AI Act）對 QA 的影響。
category: manual
tags: [accessibility, a11y, wcag, axe, screen-reader]
date: 2026-06-17
faq:
  - q: Accessibility 是法律要求嗎？
    a: 對。歐盟 EAA（European Accessibility Act）2025-06 強制、美國 ADA 一直都是、台灣有《身心障礙者權益保障法》。違規可能被罰 / 訴訟。
  - q: 自動化能抓多少 a11y 問題？
    a: 約 30-40%（axe-core 數據）。剩 60% 需要手動測試（screen reader、鍵盤 nav、focus 順序、認知負擔等）。完整覆蓋 = 自動化 + 手動 + 真實使用者測試。
  - q: 該支援到哪個 WCAG 等級？
    a: Web 公開站 → AA。政府 / 醫療 / 金融 → AAA。一般 SaaS → AA 就夠且符合大部分法規。AAA 全達標難度極高、別承諾。
  - q: Screen reader 該用哪個測？
    a: macOS 用 VoiceOver（內建）、Windows 用 NVDA（免費）。一個就夠。深度用 JAWS（付費）但 90% 替代不了 NVDA。
---

# Accessibility (a11y) Testing 完整指南

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

## 為什麼 QA 一定要懂 a11y

```mermaid
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 四原則

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

### A / AA / AAA 等級

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

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

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

### axe-core（最強免費工具）

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

```typescript
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

```yaml
# .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`：

```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

```mermaid
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](https://webaim.org/resources/contrastchecker/)

### 動畫 / 動效

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

## a11y 常見 bug 模式

```mermaid
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 整合範例

```yaml
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。

## 反模式

```mermaid
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 + 完整測試類型全圖](/manual/test-pyramid-types.html)
- [Visual Regression Testing](/automation/visual-regression-testing.html)
- [Cross-browser Testing 策略](/automation/cross-browser-testing.html)