# Accessibility Auditor
Comprehensive guidance for creating accessible web experiences that comply with WCAG standards and serve users of all abilities effectively.
## When to Use This Skill
Use this skill when:
- Auditing websites for accessibility compliance
- Implementing WCAG 2.1 Level AA or AAA standards
- Fixing accessibility violations and errors
- Testing with screen readers (NVDA, JAWS, VoiceOver)
- Ensuring keyboard navigation works correctly
- Implementing ARIA attributes and landmarks
- Preparing for ADA or Section 508 compliance audits
- Designing inclusive user experiences
## WCAG 2.1 Principles (POUR)
### 1. Perceivable
Users must be able to perceive the information being presented.
### 2. Operable
Users must be able to operate the interface.
### 3. Understandable
Users must be able to understand the information and interface.
### 4. Robust
Content must be robust enough to work with current and future technologies.
## Common Accessibility Issues & Fixes
### 1. Missing Alt Text for Images
**❌ Problem:**
```html
```
**✅ Solution:**
```html
```
**Rules:**
- Informative images: Describe the content/function
- Decorative images: Use empty alt (alt="")
- Functional images: Describe the action
- Complex images: Provide detailed description nearby
### 2. Low Color Contrast
**❌ Problem:**
```css
/* Contrast ratio 2.5:1 - Fails WCAG */
.text {
color: #767676;
background: #ffffff;
}
```
**✅ Solution:**
```css
/* Contrast ratio 4.5:1+ - Passes AA */
.text {
color: #595959;
background: #ffffff;
}
/* Contrast ratio 7:1+ - Passes AAA */
.text-high-contrast {
color: #333333;
background: #ffffff;
}
```
**Requirements:**
- Normal text (< 18px): 4.5:1 minimum (AA), 7:1 enhanced (AAA)
- Large text (≥ 18px or ≥ 14px bold): 3:1 minimum (AA), 4.5:1 enhanced (AAA)
- UI components and graphics: 3:1 minimum
### 3. Non-Semantic HTML
**❌ Problem:**
```html
```
**✅ Solution:**
```html
