Accesibilidad: No Es Opcional, No Es Difícil
1 de cada 4 adultos en EEUU tiene alguna discapacidad. Accesibilidad no es un nice-to-have — es un requisito legal y un mercado de más de mil millones de personas. La buena noticia: la mayoría de los fixes son cambios simples de HTML.
Las Victorias Rápidas
<!-- 1. Usa HTML semántico -->
<nav>...</nav>
<main>...</main>
<button>Clic</button> <!-- NO <div onclick> -->
<!-- 2. Siempre agrega alt en imágenes -->
<img src="grafico.png" alt="Gráfico de ingresos mensuales mostrando 20% de crecimiento" />
<img src="decorativo.svg" alt="" /> <!-- alt vacío para decorativo -->
<!-- 3. Etiqueta inputs de formulario -->
<label for="email">Email</label>
<input id="email" type="email" />
<!-- 4. Usa headings en orden -->
<h1>Título</h1>
<h2>Sección</h2>
<h3>Subsección</h3>Navegación por Teclado
:focus-visible {
outline: 2px solid #4A90D9;
outline-offset: 2px;
}
/* NO hagas esto */
:focus { outline: none; }- Todos los elementos interactivos deben ser alcanzables con Tab
- Escape debe cerrar modales/dropdowns
- Enter/Space deben activar botones
Contraste de Color
| Nivel | Texto Normal | Texto Grande |
|---|---|---|
| AA (mínimo) | 4.5:1 | 3:1 |
| AAA (mejorado) | 7:1 | 4.5:1 |
ARIA (Cuando HTML No Es Suficiente)
<button aria-pressed="true">Modo Oscuro</button>
<div aria-busy="true" aria-live="polite">Cargando...</div>
<button aria-expanded="false" aria-controls="detalles">Mostrar</button>Regla #1 de ARIA: Ningún ARIA es mejor que ARIA malo. Usa HTML semántico primero.
Checklist de Prueba
- Navega la página completa usando solo teclado
- Usa un screen reader
- Verifica contraste de color (4.5:1 mínimo)
- Ejecuta Lighthouse accessibility audit
- Aumenta texto a 200% — ¿el layout funciona?
Verifica tu contraste: Verificador de Contraste — verifica conformidad WCAG AA/AAA.