メニュー
評估與改善介面、內容與互動的無障礙品質,使產品更符合 WCAG 與包容性設計原則。當任務涉及對比度、鍵盤操作、語意化、表單可用性、螢幕閱讀器支援或 a11y 檢查時使用。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
收斂洞察、界定問題、優先順序與成功指標，並確認限制條件（含可及性/a11y）。
蒐集使用者洞察、執行訪談並萃取人物誌與需求背景，建立對目標族群的同理心。
發散解法、繪製線框並探索視覺方向；內含 20 種 UI 風格參考以快速收斂。
將優選解法轉成可操作原型，設定互動、轉場與狀態，為測試與示範做準備。
建立與維護設計系統、Design Tokens、元件規範與文件結構,提升產品一致性與跨團隊協作效率。當任務涉及元件庫、樣式規範、token、文件化、系統治理或跨產品一致性時使用。
規劃資訊架構、內容層級與導航結構,讓使用者更容易理解與找到資訊。當任務涉及網站地圖、內容分類、導航重組、卡片分類、tree testing 或大型內容結構設計時使用。
| name | accessibility-design |
| description | 評估與改善介面、內容與互動的無障礙品質,使產品更符合 WCAG 與包容性設計原則。當任務涉及對比度、鍵盤操作、語意化、表單可用性、螢幕閱讀器支援或 a11y 檢查時使用。 |
| license | MIT |
| metadata | {"author":"goodux","version":"1.0.0","category":"accessibility","language":"zh-TW"} |
檢查並改善介面的可感知、可操作、可理解與穩健性,讓產品更符合 WCAG 與真實使用限制。
design-system: 把無障礙規範沉澱到元件與 token 中usability-testing: 邀請不同能力的使用者驗證改善方案wireframing: 在早期調整版面與流程避免後期返工prototyping: 模擬焦點流、錯誤回饋與狀態變化# A11y 檢查結果
- 目標標準: WCAG 2.1 AA
- 高風險問題: 焦點不明顯、錯誤訊息未被朗讀、表單缺 label
修正建議:
- 所有按鈕加入可見 focus 樣式
- 錯誤訊息與欄位透過 aria-describedby 關聯
- 圖示按鈕補 aria-label
本技能提供完整的無障礙設計範例庫，請參考 examples.yaml：
使用方式：使用檢查清單逐項檢查，參考 ARIA 模式實作無障礙元件。
TEMPLATE.md，確認欄位結構、最小必要欄位、品質標準與驗證方式。examples.yaml，從既有檢查清單、ARIA 模式、測試方式與問題解法中選取最適合的內容。TEMPLATE.md 的格式與命名規則，避免建立重複或標準不一致的檢查項。TEMPLATE.md 的格式要求，其次再引用 examples.yaml 的內容細節。