Accessibility on CHI Tickets
CHI Tickets is designed to be usable by everyone, including people who rely on assistive technologies. This article describes the accessibility features built into the platform and how to make the most of them.
Keyboard Navigation
Every part of the CHI Tickets experience can be operated using a keyboard alone, without requiring a mouse or touchscreen:
- Tab key — Moves focus forward through interactive elements (links, buttons, form fields).
- Shift + Tab — Moves focus backward through interactive elements.
- Enter or Space — Activates the currently focused button or link.
- Arrow keys — Navigate within dropdowns, radio button groups, and other composite controls.
- Escape — Closes modal dialogs and popups.
The entire checkout flow, from selecting tickets to completing payment, can be completed using only keyboard input. This includes navigating through the multi-step checkout (Tickets, Add-ons, Custom Questions, Contact Info, Payment, and Confirmation).
Focus Indicators
When navigating with a keyboard, a visible focus indicator (typically an outline or highlight) appears around the currently active element. This indicator:
- Clearly shows which element is selected, so you always know where you are on the page.
- Follows a logical tab order that matches the visual layout of the page (left to right, top to bottom).
- Is styled to meet WCAG 2.1 contrast requirements, ensuring it is visible against both light and dark backgrounds.
- Applies to all interactive elements, including buttons, links, form inputs, dropdowns, and tab controls.
Screen Reader Support
CHI Tickets is built with semantic HTML and ARIA (Accessible Rich Internet Applications) attributes to ensure compatibility with popular screen readers, including:
- VoiceOver (macOS and iOS)
- NVDA (Windows)
- TalkBack (Android)
- JAWS (Windows)
Key accessibility implementations include:
| Feature | Implementation |
|---|
| Page structure | Proper heading hierarchy (h1, h2, h3) so screen readers can navigate by headings |
| Form labels | All form fields have associated labels that screen readers announce when the field receives focus |
| Button labels | Buttons include descriptive text or ARIA labels that communicate their purpose |
| Image alt text | Event images include alternative text descriptions |
| Live regions | Dynamic content updates (such as error messages and stock warnings) are announced by screen readers using ARIA live regions |
| Landmark regions | Page sections are marked with ARIA landmarks (navigation, main content, footer) for quick navigation |
ARIA Labels and Roles
CHI Tickets uses ARIA attributes extensively to provide context that visual design alone cannot convey:
- aria-label — Provides accessible names for elements that do not have visible text labels (e.g., icon buttons).
- aria-describedby — Links form fields to their help text or error messages so screen readers read both together.
- aria-required — Indicates which form fields are mandatory during checkout.
- aria-invalid — Marks fields that contain validation errors so screen readers announce the error state.
- role attributes — Assign appropriate roles to custom UI components (e.g.,
role="tablist" for the Upcoming/Ongoing tabs, role="alert" for error messages).
Responsive Design
CHI Tickets uses a fully responsive layout that adapts to any screen size and zoom level:
- Mobile, tablet, and desktop — The interface adjusts its layout to fit the screen, ensuring usability across all devices.
- Text scaling — Content remains readable and functional when the browser zoom is increased up to 200% or more.
- Touch targets — Buttons and interactive elements are sized to meet minimum touch target guidelines (at least 44x44 CSS pixels), making them easy to tap on touchscreens.
- Reflow — Content reflows to fit the viewport without requiring horizontal scrolling at standard zoom levels.
Color and Contrast
- Text contrast — Text and interactive elements meet WCAG 2.1 AA contrast ratios (at least 4.5:1 for normal text and 3:1 for large text).
- Not reliant on color alone — Information is never conveyed solely through color. For example, sold-out tickets display both a color change and a "Sold Out" text badge.
- Low stock warnings include both a visual indicator and descriptive text.
Reduced Motion
For users who prefer reduced motion (via the prefers-reduced-motion media query in their operating system settings), CHI Tickets:
- Minimizes or disables animations and transitions.
- Ensures that all essential functionality works without reliance on motion-based interactions.
Tips for the Best Accessible Experience
- Use a modern browser — The latest versions of Chrome, Firefox, Safari, and Edge provide the best accessibility support.
- Keep your screen reader updated — Newer versions offer improved support for ARIA attributes and modern web standards.
- Enable keyboard navigation — On macOS, go to System Settings > Keyboard and enable "Keyboard navigation" to tab through all controls in Safari.
- Adjust zoom as needed — Use your browser's built-in zoom (Ctrl/Cmd + Plus) to enlarge text and interface elements.
- Report issues — If you encounter any accessibility barriers on CHI Tickets, please contact CHI support. Feedback helps improve the platform for all users.
Tip: If you need assistance purchasing tickets or have specific accessibility requirements for the event itself (such as wheelchair access or sign language interpretation), contact the event organizer directly through the event page.