135 lines
2.7 KiB
Markdown
135 lines
2.7 KiB
Markdown
# Accessibility Standards
|
|
|
|
**WCAG 2.1 Level AA compliance patterns and best practices**
|
|
|
|
## Core Principles
|
|
|
|
### 1. Perceivable
|
|
- Provide text alternatives for non-text content
|
|
- Provide captions and transcripts for multimedia
|
|
- Create content that can be presented in different ways
|
|
- Make it easier for users to see and hear content
|
|
|
|
### 2. Operable
|
|
- Make all functionality available from keyboard
|
|
- Give users enough time to read and use content
|
|
- Do not design content that causes seizures
|
|
- Help users navigate and find content
|
|
|
|
### 3. Understandable
|
|
- Make text readable and understandable
|
|
- Make content appear and operate in predictable ways
|
|
- Help users avoid and correct mistakes
|
|
|
|
### 4. Robust
|
|
- Maximize compatibility with current and future tools
|
|
|
|
## Implementation Patterns
|
|
|
|
### Semantic HTML
|
|
```html
|
|
<!-- ❌ BAD -->
|
|
<div onClick=handleClick>Click me</div>
|
|
|
|
<!-- ✅ GOOD -->
|
|
<button onClick={handleClick}>Click me</button>
|
|
```
|
|
|
|
### ARIA Labels
|
|
```html
|
|
<button aria-label="Close modal" onClick={onClose}>
|
|
<XIcon />
|
|
</button>
|
|
```
|
|
|
|
### Keyboard Navigation
|
|
- Tab order should be logical
|
|
- Focus indicators must be visible
|
|
- All interactive elements accessible via keyboard
|
|
- Escape key closes modals/menus
|
|
|
|
### Color Contrast
|
|
- Normal text: 4.5:1 minimum
|
|
- Large text (18pt+): 3:1 minimum
|
|
- Interactive elements: 3:1 minimum
|
|
|
|
### Screen Reader Support
|
|
- Use proper heading hierarchy (h1-h6)
|
|
- Provide skip links
|
|
- Label form inputs properly
|
|
- Use live regions for dynamic content
|
|
|
|
## Testing Tools
|
|
|
|
- axe DevTools
|
|
- Pa11y
|
|
- Lighthouse
|
|
- NVDA/JAWS screen readers
|
|
- Keyboard-only navigation testing
|
|
|
|
## Common Patterns
|
|
|
|
### Accessible Forms
|
|
```tsx
|
|
<label htmlFor="email">
|
|
Email Address
|
|
<input
|
|
id="email"
|
|
type="email"
|
|
aria-required="true"
|
|
aria-describedby="email-error"
|
|
/>
|
|
</label>
|
|
{error && (
|
|
<span id="email-error" role="alert">
|
|
{error}
|
|
</span>
|
|
)}
|
|
```
|
|
|
|
### Accessible Modals
|
|
```tsx
|
|
<div
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="dialog-title"
|
|
>
|
|
<h2 id="dialog-title">Modal Title</h2>
|
|
{/* Trap focus within modal */}
|
|
{/* Close on Escape */}
|
|
</div>
|
|
```
|
|
|
|
### Accessible Tables
|
|
```html
|
|
<table>
|
|
<caption>Monthly Sales Data</caption>
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Month</th>
|
|
<th scope="col">Sales</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">January</th>
|
|
<td>0,000</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
```
|
|
|
|
## Checklist
|
|
|
|
- [ ] Keyboard navigation works
|
|
- [ ] Screen reader announces content properly
|
|
- [ ] Color contrast meets requirements
|
|
- [ ] Focus indicators visible
|
|
- [ ] Form labels present and associated
|
|
- [ ] Headings in logical order
|
|
- [ ] Alternative text for images
|
|
- [ ] ARIA used correctly (not overused)
|
|
- [ ] Error messages clear and accessible
|
|
- [ ] No keyboard traps
|
|
|