javascript - 当 Angular 改变状态时，如何让屏幕阅读器阅读整个页面？

Question

要求:每次更改页面时，屏幕阅读器必须阅读整个页面内容。

我们使用 firefox+NVDA 进行测试，由于 angular 不会“更改页面”，我们尝试了以下方法使其在更改状态时读取整个页面:

aria-live="assertive"

这在很大程度上读取了我们站点中文本的更改，但它只读取了添加的内容，在我们的例子中，我们有一个表格被 ng-repeat 填充并且它读取正在添加信息但没有任何上下文(它没有说明正在读取的行或列)

另一个问题是表单，当被 angular 填充时，屏幕阅读器会在它们被 angular 填充之前读取它，这已通过 $timeout 解决，但仍然是 aria-live 读取它会跳过一些部分的更改，如果我们添加 aria-atomic 来强制读取，我们有一些带有多个选项的选择，并且那些被读取(所有这些，我们有超过一百种选择)。这不是屏幕阅读器的阅读方式，它们只会阅读前十个选项或您单击它们时可见的选项。

请记住，如果没有任何 aria-live 或 aria-atomic，当您更改 Angular 状态时，用户不会收到任何更改通知。

在几乎放弃之后，我们决定也许我们的重点是错误的，我们需要让每个州都有自己的页面，所以我们使用了以下内容:

function ForceNVDARead() {
    $(window).on('hashchange', function () {
        location.reload();
    });
}

URL 中的每次更改都会强制重新加载。这很好用，所有内容都被正确读取，我们几乎认为这解决了所有问题。除了这会导致客户端向我们的服务器发出双重请求。

有没有办法让 NVDA 像常规页面加载一样读取 Angular 状态的内容，而不必强制重新加载页面？

请不要说只使用 aria-roles 或类似的东西对此不起作用，我们已经有了它们，我们需要应用程序在更改状态时读取所有内容。

感谢任何帮助，我们即将放弃，并在没 Angular 情况下重新启动项目，因为我们无法实现我们的可访问性要求。

Answer 1

Requirement: on each page change the screen reader must read the entire page content.

从可访问性的 Angular 来看，这根本不是一个要求，它相当于让某人看着屏幕一次一行地阅读所有内容，或者使用 readquick , 这不是自然用法。

屏幕阅读器辅助功能 is acheivable when using Angular , 但我们需要重新设定一些假设:

• 当你有页面更新时，关键是manage the focus , 并移至新内容。这允许人们以自己的方式阅读，而不是您一直假设他们必须阅读的方式。
• ARIA live 旨在用于页面其他地方(远离键盘焦点)的小更新，而不是全部内容，这不是这里的答案，我会完全放弃它。
• 如果人们在加载之前阅读表格，这可能是尝试使用 ARIA-live 强制阅读的副作用。如果没有，则尝试使用焦点管理在加载表单时将焦点放在表单顶部。
• 可能值得一读a tutorial on NVDA usage ，或与“本地”用户交谈。根据经验，我可以说您并没有像最终用户那样使用它，因此请更好地理解什么是“正常”交互。

如果您放弃使用 ARIA-live 并转而使用焦点管理，您可能会解决大部分问题，但稍后从不同的 Angular 来看可能会有更多问题。