Habilidades fixing-accessibility
♿

fixing-accessibility

Seguro

修正無障礙問題

無障礙問題可能會讓身心障礙使用者無法使用您的產品。此技能針對 UI 元件中常見的無障礙問題，提供清楚的規則和實用的修正方法。

Soporta: Claude Codex Code(CC)
📊 71 Adecuado
1

Descargar el ZIP de la skill

2

Subir en Claude

Ve a Configuración → Capacidades → Skills → Subir skill

3

Activa y empieza a usar

Pruébalo

Usando "fixing-accessibility". /fixing-accessibility button.jsx

Resultado esperado:

  • 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

Usando "fixing-accessibility". How do I make a modal dialog accessible?

Resultado esperado:

  • 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

Auditoría de seguridad

Seguro
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
Archivos escaneados
120
Líneas analizadas
0
hallazgos
1
Auditorías totales
No se encontraron problemas de seguridad

Patrones detectados

False Positive: External Commands DetectionFalse Positive: Weak Cryptographic AlgorithmFalse Positive: System Reconnaissance
Auditado por: claude

Puntuación de calidad

38
Arquitectura
100
Mantenibilidad
85
Contenido
41
Comunidad
100
Seguridad
83
Cumplimiento de la especificación

Lo que puedes crear

將無障礙規則套用至新 UI

在建立新按鈕、表單或對話方塊時，呼叫此技能以確保所有工作從一開始就遵循無障礙最佳實踐。

審查現有程式碼的問題

對現有 UI 程式碼執行此技能，以識別無障礙違規事項、了解其影響，並獲得針對性的修正建議。

學習無障礙最佳實踐

使用此技能作為參考指南，學習鍵盤存取、焦點管理、ARIA 使用方式和語意 HTML。

Prueba estos prompts

套用至目前工作 
/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?

Mejores prácticas

  • 偏好最小化、針對性的修正而非大規模重構，以降低風險
  • ���新增 ARIA 屬性之前，優先使用原生 HTML 元素
  • 套用修正後，手動測試鍵盤導覽
  • 回報違規事項時引用確切的程式碼片段

Evitar

  • 請勿將 div 或 span 作為按鈕使用，除非提供完整的鍵盤支援
  • 當原生語意已能解決問題時，請勿新增 aria 屬性
  • 請勿在未提供可見替代方案的情況下移除焦點外框
  • 請勿僅依賴顏色來傳達狀態或意義

Preguntas frecuentes

修正無障礙問題的優先順序為何？
優先順序為：無障礙名稱（關鍵）、鍵盤存取（關鍵）、焦點與對話方塊（關鍵）、語意（高）、表單與錯誤（高）、通知（中高）、對比與狀態（中）、媒體與動態（中低）、以及工具邊界（關鍵）。
此技能會自動修正無障礙問題嗎？
否。此技能會回報違規事項並附上說明和修正建議，但您必須手動將修正套用至程式碼。
什麼是無障礙名稱？為什麼它很重要？
無障礙名稱是螢幕閱讀器為互動元素朗讀的內容。每個按鈕、連結和輸入欄位都必須具有有意義的無障礙名稱，讓視障使用者能夠理解和導覽介面。
何時應該使用 ARIA 而非原生 HTML？
請務必優先使用具有內建無障礙功能的原生 HTML 元素。僅在原生元素無法表達所需的語意時才使用 ARIA。請記住：如果您可以使用原生 button，就不要使用帶有 role='button' 的 div。
如何測試我的無障礙修正是否有效？
使用純鍵盤導覽（Tab、Shift+Tab、Enter、Escape）、螢幕閱讀器測試（NVDA、VoiceOver）和瀏覽器無障礙檢查工具。此技能提供指引，但無法取代手動測試。
什麼是對話方塊中的焦點陷阱？
焦點陷阱是指在強制回應對話方塊開啟時，將鍵盤焦點保持在對話方塊內。使用者不應能夠將焦點移至對話方塊後方的元素。當對話方塊關閉時，焦點必須回到開啟它的元素。

Detalles del desarrollador

Autor

ibelick

Licencia

MIT

Repositorio

https://github.com/ibelick/ui-skills/tree/main/skills/fixing-accessibility/

Ref.

main

Estructura de archivos

📄 SKILL.md