单页面应用程序的可访问性（ARIA等）
什么是最好的方法，使SPA（AngularJS）无障碍（屏幕阅读器等）？
我对于咏叹调的规范几乎没有经验，我不知道它是否会在一个单一的页面应用程序工作。
发展中常见的缺陷是什么？
在开发时如何debugging和testing可访问性？
这可能涵盖了一大堆问题。 所以我会通过一些基本的东西，希望它能在你的路上启动你，这是常见的陷阱。
首先，就像评论者所说，是的，你需要确保ARIA标签的正确使用。 所以说，如果你想公开一个div作为一个button，你会有这样的事情。
<div id="mysuperflashybutton" ... role="button" aria-label="Super flashy" tabindex="0"></div> 这个button被屏幕阅读器选中时将被称为“超级闪光button”，所以你不需要把button放在你的aria-label属性中。 这里有更复杂的例子，但是这很好地说明了它的基础知识。 angular色，咏叹调标签和tabindex将是你看到的最stream行的ARIA属性。
您希望屏幕阅读器用户点击的制表索引元素对此至关重要。 将tabindex设置为0以将其包含在文档的默认位置。 如果您不希望使用键盘导航的人员正常访问它，请将其设置为-1。 这意味着它超出了正常的Tab键顺序，但是如果你想通过javascript / jquery.focus（）手动把用户的焦点放在那里，它仍然可以被导航到。
如前所述，有时您可以通过移动焦点来帮助键盘导航器/屏幕阅读器用户。 一个例子是，如果他们点击一个button，并出现一个菜单。 你可以做这样的事情，把他们放在菜单的第一个链接：
$('#linkmenuactivator').on("click", function () { $('#linkmenu').find('li:first a').focus(); });
我知道这是在JQuery中，我不熟悉AngularJS，但是我的简短视图让我觉得它更像是一个ViewModel控制器，而不是像JQuery那样的UI，但是如果我错了，就纠正我。
如果您在屏幕上做出时髦的事情，则可以使用实时区域，这对于屏幕阅读器用户来说是没有意义的。 您可以将文本写入这些区域中的元素，以便以文本方式输出信息。 最简单的方法是使用警报或状态angular色，分别用于重要消息或通用状态更新。 这些angular色默认情况下会使您的元素成为活动区域，并且其中的任何文本更改都会被报告给屏幕阅读器。 所以一个简单的例子看起来像这样：
<p id="ariastatusbox" ... role="status"></p>
然后在JQuery中（以你为例，你加载一个文档，并在你有它的时候淡入）：
$('#maincontent').fadeIn(function () { $('#ariastatusbox').text('Document loaded'); });
这将使屏幕阅读器知道文档已经加载并准备在屏幕上阅读。 生活区域可能有点棘手，但如果你能掌握它们，它们是一个强大的好手。
最后，关于辅助functiontesting，有几个选项。 我最近偶然发现的是Wave ，它似乎是一个在线testing工具。 乍一看看起来不错，你可以试试看。 另一个select是自己抓屏幕阅读器，并给它一个去。 我推荐NVDA这是一个开源的（所以免费）屏幕阅读器。 这是我的屏幕阅读器的select，是非常好的。 它附带的合成器没有最好的声音，但还有其他选项，或者可以closures语音输出，并查看使用语音查看器将会说的内容的文本显示。 最后的select是要求可访问性testing人员将您的应用程序用于testing。 对于消费品或托架中的东西，盲人和无障碍技术的其他用户如果被问到，可能会自愿做这件事。 对于更多面向商业的应用程序，您可能不想在公共论坛中使用，有几个组织可以咨询有关使Web应用程序可访问的问题。
这绝不是一本关于辅助function的综合手册，我希望真的能够让你朝正确的方向发展。 为了深入了解一下，请尝试查看ARIAangular色文档（所有这些文档都将有所帮助，但是代码位于定义标题下），以及来自ARIA States和Properties文档 。 他们都可以有点干，但也有你可以使用ARIA明智的一切的完整列表。 Google也应该能够产生一些教程，我希望。
我希望这有助于你开始。 祝你好运！
