我正在开发一款 HTML5 游戏，该游戏完全在占据整个页面的 Canvas 元素中进行。我正在使用NV Access测试它如何与屏幕阅读器配合使用。通过使用带有 role="alert" 的隐藏 div(我用 JavaScript 更新)，我可以让屏幕阅读器读取文本。
但是，NV Access 已经为几乎每个键盘按键提供了键盘命令，因此当我尝试使用 WASD、箭头键或几乎任何非游戏 Controller 的东西控制游戏时，它会拦截我的按键在游戏处理它们之前按下。
我在单独的测试中在页面主体和 Canvas 上设置了 role="application" ，但两个位置似乎都没有改变任何内容。
我可以让 NV Access 控制浏览器选项卡的唯一上下文是通过向页面添加一个隐藏文本框并专注于该文本框，这种方法有效，但具有让屏幕阅读器读取每个键的副作用按下，这导致 Angular 色移动时总是伴随着“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 等控制操作)都会被浏览器选项卡本身接受，而不是被屏幕阅读器捕获。由于播放器控件是可配置的，因此为某些按键添加异常(exception)将不起作用(并且 aria-keyshortcuts 无论如何都不适用于此上下文)。
最佳答案
此外，要设置正确的 role=application，您还必须使 canvas 或 div 可聚焦(tabindex =0)并有效地对其进行聚焦(使用 .focus() 方法)。
这样做时，屏幕阅读器应切换到焦点模式，在该模式下，大多数键都会传递给您的脚本。
如果不是这种情况，请按 insert+space (NVDA) 或 insert+Z (Jaws)。当然，理想情况下您应该向玩家提供此指示。
根据设置，焦点和浏览模式之间的切换可能只能手动进行。
做好无法完全处理某些组合的准备，例如 Alt+Tab、Ctrl+Tab、Alt+F4、 Ctrl+F4、Ctrl+F5、Alt+左/右、一些 Alt+字母 和 Ctrl+字母。
即使它们可能被您的脚本捕获，但在某些浏览器和操作系统中调用 event.preventDefault() 可能无法取消它们的默认行为。
例如，Alt+Tab 永远不会在 Windows 上捕获。这是幸运的，否则您可以完全阻止用户退出您的页面。
关于javascript - 如何让屏幕阅读器停止将 HTML5 游戏视为文档？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58368101/