La accesibilidad web (a11y) a menudo se ve como una tarea tediosa o un requisito legal aburrido. Grave error. Un sitio accesible es un sitio mejor construido, con mejor SEO y utilizable por más personas (incluido tú cuando estás al sol con el móvil o tienes un brazo roto). Aquí tienes cómo integrarla sin dolor.

Semántica HTML: La Base

La mayoría de los problemas de accesibilidad se resuelven escribiendo buen HTML. Usa <button> para acciones, <a> para ir a sitios. No uses <div> con onClick. Los elementos nativos ya traen gratis la navegación por teclado y el soporte para lectores de pantalla. No reinventes la rueda.

Checklist Rápido

• Contraste: ¿Se lee bien el texto gris sobre fondo blanco? Usa herramientas como Color Contrast Analyzer.
• Teclado: Tira el ratón. ¿Puedes navegar y usar todo tu sitio solo con Tab, Enter y Espacio? ¿Se ve dónde está el foco?
• Imágenes: ¿Tienen alt descriptivo? Si son decorativas, usa alt="" para que el lector las ignore.
• Formularios: ¿Cada input tiene su label asociado? Los placeholders no son labels.

Automatización y Herramientas

No confíes solo en la revisión manual. Integra axe-core en tus tests E2E (Cypress/Playwright). Usa la extensión WAVE o Lighthouse en Chrome para auditorías rápidas. Configura reglas de ESLint (eslint-plugin-jsx-a11y) para atrapar errores mientras codeas.

Conclusión

La accesibilidad es empatía técnica. No busques la perfección el primer día; busca el progreso continuo. Un pequeño cambio, como mejorar el contraste de tus botones, puede hacer que tu producto sea utilizable para miles de personas más.