技能 fixing-accessibility
♿
fixing-accessibility
安全
修正無障礙問題
無障礙問題可能會讓身心障礙使用者無法使用您的產品。此技能針對 UI 元件中常見的無障礙問題,提供清楚的規則和實用的修正方法。
支援: Claude Codex Code(CC)
1
下載技能 ZIP
2
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
3
開啟並開始使用
測試它
正在使用「fixing-accessibility」。 /fixing-accessibility button.jsx
預期結果:
- Violation: Icon button lacks accessible name (line 5)
- Why it matters: Screen reader users cannot identify the button action
- Fix: Add aria-label or use aria-labelledby to provide accessible name
正在使用「fixing-accessibility」。 How do I make a modal dialog accessible?
預期結果:
- Key requirements for accessible modals:
- 1. Trap focus inside the dialog while open
- 2. Restore focus to the trigger element on close
- 3. Set initial focus on the first interactive element
- 4. Close on Escape key press
- 5. Ensure proper aria-modal and role='dialog' attributes
安全審計
安全v1 • 2/16/2026
All static findings are false positives. The skill is a benign accessibility guidelines document containing slash commands for invoking the skill and technical terms related to accessibility (aria-invalid, aria-describedby). No actual security risks detected.
1
已掃描檔案
120
分析行數
0
發現項
1
審計總數
未發現安全問題
偵測到的模式
False Positive: External Commands DetectionFalse Positive: Weak Cryptographic AlgorithmFalse Positive: System Reconnaissance
審計者: claude
品質評分
38
架構
100
可維護性
85
內容
50
社群
100
安全
83
規範符合性
你能建構什麼
將無障礙規則套用至新 UI
在建立新按鈕、表單或對話方塊時,呼叫此技能以確保所有工作從一開始就遵循無障礙最佳實踐。
審查現有程式碼的問題
對現有 UI 程式碼執行此技能,以識別無障礙違規事項、了解其影響,並獲得針對性的修正建議。
學習無障礙最佳實踐
使用此技能作為參考指南,學習鍵盤存取、焦點管理、ARIA 使用方式和語意 HTML。
試試這些提示
套用至目前工作
/fixing-accessibility Apply these constraints to any UI work in this conversation.
審查特定檔案
/fixing-accessibility <file> Review the file against all rules below and report violations (quote the exact line or snippet), explain why it matters (one short sentence), and provide a concrete fix (code-level suggestion).
修正按鈕
How do I make an icon-only button accessible?
修正表單錯誤
How should I associate error messages with form fields for accessibility?
最佳實務
- 偏好最小化、針對性的修正而非大規模重構,以降低風險
- ���新增 ARIA 屬性之前,優先使用原生 HTML 元素
- 套用修正後,手動測試鍵盤導覽
- 回報違規事項時引用確切的程式碼片段
避免
- 請勿將 div 或 span 作為按鈕使用,除非提供完整的鍵盤支援
- 當原生語意已能解決問題時,請勿新增 aria 屬性
- 請勿在未提供可見替代方案的情況下移除焦點外框
- 請勿僅依賴顏色來傳達狀態或意義
常見問題
修正無障礙問題的優先順序為何?
優先順序為:無障礙名稱(關鍵)、鍵盤存取(關鍵)、焦點與對話方塊(關鍵)、語意(高)、表單與錯誤(高)、通知(中高)、對比與狀態(中)、媒體與動態(中低)、以及工具邊界(關鍵)。
此技能會自動修正無障礙問題嗎?
否。此技能會回報違規事項並附上說明和修正建議,但您必須手動將修正套用至程式碼。
什麼是無障礙名稱?為什麼它很重要?
無障礙名稱是螢幕閱讀器為互動元素朗讀的內容。每個按鈕、連結和輸入欄位都必須具有有意義的無障礙名稱,讓視障使用者能夠理解和導覽介面。
何時應該使用 ARIA 而非原生 HTML?
請務必優先使用具有內建無障礙功能的原生 HTML 元素。僅在原生元素無法表達所需的語意時才使用 ARIA。請記住:如果您可以使用原生 button,就不要使用帶有 role='button' 的 div。
如何測試我的無障礙修正是否有效?
使用純鍵盤導覽(Tab、Shift+Tab、Enter、Escape)、螢幕閱讀器測試(NVDA、VoiceOver)和瀏覽器無障礙檢查工具。此技能提供指引,但無法取代手動測試。
什麼是對話方塊中的焦點陷阱?
焦點陷阱是指在強制回應對話方塊開啟時,將鍵盤焦點保持在對話方塊內。使用者不應能夠將焦點移至對話方塊後方的元素。當對話方塊關閉時,焦點必須回到開啟它的元素。