Contexto
Una entidad disponía de una plataforma consolidada que recibía usuarios con perfiles y formas de navegación muy diferentes.
Visualmente todo parecía funcionar: los enlaces se podían pulsar, los menús se abrían y los contenidos estaban disponibles.
Pero utilizar una web no siempre significa verla y manejar un ratón.
El problema
Al navegar mediante teclado empezaban a aparecer dificultades. Algunos componentes no indicaban correctamente dónde se encontraba el foco. Otros dependían de información visual para comprender su función y determinados elementos interactivos no comunicaban adecuadamente su estado a las tecnologías de asistencia.
La página estaba disponible para todos, pero eso no significaba necesariamente que todos pudieran utilizarla.
El enfoque
Revisamos la plataforma desde diferentes formas de interacción: estructura del documento, navegación mediante teclado, foco, jerarquías, componentes interactivos, idiomas y la información que recibe una tecnología de asistencia.
No buscamos cambiar cómo parecía funcionar la web, sino cómo funcionaba realmente.
La solución
Corregimos estructuras HTML, mejoramos la semántica, revisamos estados de foco y navegación e incorporamos información ARIA allí donde los elementos nativos de HTML no eran suficientes.
También modificamos componentes cuyo comportamiento generaba barreras independientemente de su apariencia visual.
El resultado
Más personas pueden navegar, comprender e interactuar con la plataforma.
Además, una estructura más semántica y coherente mejora la calidad general del código y facilita futuras evoluciones.
Tecnologías
- HTML semántico
- ARIA
- JavaScript
- Criterios WCAG