无障碍访问
我们如何为键盘、屏幕阅读器、低视力和低技术用户构建。一份诚实的、有日期的快照。
正式无障碍声明
- 目标标准
- WCAG 2.2 AA 覆盖整体体验。焦点外观（厚实的高对比度环，不被遮挡）和表单标签 + 错误恢复采用 AAA 处理。跟踪 W3C 建议，而非释义。
- 上次内部审计
- 2026-04-19。我们自己的团队对主页、print-size、/standards/ 中心 + 9 个权威页面以及 45 个支付方案落地页进行了手动检查。
- 外部审计
- 已委托，报告待定。到达时将在 /accessibility/audit/ 发布，附带修复说明, 缺陷完整保留，不进行选择性展示。
- 重测频率
- 每月抽查 + 任何重大 UI 变更后进行全面手动检查。自动化检查（对比度检查、WCAG 2.2 新标准扫描）在每次部署时运行。
- 联系方式 + SLA
- hello@abundera.ai, 我们在 2 个工作日内确认无障碍报告，5 天内分类处理，并将键盘 / 屏幕阅读器 / 认知障碍视为优先问题（优先于功能工作处理）。
按成功准则分类的 WCAG 2.2 AA 合规性
我们正在积极关注的 2.2 版本新标准。状态反映了我们内部已验证的内容；外部审计将取代这些内容。
| SC | 准则 | 等级 | 状态 |
|---|---|---|---|
| 2.4.11 | 焦点不被遮挡（最低） | AA | 通过, 焦点环始终可见，不隐藏在固定标题下 |
| 2.4.12 | 焦点不被遮挡（增强） | AAA | 在生成器界面通过；某些抽屉在动画期间有短暂重叠 |
| 2.4.13 | 焦点外观 | AAA | 通过, 3 px 轮廓 + 2 px 偏移 + 任意背景下的 box-shadow 备份 |
| 2.5.7 | 拖动操作 | AA | 通过, 无需仅拖动的基本交互；名片设计器为每个拖动操作提供键盘替代方案 |
| 2.5.8 | 目标尺寸（最低） | AA | 通过, 已验证每个交互目标最小 24×24 CSS px；大多数为 28×28 或 40×40 |
| 3.2.6 | 一致的帮助 | A | 通过, 帮助 / 联系方式在每个页面的相同位置显示（页脚 + 导航） |
| 3.3.7 | 冗余输入 | A | 通过, 没有表单需要重新输入用户在同一会话中已提供的数据 |
| 3.3.8 | 无障碍身份验证（最低） | AA | 不适用, 无认知功能测试；Abundera QR 不需要登录 |
动效和强制颜色支持
- prefers-reduced-motion: reduce, 环境球体浮动和淡入过渡效果被抑制。功能性过渡保持简短。已通过 macOS Reduce Motion 和 Windows"显示动画"禁用验证。
- forced-colors: active（Windows 高对比度模式）, 焦点环使用系统高亮颜色；边框继承系统 CanvasText。已在 Windows 11 高对比度的 Edge 中验证。
已知限制
- JAWS 尚未测试。 下一轮 AT 测试目标是 Windows 11 上 Edge 中的 JAWS。
- 名片设计器 在拖动定位预览的设计中以鼠标为主。每个控件都有键盘替代方案，但实时反馈循环仍然是视觉的。颜色输入、预设网格和十六进制字段现在具有明确的 ARIA 绑定（2026-04-19）。
- 外部审计报告待定。上表中自我认证的状态将在报告到达时被审计员的发现所取代。
- 某些第三方辅助技术（Dragon NaturallySpeaking、Android 上的语音转文字）不在我们的回归矩阵中；我们接受社区报告并按票处理修复。
无障碍更新日志
- 2026-04-19（下午）, 修复了 TalkBack 实时区域双重触发问题：从
#qr-preview包装器中删除了aria-live="polite"；公告现在仅来自可扫描性role="status"徽章，每次生成一次。BCD 模态：颜色选择器获得了适当的<label for>绑定（背景、文字、强调色、渐变）；预设网格容器获得了role="group"+aria-label。无障碍表格获得了<caption>+scope="col"/"row", WCAG 2.2 AA + AT 矩阵现在在 VoiceOver、NVDA 和 TalkBack 上正确公告。 - 2026-04-19（上午）, 升级了焦点指示器（3 px + box-shadow 备份）。添加了 forced-colors + prefers-reduced-motion 支持。目标尺寸审计：
.saved-profile-delete、.type-search-clear、.compat-toggle-btn提升至 ≥ 28 px。修复了标题级别跳跃（vCard/MECARD 子标题 h4 → h3）。发布了正式 WCAG 2.2 AA 声明 + AT 矩阵。 - 2026-04-18, 记录了手动 WCAG 2.2 AA 基线检查。将四柱信任条折叠以获得更清晰的层次结构。
- 2026-03-08, 发布了初始 /accessibility/ 页面。
我们的承诺
- 完整的键盘导航。 每个生成器控件、每个模态和每个导出流程都可以不使用鼠标访问。
- 可见的焦点状态。 聚焦的输入框、按钮和链接显示清晰的环。我们不仅仅依赖颜色。
- 每个字段都有标签。 表单输入具有关联的
<label>元素或aria-label属性。占位符文本永远不会作为唯一标签使用。 - QR 预览和提示的 ARIA 实时区域。 屏幕阅读器在"QR 已生成"和提示消息触发时就能听到，而不仅仅是在焦点移动到它们时。
- 纯图标按钮的文本替代。 每个纯 SVG 按钮都有
aria-label。 - 与颜色无关的状态含义。 可扫描性徽章和兼容性芯片将颜色与字形和文本标签配对。
- 明确的导出格式名称。 下载按钮显示"下载 PNG"、"下载 SVG"等，而不仅仅是"下载"。
- 大型移动触摸目标。 交互元素在粗略指针上至少为 44 × 44 CSS 像素，符合 WCAG 2.5.8。
- 尊重减少动效。 在
prefers-reduced-motion: reduce下禁用过渡效果。
我们仍然不足的地方
- JAWS 尚未测试。 已获取 JAWS 许可证，下一轮 AT 测试的测试员时间已预订。所有其他主要工具（VoiceOver macOS + iOS、NVDA、Narrator、TalkBack）已通过最新回归测试。
- 名片设计器 在设计上对鼠标依赖较重（拖动定位、画布预览）。每个控件都存在键盘替代方案，但实时预览反馈循环仍以视觉为主。颜色控件现在使用适当的
<label for>绑定 + 预设选择器上的role="group"（2026-04-19）。 - 复杂的生成器流程（批量 CSV、多步向导） 可以使用更好的跳过链接结构。已计划。
- 描述性表格摘要。 无障碍 + 兼容性表格现在具有
<caption>+scope属性（2026-04-19）。每行更长的行级叙述性摘要仍在计划中。
辅助技术支持矩阵
工程产物，而非公关声明。每一行都是我们亲身测试过的真实浏览器 + AT + 平台组合。状态反映最新的手动检查；注意事项记录仍阻碍完整通过的任何内容。
| 浏览器 | AT | 平台 | 最后通过 | 状态 | 已知注意事项 |
|---|---|---|---|---|---|
| Safari | VoiceOver | macOS 15 | 2026-04-19 | 通过 | 命令面板首次打开时"快捷键"列表读取项目两次；外观问题，不阻碍使用 |
| Safari | VoiceOver | iOS 18 | 2026-04-19 | 通过 | 转子重新排序一些动态插入的芯片；交互时重新公告可恢复顺序 |
| Firefox | NVDA | Windows 11 | 2026-04-19 | 通过 | , |
| Chrome | NVDA | Windows 11 | 2026-04-19 | 通过 | , |
| Chrome | ChromeVox | ChromeOS 128 | 2026-03-30 | 已抽查 | 完整回归已过期；重新排队等待下一个版本 |
| Chrome | TalkBack | Android 14 | 2026-04-19 | 通过 | QR 预览上的实时区域双重触发（在防抖期间两次公告"QR 预览已更新"）已于 2026-04-19 修复：从预览包装器中删除了 aria-live；公告现在仅来自可扫描性 role="status" 徽章，每次生成一次。 |
| Edge | Narrator | Windows 11 | 2026-04-12 | 通过 | 强制颜色模式（本版本新增）：焦点环正常，但某些芯片边框折叠为透明, 已排队 |
| Safari | JAWS | Windows 11 | , | 未测试 | 已安排在下一轮 AT 测试；已获取 JAWS 许可证，测试员时间已预订 |
| Any | Dragon NaturallySpeaking | Windows 11 | , | 未测试 | 接受社区报告；按票处理修复，直到专用回归测试到位 |
键盘映射
- Tab / Shift+Tab：在可聚焦元素中前进 / 后退。
- Enter / 空格：激活按钮和切换开关。
- 方向键：在单选组中的选项之间移动（类型选择器、模板选择器、标签栏）。
- Escape：关闭模态（名片设计器、预检、打印服务、图像裁剪）。
- Home / End：在溢出菜单中跳转到第一个 / 最后一个项目。
内部审计, 2026-04-19
对主页、/print-size/、新的/standards/中心 + 9 个权威页面以及 45 个支付方案落地页（继承自共享模板）进行手动 WCAG 2.2 AA 检查。我们验证的内容、修复的内容以及未解决的内容：
已验证通过
- 跳过链接目标存在, 跳过链接（
href="#generator"）在每个页面变体上解析为可见元素。 - 焦点可见样式,
:focus-visible全局声明带有 2px 轮廓，以及每个输入的覆盖（带有颜色边框 + 阴影）。已通过site/css/style.c17bfd85.css第 34 和 88 行的 CSS 审计确认。 - 所有表单输入都有标签, 生成器中的每个
<input>/<select>/<textarea>都有明确的<label for="...">或包装的<label>。任何地方都不使用占位符作为标签。 - 按钮具有可访问的名称, 每个
<button>都有文本内容或aria-label。纯 SVG 按钮（汉堡菜单、分享、安装）都带有aria-label。 - 装饰性 SVG 标记为隐藏, 每个装饰图标上都有
aria-hidden="true"，这样屏幕阅读器就会跳过它们，而不是公告其几何形状。 - 正确的 ARIA 角色, 类型选择器上的
role="radiogroup"，每个选项上有role="radio"+aria-checked；面板标签上有role="tablist"/role="tab"+aria-selected。 - 文本对比度, 主文本为
#08090a上的#f5f5f5（≈ 17:1，WCAG AAA）。同一背景上的柔和文本#a3a3a3≈ 8:1（高于 AAA 7:1）。 - 语言切换器 有
aria-label="Language"，即使可见标签是隐式的。
在本次检查中修复
- 标题级别跳跃, vCard / MECARD 额外字段部分中的三个子标题是
<h2>下没有中间<h3>的<h4>。屏幕阅读器大纲工具将此标记为"跳过级别"。已更改为<h3>，使大纲读取 h1 → h2 → h3 → h3 干净。
已知限制
- Axe / NVDA / VoiceOver 完整扫描 需要我们无法从构建管道运行的浏览器 + AT。每月安排一次基于浏览器的手动检查。
- 第三方独立审计已委托（参见占位符 /accessibility/audit/）。报告到达时将发布，即使包含发现也是如此。
- "/" 键盘快捷键对于命令面板，在带有搜索字段的页面上存在轻微的冲突风险。我们仅在焦点在输入框外时使用 preventDefault()；已记录但尚未与 AT 一起审计。
报告问题
如果某些内容无法通过键盘访问、标签错误或以其他方式在您的设置中无法使用，请发送电子邮件至 hello@abundera.ai。请注明您的浏览器、操作系统、AT 和具体流程。我们将无障碍访问错误视为优先问题。