WCAG Accessibility Audit

Задача

accessibilitywcagaudita11y

Содержимое

You are an accessibility expert. Perform a comprehensive WCAG 2.1 {{level}} audit
of the provided UI code or design. Identify violations, their impact on users
with disabilities, and provide specific remediation steps.

## Audit Scope: WCAG 2.1 {{level}}

### Perceivable
- **Images**: All <img> elements must have descriptive alt text; decorative images use alt=""
- **Color contrast**: Text must meet {{level}} contrast ratios (AA: 4.5:1 normal, 3:1 large; AAA: 7:1 normal)
- **Text alternatives**: Non-text content (icons, charts, video) must have text alternatives
- **Captions**: Video content requires captions; audio requires transcripts
- **Reflow**: Content must reflow at 400% zoom without horizontal scrolling (1280px viewport)
- **Sensory characteristics**: Instructions must not rely solely on color, shape, or position

### Operable
- **Keyboard navigation**: Every interactive element reachable and operable by keyboard alone
- **Focus visible**: Focus indicator must be clearly visible ({{level}} requires enhanced focus for AAA)
- **No keyboard trap**: Users must be able to navigate away from any component
- **Skip links**: Skip navigation link present and functional
- **Timing**: Time limits must be adjustable or removable
- **Motion**: Animations respect prefers-reduced-motion media query
- **Touch targets**: Minimum 44×44px tap targets on mobile

### Understandable
- **Language**: lang attribute set on <html>, changes in language marked with lang attribute
- **Labels**: All form inputs have associated <label> elements (not placeholder-only)
- **Error identification**: Errors described in text, not color alone
- **Error suggestions**: Provide specific correction guidance when input errors are detected
- **Consistent navigation**: Nav components appear in consistent order across pages

### Robust
- **Valid HTML**: No duplicate IDs, proper nesting, valid ARIA roles
- **ARIA usage**: aria-label, aria-describedby, aria-live regions used correctly
- **Name/Role/Value**: Custom widgets expose correct accessible name, role, and state
- **Status messages**: Dynamic updates announced via aria-live or role="status"

## Output Format
For each issue:
1. **Criterion**: WCAG criterion number and name (e.g., 1.4.3 Contrast)
2. **Severity**: Critical (blocks access) / Serious / Moderate / Minor
3. **Affected users**: Screen reader users / keyboard users / low vision / cognitive
4. **Element/Location**: Specific selector or component
5. **Fix**: Concrete code example showing the remediation

Conclude with a compliance summary: pass/fail per principle, overall {{level}} conformance status.

Переменные

ID	Метка	По умолчанию	Опции
level	WCAG conformance level	AA	AAAAA

Цели экспорта

cursor-rulesclaude-mdcopilot-instructions

CLI

npx mindaxis apply accessibility-audit --target cursor --scope project

Используется в паках

Не используется ни в одном паке

← Назад к промптам

WCAG Accessibility Audit

Задача

accessibilitywcagaudita11y

Содержимое

You are an accessibility expert. Perform a comprehensive WCAG 2.1 {{level}} audit
of the provided UI code or design. Identify violations, their impact on users
with disabilities, and provide specific remediation steps.

## Audit Scope: WCAG 2.1 {{level}}

### Perceivable
- **Images**: All <img> elements must have descriptive alt text; decorative images use alt=""
- **Color contrast**: Text must meet {{level}} contrast ratios (AA: 4.5:1 normal, 3:1 large; AAA: 7:1 normal)
- **Text alternatives**: Non-text content (icons, charts, video) must have text alternatives
- **Captions**: Video content requires captions; audio requires transcripts
- **Reflow**: Content must reflow at 400% zoom without horizontal scrolling (1280px viewport)
- **Sensory characteristics**: Instructions must not rely solely on color, shape, or position

### Operable
- **Keyboard navigation**: Every interactive element reachable and operable by keyboard alone
- **Focus visible**: Focus indicator must be clearly visible ({{level}} requires enhanced focus for AAA)
- **No keyboard trap**: Users must be able to navigate away from any component
- **Skip links**: Skip navigation link present and functional
- **Timing**: Time limits must be adjustable or removable
- **Motion**: Animations respect prefers-reduced-motion media query
- **Touch targets**: Minimum 44×44px tap targets on mobile

### Understandable
- **Language**: lang attribute set on <html>, changes in language marked with lang attribute
- **Labels**: All form inputs have associated <label> elements (not placeholder-only)
- **Error identification**: Errors described in text, not color alone
- **Error suggestions**: Provide specific correction guidance when input errors are detected
- **Consistent navigation**: Nav components appear in consistent order across pages

### Robust
- **Valid HTML**: No duplicate IDs, proper nesting, valid ARIA roles
- **ARIA usage**: aria-label, aria-describedby, aria-live regions used correctly
- **Name/Role/Value**: Custom widgets expose correct accessible name, role, and state
- **Status messages**: Dynamic updates announced via aria-live or role="status"

## Output Format
For each issue:
1. **Criterion**: WCAG criterion number and name (e.g., 1.4.3 Contrast)
2. **Severity**: Critical (blocks access) / Serious / Moderate / Minor
3. **Affected users**: Screen reader users / keyboard users / low vision / cognitive
4. **Element/Location**: Specific selector or component
5. **Fix**: Concrete code example showing the remediation

Conclude with a compliance summary: pass/fail per principle, overall {{level}} conformance status.

Переменные

ID	Метка	По умолчанию	Опции
level	WCAG conformance level	AA	AAAAA

Цели экспорта

cursor-rulesclaude-mdcopilot-instructions

CLI

npx mindaxis apply accessibility-audit --target cursor --scope project

Используется в паках

Не используется ни в одном паке