如何让屏幕阅读器停止将 HTML5 游戏视为文档？

Question

I'm working on an HTML5 game that entirely takes place in a canvas element that takes up the full page.我正在开发一个 HTML5 游戏，该游戏完全发生在占据整页的 canvas 元素中。 I'm using NV Access to test how it works with screen readers.我正在使用NV Access来测试它如何与屏幕阅读器一起使用。 By using a hidden div with role="alert" that I update with JavaScript, I can get the screen reader to read text.通过使用我用 JavaScript 更新的role="alert"的隐藏 div，我可以让屏幕阅读器阅读文本。

However, NV Access already has keyboard commands for pretty much every keyboard key, so when I try to control the game with WASD, or the arrow keys, or pretty much anything that isn't a game controller, it intercepts my key presses before the game can process them.但是，NV Access 已经为几乎每个键盘键提供了键盘命令，因此当我尝试使用 WASD、箭头键或几乎任何非游戏 controller 来控制游戏时，它会在游戏可以处理它们。

I've set role="application" on both the page's body and the canvas on separate tests and neither position seemed to change anything.我在页面正文和 canvas 上都设置了role="application"在单独的测试中，position 似乎都没有改变任何东西。

The only context where I could get NV Access to give control to the browser tab was by adding a hidden textbox to the page and focusing on that, which worked, but had the side-effect of having the screen reader read every key press, which led to moving the character always being accompanied by the sounds of "ss sssssssssss. dd dddddddddd."我可以让 NV Access 控制浏览器选项卡的唯一上下文是向页面添加一个隐藏的文本框并专注于它，这很有效，但有副作用是让屏幕阅读器读取每个按键，这导致角色移动时总是伴随着“ss sssssssssss.dd dddddddddd”的声音。

This is essentially what the game page looks like:这基本上是游戏页面的样子：

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

Ideally all key presses (barring control actions like Alt+Tab, Ctrl+Tab, etc.) will be accepted by the browser tab itself instead of being caught by a screen reader.理想情况下，所有按键（禁止 Alt+Tab、Ctrl+Tab 等控制操作）都将被浏览器选项卡本身接受，而不是被屏幕阅读器捕获。 Since player controls are configurable, adding exceptions for a few keys won't work (and aria-keyshortcuts didn't work for this context, anyway).由于播放器控件是可配置的，因此为几个键添加例外将不起作用（而且aria-keyshortcuts在这种情况下无论如何都不起作用）。

Answer 1

Additionally to set the role=application which is correct, you must also make the canvas or a div focusable ( tabindex=0 ) and effectively focus it (using the .focus() method).此外，要设置正确的role=application ，您还必须使canvas或div可聚焦（ tabindex=0 ）并有效地聚焦它（使用.focus()方法）。

Doing so, the screen reader should switch to focus mode, in which most keys are passed to your script.这样做，屏幕阅读器应该切换到焦点模式，在这种模式下，大多数键都会传递给您的脚本。

If this isn't the case, press insert+space (NVDA) or insert+Z (Jaws).如果不是这种情况，请按insert+space (NVDA) 或insert+Z (Jaws)。 Ideally you should give this instruction to the player, of course.当然，理想情况下，您应该将此指令交给玩家。
Depending on settings, the switch between focus and browse mode may be manual only.根据设置，焦点和浏览模式之间的切换可能只能手动进行。

Be prepared to be unable to completely handle certain combinations like Alt+Tab , Ctrl+Tab , Alt+F4 , Ctrl+F4 , Ctrl+F5 , Alt+Left/Right , some Alt+letter and Ctrl+letter .准备好无法完全处理某些组合，例如Alt+Tab 、 Ctrl+Tab 、 Alt+F4 、 Ctrl+F4 、 Ctrl+F5 、 Alt+Left/Right 、一些Alt+letter和Ctrl+letter 。
Even though they may be caught by your script, their default behavior might not be cancelled by calling event.preventDefault() in certain browsers and OS.即使它们可能被您的脚本捕获，它们的默认行为也可能不会通过在某些浏览器和操作系统中调用event.preventDefault()来取消。 Alt+Tab is never caught on windows, for example.例如， Alt+Tab永远不会在 windows 上被捕获。 That's fortunate, otherwise you could completely prevent the user from exiting your page.很幸运，否则您可以完全阻止用户退出您的页面。

如何让屏幕阅读器停止将 HTML5 游戏视为文档？

问题描述

1 个解决方案

解决方案1
2 2019-10-14 17:35:42

如何让屏幕阅读器停止将 HTML5 游戏视为文档？

问题描述

1 个解决方案

解决方案1 2 2019-10-14 17:35:42

解决方案1
2 2019-10-14 17:35:42