Accesibilidad no es un extra. Es hacer que tu sitio funcione para todos: usuarios con discapacidad, conexión lenta, dispositivos viejos, falta de luz.
Navegación por teclado: la base de accesibilidad
Si tu sitio solo funciona con mouse, es inaccesible para usuarios que no pueden usarlo. Debe funcionar completamente por teclado: tabular a elementos, presionar Enter, Escape.
HTML semántico (buttons, links, form fields) ya soporta eso. El problema viene cuando construyes componentes personalizados sin respetar la semántica.
- Links y buttons deben ser focusables.
- Menús deben ser navegables con teclado.
- Orden de tab debe ser lógico.
Screen readers: cómo comunicas sin visión
Un screen reader lee el contenido en voz alta. Pero solo si es estructurado correctamente. Imágenes necesitan alt text. Botones necesitan labels. Regiones necesitan landmarks (main, nav, aside).
El criterio correcto es que el contenido sea comprensible sin ver, solo leyendo en voz alta.
- Usa HTML semántico.
- Alt text en imágenes (describen contenido, no "image 1").
- Labels para inputs.
- Landmarks (main, nav, aside).
Contraste y legibilidad visual
Texto debe contrastar suficientemente con el fondo (WCAG exige 4.5:1 para texto normal). Fuentes deben ser legibles. No dependas solo de color para comunicar (usa también ícono, patrón, texto).
Eso ayuda a usuarios con baja visión o daltonismo.
- Contraste 4.5:1 para texto.
- No comuniques solo con color.
- Fuentes legibles en todos los tamaños.
Cómo testear sin ser experto en a11y
Herramientas como axe DevTools, Lighthouse o WAVE te muestran problemas automáticamente. No encuentran todo, pero encuentran la mayoría.
La prueba más importante es probar con teclado: cierra el trackpad y navega completamente por teclado.
La prueba más honesta de accesibilidad es intentar usar tu sitio sin mouse. Si no puedes, está roto.
WCAG: estándares que deberías conocer
WCAG 2.1 es el estándar de accesibilidad de facto. Nivel AA es el objetivo común para sitios públicos. Nivel AAA es best-in-class.
La mayoría de problemas se arreglan con HTML semántico, contraste adecuado, alt text y navegación por teclado.