无障碍
我们如何为键盘、屏幕阅读器、低视力及低技术用户构建产品。一份诚实且有时效性的快照。
我们的承诺
- 完整键盘导航。每个生成器控件、每个弹窗和每个导出流程均可在不使用鼠标的情况下访问。
- 可见焦点状态。已聚焦的输入框、按钮和链接显示清晰的焦点环,不依赖单一颜色区分。
- 每个字段都有标签。表单输入项均配有关联的
<label>元素或aria-label属性,占位符文本不作为唯一标签使用。 - QR 预览和提示消息的 ARIA 实时区域。屏幕阅读器在 QR 生成和提示消息触发时即可读取,无需等待焦点移至相应元素。
- 仅图标按钮的文字替代。每个纯 SVG 按钮均配有
aria-label。 - 状态含义不依赖颜色。可扫描性徽章和兼容性标签同时使用颜色、图形和文字标签。
- 明确的导出格式名称。下载按钮显示"下载 PNG"、"下载 SVG"等,而非仅显示"下载"。
- 大触控目标(移动端)。交互元素在粗指针下至少为 44 × 44 CSS 像素,符合 WCAG 2.5.8 规范。
- 尊重减弱动效偏好。在
prefers-reduced-motion: reduce下禁用过渡动效。
仍有不足之处
- 屏幕阅读器测试覆盖不均。生成器已通过 VoiceOver(macOS/iOS)和 NVDA 测试,JAWS 和 TalkBack 仍需更多时间。
- 名片设计器设计上以鼠标操作为主(拖拽定位、画布预览)。每个控件均有键盘替代方案,但实时预览的反馈循环仍以视觉为主。
- 复杂生成器流程(批量 CSV、多步骤向导)的跳转链接结构有待改善,已列入计划。
- 我们的兼容性矩阵目前以 HTML 表格呈现。屏幕阅读器列标题可正常工作,但我们希望为每行添加更详细的描述性摘要。
已测试浏览器与辅助技术
最近一次全面测试:2026 年 4 月。两次测试之间,我们在重大 UI 变更后进行抽查。
| 浏览器 | 辅助技术 | 平台 | 状态 |
|---|---|---|---|
| Safari | VoiceOver | macOS 15, iOS 18 | 已测试,通过 |
| Firefox | NVDA | Windows 11 | 已测试,通过 |
| Chrome | NVDA | Windows 11 | 已测试,通过 |
| Chrome | ChromeVox | ChromeOS | 抽查 |
| Chrome | TalkBack | Android 14, 15 | 抽查 |
| Edge | Narrator | Windows 11 | 抽查 |
| Safari | JAWS | Windows 11 | 尚未测试 |
键盘导航说明
- Tab / Shift+Tab:在可聚焦元素间向前/向后移动。
- Enter / Space:激活按钮和切换控件。
- 方向键:在单选组内移动(类型选择器、模板选择器、标签栏)。
- Escape:关闭弹窗(名片设计器、预检、打印服务、图片裁剪)。
- Home / End:在溢出菜单内跳转到第一项/最后一项。
报告问题
如果某项功能无法通过键盘访问、标签有误,或在您的环境下无法正常使用,请发邮件至 hello@abundera.ai。请注明您的浏览器、操作系统、辅助技术及具体操作流程。我们将无障碍问题列为优先处理事项。