angularjs – 单页应用程序中的辅助功能(ARIA等)

首先，像评论者说的，是的，你需要确保ARIA标签被正确使用。所以，说，如果你想暴露一个div作为一个按钮，你会有这样的东西。

<div id="mysuperflashybutton" ... role="button" aria-label="Super flashy" tabindex="0"></div>

此按钮在被屏幕阅读器选中时将被称为“超级闪光按钮”，因此您不需要将按钮放在您的aria-label属性中。有更复杂的例子，但是它说明了它的基本知识。角色，aria标签和tabindex将是您看到的最流行的ARIA属性。

您希望屏幕阅读器用户点击的标签索引元素对此至关重要。将tabindex设置为0以将其包括在文档上的默认位置。如果您不希望通常使用键盘导航的人访问它，请将其设置为-1。这意味着它不在正常的Tab顺序，但仍然可以导航到，如果你想通过javascript / jquery .focus()手动放置用户的焦点。

如上所述，有时您可以通过移动他们的焦点来辅助键盘导航器/屏幕阅读器用户。例如，如果他们单击按钮并出现菜单。你可以这样做，把它们放在菜单的第一个链接：

$('#linkmenuactivator').on("click",function () {
    $('#linkmenu').find('li:first a').focus();
});

我知道这是在JQuery，我不熟悉AngularJS，但我的简短视图使我认为它更多的是一个ViewModel控制器，而不是某些UI特定像JQuery，但纠正我，如果我错了。

如果你在屏幕上做一些对屏幕阅读器用户没有意义的有趣的事情，可以使用活动区域。您可以向这些区域中的元素写入文本，以便以文本方式显示信息。最简单的方法是使用警报或状态的角色，分别用于重要邮件或一般状态更新。默认情况下，这些角色使您的元素成为活动区域，任何文本更改都将报告给屏幕阅读器。所以一个简单的例子看起来像这样：

<p id="ariastatusbox" ... role="status"></p>

然后稍后在JQuery(以您加载文档为例，当你有它的时候它淡入淡出)的例子：

$('#maincontent').fadeIn(function () {
    $('#ariastatusbox').text('Document loaded');
});

这将让屏幕阅读器知道文档已加载并准备在屏幕上读取。生活区域可能有点棘手，但如果你能掌握它们，他们是一个强大的打击。

最后，关于辅助功能测试，有几个选项。我最近偶然发现的事情是Wave，似乎是一个在线测试工具。从第一眼看起来好看，你可以试试。另一个选择是自己抓住屏幕阅读器，给它一个去。我推荐NVDA这是一个开源(所以免费)屏幕阅读器。这是我的屏幕阅读器的选择，是非常好的。它捆绑的合成器没有最好的声音，但还有其他选项，或者你可以关闭语音输出，并查看使用语音查看器的说法的文本显示。最后一个选择是要求无障碍测试人员将您的应用程序用于测试驱动器。对于消费产品或那些方括号中的东西，盲人和其他可访问技术的用户可能愿意自愿这样做，如果问。对于在公共论坛中可能不想要的更多面向业务的应用程序，有几个组织可以查看使Web应用程序可访问的问题。

这不是一个全面的手册，无障碍，我希望真正启动你在正确的方向。为了更深入一点，尝试看看ARIA roles文档(所有这一切都将有帮助，但代码是在定义标题下)，从ARIA States and Properties documentation。他们都可以有点干，但也有完整的你可以使用ARIA明智的一切的列表。谷歌应该能够产生一些教程，我希望。

我希望这有助于你开始。祝你好运！