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

贺飞

2023-03-14

问题内容：

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

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

在经典应用程序中，当我导航/index.html至/about.html屏幕阅读器时，显然可以检测到页面更改，然后按预期进行重新阅读。

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

注意：我目前正在测试NVDA / Chrome。

问题答案：

总的来说，您不必触发“重新读取”，并且取决于您的UI，这可能并不是一件好事。

我的经验是使用angular.js（作为可访问性人员而不是开发人员），而我们的总体方法是管理焦点而不是触发重新阅读。（我们进行了大量的辅助功能测试。）

从UI的角度来看（主要是针对屏幕阅读器用户），关键是选择链接（例如about.html）可以将您带到某个地方。

在这种情况下，放置焦点的适当位置将是about’page’内容区域的顶部，希望是<h1>。

为了tabindex使它起作用，目标元素应该通过脚本可聚焦，因此可能需要，除非它是链接或表单控件：

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

这-1意味着它不是按默认选项卡顺序排列的，而是可以通过脚本聚焦的。在WAI-
ARIA创作实践中
查看更多内容。

然后，在加载新内容（包括tabindex属性）的函数末尾，添加以下内容：

$('#test').attr('tabindex', '-1').css('outline', 'none');
$('#test').focus();

tabindex动态添加时，最好在focus()函数前一行添加，否则可能无法正常工作（我记得通过JAWS进行测试）。

为了测试这一点，我将使用以下任一方法：

在Safari / OSX上使用VoiceOver进行测试也是很好的，但是它的工作方式不同，可能不会遇到与基于Windows的屏幕阅读器相同的问题。

Chrome /
NVDA会给您带来很多问题，因为对它的支持不太好，最终用户不太可能使用它。IE可以使用NVDA，但是Firefox最好。

总体而言，值得了解WAI-ARIA的创作做法，尤其是在HTML中使用ARIA的做法。即使您使用的是JS应用程序，浏览器（因此也就是屏幕阅读器）都会解释生成的HTML，因此建议仍然有用。

最后，如果在没有用户按下空格/输入键来激活某些内容的 情况下 更新页面内容，您可能会发现JAWS /
NVDA不知道新内容，因为其“虚拟缓冲区”尚未更新。在这种情况下，您可能需要添加JS填充程序以使其更新，但只有在测试中遇到问题时才这样做，它不应该是一个全局补丁。