wcag-aria-lookup

# WCAG & ARIA Lookup

Quick lookup for WCAG 2.1 AA criteria and WAI-ARIA patterns with official W3C references.

## Lookup Workflow

1. **Identify the query type**:
   - WCAG criterion (e.g., "contrast", "1.4.3", "keyboard")
   - ARIA attribute (e.g., "aria-expanded", "aria-live")
   - ARIA role (e.g., "role=dialog", "role=tablist")
   - Component pattern (e.g., "tabs", "modal", "accordion")

2. **Search the appropriate index**:
   - For WCAG: Read [wcag-index.json](wcag-index.json)
   - For ARIA: Read [aria-index.json](aria-index.json)

3. **Return results**:
   - Summary (1-2 sentences)
   - Official W3C URL
   - Quick reference URL (if available)

4. **For detailed implementation**:
   - Suggest fetching the official URL
   - Or reference WAI-ARIA Authoring Practices

## Response Format

When returning lookup results, use this format:

```
### [Criterion/Pattern Name]

**Summary**: [1-2 sentence explanation]

**Key Requirements**:
- [Requirement 1]
- [Requirement 2]

**Official Reference**: [URL]
**Quick Reference**: [URL] (if applicable)
```

## Quick Reference

### WCAG 2.1 AA - Most Common Issues

| ID | Name | Key Point |
|----|------|-----------|
| 1.1.1 | Non-text Content | All images need alt text |
| 1.4.3 | Contrast | 4.5:1 normal, 3:1 large text |
| 2.1.1 | Keyboard | All interactive elements keyboard accessible |
| 2.4.7 | Focus Visible | Focus indicator must be visible |
| 4.1.2 | Name, Role, Value | Custom widgets need ARIA |

### ARIA - First Rule

> Don't use ARIA if native HTML works.

```html
<!-- Prefer native HTML -->
<button>Submit</button>           <!-- Not: <div role="button"> -->
<input type="checkbox">           <!-- Not: <div role="checkbox"> -->
```

### Common ARIA Patterns

| Pattern | Key Roles | Key Attributes |
|---------|-----------|----------------|
| Dialog | `dialog` | `aria-modal`, `aria-labelledby` |
| Tabs | `tablist`, `tab`, `tabpanel` | `aria-selected`, `aria-controls` |
| Accordion | - | `aria-expanded`, `aria-controls` |