背景與動機
許多網頁視覺精美，但在拿掉滑鼠、僅依賴鍵盤或螢幕閱讀器時卻寸步難行。挑選自己或開源的練習網頁，對照 WCAG 2.1 與數發部無障礙規範，找出鍵盤焦點陷阱、缺乏語意與對比度問題，進行標準化無障礙重構（Refactoring）。
為什麼是現在
隨著歐盟無障礙法案（EAA）生效與企業對 ESG、數位共融的重視，網站無障礙（a11y）已從「選配」變成前端工程師與 UI 設計師的「高含金量必備技能」。本專案帶你跳脫單純切版，深入真實操作盲點與語意化結構，產出具備工程思維的 a11y 改造作品集。
目標
針對一處網頁進行鍵盤與輔具友善度健檢，鎖定 3 項關鍵痛點（如焦點管理、Skip Link、表單 ARIA 標籤）進行程式碼重構，產出前後對照的 Live Demo 與一份技術改造報告。
成果產出
成果 01無障礙重構前後對照網頁（支援 GitHub Pages 線上預覽）前端互動原型
成果 02WCAG 對齊之 a11y 健檢評估與重構技術報告（含 Git Diff 差異與鍵盤操作錄影）技術報告
執行期程
- 第 1 週選定一頁包含導覽列、表單與圖片的 HTML/CSS 頁面，完全拔除滑鼠進行「純鍵盤走訪測試（Tab, Shift+Tab, Enter, Space）」，並搭配 Lighthouse 跑出基線分數，標出焦點遺失與跳頁順序錯亂點。完成標準完成本機網頁基準測試，記錄至少 3 項鍵盤操作阻塞點。佐證資料操作走訪手記、焦點路徑卡頓截圖與初始 Lighthouse 報告。
- 第 2 週對照台灣「網站無障礙規範 2.1」與 WCAG 準則，為 3 項核心問題定位合規條文（如 2.1.1 鍵盤操作、2.4.7 可見焦點、1.3.1 資訊與關聯），撰寫重構策略草案。完成標準完成 3 項問題的 WCAG 條文對齊、重現步驟與技術重構計畫書。佐證資料問題清單、WCAG 對照表與擬修訂之 HTML/CSS 虛擬碼。
- 第 3 週進行程式碼重構：實作 Skip Link（跳至主要內容）、客製化清晰 `:focus-visible` 樣式、補齊語意化標籤（Semantic Tags）與表單 `label`/`aria-*` 屬性，並再次進行純鍵盤走訪驗證。完成標準完成程式碼重構，3 項鍵盤障礙全數修復且無樣式跑版。佐證資料Git Commit 差異對照（Diff）與無滑鼠操作實測錄影。
- 第 4 週重新執行自動化檢測對比重構前後成效；將成果部署至 GitHub Pages，撰寫一頁式技術報告，明確標註測試瀏覽器、檢驗範圍與未覆蓋的輔具情境。完成標準完成線上 Demo 部署、前後對照技術總結與專案複盤。佐證資料GitHub Pages 線上預覽網址、前後對照技術報告（Markdown/PDF）與專案回顧。
需要的佐證資料
- 原始頁面鍵盤操作阻塞紀錄與初始檢測報告。
- WCAG 成功準則對齊清單與重構策略筆記。
- Git 程式碼修訂差異（Diff）與鍵盤操作對比錄影（GIF/MP4）。
- 線上展示頁面（GitHub Pages）與 a11y 技術總結報告。
核心實作技能
無障礙測試前端開發HTMLCSS
建議具備的基礎技能
具備 HTML 語意標籤與 CSS 基礎概念能使用瀏覽器開發者工具（DevTools）並開啟本機專案
特別適合這樣的你
想累積前端開發（Frontend）、無障礙工程（a11y）、UI/UX 設計或網頁重構作品集的自學者與學生。
建議規模與分工
AI 草擬 · 已人工審閱建議人數個人每人每週投入5 小時
建議個人獨立完成。若邀請同學閉眼或以純鍵盤盲測提供回饋，可在技術報告致謝中說明貢獻。
| 成員 | 角色 | 負責的事 |
|---|---|---|
| A | 前端開發與無障礙工程師 | 負責無障礙體驗走訪測試、WCAG 條文對齊、語意化重構、焦點管理樣式撰寫與線上成果部署。 |
人數與分工可於建立時調整
執行條件
地區與建議使用語言
- 地區
- 通用議題
- 主要建議語言
- 繁體中文
- 其他建議語言
- 英文
- 語言使用說明
- 以繁體中文撰寫技術報告；無障礙專有名詞（如 a11y, WCAG, Focus Trap, Semantic HTML）建議保留英文縮寫。
建議語言非參與條件
- 語言與資料獲取
- 個人擁有原始碼之切版練習作品，或採用開源授權（如 MIT）之靜態網頁範本。
- 實施邊界
- 為特定頁面之鍵盤與基礎語意無障礙重構實作，不代表通過國家級無障礙標章全站檢驗認證。
- 場域／資料權限
- 本機開發環境（VS Code / 瀏覽器）。
- 預估費用
- 約 NT$ 0（使用既有電腦、免費開源編輯器與 GitHub 免費部署服務）
- 工具設備
- VS Code、瀏覽器開發者工具（Lighthouse / axe DevTools）、GitHub Pages、螢幕錄影工具。
不在範圍內
- 不宣稱取得政府官方無障礙標章或全站法律合規背書
- 不涉及大型動態 SPA 複雜狀態管理（聚焦靜態與基礎表單）
- 不進行收費商業代工測試
參考資料
- WebAIM（Utah State University），The WebAIM Million: The 2026 report on the accessibility of the top 1,000,000 home pages，2026，https://webaim.org/projects/million/
- AccessibleEU（European Commission），A new era for inclusion begins: The EAA enters into force，2025，https://accessible-eu-centre.ec.europa.eu/content-corner/news/new-era-inclusion-begins-eaa-enters-force-2025-06-27_en
- 數位發展部 無障礙網路空間服務網，網站無障礙規範 2.1 版，https://accessibility.moda.gov.tw/Accessible/Guide/68
準備好開始了嗎？目標、範圍、期程、分工都可以在下一步進行調整
從這個靈感開始