我正在开发一款HTML5游戏,它完全发生在占据整个页面的画布元素中。我正在使用NV Access来测试它如何与屏幕阅读器配合使用。通过使用隐藏的div 和我用 JavaScript 更新的role="alert"
,我可以让屏幕阅读器阅读文本。
但是,NV Access 已经为几乎所有键盘键提供了键盘命令,因此当我尝试使用 WASD 或箭头键或几乎任何不是游戏控制器的东西来控制游戏时,它会在游戏处理它们之前拦截我的按键。
我已经在单独的测试中在页面正文和画布上设置了role="application"
,但这两个位置似乎都没有改变任何东西。
我可以让 NV Access 控制浏览器选项卡的唯一上下文是向页面添加一个隐藏的文本框并专注于此,这有效,但副作用是让屏幕阅读器读取每个按键,这导致移动字符总是伴随着"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 等控制操作外(而不是被屏幕阅读器捕获。由于播放器控件是可配置的,因此为几个键添加例外将不起作用(无论如何,aria-keyshortcuts
不适用于此上下文(。
此外,要设置正确的role=application
,还必须使canvas
或div
可聚焦(tabindex=0
(并有效地聚焦(使用.focus()
方法(。
这样做时,屏幕阅读器应切换到焦点模式,在该模式下,大多数键将传递给脚本。
如果不是这种情况,请按插入+空格键 (NVDA( 或插入 +Z键(大白鲨(。当然,理想情况下,您应该将此指令提供给玩家。
根据设置,焦点和浏览模式之间的切换可能仅是手动的。
准备好无法完全处理某些组合,如Alt+Tab、Ctrl+Tab、Alt+F4、Ctrl+F4、Ctrl+F5、Alt+Left/Right、一些Alt+letter和Ctrl+Letter。
即使它们可能被脚本捕获,它们的默认行为也可能不会通过在某些浏览器和操作系统中调用event.preventDefault()
来取消。 例如,Alt+Tab永远不会在窗口中捕获。这是幸运的,否则您可以完全阻止用户退出您的页面。