# Accessibility Compliance

> Implementa interfaces conformes con WCAG 2.2, con accesibilidad móvil, patrones de diseño inclusivo y soporte para tecnologías de asistencia.

Fuente: https://skillsagentes.com/skills/wshobson/agents/accessibility-compliance
Markdown: https://skillsagentes.com/skills/wshobson/agents/accessibility-compliance.md

Repositorio: https://github.com/wshobson/agents
Autor: wshobson
Licencia: MIT
Actualizado: hace 4 meses
Coste de contexto: 64 tok instalada, 601 tok al activarse, 13.1k tok con todos los archivos del bundle
Bundle: 5 archivos, 51 KB
Permisos que pide: ninguno declarado

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add wshobson/agents --skill accessibility-compliance --agent claude-code
# Cursor
npx -y skills add wshobson/agents --skill accessibility-compliance --agent cursor
# Codex
npx -y skills add wshobson/agents --skill accessibility-compliance --agent codex
# Gemini CLI
npx -y skills add wshobson/agents --skill accessibility-compliance --agent gemini
# Windsurf
npx -y skills add wshobson/agents --skill accessibility-compliance --agent windsurf
# Cline
npx -y skills add wshobson/agents --skill accessibility-compliance --agent cline
```

## Qué hace

- Implementa patrones WCAG 2.2 nivel AA/AAA en interfaces web y móviles
- Añade navegación por teclado, gestión de foco y focus trapping en componentes
- Crea formularios accesibles con etiquetado correcto y regiones live para anuncios dinámicos
- Ajusta soporte para prefers-reduced-motion, alto contraste y zoom al 200%
- Audita accesibilidad y corrige violaciones comunes (alt text, contraste, trampas de foco)

## Cuándo usarla

- Implementar cumplimiento WCAG 2.2 nivel AA o AAA
- Construir interfaces accesibles para lectores de pantalla
- Añadir navegación por teclado a componentes interactivos
- Auditar accesibilidad y corregir violaciones

## Qué la activa

- "Audita esta página según WCAG 2.2 y dime qué violaciones tiene"
- "Añade navegación por teclado y focus trapping a este modal"
- "Haz este formulario accesible con etiquetas y regiones live"

## Archivos

- SKILL.md — 2 KB
- references/aria-patterns.md — 13 KB
- references/details.md — 9 KB
- references/mobile-accessibility.md — 13 KB
- references/wcag-guidelines.md — 14 KB

## SKILL.md

Reproducido tal cual desde wshobson/agents bajo MIT. Esta sección es el documento original y está en inglés.

# Accessibility Compliance

Master accessibility implementation to create inclusive experiences that work for everyone, including users with disabilities.

## When to Use This Skill

- Implementing WCAG 2.2 Level AA or AAA compliance
- Building screen reader accessible interfaces
- Adding keyboard navigation to interactive components
- Implementing focus management and focus trapping
- Creating accessible forms with proper labeling
- Supporting reduced motion and high contrast preferences
- Building mobile accessibility features (iOS VoiceOver, Android TalkBack)
- Conducting accessibility audits and fixing violations

## Detailed patterns and worked examples

Detailed pattern documentation lives in `references/details.md`. Read that file when the navigation tier above is insufficient.

## Best Practices

1. **Use Semantic HTML**: Prefer native elements over ARIA when possible
2. **Test with Real Users**: Include people with disabilities in user testing
3. **Keyboard First**: Design interactions to work without a mouse
4. **Don't Disable Focus Styles**: Style them, don't remove them
5. **Provide Text Alternatives**: All non-text content needs descriptions
6. **Support Zoom**: Content should work at 200% zoom
7. **Announce Changes**: Use live regions for dynamic content
8. **Respect Preferences**: Honor prefers-reduced-motion and prefers-contrast

## Common Issues

- **Missing alt text**: Images without descriptions
- **Poor color contrast**: Text hard to read against background
- **Keyboard traps**: Focus stuck in component
- **Missing labels**: Form inputs without associated labels
- **Auto-playing media**: Content that plays without user initiation
- **Inaccessible custom controls**: Recreating native functionality poorly
- **Missing skip links**: No way to bypass repetitive content
- **Focus order issues**: Tab order doesn't match visual order

## Testing Tools

- **Automated**: axe DevTools, WAVE, Lighthouse
- **Manual**: VoiceOver (macOS/iOS), NVDA/JAWS (Windows), TalkBack (Android)
- **Simulators**: NoCoffee (vision), Silktide (various disabilities)

## Dónde encaja

- Categoría: [Desarrollo de APIs](https://skillsagentes.com/categorias/desarrollo-apis.md) — Diseña, prueba y documenta APIs HTTP y GraphQL.
- Creador: [wshobson](https://skillsagentes.com/creators/wshobson.md) — 183 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)