accessibility
WCAG 2.2 접근성 문제 감사 및 수정
웹 접근성 문제는 사용자들이 사이트를 떠나게 만듭니다. 이 스킬은 WCAG 2.2 지침과 코드 패턴을 제공하여 장애인을 포함한 모든 사람이 콘텐츠에 접근할 수 있도록 합니다.
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「accessibility」。 <button><svg>icon</svg></button>
預期結果:
Issue: Button lacks accessible name for screen readers.
Fix: Add aria-label or visible text.
```html
<button aria-label="Close menu">
<svg aria-hidden="true">icon</svg>
</button>
```
正在使用「accessibility」。 Navigation menu with keyboard trap
預期結果:
Issue: Keyboard focus is trapped in the dropdown menu.
Fix: Add Escape key handler and proper focus management.
```javascript
dropdown.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeDropdown();
});
```
正在使用「accessibility」。 Form without labels
預期結果:
Issue: Input fields lack programmatic labels.
Fix: Add explicit label associations.
```html
<label for="email">Email address</label>
<input type="email" id="email" autocomplete="email">
```
安全審計
低風險Static analysis flagged 147 potential issues, but all findings are FALSE POSITIVES. The scanner misidentified markdown documentation patterns (code blocks, WCAG criterion numbers, relative paths) as security vulnerabilities. This is a pure documentation skill with no executable code, network calls, or credential handling.
中風險問題 (1)
低風險問題 (1)
品質評分
你能建構什麼
접근성 코드 리뷰
WCAG 2.2 지침에 기반하여 접근성 문제를 파악하고 수정 제안
접근성 감사 보고서
수정 예시와 함께 심각도 수준의 접근성 문제에 대한 우선순위 보고서 생성
접근성 컴포넌트 구현
적절한 ARIA 속성, 키보드 지원 및 포커스 관리가 포함된 접근성 UI 컴포넌트 생성
試試這些提示
Check this HTML snippet for accessibility issues: [paste HTML here]
Audit the following page content for WCAG 2.2 AA compliance and list all issues with severity levels and fix suggestions: [paste HTML content]
Implement an accessible [component type, e.g., modal/dropdown/tabs] following WCAG 2.2 guidelines. Include keyboard navigation, ARIA attributes, and focus management.
The following component has [specific issue]. Fix it to meet WCAG 2.2 AA requirements: [paste component code]
最佳實務
- 가능하면 ARIA를 추가하기 전에 네이티브 HTML 요소(button, nav, main)를 사용
- Tab 키를 눌러 페이지 처음부터 끝까지 키보드 내비게이션 테스트
- 모든 대화형 요소에 시각적 포커스 표시기가 있는지 확인
避免
- 네이티브 <button> 요소 대신 div에 role='button' 사용
- 대체 포커스 표시를 제공하지 않고 outline:focus 스타일 제거
- 텍스트나 아이콘 대안 없이 색상만으로 정보 전달 의존