zhukang
1c7abd81d1
- 310 registry:skill items, 1528 files, 7 categories (hub tags) - registry.json generated by @kortix/registry buildRegistry - nested SKILL.md in sn-da-* renamed SUBSKILL.md (no phantom skills) - provenance + licenses: SOURCES.md
129 lines
4.2 KiB
Markdown
129 lines
4.2 KiB
Markdown
---
|
|
name: accessibility-review
|
|
description: Run a WCAG 2.1 AA accessibility audit on a design or page. Trigger with "audit accessibility", "check a11y", "is this accessible?", or when reviewing a design for color contrast, keyboard navigation, touch target size, or screen reader behavior before handoff.
|
|
argument-hint: "<Figma URL, URL, or description>"
|
|
---
|
|
|
|
# /accessibility-review
|
|
|
|
> If you see unfamiliar placeholders or need to check which tools are connected, see [CONNECTORS.md](../../CONNECTORS.md).
|
|
|
|
Audit a design or page for WCAG 2.1 AA accessibility compliance.
|
|
|
|
## Usage
|
|
|
|
```
|
|
/accessibility-review $ARGUMENTS
|
|
```
|
|
|
|
Audit for accessibility: @$1
|
|
|
|
## WCAG 2.1 AA Quick Reference
|
|
|
|
### Perceivable
|
|
- **1.1.1** Non-text content has alt text
|
|
- **1.3.1** Info and structure conveyed semantically
|
|
- **1.4.3** Contrast ratio >= 4.5:1 (normal text), >= 3:1 (large text)
|
|
- **1.4.11** Non-text contrast >= 3:1 (UI components, graphics)
|
|
|
|
### Operable
|
|
- **2.1.1** All functionality available via keyboard
|
|
- **2.4.3** Logical focus order
|
|
- **2.4.7** Visible focus indicator
|
|
- **2.5.5** Touch target >= 44x44 CSS pixels
|
|
|
|
### Understandable
|
|
- **3.2.1** Predictable on focus (no unexpected changes)
|
|
- **3.3.1** Error identification (describe the error)
|
|
- **3.3.2** Labels or instructions for inputs
|
|
|
|
### Robust
|
|
- **4.1.2** Name, role, value for all UI components
|
|
|
|
## Common Issues
|
|
|
|
1. Insufficient color contrast
|
|
2. Missing form labels
|
|
3. No keyboard access to interactive elements
|
|
4. Missing alt text on meaningful images
|
|
5. Focus traps in modals
|
|
6. Missing ARIA landmarks
|
|
7. Auto-playing media without controls
|
|
8. Time limits without extension options
|
|
|
|
## Testing Approach
|
|
|
|
1. Automated scan (catches ~30% of issues)
|
|
2. Keyboard-only navigation
|
|
3. Screen reader testing (VoiceOver, NVDA)
|
|
4. Color contrast verification
|
|
5. Zoom to 200% — does layout break?
|
|
|
|
## Output
|
|
|
|
```markdown
|
|
## Accessibility Audit: [Design/Page Name]
|
|
**Standard:** WCAG 2.1 AA | **Date:** [Date]
|
|
|
|
### Summary
|
|
**Issues found:** [X] | **Critical:** [X] | **Major:** [X] | **Minor:** [X]
|
|
|
|
### Findings
|
|
|
|
#### Perceivable
|
|
| # | Issue | WCAG Criterion | Severity | Recommendation |
|
|
|---|-------|---------------|----------|----------------|
|
|
| 1 | [Issue] | [1.4.3 Contrast] | 🔴 Critical | [Fix] |
|
|
|
|
#### Operable
|
|
| # | Issue | WCAG Criterion | Severity | Recommendation |
|
|
|---|-------|---------------|----------|----------------|
|
|
| 1 | [Issue] | [2.1.1 Keyboard] | 🟡 Major | [Fix] |
|
|
|
|
#### Understandable
|
|
| # | Issue | WCAG Criterion | Severity | Recommendation |
|
|
|---|-------|---------------|----------|----------------|
|
|
| 1 | [Issue] | [3.3.2 Labels] | 🟢 Minor | [Fix] |
|
|
|
|
#### Robust
|
|
| # | Issue | WCAG Criterion | Severity | Recommendation |
|
|
|---|-------|---------------|----------|----------------|
|
|
| 1 | [Issue] | [4.1.2 Name, Role, Value] | 🟡 Major | [Fix] |
|
|
|
|
### Color Contrast Check
|
|
| Element | Foreground | Background | Ratio | Required | Pass? |
|
|
|---------|-----------|------------|-------|----------|-------|
|
|
| [Body text] | [color] | [color] | [X]:1 | 4.5:1 | ✅/❌ |
|
|
|
|
### Keyboard Navigation
|
|
| Element | Tab Order | Enter/Space | Escape | Arrow Keys |
|
|
|---------|-----------|-------------|--------|------------|
|
|
| [Element] | [Order] | [Behavior] | [Behavior] | [Behavior] |
|
|
|
|
### Screen Reader
|
|
| Element | Announced As | Issue |
|
|
|---------|-------------|-------|
|
|
| [Element] | [What SR says] | [Problem if any] |
|
|
|
|
### Priority Fixes
|
|
1. **[Critical fix]** — Affects [who] and blocks [what]
|
|
2. **[Major fix]** — Improves [what] for [who]
|
|
3. **[Minor fix]** — Nice to have
|
|
```
|
|
|
|
## If Connectors Available
|
|
|
|
If **~~design tool** is connected:
|
|
- Inspect color values, font sizes, and touch targets directly from Figma
|
|
- Check component ARIA roles and keyboard behavior in the design spec
|
|
|
|
If **~~project tracker** is connected:
|
|
- Create tickets for each accessibility finding with severity and WCAG criterion
|
|
- Link findings to existing accessibility remediation epics
|
|
|
|
## Tips
|
|
|
|
1. **Start with contrast and keyboard** — These catch the most common and impactful issues.
|
|
2. **Test with real assistive technology** — My audit is a great start, but manual testing with VoiceOver/NVDA catches things I can't.
|
|
3. **Prioritize by impact** — Fix issues that block users first, polish later.
|