## ACCESSIBILITY GUIDE

### 1. Accessibility Philosophy

Accessibility isn't a feature. It's a fundamental requirement. At ego.cx, we design for all people, regardless of their abilities, devices, or contexts.

**Our principles:**
- **Inclusivity by design** — not as an afterthought
- **Universal usability** — it should work for everyone
- **Continuous improvement** — accessibility can always get better

---

### 2. Standards

- **WCAG 2.1 AA** — mandatory minimum
- **WCAG 2.1 AAA** — aspirational goal
- **ARIA 1.2** — for complex components

---

### 3. Best Practices

#### 3.1. Semantic Structure
- Use semantic HTML elements (`<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`, `<footer>`)
- Logical heading hierarchy (H1 → H2 → H3 → H4)
- ARIA landmarks for navigation

#### 3.2. Color Contrast
- **Normal text:** contrast ratio ≥ 4.5:1
- **Large text:** contrast ratio ≥ 3:1
- **UI elements:** contrast ratio ≥ 3:1
- Tool: [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)

#### 3.3. Keyboard Navigation
- All interactive elements keyboard‑accessible (Tab, Enter, Space)
- Logical and predictable tab order
- Visible and clear focus indicator
- Navigation skips (skip to main content)

#### 3.4. Alternative Texts
- All images with descriptive `alt`
- Decorative images with `alt=""`
- Captions and transcripts for videos and audio

#### 3.5. Forms
- Associated labels (`<label for="...">`)
- Clear and visible instructions
- Accessible error messages (ARIA live regions)
- Logical grouping with `<fieldset>` and `<legend>`

#### 3.6. Motion and Animation
- Option to reduce motion (`prefers-reduced-motion`)
- Animations that don't flash or cause discomfort
- Smooth and controlled transitions

#### 3.7. Clear Language
- Simple and direct text
- Avoid unnecessary jargon
- Provide definitions for technical terms

---

### 4. Evaluation Tools

- **Lighthouse:** automatic accessibility audit
- **axe DevTools:** extension for developers
- **WAVE:** visual evaluation tool
- **NVDA / JAWS:** screen readers for manual testing
- **Keyboard testing:** keyboard‑only navigation

---

### 5. Accessibility Checklist

**Structure:**
- [ ] Hierarchical and logical headings
- [ ] ARIA landmarks present
- [ ] Language declared (`lang="es"` / `lang="en"`)

**Images:**
- [ ] Descriptive alt text on all images
- [ ] Empty alt (`alt=""`) on decorative images

**Forms:**
- [ ] Associated labels
- [ ] Clear instructions
- [ ] Accessible error messages

**Contrast:**
- [ ] Contrast ratio ≥ 4.5:1 for normal text
- [ ] Contrast ratio ≥ 3:1 for large text and UI

**Keyboard:**
- [ ] Full keyboard navigation
- [ ] Visible focus indicator
- [ ] Logical tab order

**Motion:**
- [ ] `prefers-reduced-motion` implemented

---

*Last updated: 2026-07-10*


---

*— Fernando José Caicedo Albarello*  
*Founder, EgoCX*