如何让屏幕 reader 停止将 HTML5 游戏视为文档?

How can I get a screen reader to stop treating an HTML5 game like a document?

我正在开发一款 HTML5 游戏,该游戏完全发生在占据整个页面的 canvas 元素中。我正在使用 NV Access 来测试它如何与屏幕 readers 一起工作。通过使用我用 JavaScript 更新的带有 role="alert" 的隐藏 div,我可以获得屏幕 reader 来阅读文本。

但是,NV Access 已经为几乎每个键盘键提供了键盘命令,因此当我尝试使用 WASD、箭头键或几乎任何不是游戏控制器的东西来控制游戏时,它会拦截我的按键在游戏可以处理之前按下。

我在页面正文和 canvas 上分别设置了 role="application" 和 canvas,这两个位置似乎都没有改变。

我可以让 NV Access 控制浏览器选项卡的唯一上下文是通过向页面添加一个隐藏的文本框并专注于它,这有效,但有屏幕的副作用 reader 阅读每一次按键,这导致移动角色总是伴随着 "s. s. sssssssssss. d. d. dddddddddd."

的声音

这基本上是游戏页面的样子:

<body role="application">
    <div>
       <div id="screenRead" role="alert"></div>
       <canvas id="background"></canvas>
       <canvas id="foreground"></canvas>
    </div>
</body>

理想情况下,所有按键(除了 Alt+Tab、Ctrl+Tab 等控制操作)都将被浏览器选项卡本身接受,而不是被屏幕捕获 reader。由于播放器控件是可配置的,因此为几个键添加例外将不起作用(并且 aria-keyshortcuts 无论如何都不适用于此上下文)。

此外,要设置正确的 role=application,您还必须使 canvasdiv 可聚焦(tabindex=0)并有效聚焦(使用.focus() 方法)。

执行此操作后,屏幕 reader 应切换到焦点模式,在该模式下,大多数键都会传递给您的脚本。

如果不是这种情况,请按 insert+space (NVDA) 或 insert+Z (Jaws) .当然,理想情况下,您应该向玩家发出此指令。
根据设置,焦点和浏览模式之间的切换可能只能手动进行。

做好无法完全处理某些组合的准备,例如 Alt+TabCtrl+TabAlt +F4, Ctrl+F4, Ctrl+F5, Alt+Left/Right, 一些 Alt+字母Ctrl+字母.
即使它们可能被您的脚本捕获,它们的默认行为也可能不会通过在某些浏览器中调用 event.preventDefault() 和 OS 来取消。 例如,Alt+Tab 永远不会出现在 windows 上。真幸运,否则您可能会完全阻止用户退出您的页面。