candy14432 無障礙設計法則
任務定義
檢查並改善介面的可感知、可操作、可理解與穩健性,讓產品更符合 WCAG 與真實使用限制。
何時使用
- 任何數位產品的設計階段
- 需要符合法規要求時(如 WCAG 2.1)
- 擴大目標使用者群體時
- 改善產品整體可用性時
必要輸入
- 介面畫面、元件或設計稿
- 主要操作流程與互動方式
- 目前已知的無障礙問題
- 目標法規或 WCAG 等級
- 裝置與使用情境限制
預期輸出
- 無障礙風險清單
- 版面、內容與互動改善建議
- WCAG 對照檢查點
- 可驗證的測試清單
- 實作注意事項
完成條件
- 已指出主要無障礙風險與其對應的 WCAG 原則或檢查點
- 已提供設計與實作層級都可執行的改善建議
- 已涵蓋鍵盤操作、焦點狀態、語意結構與對比度等核心面向
- 已明確說明哪些問題屬高風險並需優先修正
- 已留下可供設計、前端或 QA 驗證的檢查方式
不適用情境
- 只想做一般視覺美化,不是 a11y 任務
- 沒有畫面、元件或流程可供檢查
- 已知問題其實是資訊架構或內容策略,不應全部歸因為無障礙
常見誤用
- 只檢查對比度,忽略鍵盤流程、語意與錯誤回饋
- 把無障礙當成開發收尾工作,而非設計基準
- 使用 ARIA 補救所有問題,卻沒有先修正原生語意結構
- 只列出規範條文,沒有轉成具體介面修正建議
- 沒有區分高風險問題與次要優化項目
觸發條件
- 使用者提到「無障礙」、「a11y」、「WCAG」、「鍵盤操作」、「對比度」、「螢幕閱讀器」
- 任務需要檢查表單、按鈕、焦點狀態或語意標記
- 任務需要把 UI 做得更包容、可及或符合法規
高複雜度觸發
- 任務涉及企業後台、資料密集表格、複雜表單、多步驟流程或高頻操作介面
- 使用者提到不同角色、不同裝置、不同使用能力或法規合規要求
- 問題包含鍵盤流程中斷、狀態提示不足、螢幕閱讀器難以理解、表單錯誤難以修正
- 團隊需要同時兼顧效率、合規、可操作性與大量資訊呈現
必要澄清
- 這個介面最關鍵的任務是什麼?哪些使用者最常使用它?
- 是否有法規、企業採購或客戶合約要求特定 WCAG 等級?
- 使用者會使用哪些輔助技術?例如螢幕閱讀器、鍵盤操作、放大模式
- 哪些元件最複雜?例如資料表格、日期選擇器、拖曳、圖表或多步驟表單
- 目前已知的無障礙痛點是什麼?是看不見、聽不到、點不到還是難以理解?
- 這次要先做設計檢查、實作建議還是驗證測試清單?
可搭配技能
design-system: 把無障礙規範沉澱到元件與 token 中usability-testing: 邀請不同能力的使用者驗證改善方案wireframing: 在早期調整版面與流程避免後期返工prototyping: 模擬焦點流、錯誤回饋與狀態變化
執行步驟
- 定義標準: 先確認目標等級,預設以 WCAG 2.1 AA 為基準。
- 找高風險問題: 優先檢查對比度、鍵盤操作、焦點、語意、表單、錯誤回饋。
- 產出修正建議: 每個問題都要對應具體介面修正與驗證方式。
- 做手動驗證: 只用鍵盤操作,檢查焦點順序、螢幕閱讀器可讀性與縮放表現。
- 建立長期規則: 把高頻 a11y 規則沉澱到元件與設計規範中。
執行檢查
- 已定義目標等級與適用範圍
- 已檢查對比度、焦點、鍵盤與語意結構
- 已補齊表單標籤、錯誤訊息與狀態回饋
- 已規劃手動測試方式
- 已標記高風險問題優先修正
精簡範例輸出
# A11y 檢查結果
- 目標標準: WCAG 2.1 AA
- 高風險問題: 焦點不明顯、錯誤訊息未被朗讀、表單缺 label
修正建議:
- 所有按鈕加入可見 focus 樣式
- 錯誤訊息與欄位透過 aria-describedby 關聯
- 圖示按鈕補 aria-label
範例資料庫
本技能提供完整的無障礙設計範例庫，請參考 examples.yaml：
- WCAG 檢查清單：可感知、可操作、可理解、穩健性四大原則的詳細檢查項目
- ARIA 模式：按鈕、對話框、選單、標籤頁等常見元件的 ARIA 使用範例
- 螢幕閱讀器測試：NVDA、JAWS、VoiceOver 等工具使用指南
- 常見問題：低對比度、缺少 alt 文字等問題的解決方案
- 測試工具：自動化和手動測試工具清單
使用方式：使用檢查清單逐項檢查，參考 ARIA 模式實作無障礙元件。
資料使用規則
- 產出內容前，先閱讀
TEMPLATE.md，確認欄位結構、最小必要欄位、品質標準與驗證方式。 - 接著再閱讀
examples.yaml，從既有檢查清單、ARIA 模式、測試方式與問題解法中選取最適合的內容。 - 若要新增資料，優先沿用
TEMPLATE.md的格式與命名規則，避免建立重複或標準不一致的檢查項。 - 最終輸出必須優先對齊
TEMPLATE.md的格式要求，其次再引用examples.yaml的內容細節。