BonoVíaBeta
Accesibilidad

Hecho para todos

BonoVía se diseña y desarrolla siguiendo las pautas WCAG 2.1 nivel AA para que cualquier persona pueda planificar su viaje, independientemente de sus capacidades.

WCAG 2.1

Nivel AA

100%

Páginas conformes

44px

Mín. zona táctil

Qué hacemos

Visual

  • Texto mínimo de 12px (text-xs) en toda la aplicación
  • Contraste mínimo 4.5:1 en todos los textos
  • Opacidad mínima /70 en textos sobre fondos de color
  • Colores de pases diferenciados por forma además de color
  • Atributo lang="es" en el documento HTML

Motor

  • Zonas táctiles mínimas de 44×44px en todos los botones
  • Navegación completa por teclado (Tab, Enter, Espacio)
  • Focus visible con ring-2 en todos los elementos interactivos
  • Sin trampas de foco — siempre puedes salir con Tab

Lectores de pantalla

  • Estructura semántica con <header>, <main>, <nav>, <section>
  • aria-label en todos los grupos de filtros y regiones
  • aria-expanded en tarjetas desplegables
  • role="listbox" y role="option" en el buscador
  • Texto alternativo oculto con .sr-only para el mapa
  • Vista de lista como alternativa accesible al mapa

Responsivo

  • Diseño adaptativo desde 320px hasta pantallas anchas
  • Sin scroll horizontal en ninguna resolución
  • Filtros con scroll horizontal accesible en móvil
  • Popups del mapa con max-width adaptativo

Estándares que seguimos

BonoVía sigue las Web Content Accessibility Guidelines (WCAG) 2.1 en nivel de conformidad AA, publicadas por el W3C (World Wide Web Consortium).

Estas pautas son el estándar internacional de accesibilidad web y cubren cuatro principios: perceptible, operable, comprensible y robusto.

Automatizado, no opcional

La accesibilidad en BonoVía no es una revisión manual puntual — está integrada en el proceso de desarrollo:

CI/CD verifica que no existan textos menores de 12px en producción
Automatizado
CI/CD verifica que lang="es" esté presente en el layout
Automatizado
Todos los botones tienen min-h-[44px] y min-w-[44px]
Código
Todos los formularios usan fieldset, legend y aria-label
Código
El mapa incluye descripción sr-only con estadísticas
Código
Vista de lista disponible como alternativa al mapa visual
Diseño

Limitaciones conocidas

Aunque trabajamos para que toda la experiencia sea accesible, algunas áreas tienen limitaciones inherentes:

  • Mapa interactivo: Leaflet tiene limitaciones de accesibilidad nativas. Ofrecemos la vista de lista como alternativa completa con toda la información disponible.
  • Contenido de terceros: Los tiles del mapa (CartoDB, IGN) no están bajo nuestro control de accesibilidad.
  • Daltonismo: Actualmente los colores del mapa distinguen pases solo por color. En v0.5.0 se añadirán formas distintas por tipo de pase.

¿Encontraste una barrera?

Si encuentras cualquier problema de accesibilidad que te impide usar BonoVía, queremos saberlo. Escríbenos y lo arreglaremos:

hola@bonovia.app

Última actualización: marzo 2026