---
name: cumplimiento-accesibilidad-wcag
description: Guia practica para implementar interfaces accesibles conforme a WCAG 2.2 (nivel AA/AAA), con patrones ARIA, navegacion por teclado, soporte de lectores de pantalla y accesibilidad movil. Incluye problemas comunes, buenas practicas y herramientas de test automatizadas y manuales.
license: MIT
metadata:
  id: da284df7
  slug: cumplimiento-accesibilidad-wcag
  titulo: "Cumplimiento de Accesibilidad WCAG 2.2"
  servicio: Web
  categoria_recurso: Web-Desarrollo
  tipo: referencia
  nivel: intermedio
  idioma: es
  idioma_original: en
  acceso: gratis
  precio_eur: 0
  plataformas: [Web, iOS, Android]
  dependencias: [axe DevTools, WAVE, Lighthouse, VoiceOver, NVDA, TalkBack]
  licencia: { spdx: MIT, redistribuible: true, uso_comercial: true }
  fuente:
    repo: wshobson/agents
    url: https://github.com/wshobson/agents/tree/main/plugins/ui-design/skills/accessibility-compliance
    commit: cc37bfd
    autor: wshobson
    nombre_original: accessibility-compliance
    duplicados_en: []
  seguridad: { veredicto: seguro, riesgo: bajo, escaneado: "2026-06-14", motor: "grep-estatico+auditor-llm" }
  ficha:
    que_hace: "Proporciona patrones y guias para construir interfaces web accesibles que cumplan WCAG 2.2."
    como_lo_hace: "Documenta mejores practicas de HTML semantico, ARIA, gestion de foco, regiones en vivo y pruebas con tecnologias de asistencia reales y automatizadas."
  content_hash: "da284df7552694764c2f9de9802c07fc862480b00efd2bd4006a9d6c9b3890ea"
  version: 1.0.0
---

# 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)