Angularjs 单页应用程序的可访问性（ARIA等）

使SPA（AngularJS）可访问（屏幕阅读器等）的最佳方法是什么

我对aria规范几乎没有经验，我想知道它是否能在单页应用程序上工作

开发时常见的陷阱是什么

---

开发时如何调试和测试可访问性？

这里可能涉及到一系列问题。因此，我将介绍一些基本知识，希望它能让你开始新的道路，常见的陷阱

首先，正如评论者所说，是的，您需要确保正确使用了ARIA标记。比如说，如果你想把一个div作为一个按钮公开，你会有这样的东西

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

我知道这是在JQuery中，我不熟悉AngularJS，但我的简短视图让我觉得它更像是一个ViewModel控制器，而不是像JQuery这样的特定于用户界面的控制器，但如果我错了，请纠正我

如果你在屏幕上做一些对屏幕阅读器用户毫无意义的古怪事情，可以使用活动区域。您可以将文本写入这些区域中的元素，以文本方式输出信息。最简单的方法是分别为重要消息或一般状态更新使用警报或状态角色。默认情况下，这些角色使元素成为活动区域，其中的任何文本更改都将报告给屏幕阅读器。因此，一个简单的例子如下所示：

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

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

最后，关于可访问性测试，有几个选项。我最近偶然发现了一个似乎是在线测试工具的东西。第一眼看上去不错，你可以试一试。另一个选择是自己抓起一个屏幕阅读器并试一试。我建议使用开源（因此是免费的）屏幕阅读器。这是我选择的屏幕阅读器，非常好。它附带的合成器没有最好的声音，但还有其他选择，或者你可以关闭语音输出，并使用语音查看器查看语音的文本显示。最后一个选择是要求辅助功能测试人员对您的应用进行试驾。对于这些括号中的消费品或物品，盲人和其他无障碍技术的用户如果被要求，很可能会自愿这样做。对于您可能不想在公共论坛上发布的更多面向业务的应用程序，有几个组织可以就如何使web应用程序可访问的问题进行咨询

这绝对不是一本关于可访问性的全面手册，我希望能真正让您朝着正确的方向前进。要更深入地了解，请尝试查看文档（所有文档都会有所帮助，但代码位于“定义”标题下），然后再继续查看。它们都可能有点干，但也有你可以使用的所有东西的完整列表。我希望谷歌也能提供一些教程

---

我希望这能帮助你开始。祝你好运

你在说什么？你能说得更清楚些吗？ARIA与javascript、angular或单页与多页有什么关系？据我所知，例如href链接和onclick链接之间有很大区别？如果我使用非画布导航模式，屏幕读者如何理解焦点内容？也许这整件事我都搞错了？也许：威尔help@charlietfl屏幕阅读器在页面初始加载时将页面内容加载到其缓冲区中，如果在初始加载后添加/更改内容，可以帮助确保动态加载的内容被公布。非常感谢Craig，这将帮助我，而且可能会有更多的人加入进来，让我们的网站更容易访问。这正是我所希望的介绍。@Craig这是一个极好的答案，我希望我能多次投票支持它。：-）

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

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