# Accessibility Standards for Snilld-CRM

Ensures all interfaces are accessible to users with disabilities, following WCAG 2.1 AA standards.

## Keyboard Navigation

**All interactive elements must be keyboard accessible:**

- [ ] All buttons, links, and form controls reachable via Tab
- [ ] Logical tab order (left-to-right, top-to-bottom)
- [ ] Focus indicators clearly visible
- [ ] Escape key closes modals/dropdowns
- [ ] Enter/Space activates buttons
- [ ] Arrow keys navigate lists/menus
- [ ] No keyboard traps

**Implementation:**
```html


Create Task

```

## Focus Management

**Visible focus indicators:**
```css
/* ✅ GOOD - Clear focus indicator */
.snilld-btn:focus {
outline: 2px solid var(--snilld-main);
outline-offset: 2px;
}

/* ❌ BAD - No focus indicator */
.snilld-btn:focus {
outline: none;
}
```

**Focus trap in modals:**
- First focusable element receives focus on open
- Tab cycles within modal only
- Focus returns to trigger element on close

## Screen Reader Support

**ARIA labels and roles:**
```html



Create Task


Opens a modal to create a new task

```

**Required ARIA attributes:**
- `aria-label`: For icon-only buttons
- `aria-describedby`: Link to help text
- `aria-expanded`: For collapsible sections
- `aria-hidden="true"`: For decorative icons
- `role`: When semantic HTML isn't sufficient

## Color Contrast

**WCAG 2.1 AA Requirements:**
- Normal text: 4.5:1 contrast ratio
- Large text (18pt+): 3:1 contrast ratio
- UI components: 3:1 contrast ratio

**Never rely on color alone:**
```html



Error: Required field

Error
```

## Semantic HTML

**Use proper HTML elements:**
```html

```

**Proper heading hierarchy:**
- One `

` per page
- Headings in order (h1 → h2 → h3)
- Never skip levels

## Form Accessibility

**Labels:**
```html


Task Title *



Enter a descriptive title for the task

```

**Error messages:**
```html



Task title is required

```

## Images and Media

**Alt text:**
```html

```

## Dynamic Content

**Live regions for updates:**
```html

Task created successfully

```

**Loading states:**
```html

Loading tasks...

```

## Testing Checklist

Before releasing any UI change:

- [ ] All interactive elements keyboard accessible
- [ ] Focus indicators visible
- [ ] Screen reader tested (NVDA/JAWS/VoiceOver)
- [ ] Color contrast meets WCAG AA
- [ ] No color-only information
- [ ] Semantic HTML used
- [ ] ARIA labels where needed
- [ ] Form labels properly associated
- [ ] Error messages accessible
- [ ] Images have alt text
- [ ] Heading hierarchy correct
- [ ] Tab order logical

## Tools for Testing

- **WAVE**: Browser extension for accessibility audit
- **axe DevTools**: Automated accessibility testing
- **Keyboard**: Test with Tab, Enter, Space, Arrow keys
- **Screen readers**: NVDA (Windows), JAWS, VoiceOver (Mac)
- **Color contrast**: WebAIM Contrast Checker