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

我正在开发一个 HTML5 游戏,它完全发生在占据整个页面的画布元素中。我正在使用NV Access来测试它如何与屏幕阅读器配合使用。通过使用role="alert"我用 JavaScript 更新的隐藏 div ,我可以让屏幕阅读器阅读文本。


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


我role="application"在单独的测试中设置了页面的正文和画布,两个位置似乎都没有改变任何东西。


我可以让 NV Access 控制浏览器选项卡的唯一上下文是向页面添加一个隐藏的文本框并专注于该文本框,这可行,但具有让屏幕阅读器读取每次按键的副作用,这导致人物移动时总是伴随着“ss sssssssssss.dd 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在此上下文中不起作用,无论如何)。


回首忆惘然
浏览 132回答 1
1回答

慕工程0101907

此外,要设置role=application正确的 ,您还必须使canvas或 成为div可聚焦 (&nbsp;tabindex=0) 并有效聚焦它(使用.focus()方法)。这样做时,屏幕阅读器应该切换到焦点模式,在这种模式下,大多数键都会传递给您的脚本。如果不是这种情况,请按insert+space(NVDA) 或insert+Z(Jaws)。理想情况下,您当然应该向玩家提供此指令。根据设置,焦点和浏览模式之间的切换可能只能手动进行。准备好无法完全处理某些组合,例如Alt+Tab,&nbsp;Ctrl+Tab,&nbsp;Alt+F4,&nbsp;Ctrl+F4,&nbsp;Ctrl+F5,&nbsp;Alt+Left/Right, some&nbsp;Alt+letterand&nbsp;Ctrl+letter。即使它们可能被您的脚本捕获,它们的默认行为也可能不会通过event.preventDefault()在某些浏览器和操作系统中调用而取消。&nbsp;Alt+Tab例如,永远不会被窗户捕获。这是幸运的,否则您可以完全阻止用户退出您的页面。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript