Phaser HTML5游戏框架屏幕阅读器无法识别弹窗内容问题咨询

Phaser默认将所有游戏内容渲染在Canvas画布中，而屏幕阅读器默认不会识别Canvas内部的绘制内容，所以需要额外做无障碍适配，具体操作如下：

1. 绑定无障碍辅助DOM节点 #

这是兼容性最好的适配方案：

• 弹窗触发展示时，在HTML的body层动态插入和弹窗内容完全对应的无障碍辅助DOM容器，设置role="dialog"、aria-modal="true"、aria-hidden="false"属性，同时给容器设置CSS：position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;，保证容器不会干扰视觉界面，但能被屏幕阅读器正常抓取
• 给弹窗内的确认按钮对应生成一个<button>辅助DOM，设置aria-label="同意游戏规则进入游戏"，绑定和Phaser内确认按钮完全一致的点击触发逻辑
• 弹窗弹出时主动将页面焦点移动到辅助确认按钮上，代码示例：document.querySelector('#accessibility-confirm-btn').focus()

2. 开启Phaser内置无障碍插件 #

Phaser 3自带官方无障碍插件，可直接对接游戏内元素：

• 初始化游戏时开启插件，配置示例：

const gameConfig = {
  type: Phaser.AUTO,
  parent: 'game-container',
  // 其余游戏配置省略
  plugins: {
    global: [
      {
        key: 'AccessibilityPlugin',
        plugin: Phaser.Plugins.AccessibilityPlugin,
        start: true,
        data: { debug: false }
      }
    ]
  }
}

• 给弹窗文本绑定无障碍属性：

const instructionText = this.add.text(400, 300, '游戏规则具体内容', { fontSize: '24px' });
this.plugins.get('AccessibilityPlugin').enable(instructionText, {
  ariaLabel: instructionText.text,
  role: 'document'
});

• 给确认按钮绑定无障碍属性，弹窗弹出时主动播报提示：

const confirmBtn = this.add.text(400, 500, '确认同意', { fontSize: '28px' }).setInteractive();
this.plugins.get('AccessibilityPlugin').enable(confirmBtn, {
  ariaLabel: '确认同意游戏规则，进入游戏',
  role: 'button'
});
// 弹窗弹出时触发播报
this.plugins.get('AccessibilityPlugin').announce('游戏规则弹窗已打开，请阅读规则后点击确认按钮进入游戏');

3. 适配效果验证 #

适配完成后可通过常用屏幕阅读器测试效果：

• Windows平台可搭配NVDA和Chrome/Edge测试
• Mac/iOS平台可使用VoiceOver测试
• 确认弹窗弹出时自动朗读规则内容、焦点可正常切换到确认按钮、触发按钮可正常进入游戏即可

内容的提问来源于stack exchange，提问作者Juturu Sanathan