CHI Tickets 的无障碍设计

CHI Tickets 的设计力求人人可用，包括依赖辅助技术的用户。本文介绍平台内置的无障碍功能以及如何充分利用它们。

键盘导航

CHI Tickets 的所有功能都可以仅凭键盘操作，无需鼠标或触摸屏：

• Tab 键 — 使焦点在交互元素（链接、按钮、表单字段）之间向前移动。
• Shift + Tab — 使焦点在交互元素之间向后移动。
• Enter 或空格键 — 激活当前聚焦的按钮或链接。
• 方向键 — 在下拉菜单、单选按钮组和其他复合控件内部导航。
• Esc 键 — 关闭模态对话框和弹出窗口。

从选择门票到完成支付的整个结账流程，都可以仅用键盘完成。这包括多步骤结账（门票、附加项、自定义问题、联系信息、支付和确认）之间的导航。

焦点指示器

使用键盘导航时，当前活动元素周围会出现一个可见的焦点指示器（通常是轮廓或高亮）。该指示器：

• 清晰标示当前选中的元素，让您始终知道自己位于页面上的哪个位置。
• 遵循与页面视觉布局一致（从左到右、自上而下）的逻辑 Tab 顺序。
• 采用符合 WCAG 2.1 对比度要求的样式，确保其在浅色和深色背景下都清晰可见。
• 适用于所有交互元素，包括按钮、链接、表单输入框、下拉菜单和标签页控件。

屏幕阅读器支持

CHI Tickets 基于语义化 HTML 和 ARIA（Accessible Rich Internet Applications）属性构建，确保与主流屏幕阅读器兼容，包括：

• VoiceOver（macOS 和 iOS）
• NVDA（Windows）
• TalkBack（Android）
• JAWS（Windows）

关键的无障碍实现包括：

ARIA 标签和角色

CHI Tickets 广泛使用 ARIA 属性来提供纯视觉设计无法传达的上下文信息：

• aria-label — 为没有可见文本标签的元素（例如图标按钮）提供可朗读的名称。
• aria-describedby — 将表单字段与其帮助文本或错误消息关联，让屏幕阅读器一起朗读两者。
• aria-required — 标示结账过程中哪些表单字段为必填。
• aria-invalid — 标记包含校验错误的字段，让屏幕阅读器播报错误状态。
• role 属性 — 为自定义 UI 组件分配适当的角色（例如“即将开始/进行中”标签页使用 role="tablist"，错误消息使用 role="alert"）。

响应式设计

CHI Tickets 采用完全响应式的布局，可适应任何屏幕尺寸和缩放级别：

• 手机、平板和桌面 — 界面会调整布局以适配屏幕，确保在各种设备上都易于使用。
• 文本缩放 — 当浏览器缩放提高到 200% 或更高时，内容仍保持可读且可用。
• 触摸目标 — 按钮和交互元素的尺寸符合最小触摸目标准则（至少 44x44 CSS 像素），便于在触摸屏上点按。
• 内容重排 — 在标准缩放级别下，内容会自动重排以适应视口，无需横向滚动。

颜色与对比度

• 文本对比度 — 文本和交互元素符合 WCAG 2.1 AA 对比度标准（普通文本至少 4.5:1，大号文本至少 3:1）。
• 不只依赖颜色 — 信息绝不单独依靠颜色传达。例如，售罄的门票既会变色，又会显示“售罄”文字徽章。
• 库存不足警告同时包含视觉标识和描述性文字。

减弱动效

对于偏好减弱动效的用户（通过操作系统设置中的 prefers-reduced-motion 媒体查询启用），CHI Tickets 会：

• 最小化或禁用动画和过渡效果。
• 确保所有核心功能在不依赖运动交互的情况下照常工作。

获得最佳无障碍体验的建议

• 使用现代浏览器 — 最新版本的 Chrome、Firefox、Safari 和 Edge 提供最好的无障碍支持。
• 保持屏幕阅读器更新 — 新版本对 ARIA 属性和现代 Web 标准的支持更好。
• 启用键盘导航 — 在 macOS 上，前往“系统设置”>“键盘”并开启“键盘导航”，即可在 Safari 中用 Tab 键遍历所有控件。
• 按需调整缩放 — 使用浏览器内置缩放（Ctrl/Cmd + 加号）放大文本和界面元素。
• 反馈问题 — 如果您在 CHI Tickets 上遇到任何无障碍障碍，请联系 CHI 支持团队。您的反馈有助于平台为所有用户持续改进。

提示： 如果您在购票时需要协助，或对活动本身有特殊的无障碍需求（如轮椅通道或手语翻译服务），请通过活动页面直接联系活动主办方。