# Feature Spec: Accessibility & Internationalization

**Priority**: 🟢 Important  
**Phase**: 11  
**Status**: ✅ Implemented

---

## Overview

Make the application accessible to all users regardless of ability or language. WCAG 2.1 AA compliance.

---

## Accessibility (a11y)

### WCAG 2.1 AA Requirements

#### Perceivable

- [x] Text alternatives for images
- [x] Color contrast ratio ≥ 4.5:1
- [x] Text resizable to 200%
- [x] Content reflows at 320px width

#### Operable

- [x] Full keyboard navigation
- [x] Focus visible indicators
- [x] Skip to main content link
- [x] Touch targets ≥ 44x44px
- [x] No keyboard traps

#### Understandable

- [x] Language attribute on HTML
- [x] Consistent navigation
- [x] Error identification
- [x] Labels for form inputs

#### Robust

- [x] Valid HTML
- [x] ARIA roles where needed
- [x] Screen reader compatible

### Implementation

#### CSS Utilities

```css
.sr-only /* Screen reader only */
.focus-visible /* Focus ring */
.high-contrast /* High contrast mode */
.reduced-motion /* Respects prefers-reduced-motion */
```

#### React Hooks

- `usePrefersReducedMotion()` - Detect motion preference
- `useFocusTrap(ref)` - Trap focus in modals

#### Components

- `VisuallyHidden` - Hide but keep in DOM
- `SkipLink` - Skip to main content
- `LiveRegion` - Announce to screen readers

---

## Internationalization (i18n)

### Supported Languages

1. English (en) - Default
2. Spanish (es) - Primary translation

### Implementation

#### Library

- `react-i18next` for translations
- `i18next-browser-languagedetector` for auto-detection

#### Translation Structure

```
/frontend/src/locales/
├── en/
│   └── translation.json
└── es/
    └── translation.json
```

#### Usage

```tsx
import { useTranslation } from 'react-i18next';

function Component() {
    const { t } = useTranslation();
    return <h1>{t('dashboard.title')}</h1>;
}
```

### Translation Keys

#### Common

- `common.save`, `common.cancel`, `common.delete`
- `common.loading`, `common.error`
- `common.yes`, `common.no`

#### Navigation

- `nav.dashboard`, `nav.tasks`, `nav.rooms`
- `nav.batches`, `nav.supplies`

#### Forms

- `form.required`, `form.invalid`
- `form.submit`, `form.cancel`

---

## User Preferences

### PreferencesContext

- `theme`: 'light' | 'dark' | 'system'
- `language`: 'en' | 'es'
- `fontSize`: 'small' | 'medium' | 'large'
- `highContrast`: boolean
- `reducedMotion`: boolean
- `soundEnabled`: boolean
- `notificationsEnabled`: boolean
- `compactMode`: boolean

### Persistence

- Stored in localStorage
- Synced across tabs
- Applied on app load

---

## Testing

### Accessibility Testing

- Lighthouse accessibility audit
- axe-core browser extension
- Manual keyboard navigation test
- Screen reader testing (VoiceOver, NVDA)

### i18n Testing

- All strings extracted to JSON
- No hardcoded strings in components
- RTL layout support (future)