单页面应用程序中的可访问性(ARIA等)

Question

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

我对aria规范几乎没有任何经验,我想知道它是否适用于单页应用程序.

开发时常见的陷阱有哪些？

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

Answer 1

这可以涵盖广泛的问题.因此,我将通过一些基础知识,希望它能够帮助您实现目标,这是常见的陷阱.

首先,就像评论者说的那样,是的,你需要确保正确使用ARIA标签.所以,比方说,如果你想将一个div作为一个按钮公开,你就会有这样的东西.

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

当屏幕阅读器选择此按钮时,该按钮将被称为"超级华丽按钮",因此您无需在aria-label属性中添加按钮.还有更复杂的例子,但这很好地说明了它的基础知识.角色,咏叹调标签和tabindex将是您看到的最流行的ARIA属性.

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

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

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

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

如果您在屏幕上做一些对屏幕阅读器用户毫无意义的时髦事物,则可以使用实时区域.您可以将文本写入这些区域中的元素,以便以文本方式输出信息.最简单的方法是分别对重要消息或通用状态更新使用警报或状态角色.默认情况下,这些角色会使您的元素成为活动区域,并且其中的任何文本更改都将报告给屏幕阅读器.所以一个简单的例子看起来像这样:

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

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

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

这将让屏幕阅读器知道文档已加载并准备好在屏幕上阅读.直播区域可能有点棘手,但如果你能掌握它们,它们就是一个强大的战斗.

最后,关于可访问性测试,有几个选项.我最近偶然发现的东西是Wave,它似乎是一个在线测试工具.乍一看它看起来不错,你可以尝试一下.另一个选择是自己抓一个屏幕阅读器并试一试.我推荐NVDA,这是一个开源(因此免费)的屏幕阅读器.这是我选择的屏幕阅读器,非常棒.它捆绑的合成器没有最好的声音,但还有其他选项,或者您可以关闭语音输出并查看使用语音查看器的内容的文本显示.最后一个选择是要求辅助功能测试人员将您的应用程序用于试驾.对于消费者产品或这些括号中的东西,盲人和其他可访问技术的用户可能会自愿参与其中.对于您可能不希望在公共论坛中使用的更多面向业务的应用程序,有几个组织可以就可以访问Web应用程序的问题进行咨询.

这绝不是一本关于可访问性的综合手册,我希望能够真正启动你的正确方向.为了更深入一点,请尝试查看ARIA角色文档(所有这些都有帮助,但代码在定义标题下),以及ARIA States和Properties文档.它们都可能有点干,但也有完整的清单,你可以使用ARIA明智.我希望谷歌也应该能够提供一些教程.

我希望这有助于你开始.祝好运!