accessibility-audit

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

<!-- ✅ CORRECTO -->
<button onClick={...}>Guardar</button>
<nav>Navegación principal</nav>
<main>Contenido principal</main>
<label htmlFor="email">Correo electrónico</label>

<!-- ❌ INCORRECTO, div con role y tabIndex significa que elegiste el elemento equivocado -->
<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.