伊斯坦布尔卡德柯伊一家 12 桌的茶馆切换到兼容 VoiceOver 与 TalkBack 的 QR 菜单,经土耳其盲人协会社交分享后,每月新增 240 名访客。语音可访问性已直接驱动营收。
WCAG 2.2 AA 基础
屏幕阅读器需要语义化 HTML:产品名使用 h3,价格通过 aria-describedby 关联,过敏原图标加 aria-label="含麸质"。对比度不低于 4.5:1,触摸目标 44×44 px,Tab 顺序合理。
仅使用 Emoji 不够 — 视障用户听不到任何信息,除非添加 ARIA 标签。
购物车 ARIA Live
添加商品时,role="status" 或 aria-live="polite" 区域播报:「扁豆汤已加入,共 3 件」。错误使用 role="alert",阅读器会立即打断当前朗读。
thMenu 的 ToastProvider 默认 aria-live="polite"。过敏原为空时显示「请咨询服务员」作为安全回退。
上线前测试
在 iPhone 打开 VoiceOver 或 Android 打开 TalkBack,完整走一遍下单流程。超过 1 秒的静默通常代表焦点问题。Axe DevTools 或 WAVE 可在 30 秒内发现主要违规。
请真正的视障用户协助测试 — 自动化工具无法捕捉使用情境。
常见问题
需要单独的音频菜单链接吗? 不需要,正确的语义 HTML 即可服务所有人。
应该自行接入 TTS 吗? 不必,系统阅读器已经具备。
能取得 WCAG 认证吗? 暂无官方认证,VPAT 报告是最接近的形式。
觉得有用?分享给朋友。