Terry Yao's Blog

ROADMAP

ROADMAP

閱讀時間約 8 分鐘

CH12 · 無障礙（Accessibility, A11y） 詳細 ROADMAP

計畫文件，不會被 Quartz 渲染。 回主 roadmap → frontend/ROADMAP.md

章節目標

A11y 不是為了「殘障者」而做——是為了所有人（老花眼、暫時傷害、吵雜環境、慢網路）。建立完整能力：從 WCAG 標準到鍵盤導航、從 ARIA 到螢幕閱讀器、從 Focus 管理到 Inclusive Design、從自動測試到手動驗證。讓讀者做出大家都能用的前端。

🌱 基本介紹

#主題SlugStage大綱
01A11y 是什麼01-what-is-a11y🌱A11y 定義、為什麼簡稱 a-11-y（11 個字母）、不只是殘障者（老人、暫時傷害、場景限制）
02WCAG 標準介紹02-wcag-intro🌱WCAG 2.1 / 2.2 標準、A / AA / AAA 三級別、Success Criteria 結構
03A11y Tree 與 DOM Tree 差異03-a11y-tree🌱瀏覽器的 accessibility tree、screen reader 看到的不是 DOM、Chrome DevTools 看 a11y tree

❓ 為什麼需要

#主題SlugStage大綱
04為什麼 A11y 不是 nice-to-have04-why-a11y-matters🌱1/4 人在某些時刻需要 a11y（老人、受傷、環境）、法規風險（ADA 訴訟、EN 301 549）、SEO 紅利（語意化 = a11y）、道德基礎
05為什麼自動測只能抓 30%05-why-automation-limited🌱自動工具（axe-core）能抓 contrast / missing alt / aria 語法錯誤；抓不到語意正確性、認知負擔、key flow 邏輯；為什麼手動測與使用者測試不可或缺
06為什麼 A11y 影響所有人（不只殘障者）06-why-everyone-benefits🌱字幕本來給聽障，但大家在吵的咖啡廳都用；鍵盤導航給肢障，但電力使用者都愛；對比強給弱視，但陽光下手機都需要
07為什麼 SEO 跟 A11y 重疊07-a11y-seo-overlap🌱語意化 HTML、alt text、heading 階層、ARIA landmarks，Google 爬蟲跟 screen reader 看的是類似內容

🕰️ 演進

#主題SlugStage大綱
08WCAG 演進史08-wcag-evolution🌱WCAG 1.0（1999）→ 2.0（2008，POUR 原則）→ 2.1（2018，行動裝置）→ 2.2（2023，focus 增強）→ 3.0（進行中）
09WAI-ARIA 演進09-aria-evolution🌱ARIA 1.0（2014）→ 1.1 → 1.2（2023）、從「hack」到官方標準
10行動裝置 A11y 崛起10-mobile-a11y-evolution🌱iOS VoiceOver / Android TalkBack、手勢導航、行動裝置特殊需求
11A11y 法規推動史11-a11y-regulation-history🌱ADA（美國，1990）→ Section 508（1998）→ EN 301 549（歐盟）→ 台灣無障礙網頁（NCC）、法規如何逼使大公司重視

🧠 知識型

核心規範

#主題SlugStage大綱
12WCAG 四大原則（POUR）12-wcag-pour🌱Perceivable / Operable / Understandable / Robust，每個原則底下的 Success Criteria
13WAI-ARIA 核心13-aria-core🌱roles / states / properties 三大類、跟原生語意的優先順序、landmark roles
14ARIA 的五條規則14-aria-rules🌱「No ARIA is better than bad ARIA」、何時該用、何時用原生語意就夠
15Accessibility Tree 運作15-accessibility-tree🌱瀏覽器如何 build a11y tree、DOM → a11y tree 映射、ARIA 怎麼影響 tree

視覺 A11y

#主題SlugStage大綱
16顏色對比與色盲16-color-contrast🌱WCAG 對比要求（AA 4.5:1 / AAA 7:1）、色盲友善配色、對比檢查工具
17動態控制（prefers-reduced-motion）17-reduced-motion🌱前庭障礙、暈眩風險、媒體查詢偵測、CSS 與 JS 配合
18高對比（prefers-contrast）18-prefers-contrast🌱2023+ 新支援、主題切換整合
19字型大小與縮放19-font-size-zoom🌱rem vs px、200% 縮放不破版、使用者縮放權利

鍵盤 A11y

#主題SlugStage大綱
20鍵盤導航基礎20-keyboard-navigation🌱Tab order、tabindex 使用規則、鍵盤快速鍵
21Focus 管理21-focus-management🌱focus() / autofocus、focus 可見性（:focus-visible）、modal 打開後的 focus
22Skip Links22-skip-links🌱跳到主內容、跳過重複區塊、現代 SPA 的 focus 恢復
23Focus Trap（Modal / Drawer）23-focus-trap🌱限制 focus 在 modal 內、ESC 關閉、關閉後 focus 回到觸發按鈕
24Keyboard Shortcuts24-keyboard-shortcuts🌱kbd 元素、衝突避免、可配置快速鍵

螢幕閱讀器

#主題SlugStage大綱
25Screen Reader 工作原理25-screen-reader-basics🌱線性讀取、navigate by headings / landmarks、瀏覽模式 vs 表單模式
26NVDA / JAWS / VoiceOver / TalkBack 差異26-screen-reader-differences🌱各自的怪癖、測試優先順序、跨平台不一致處理
27Live Regions 與 aria-live27-live-regions🌱aria-live="polite" vs "assertive"、role="status" / "alert"、toast / loading / error 通知的 a11y

特定元件 A11y

#主題SlugStage大綱
28Modal / Dialog A11y28-modal-a11y🌱<dialog> 原生 vs 自製、focus trap、aria-labelledby、ESC 關閉
29Menu / Dropdown A11y29-menu-a11y🌱箭頭鍵導航、Home/End、選單開關 aria-expanded、roving tabindex
30Tab / Tablist A11y30-tabs-a11y🌱aria-selected、箭頭鍵切換、跟 routing 整合
31Form A11y（labels / errors / validation）31-form-a11y🌱label 關聯、required / aria-required、error 訊息關聯 aria-describedby、即時驗證時機
32Table A11y32-table-a11y🌱<th scope>、<caption>、複雜表格的 headers/id、資料排序的 a11y
33圖片 alt text 的藝術33-alt-text🌱裝飾 alt=""、訊息性圖、連結圖、複雜圖（chart / diagram）、<figure> + <figcaption>

Inclusive Design

#主題SlugStage大綱
34Cognitive A11y（認知無障礙）34-cognitive-a11y🌱簡單語言、一致性、錯誤預防、認知負擔管理
35Motor A11y（動作無障礙）35-motor-a11y🌱大點擊區（44×44px）、避免 hover-only、避免精細手勢、長按 vs 短按
36低視能考量36-low-vision🌱放大鏡使用者、對比、不要依賴顏色傳遞訊息

🔧 小實作注意事項

#主題SlugStage大綱
37鍵盤導航實戰37-keyboard-nav-practice🌱從 Tab only 跑一次整個網站、找出所有不可達元素、修復 flow
38Focus Trap 從零實作38-focus-trap-implementation🌱跟 W02 walkthrough 連動、純 JS 版本、React 版本
39Skip Link 實戰39-skip-link-practice🌱不要 display: none、focus-visible only、SPA route change 的 focus 恢復
40Live Region 實戰（toast / form error）40-live-region-practice🌱aria-live 時機、debounce 避免 screen reader 轟炸
41Contrast 檢查工作流41-contrast-workflow🌱Figma / Chrome DevTools / axe、design token 層級檢查
42axe-core 整合（dev + CI）42-axe-integration🌱瀏覽器擴充、@axe-core/react、CI fail-on-violation
43手動 Screen Reader 測試43-manual-screen-reader-testing🌱VoiceOver（免費，Mac）練習路徑、NVDA（免費，Windows）、測試 checklist
44Modal A11y 完整實作44-modal-a11y-full-impl🌱從 open 到 close 完整 a11y 檢查、跨 framework（React / Vue）

💣 Anti-pattern

#主題SlugStage大綱
45A11y Anti-patterns45-a11y-anti-patterns🌱aria-hidden 在 focusable 元素、role="button" 但不能用鍵盤、div onClick、只靠顏色傳訊息、tabindex 亂用、Modal 沒 focus trap、placeholder 當 label、alt 全寫「圖片」、tooltip 只有 hover

🧰 對應檢查工具

#主題SlugStage大綱
46A11y 工具生態46-a11y-tooling🌱axe DevTools / Lighthouse / WAVE / Accessibility Insights、@axe-core/react、eslint-plugin-jsx-a11y、Pa11y、Storybook a11y addon

📎 補充

#主題SlugStage大綱
S01Inclusive Design 思維s01-inclusive-design🌱Microsoft Inclusive Design Toolkit、永久 / 暫時 / 場景障礙三層、跟 a11y 的邊界
S02殘障使用者研究s02-disability-user-research🌱怎麼訪談殘障使用者、remote usability testing with screen readers、倫理考量
S03法規對應實務s03-a11y-compliance🌱ADA 訴訟案例、EN 301 549、台灣無障礙網頁 A / AA 認證流程
S04A11y Statement（無障礙聲明）s04-accessibility-statement🌱法規要求、範本、維護流程
S05認證考試（IAAP CPACC / WAS）s05-iaap-certifications🌱國際 a11y 專業證照、學習路徑

章節進度統計

  • 知識主題：46 + 5 補充 = 51 項
  • 🌿 growing：0
  • 🌱 seed：51

跨系列連結

  • → frontend/html/ CH1（語意化標籤、ARIA vs 原生語意）
  • → frontend/css/ CH2（對比、prefers-reduced-motion / prefers-contrast）
  • → frontend/testing/ CH10（A11y 自動測試整合）
  • → frontend/design-system/ CH14（DS 建立 a11y 基礎元件）
  • → seo/ 系列（語意化 HTML 共享）
  • → standards/ 系列（好的前端專案 a11y 標準）

關係圖譜

反向連結

  • ROADMAP

    Walkthroughs 詳細 ROADMAP 計畫文件，不會被 Quartz 渲染（無 frontmatter）。 公...