web-accessibility

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

<!-- 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