Web Accessibility

This skill provides comprehensive web accessibility analysis and remediation, focusing on WCAG compliance, screen reader compatibility, and inclusive design.

When to Use This Skill

• •When conducting WCAG compliance audits
• •When testing screen reader compatibility
• •When validating keyboard navigation
• •When analyzing color contrast
• •When ensuring inclusive design
• •When remediating accessibility issues

What This Skill Does

1. •WCAG Compliance: Assesses compliance with WCAG 2.1/2.2 (A, AA, AAA)
2. •Screen Reader Testing: Validates semantic HTML and ARIA usage
3. •Keyboard Navigation: Tests keyboard accessibility and focus management
4. •Color Contrast: Analyzes color contrast ratios
5. •Alternative Text: Evaluates alt text and media accessibility
6. •Form Accessibility: Validates form labels and error handling

How to Use

Audit Accessibility

Conduct a WCAG compliance audit of this website

Test keyboard navigation and screen reader compatibility

Specific Analysis

Check color contrast ratios and suggest improvements

WCAG Standards

Level A (Minimum)

• •Text alternatives for images
• •Captions for videos
• •Keyboard accessible
• •No seizure-inducing content
• •Proper heading structure

Level AA (Recommended)

• •Color contrast ratio 4.5:1 (text)
• •Resizable text up to 200%
• •Multiple navigation methods
• •Consistent navigation
• •Error identification

Level AAA (Enhanced)

• •Color contrast ratio 7:1 (text)
• •Sign language interpretation
• •Extended audio descriptions
• •No timing restrictions
• •Context-sensitive help

Examples

Example 1: WCAG Audit

Input: Audit homepage for WCAG compliance

Output:

## Accessibility Audit: Homepage

### Critical Issues (Level A)

**1. Missing Alt Text**
- **Location**: Hero image (line 45)
- **Issue**: Image has no alt attribute
- **Fix**: Add descriptive alt text
```html
<!-- Before -->
<img src="hero.jpg">

<!-- After -->
<img src="hero.jpg" alt="Team collaborating on project management dashboard">

2. Missing Form Labels

• •Location: Email input (line 78)
• •Issue: Input has no associated label
• •Fix: Add proper label

<!-- Before -->
<input type="email" id="email">

<!-- After -->
<label for="email">Email Address</label>
<input type="email" id="email" aria-required="true">

Warnings (Level AA)

3. Color Contrast

• •Location: Button text (line 92)
• •Issue: Contrast ratio 3.2:1 (needs 4.5:1)
• •Fix: Darken text color

## Best Practices

### Accessibility Guidelines

1. **Semantic HTML**: Use proper HTML elements
2. **ARIA When Needed**: Use ARIA for complex interactions
3. **Keyboard Access**: Ensure all functionality is keyboard accessible
4. **Color Contrast**: Meet WCAG contrast requirements
5. **Testing**: Test with screen readers and keyboard only

## Related Use Cases

- WCAG compliance audits
- Screen reader testing
- Keyboard navigation validation
- Color contrast analysis
- Inclusive design implementation