accessibility-checker

# Accessibility Checker

Validate web accessibility and ensure WCAG compliance.

## Quick Start

Use semantic HTML, add ARIA labels, ensure keyboard navigation, test color contrast, validate with axe or Lighthouse.

## Instructions

### WCAG Compliance Levels

**Level A (minimum):**
- Basic accessibility
- Must meet for legal compliance

**Level AA (recommended):**
- Standard for most websites
- Includes contrast requirements
- Government sites requirement

**Level AAA (enhanced):**
- Highest level
- Not required for all content
- Best practices

### Common Accessibility Issues

**1. Missing alt text:**
```jsx
// Bad
<img src="logo.png" />

// Good
<img src="logo.png" alt="Company Logo" />

// Decorative images
<img src="decoration.png" alt="" />
```

**2. Poor color contrast:**
```css
/* Bad: 2.5:1 contrast */
color: #777;
background: #fff;

/* Good: 4.5:1 contrast (AA) */
color: #595959;
background: #fff;

/* Better: 7:1 contrast (AAA) */
color: #333;
background: #fff;
```

**3. Missing form labels:**
```jsx
// Bad
<input type="text" placeholder="Name" />

// Good
<label htmlFor="name">Name</label>
<input type="text" id="name" />

// Or with aria-label
<input type="text" aria-label="Name" />
```

**4. No keyboard navigation:**
```jsx
// Bad: onClick on div
<div onClick={handleClick}>Click me</div>

// Good: Use button
<button onClick={handleClick}>Click me</button>

// Or make div focusable
<div
  role="button"
  tabIndex={0}
  onClick={handleClick}
  onKeyPress={(e) => e.key === 'Enter' && handleClick()}
>
  Click me
</div>
```

**5. Missing ARIA labels:**
```jsx
// Bad: Icon button without label
<button><CloseIcon /></button>

// Good: Add aria-label
<button aria-label="Close dialog">
  <CloseIcon />
</button>
```

### Semantic HTML

**Use proper elements:**
```jsx
// Bad
<div onClick={handleClick}>Submit</div>

// Good
<button onClick={handleClick}>Submit</button>

// Bad
<div className="heading">Title</div>

// Good
<h1>Title</h1>
```

**Heading hierarchy:**
`