总的来说,你不应该需要触发“重新阅读”,而且根据你的用户界面,这可能也不是一个好的选择。
我的经验是使用angular.js(作为一个辅助功能人员而不是开发人员),我们的整体方法是管理焦点而不是触发重新阅读。(我们进行了广泛的辅助功能测试。)
从用户界面的角度来看(主要针对屏幕阅读器用户),选择链接(例如about.html
)应该可以带你到某个地方。
在这种情况下,将焦点放置在关于“页面”的内容区域顶部,希望能够实现<h1>
标签的标题。
为了使其正常工作,目标元素应该通过脚本具有可聚焦性,因此可能需要使用tabindex
,除非它是链接或表单控件:
<h1 id="test" tabindex="-1">
-1
表示元素 不在 默认的 Tab 键顺序中,但可以通过脚本聚焦。更多信息请查看WAI-ARIA 作者实践。
然后,在加载新内容的函数末尾,包括 tabindex 属性,添加类似以下的代码:
$('#test').attr('tabindex', '-1').css('outline', 'none');
$('#test').focus();
动态添加 tabindex
时最好在调用 focus()
函数之前的同一行添加,否则可能无法正常工作(我记得在测试 JAWS 时遇到了这个问题)。
测试时可以使用以下任一组合:
- NVDA 和 Firefox,在 Windows 系统上
- Jaws 和 IE,在 Windows 系统上
在 Safari/OSX 上使用 VoiceOver 进行测试也很好,但它的工作方式有所不同,并且可能不会遇到与基于 Windows 的屏幕阅读器相同的问题。
如果使用 Chrome/NVDA,您将会遇到许多问题,因为它的支持并不是非常好,终端用户也十分不可能使用它。IE 与 NVDA 配合使用还可以,但Firefox 是最好的选择。
总的来说,值得了解 WAI-ARIA 作者实践指南,特别是在 HTML 中使用 ARIA。即使您使用的是 JS 应用程序,浏览器(以及屏幕阅读器)仍然会解释生成的 HTML,因此该建议仍然适用。
最后,如果您没有要求用户按下空格/回车键来激活某些操作而更新页面内容,您可能会发现 JAWS/NVDA 不知道新内容的存在,因为它们的“虚拟缓冲区”没有更新。在这种情况下,您可能需要添加一个JS shim 来刷新它们,但只有在测试中遇到问题时才这样做,而不要进行全局修补。