【问题标题】:how to make screen readers read entire page when angular changes states?当角度改变状态时,如何让屏幕阅读器阅读整个页面?
【发布时间】:2014-11-19 23:48:17
【问题描述】:

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

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

aria-live="assertive"

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

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

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

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

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

这对于 URL 中的每次更改都会强制重新加载。这很好用,一切都被正确读取,我们几乎认为这解决了一切。除非这会导致客户端向我们的服务器发出双重请求。

有没有什么方法可以让 NVDA 像常规页面加载一样读取角度状态的内容,而不必强制重新加载页面?

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

感谢任何帮助,我们即将放弃,并在没有角度的情况下重新启动项目,因为我们无法达到我们的可访问性要求。

【问题讨论】:

  • 您在页面的哪个位置添加了aria-live="assertive"?它是在整个身体上吗?在桌子上?
  • 你可以尝试在整个身体上结合live、atomic和related吗? IE。 aria-live="polite" aria-atomic="true" aria-relevant="additions removals"。另一种方法可能是使用角度 $stateChangeStart$stateChangeSuccess 事件“切换”各个元素上 aria 值的存在。 (不幸的是,我目前无法测试这些建议)
  • 我们实际上已经尝试了很多,但没有任何效果。问题主要出在表单上,​​当您想编辑某些内容时,由于它会填充字段,因此某些字段不会更改,因此我们不能手动将 aria-live 放在每个字段上,因为并非所有字段都在更改/读取。

标签: javascript angularjs firefox accessibility nvda


【解决方案1】:

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

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

屏幕阅读器可访问性is acheivable when using Angular,但我们需要重新设置一些假设:

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

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

【讨论】:

  • 根据这个问题的浏览量,可能很多人和我都有同样的要求,我觉得很有趣。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-06-18
  • 1970-01-01
  • 1970-01-01
  • 2012-04-11
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多