javascript - 告诉屏幕阅读器页面已在 Backbone/Angular 单页应用程序中更改

Question

假设您有一个简单的单页应用程序 - 无论它是使用 Backbone、Angular、Ember 还是其他任何工具编写的。

您如何告诉屏幕阅读器我们在遵循路线时更改了“页面”？

在经典应用程序中，当我从 /index.html 导航到 /about.html 时，屏幕阅读器显然会检测到页面更改，并在您重新阅读时会期待。

但是在我的 Backbone 应用程序中，当我遵循一条路线时，我不知道如何触发“重读”。我已经尝试触发我在某处看到的 focus 事件，但这似乎不起作用。

注意:我目前正在使用 NVDA/Chrome 进行测试。

Answer 1

总的来说，您应该不需要触发“重读”，并且根据您的 UI 这可能无论如何都不是一件好事。

我的经验是使用 angular.js(作为可访问性人员而不是开发人员)，我们的总体方法是管理焦点而不是触发重新阅读。 (我们进行了广泛的可访问性测试。)

从 UI 的 Angular 来看(主要针对屏幕阅读器用户)，关键是选择一个链接(例如 about.html )应该将您带到某个地方。

在这种情况下，放置焦点的适当位置将是关于“页面”的内容区域的顶部，希望是<h1>。 .

为了让它工作，目标元素应该可以通过脚本聚焦，所以可能需要 tabindex除非它是链接或表单控件:

<h1 id="test" tabindex="-1">

-1意味着它不是默认的 Tab 键顺序，但可以通过脚本聚焦。查看更多信息 WAI-ARIA authoring practices .

然后在加载新内容的函数末尾，包括 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 is best .

总的来说，了解 WAI-ARIA 创作实践是值得的，尤其是 Using ARIA in HTML .即使您使用的是 JS 应用程序，浏览器(以及屏幕阅读器)也会解释生成的 HTML，因此建议仍然相关。

最后，如果您正在更新页面内容而用户按下空格/回车来激活某些内容，您可能会发现 JAWS/NVDA 不知道新内容，因为它们的“虚拟缓冲区”已经没有更新。在这种情况下，您可能需要添加 JS shim to make them update ，但只有在测试中遇到问题时才这样做，它不应该是全局补丁。