Accesibilidad en CHI Tickets
CHI Tickets está diseñado para que todas las personas puedan usarlo, incluidas quienes dependen de tecnologías de asistencia. Este artículo describe las funciones de accesibilidad integradas en la plataforma y cómo aprovecharlas al máximo.
Navegación con teclado
Todas las partes de la experiencia de CHI Tickets pueden operarse solo con el teclado, sin necesidad de ratón ni pantalla táctil:
- Tecla Tab — Avanza el foco por los elementos interactivos (enlaces, botones, campos de formulario).
- Shift + Tab — Retrocede el foco por los elementos interactivos.
- Entrar o Espacio — Activa el botón o enlace enfocado actualmente.
- Teclas de flecha — Navegan dentro de listas desplegables, grupos de botones de opción y otros controles compuestos.
- Escape — Cierra los diálogos modales y ventanas emergentes.
Todo el flujo de checkout, desde seleccionar entradas hasta completar el pago, puede realizarse únicamente con el teclado. Esto incluye navegar por el checkout multipaso (Entradas, Extras, Preguntas personalizadas, Datos de contacto, Pago y Confirmación).
Indicadores de foco
Al navegar con el teclado, aparece un indicador de foco visible (normalmente un contorno o resaltado) alrededor del elemento activo. Este indicador:
- Muestra claramente qué elemento está seleccionado, de modo que siempre sabe dónde se encuentra en la página.
- Sigue un orden de tabulación lógico que coincide con la disposición visual de la página (de izquierda a derecha, de arriba abajo).
- Está diseñado para cumplir los requisitos de contraste WCAG 2.1, garantizando su visibilidad tanto sobre fondos claros como oscuros.
- Aplica a todos los elementos interactivos: botones, enlaces, campos de formulario, listas desplegables y controles de pestañas.
Soporte de lectores de pantalla
CHI Tickets está construido con HTML semántico y atributos ARIA (Accessible Rich Internet Applications) para garantizar la compatibilidad con los lectores de pantalla más populares, entre ellos:
- VoiceOver (macOS e iOS)
- NVDA (Windows)
- TalkBack (Android)
- JAWS (Windows)
Las implementaciones clave de accesibilidad incluyen:
| Función | Implementación |
|---|
| Estructura de la página | Jerarquía de encabezados correcta (h1, h2, h3) para que los lectores de pantalla naveguen por encabezados |
| Etiquetas de formularios | Todos los campos tienen etiquetas asociadas que los lectores anuncian al recibir el foco |
| Etiquetas de botones | Los botones incluyen texto descriptivo o etiquetas ARIA que comunican su propósito |
| Texto alternativo de imágenes | Las imágenes del evento incluyen descripciones alternativas |
| Regiones dinámicas | Las actualizaciones dinámicas (como mensajes de error y avisos de existencias) se anuncian mediante regiones live de ARIA |
| Regiones de referencia | Las secciones están marcadas con landmarks de ARIA (navegación, contenido principal, pie) para una navegación rápida |
Etiquetas y roles ARIA
CHI Tickets utiliza ampliamente los atributos ARIA para aportar contexto que el diseño visual por sí solo no transmite:
- aria-label — Proporciona nombres accesibles para elementos sin etiqueta de texto visible (p. ej., botones con icono).
- aria-describedby — Vincula los campos del formulario con su texto de ayuda o mensajes de error, de modo que el lector lea ambos juntos.
- aria-required — Indica qué campos son obligatorios durante el checkout.
- aria-invalid — Marca los campos con errores de validación para que el lector anuncie el estado de error.
- Atributos role — Asignan roles apropiados a componentes personalizados (p. ej.,
role="tablist" para las pestañas Próximos/En curso, role="alert" para mensajes de error).
Diseño responsivo
CHI Tickets utiliza un diseño totalmente responsivo que se adapta a cualquier tamaño de pantalla y nivel de zoom:
- Móvil, tableta y escritorio — La interfaz ajusta su disposición al tamaño de pantalla, garantizando la usabilidad en todos los dispositivos.
- Escalado de texto — El contenido sigue siendo legible y funcional al aumentar el zoom del navegador hasta un 200 % o más.
- Áreas táctiles — Los botones y elementos interactivos cumplen las pautas mínimas de área táctil (al menos 44x44 píxeles CSS), facilitando el toque en pantallas táctiles.
- Reflujo — El contenido se reorganiza para ajustarse al viewport sin requerir desplazamiento horizontal en niveles de zoom estándar.
Color y contraste
- Contraste de texto — El texto y los elementos interactivos cumplen las relaciones de contraste WCAG 2.1 AA (al menos 4,5:1 para texto normal y 3:1 para texto grande).
- Sin depender solo del color — La información nunca se comunica únicamente mediante color. Por ejemplo, las entradas agotadas muestran tanto un cambio de color como la insignia de texto "Agotado".
- Los avisos de pocas existencias incluyen tanto un indicador visual como texto descriptivo.
Movimiento reducido
Para usuarios que prefieren movimiento reducido (mediante la media query prefers-reduced-motion en la configuración de su sistema operativo), CHI Tickets:
- Minimiza o desactiva animaciones y transiciones.
- Garantiza que toda función esencial funcione sin depender de interacciones basadas en movimiento.
Consejos para la mejor experiencia accesible
- Use un navegador moderno — Las versiones más recientes de Chrome, Firefox, Safari y Edge ofrecen el mejor soporte de accesibilidad.
- Mantenga su lector de pantalla actualizado — Las versiones nuevas ofrecen mejor soporte de atributos ARIA y estándares web modernos.
- Active la navegación con teclado — En macOS, vaya a Configuración del Sistema > Teclado y active "Navegación con teclado" para tabular por todos los controles en Safari.
- Ajuste el zoom según necesite — Use el zoom integrado de su navegador (Ctrl/Cmd + Más) para ampliar el texto y los elementos de la interfaz.
- Reporte problemas — Si encuentra alguna barrera de accesibilidad en CHI Tickets, contacte al soporte de CHI. Sus comentarios ayudan a mejorar la plataforma para todos los usuarios.
Consejo: Si necesita ayuda para comprar entradas o tiene requisitos de accesibilidad específicos para el evento mismo (como acceso para sillas de ruedas o interpretación en lengua de señas), contacte directamente al organizador del evento desde su página.