告诉屏幕阅读器在 Backbone/Angular 单页应用程序中页面已更改 [英] Tell screen reader that page has changed in Backbone/Angular single-page app

问题描述

想象一下，您有一个简单的单页应用程序 - 无论它是使用 Backbone、Angular、Ember 还是其他任何东西编写的.

Imagine you have a simple, single-page application - regardless of whether it was written using Backbone, Angular, Ember or anything else.

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

How can you tell a screen reader that we've changed 'page' when a route is followed?

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

In a classic application, when I navigate from /index.html to /about.html the screen reader obviously detects the page change, and re-reads as you'd expect.

不过，在我的 Backbone 应用程序中，当我遵循一条路线时，我无法弄清楚如何触发重新读取"​​.我尝试触发在某处看到的 focus 事件，但这似乎不起作用.

In my Backbone application though, when I follow a route I cannot work out how to trigger a 're-read'. I've tried triggering a focus event which I'd seen somewhere, but that doesn't seem to work.

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

Note: I'm currently testing with NVDA/Chrome.

推荐答案

总的来说，您不应该需要触发重读"，这取决于您的 UI，这可能无论如何都不是一件好事.

Overall, you should not need to trigger a 're-read', and depending on your UI that might not be a good thing anyway.

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

My experience has been with angular.js (as an accessibility person rather than the developer), and our overall approach was to manage the focus rather than trigger a re-read. (We do extensive accessibility testing.)

从 UI 的角度来看(主要针对屏幕阅读器用户)的关键是选择一个链接(例如 about.html)应该会把你带到某个地方.

The key thing from a UI point of view (primarily for screen reader users) is that selecting a link (e.g. about.html) should take you somewhere.

在这种情况下，放置焦点的适当位置是关于页面"的内容区域的顶部，希望是

.

In this case the appropriate place to put the focus would be the top of the content area of the about 'page', hopefully an <h1>.

为了使其工作，目标元素应该可以通过脚本获得焦点，因此可能需要 tabindex 除非它是链接或表单控件:

In order for that to work the target element should be focusable via a script, so probably needs tabindex unless it is a link or form control:

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

-1 表示它在默认 Tab 键顺序中不是，但可以通过脚本获得焦点.请参阅WAI-ARIA 创作实践.

The -1 means it is not in the default tab order, but is focusable via a script. See more at WAI-ARIA authoring practices.

然后在加载新内容的函数的末尾，包括 tabindex 属性，添加如下内容:

Then at the end of the function that loads the new content, including the tabindex attribute, add something like:

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

动态添加 tabindex 时，最好在 focus() 函数之前的一行中添加，否则它可能不起作用(我记得用 JAWS 测试过).

When adding tabindex dynamically it is best to do so in a line before the focus() function otherwise it may not work (I remember that from testing with JAWS).

为了测试这个，我会使用:

To test this I would use either:

• NVDA &火狐、视窗
• 大白鲨浏览器、视窗

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

It is also good to test with VoiceOver on Safari/OSX, but that works differently and may not hit the same issues as a windows based screen reader.

使用 Chrome/NVDA 会遇到很多问题，因为它们不受支持，最终用户不太可能使用它.IE 对 NVDA 没问题，但 Firefox 最好.

You will hit a lot of issues with Chrome/NVDA as that is not supported very well, and end-users are very unlikely to use that. IE is ok with NVDA, but Firefox is best.

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

Overall, it is worth getting to know the WAI-ARIA authoring practices, particularly Using ARIA in HTML. Even though you are using a JS app, the browser (and therefore screen reader) is interpreting the resulting HTML so that advice is still relevant.

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

Lastly, if you are updating page content without the user pressing space/enter to activate something, you might find that JAWS/NVDA do not know about the new content as their 'virtual buffer' has not updated. In that case, you might need to add a JS shim to make them update, but only do that if you run into problems in testing, it should not be a global patch.

这篇关于告诉屏幕阅读器在 Backbone/Angular 单页应用程序中页面已更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！