La accesibilidad asegura que tu sitio web pueda ser usado por todos, independientemente de sus capacidades o cómo accedan a la web. Esta guía cubre lo básico: HTML semántico, navegación por teclado, ARIA cuando sea necesario y pruebas para que puedas entregar experiencias inclusivas.
Comienza con HTML semántico. Usa los elementos correctos: encabezados (h1–h6) en orden, nav, main, article, section y landmarks para que las tecnologías de asistencia puedan navegar. Botones para acciones, enlaces para navegación. Los formularios necesitan etiquetas, fieldsets y mensajes de error claros. La buena semántica mejora el SEO y a menudo te da estilo y comportamiento básico gratis.
Los usuarios de teclado deben poder alcanzar y activar cada elemento interactivo. Asegura que el foco sea visible (no elimines el outline sin un reemplazo) y ordena el foco lógicamente. Los modales y widgets personalizados necesitan atrapar el foco y Escape para cerrar. Prueba navegando solo con Tab y Enter.
Usa ARIA cuando HTML no sea suficiente. Roles, estados y propiedades (ej. aria-expanded, aria-label, aria-live) llenan los vacíos para componentes personalizados. Pero prefiere elementos nativos: un botón nativo es mejor que un div con role="button". Agrega ARIA solo cuando ya hayas elegido una implementación personalizada.
Prueba con herramientas y usuarios reales. Los verificadores automatizados detectan algunos problemas; las pruebas manuales con lector de pantalla y teclado detectan más. Incluye a personas con discapacidades en la investigación y pruebas cuando puedas. La accesibilidad es una práctica continua, no una lista de verificación única.
Key Takeaways
- Usa HTML semántico y landmarks para que la estructura y navegación tengan sentido.
- Soporta acceso completo por teclado y foco visible para todos los elementos interactivos.
- Usa ARIA para ampliar componentes personalizados; prefiere elementos nativos cuando sea posible.
- Combina verificaciones automatizadas con pruebas de teclado y lector de pantalla.
