# Accessibility Guidelines

Los widgets production-ready deben cumplir estándares básicos de accessibility.

---

## Reglas Obligatorias

### 1. Inputs con Labels

Todo input debe tener un label visible o aria-label.

**Incorrecto:**
```tsx
<DInput
  value={search}
  onChange={setSearch}
  placeholder="Buscar..."
/>
```

**Correcto (label visible):**
```tsx
<DInput
  label="Buscar cuentas"
  value={search}
  onChange={setSearch}
  placeholder="Ej: Cuenta corriente"
/>
```

**Correcto (aria-label para inputs sin label visible):**
```tsx
<DInput
  aria-label="Buscar cuentas"
  value={search}
  onChange={setSearch}
  placeholder="Buscar..."
  iconStart="Search"
/>
```

---

### 2. Botones con Texto Descriptivo

Todo botón debe tener texto que describa su acción, o aria-label si es solo icono.

**Incorrecto:**
```tsx
<DButton onClick={handleDelete} iconStart="Trash2" />
```

**Correcto (con texto):**
```tsx
<DButton
  onClick={handleDelete}
  iconStart="Trash2"
  text="Eliminar"
/>
```

**Correcto (aria-label para botones de solo icono):**
```tsx
<DButton
  onClick={handleDelete}
  iconStart="Trash2"
  aria-label="Eliminar elemento"
/>
```

---

### 3. Imágenes con Alt Text

Toda imagen debe tener alt text descriptivo.

**Incorrecto:**
```tsx
<img src="/logo.png" />
```

**Correcto (informativo):**
```tsx
<img src="/logo.png" alt="Logo de Banco XYZ" />
```

**Correcto (decorativo):**
```tsx
<img src="/decoration.png" alt="" role="presentation" />
```

---

## Componentes Dynamic UI y Accessibility

Dynamic UI ya incluye muchas features de accessibility:

| Componente | Accessibility Incluida |
|------------|------------------------|
| DInput | Conecta label con input automáticamente |
| DButton | Role button, keyboard focus |
| DModal | Focus trap, aria-modal, escape to close |
| DSelect | Aria-expanded, arrow navigation |
| DAlert | Role alert para anuncios |

**Tu responsabilidad:** Proveer los props necesarios (label, aria-label, alt).

---

## Checklist Pre-Producción

- [ ] ¿Todos los `<DInput>` tienen `label` o `aria-label`?
- [ ] ¿Todos los `<DButton>` tienen `text` o `aria-label`?
- [ ] ¿Todos los `<img>` tienen `alt`?
- [ ] ¿Los formularios pueden navegarse solo con teclado?
- [ ] ¿Los mensajes de error se anuncian a screen readers?

---

## Testing de Accessibility

### Herramientas Recomendadas

1. **Chrome DevTools** - Accessibility panel
2. **axe DevTools** - Extension de Chrome para auditoría
3. **Lighthouse** - Auditoría automática en Chrome

### Comandos Útiles

```bash
# Verificar en CI/CD (opcional)
npm install -D @axe-core/cli
npx axe http://localhost:5173
```

---

## Ver También

- [Dynamic UI Storybook](https://react.dynamicframework.dev/) - Ver props de accessibility
- [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)
- [WAI-ARIA Practices](https://www.w3.org/WAI/ARIA/apg/)