| name | Accessibility Audit |
| description | HACER CUMPLIR el cumplimiento WCAG 2.2 AA. Usar HTML semántico primero. Proporcionar indicadores de foco visibles. Etiquetar todas las entradas. Asegurar relaciones de contraste. Probar con teclado. Prevenir trampas de teclado, foco invisible, bajo contraste, entradas sin etiqueta y HTML no semántico. Activadores: "make it accessible", "fix a11y issues", "audit for accessibility", "ensure WCAG compliance".
|
| category | quality |
| version | 3.0.0 |
| last_updated | 2026-06-28T00:00:00.000Z |
| stacks | ["HTML","React 19.2","Vue 3","Tailwind CSS v4"] |
| related_skills | ["component-architecture-patterns","dashboard-information-architecture","no-slop-landing-page-architecture"] |
| lang | es |
| direction | ltr |
| source_version | 3.0.0 |
| translated_at | 2026-06-29T00:00:00.000Z |
Protocolo de Auditoría de Accesibilidad
IDENTIFICAR: Cuándo activarse
Activar:
- CONTINUAMENTE mientras se construyen componentes de UI
- EXPLÍCITAMENTE cuando se solicite revisar/auditar accesibilidad
- Al crear cualquier elemento interactivo: botones, formularios, navegación, modales
- Al establecer colores, verificar relaciones de contraste
PRINCIPIO FUNDAMENTAL
HTML semántico primero. ARIA complementa, nunca reemplaza. Probar cada componente con teclado antes que con ratón. Cada elemento interactivo debe ser enfocable y estar etiquetado.
EJECUTAR: Seis Categorías de Auditoría
1. HTML Semántico: SIEMPRE Usar Elementos Nativos
<button onClick={...}>Guardar</button>
<nav>Navegación principal</nav>
<main>Contenido principal</main>
<label htmlFor="email">Correo electrónico</label>
<div onClick={...} role="button" tabIndex={0}>Guardar</div>
<div class="nav">Navegación</div>
REGLA DE DETECCIÓN: Si te encuentras añadiendo role y tabIndex a un <div>, estás usando el elemento equivocado. Usa el elemento nativo en su lugar.
