無障礙（Accessibility）
無障礙意味著身心障礙者能夠感知、操作並理解你的作品。這包括永久性、暫時性和情境性障礙。大多數的失敗，都源於一個從沒被做出的設計決策：沒有焦點樣式、沒有錯誤狀態、沒有替代文字、沒有標題層級。此技能將這些決策轉化為一份檢核清單。
對比度數學、APCA 與色覺缺陷的內容位於 color → contrast-and-dark-mode.md。各平台的觸碰目標尺寸位於 media-specs → digital-platforms.md。年長者、識字能力、閱讀障礙與文化差異的內容位於 cognitive-psychology → audience-and-culture.md。字型最小尺寸的內容位於 typography → legibility-by-medium.md。
不容協商的規則
- 目標設定為 WCAG 2.2 AA，除非合約或法律指定其他版本。此版本也滿足 2.1 AA 和 2.0 AA，但已移除的 4.1.1 解析除外。所有 WCAG 要求均為 [E2]。
- 為每個狀態進行設計。 預設、懸停、焦點、啟用、選取、停用、錯誤、載入與空白狀態，且需涵蓋兩種色彩模式。未繪製的狀態就是一個無障礙錯誤。
- 處處可見的焦點標示。 公司標準：2px 實心外框，2px 偏移，與相鄰色彩對比度 3:1（符合 AAA 2.4.13）。絕不使用
outline: none而不提供替代方案。固定表頭不得遮蔽焦點項目 (2.4.11)。 - 目標尺寸 ≥ 24×24 CSS px (2.5.8 AA)，或透過間距使其效果等同。平台最小尺寸更大（iOS 44pt，Android 48dp），因此在觸控介面上請使用這些尺寸。
- 絕不造成頻閃，並尊重減少動態設定。 每秒最多 3 次閃爍。任何超過 5 秒的動態都需提供暫停控制。尊重
prefers-reduced-motion作為公司規定 (2.3.3)。 - 一切操作皆可透過鍵盤完成；絕不只能透過拖曳、懸停或記憶來操作。 拖曳操作需提供單擊替代方案 (2.5.7)。登入時不得有謎題或轉錄 (3.3.8)。不得要求使用者重新輸入資料 (3.3.7)。
- 表單： 使用可見標籤（佔位符不是標籤）、在欄位前提供說明、錯誤需以文字說明修正方法、驗證應等使用者離開欄位後才觸發。個人資料欄位請使用
autocomplete令牌 (1.3.5)。 - 文字替代方案需依目的而定。 遵循 W3C 替代文字決策樹：裝飾性圖片使用
alt=""、功能性圖片描述其動作、複雜圖片提供長描述。不得有文字圖片。 - 在客製化之前，先修復通用性障礙。 簡明語言、可預測的版面配置、容錯性高的表單以及使用者控制，能同時幫助認知障礙、年長者、低識字率、第二語言使用者以及處於壓力下的使用者 [E2]。
- 自動化工具並非最終裁決。 在 2017 年英國政府的審計中，單一工具僅能發現 17–41% 的障礙類型。請進行手動測試，並與身心障礙者一同測試。
- 法律備註是方向指引，非法律建議。 在引用日期前請務必再次驗證。數個日期已於 2026 年變更。
設計師規格交接檢核清單
- 標題層級、地標以及閱讀/焦點順序已加上註解（註解工具包：
motion-media-and-forms.md§7）。 - 每個互動元素：名稱、角色、所有狀態、焦點樣式、目標尺寸。
- 每個圖片：已提供替代文字或標記為裝飾性。圖表需有文字或表格等效內容。
- 每個表單：已提供標籤、輔助文字、錯誤訊息，必填欄位已標記，
autocomplete已標註。 - 已檢查文字、UI 邊界、焦點與圖示在兩種模式下的對比度（
color）。 - 動態：已指定減少動態的變體。無閃爍。長時間動態需提供暫停控制。
- 影片：提供字幕，加上口述影像或逐字稿。
- 版面配置在 320 CSS px 寬度下能重新排列。文字在 200% 縮放及 1.4.12 間距覆寫下仍可閱讀（
layout-composition）。 - 協助與聯絡資訊位於一致的位置 (3.2.6)。登入無需記憶力測試 (3.3.8)。
- 所有文案已通過簡明語言檢查（
inclusive-and-cognitive.md§5）。
法律時程摘要（2026 年 10 月驗證，引用前請再次驗證）
| 地區 | 法規 | 標準 | 日期 |
|---|---|---|---|
| 歐盟 | 歐洲無障礙法案 (EAA) | 目前引用 EN 301 549: V3.2.1；V4.1.1 (WCAG 2.2 AA) 已於 2026 年 9 月發布，等待官方公報引用 | 自 2025 年 6 月 28 日起適用 |
| 美國 州/地方政府 | ADA Title II 規則 (2024) | WCAG 2.1 AA | 延長至 2026 年 4 月：2027 年 4 月 26 日（人口 ≥ 5 萬），2028 年 4 月 26 日（較小、特殊區域） |
| 美國 企業 | ADA Title III | 判例法，通常為 WCAG 2.x AA | 訴訟驅動 |
| 美國 聯邦政府 | Section 508 | WCAG 2.0 AA（網頁、文件、軟體） | 自 2018 年起 |
| 英國 公共部門 | PSBAR 2018 | WCAG 2.2 AA + 無障礙聲明 | 已生效 |
| 加拿大 聯邦 | 加拿大無障礙法案 | CAN/ASC-EN 301 549:2024 | 目標 2040 年 |
| 巴西 | LBI 第 63 條 | ABNT NBR 17225 (2025)；eMAG 3.1（聯邦） | 已生效 |
| 日本 | 身心障礙者差別禁止法 | JIS X 8341-3:2016 | 自 2024 年 4 月起，私部門提供合理 accommodation 為強制性 |
WCAG 2.2 也是 ISO/IEC 40500:2025。WCAG 3 仍是工作草案，距離正式發布仍需數年。
依媒介區分
| 媒介 | 重點 |
|---|---|
| 原生應用程式 | 1.3.4 方向、1.4.4 Dynamic Type/字體縮放、2.5.x 指標與目標、3.3.x 輸入、4.1.2 名稱/角色/值 |
| 網頁 | 全部。最常違反的是 1.4.10 重新排列、1.4.12 間距與 2.4.11 焦點未被遮蔽。 |
| PDF, 簡報 | 標籤、標題、閱讀順序、對比度、頁面標題、語言 |
| 社群貼文 | 替代文字欄位、影片字幕、不以顏色為唯一意義、字幕中重複文字、無頻閃 |
| 印刷品, 戶外廣告 | WCAG 不直接適用，但其對比度與色彩邏輯是良好做法。距離規則位於 media-specs。 |
參考檔案 — 何時開啟
| 檔案 | 何時開啟 |
|---|---|
references/wcag-22-in-practice.md | 檢查任何成功準則；編寫規格；深入了解 2.2 新增項目；值得採用的 AAA 準則；各媒介適用性。 |
references/inclusive-and-cognitive.md | 包容性設計方法、人物誌頻譜、可引用的普及率數據、情境性障礙、認知無障礙 (COGA)、簡明語言、神經多樣性使用者、在地化/RTL 基礎、包容性審查檢核清單。 |
references/motion-media-and-forms.md | 動態與閃爍、減少動態的程式碼、字幕/口述影像/逐字稿、替代文字與複雜圖片、焦點與鍵盤規格、跳過連結、表單與錯誤、autocomplete、觸控/指標、螢幕報讀器註解與工具包。 |
references/legal-and-testing.md | 各管轄區的法律問題、需設計遵循的標準、工具涵蓋範圍、WebAIM Million 2026、手動測試檢核清單、與身心障礙者一同測試、Figma 交接檢核清單、無障礙聲明、VPAT/ACR。 |