angularjs - 单页应用程序的可访问性(ARIA 等)

Question

使 SPA (AngularJS) 可访问(对于屏幕阅读器等)的最佳方法是什么？

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

开发过程中常见的陷阱有哪些？

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

Answer 1

这可以涵盖这里的广泛问题。因此，我将介绍一些基础知识，希望它能让你开始你的道路，常见的陷阱，就像它一样。

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

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

当屏幕阅读器选择此按钮时，将称为“ super 华丽按钮”，因此您无需将按钮放在 aria-label 属性中。那里有更复杂的示例，但这几乎说明了它的基础知识。 Role、aria-label 和 tabindex 将是您看到的最流行的 ARIA 属性。

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

如前所述，有时您可以通过为键盘导航器/屏幕阅读器用户移动焦点来帮助他们。例如，如果他们单击按钮并出现菜单。您可以执行以下操作将它们放在菜单的第一个链接上:

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

我知道那是在 JQuery 中，我不熟悉 AngularJS，但我的简要观点让我认为它更像是一个 ViewModel Controller ，而不是像 JQuery 这样的特定 UI，但如果我错了，请纠正我。

如果您在屏幕上执行对屏幕阅读器用户毫无意义的时髦操作，则可以使用实时区域。您可以将文本写入这些区域中的元素，以将信息以文本形式输出。最简单的方法是使用警报或状态 Angular 色，分别用于重要消息或一般状态更新。默认情况下，这些 Angular 色使您的元素成为事件区域，其中的任何文本更改都将报告给屏幕阅读器。所以一个简单的例子看起来像这样:

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

然后稍后在 JQuery 中(以您加载文档并在获得它时淡入该文档为例):

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

这将使屏幕阅读器知道文档已加载并准备好在屏幕上阅读。事件区域可能有点棘手，但如果你能掌握它们，它们就是强大的野兽。

最后，关于可访问性测试，有几个选项。我最近偶然发现的是 Wave这似乎是一个在线测试工具。乍一看还不错，可以试一试。另一种选择是自己拿一个屏幕阅读器并试一试。我推荐 NVDA这是一个开源(因此是免费的)屏幕阅读器。这是我选择的屏幕阅读器，非常好。它附带的合成器没有最好的声音，但还有其他选项，或者您可以关闭语音输出并使用语音查看器查看它要说的文本显示。最后一个选择是要求可访问性测试人员对您的应用进行试驾。对于这些括号中的消费品或事物，如果被要求，盲人和其他可访问技术的用户很可能会自愿这样做。对于您可能不想在公共(public)论坛中发布的更多面向业务的应用程序，有几个组织可以就使 Web 应用程序可访问的问题进行咨询。

这绝不是一本关于可访问性的综合手册，我希望能真正让你朝着正确的方向前进。要更深入地了解，请尝试查看 ARIA roles文档(所有这些都会有所帮助，但代码位于定义标题下)，然后是 ARIA States and Properties documentation .它们都可能有点干，但也有你可以明智地使用 ARIA 的所有内容的完整列表。我希望谷歌也应该能够提供一些教程。

我希望这有助于您入门。祝你好运!