小游戏可访问性设计

预计阅读 20 分钟

📋版本信息

最后更新：2026-07-09 · 适用基础库：≥ 3.9.0（最低兼容 ≥ 2.30.0）

可访问性（Accessibility）在 Web 开发中已逐渐成为标配，但在小游戏领域仍被大量忽视。本章讲解小游戏可访问性的现状、适合落地的设计策略，以及如何在视觉、听觉、操作三个维度上让更多玩家顺畅体验游戏。

---

小游戏可访问性的现状

微信小游戏目前没有类似 Web 的屏幕阅读器（Screen Reader）标准，也缺乏系统级的无障碍 API。因此，小游戏的可访问性更多依赖游戏设计层面的包容性设计，而不是平台辅助技术。

但这不意味着可以忽视。以下群体需要特别关照：

• 色觉异常玩家：约 8% 男性和 0.5% 女性存在某种形式的色盲/色弱。
• 听力障碍玩家：依赖声音提示的游戏会让他们处于劣势。
• 老年玩家：视力、反应速度、操作精细度下降。
• 低龄玩家：阅读能力有限，需要更直观的视觉反馈。

---

视觉设计

颜色对比与色盲友好

• 文字与背景对比度 ≥ 4.5:1。
• 不要仅用颜色传递关键信息，应配合形状、文字标签或图标。

// ❌ 错误：红绿色盲玩家无法区分
const enemyType = isElite ? '#ff0000' : '#00ff00'

// ✅ 正确：形状 + 颜色双重编码
const enemyShape = isElite ? 'diamond' : 'circle'
const enemyColor = isElite ? '#ff4444' : '#44ff44'

字体与 UI 缩放

• 支持字体大小调节选项（小/中/大）。
• 重要文字避免使用装饰性过强的字体。
• 提供高对比度模式（黑底白字或白底黑字）。

动态效果控制

• 尊重 prefers-reduced-motion，为眩晕敏感玩家提供关闭闪烁、震屏的选项。
• 避免屏幕频繁闪烁（光敏性癫痫风险）。

---

听觉设计

不要依赖声音作为唯一反馈

• 关键事件（得分、受伤、技能冷却完成）同时提供视觉提示。
• 字幕/音效说明：为语音、环境音提供文字提示。

// 受伤时同时播放音效和屏幕闪红
function onPlayerHurt() {
  AudioManager.play('hurt')
  ScreenFlash.flash('#ff0000', 0.2)
}

震动反馈

wx.vibrateShort 可以作为听觉反馈的替代或补充，但应提供开关：

wx.vibrateShort({ type: 'light' })

---

操作设计

降低操作门槛

• 提供 "长按代替连点"、"自动瞄准"、"一键技能" 等辅助选项。
• 允许调整按钮大小和位置。
• 重要操作增加确认或撤销机制。

时间压力缓解

• 为反应较慢的玩家提供 "暂停思考" 模式或更宽松的计时器。
• 解谜类游戏可关闭倒计时。

输入辅助

• 虚拟摇杆/按钮支持自定义大小和透明度。
• 提供手势与按钮两种操作方式。

---

微信小游戏中的无障碍 API

虽然平台级支持有限，但仍有一些可用能力：

API	用途
wx.vibrateShort / wx.vibrateLong	触觉反馈
wx.getSystemInfoSync().fontSizeSetting	获取用户系统字体大小设置
wx.setInnerAudioOption	控制音频是否遵循静音开关

---

可访问性检查清单

• [ ] 关键信息不仅依赖颜色传递。
• [ ] 文字对比度 ≥ 4.5:1。
• [ ] 音效有对应的视觉反馈。
• [ ] 提供字体大小/对比度/动效开关。
• [ ] 按钮热区 ≥ 88×88 px，支持自定义位置。
• [ ] 支持震动反馈并可关闭。
• [ ] 付费/删除等危险操作有二次确认。

---

📝 课后练习

练习 1：为关卡选择界面做色盲友好改造

题目： 当前关卡按钮用绿色表示已通过、红色表示未通过、灰色表示锁定。请设计一套色盲玩家也能区分的方案。

参考答案：

• 已通过：绿色背景 + 对勾图标 ✓
• 未通过：红色背景 + 感叹号图标 !
• 锁定：灰色背景 + 锁图标 🔒

通过图标形状与颜色双重编码，解决红绿色盲无法区分的问题。

---

本章小结

• 小游戏平台级无障碍支持有限，包容性设计主要靠游戏内实现。
• 视觉：颜色不要作为唯一信息通道，保证对比度，提供缩放和高对比度模式。
• 听觉：关键反馈同时提供视觉提示，字幕说明音效内容。
• 操作：支持自定义按钮、输入辅助、时间压力缓解和危险操作确认。
• 可访问性不仅是社会责任，也能扩大游戏的潜在用户群。