告诉屏幕阅读器，页面骨干/角单页的应用程序已经改变 [英] Tell screen reader that page has changed in Backbone/Angular single-page app

问题描述

假设你有一个简单的，单页的应用程序 - 无论它是使用主干网，角，灰烬或其他任何书面

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.

在我的骨干应用不过，当我按照我无法​​工作，如何引发重读的路线。我试着触发焦点事件，我已经看到的地方，但似乎并没有工作。

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 /铬测试

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.

在这种情况下，适当的地方把重点将是关于页面，内容区的顶部有希望的＆LT; H1方式＆gt;

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 意味着它的不的默认选项卡顺序，而是通过脚本可获得焦点。更多信息请访问 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 动态，最好在一条线上的焦点（）函数之前这样做，否则可能无法正常工作（我记得从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＆安培;火狐时，Windows


• 大白鲨和放大器; IE浏览器的Windows

这也是很好用在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的应用程序，浏览器（因此屏幕阅读器）是国际preting生成的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.

最后，如果要更新页面内容的没有用户pressing空间/输入激活的东西，你可能会发现，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.

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