## GUÍA DE ACCESIBILIDAD

### 1. Filosofía de Accesibilidad

La accesibilidad no es una característica. Es un requisito fundamental. En EgoCX, diseñamos para todas las personas, independientemente de sus capacidades, dispositivos o contextos.

**Nuestros principios:**
- **Inclusividad por diseño** — no como un añadido
- **Usabilidad universal** — que funcione para todos
- **Mejora continua** — la accesibilidad siempre puede mejorar

---

### 2. Estándares

- **WCAG 2.1 AA** — mínimo obligatorio
- **WCAG 2.1 AAA** — objetivo aspiracional
- **ARIA 1.2** — para componentes complejos

---

### 3. Buenas Prácticas

#### 3.1. Estructura Semántica
- Usar elementos HTML semánticos (`<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`, `<footer>`)
- Jerarquía de encabezados lógica (H1 → H2 → H3 → H4)
- Landmarks ARIA para navegación

#### 3.2. Contraste de Color
- **Texto normal:** ratio de contraste ≥ 4.5:1
- **Texto grande:** ratio de contraste ≥ 3:1
- **Elementos UI:** ratio de contraste ≥ 3:1
- Herramienta: [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)

#### 3.3. Navegación por Teclado
- Todos los elementos interactivos accesibles con teclado (Tab, Enter, Espacio)
- Orden de tabulación lógico y predecible
- Indicador de foco visible y claro
- Skips de navegación (saltar al contenido principal)

#### 3.4. Textos Alternativos
- Todas las imágenes con `alt` descriptivo
- Imágenes decorativas con `alt=""`
- Subtítulos y transcripciones para vídeos y audios

#### 3.5. Formularios
- Etiquetas asociadas (`<label for="...">`)
- Instrucciones claras y visibles
- Mensajes de error accesibles (ARIA live regions)
- Agrupación lógica con `<fieldset>` y `<legend>`

#### 3.6. Movimiento y Animación
- Opción para reducir movimiento (`prefers-reduced-motion`)
- Animaciones que no destellan ni causan molestias
- Transiciones suaves y controladas

#### 3.7. Lenguaje Claro
- Texto sencillo y directo
- Evitar jerga innecesaria
- Proporcionar definiciones para términos técnicos

---

### 4. Herramientas de Evaluación

- **Lighthouse:** auditoría automática de accesibilidad
- **axe DevTools:** extensión para desarrolladores
- **WAVE:** herramienta visual de evaluación
- **NVDA / JAWS:** lectores de pantalla para pruebas manuales
- **Keyboard testing:** navegación solo con teclado

---

### 5. Checklist de Accesibilidad

**Estructura:**
- [ ] Encabezados jerárquicos y lógicos
- [ ] Landmarks ARIA presentes
- [ ] Lenguaje declarado (`lang="es"` / `lang="en"`)

**Imágenes:**
- [ ] Alt text descriptivo en todas las imágenes
- [ ] Alt vacío (`alt=""`) en imágenes decorativas

**Formularios:**
- [ ] Etiquetas asociadas
- [ ] Instrucciones claras
- [ ] Mensajes de error accesibles

**Contraste:**
- [ ] Ratio de contraste ≥ 4.5:1 para texto normal
- [ ] Ratio de contraste ≥ 3:1 para texto grande y UI

**Teclado:**
- [ ] Navegación completa con teclado
- [ ] Indicador de foco visible
- [ ] Orden de tabulación lógico

**Movimiento:**
- [ ] `prefers-reduced-motion` implementado

---

*Última actualización: 2026-09-16*

[Error: Referencia no disponible] [license(1234)]