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

Question

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

如果跟踪路线,你如何告诉屏幕阅读器我们改变了'页'？

在一个典型的应用程序,当我从导航/index.html到/about.html屏幕阅读器显然检测的页面变化,并重新读取,你所期望的.

然而,在我的Backbone应用程序中,当我遵循路线时,我无法确定如何触发"重新读取"​​.我试过触发一个focus我在某个地方看过的事件,但这似乎不起作用.

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

Answer 1

总的来说,您不需要触发"重新读取"​​,并且取决于您的UI,无论如何都可能不是一件好事.

我的经验是使用angular.js(作为可访问性的人而不是开发人员),我们的整体方法是管理焦点而不是触发重新阅读.(我们进行广泛的可访问性测试.)

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

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

为了使其工作,目标元素应该可以通过脚本进行聚焦,因此tabindex除非是链接或表单控件,否则可能需要:

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

这-1意味着它不是默认的Tab键顺序,但可以通过脚本进行聚焦.有关WAI-ARIA创作实践的更多信息,请参阅.

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

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

当tabindex动态添加时,最好在focus()函数之前执行此操作,否则它可能不起作用(我记得通过使用JAWS进行测试).

为了测试这个我会使用:

• NVDA和Firefox,Windows
• Jaws&IE,Windows

在Safari/OSX上使用VoiceOver进行测试也很不错,但效果不同,可能与基于Windows的屏幕阅读器不同.

你会遇到Chrome/NVDA的很多问题,因为它不受支持,最终用户不太可能使用它.IE可以用NVDA,但Firefox是最好的.

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

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

Answer 2

从@AlastairC获得答案,以及下面的评论.我现在已经采取了这一点,并将继续这一点作为我的解决方案:

我的前进解决方案

我发现只读出第一个标题并没有那么有用.特别是如果您所在的最后一页是加载序列.你可以听到有一些新东西已经被关注,但是当然不清楚它是否构成整个现在页面的一部分.

向页面添加一些有用的描述性文本

因此,我现在在页面布局模板的顶部有一个段落.这包括屏幕阅读器友好的消息,以及页面的粗略概述.

<p class="screenreader-summary" tabindex="-1">
  The <strong>Dashboard</strong> page is now on-screen.
  It contains several widgets for summarizing your data.
</p>

请注意,该tabindex值允许我们使用JavaScript关注此元素.你可能不想为此使用p元素,你可以使用任何你真正喜欢的东西.

将其隐藏在屏幕外(可选,只有在它会破坏您的设计/可读性时才需要)

然后将其与CSS结合使用,将此元素移出屏幕:

.screenreader-summary {
  position: absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
  outline: none; /* Important, don't show an outline on-focus */
}

当在屏幕上显示新页面时,请关注此元素

最后,在屏幕上显示您的页面的JavaScript代码中(例如在MarionetteJS中使用onShow或show事件):

$yourViewEl.find('.screenreader-summary').focus();

结果

我是一个有远见的人,所以采取什么我用少许盐说-但是我发现读出一个简短的说明是这么有用得多.