WAI-ARIA:Javascript 能力测试?

Posted

技术标签:

【中文标题】WAI-ARIA:Javascript 能力测试?【英文标题】:WAI-ARIA: Javascript Capability Testing? 【发布时间】:2011-05-19 05:36:54 【问题描述】:

本着渐进增强的精神,如果浏览器支持,我想做一些 ARIA 功能测试来实现额外的增强。我不希望检测屏幕阅读器——我希望确保屏幕阅读器用户在他们使用的工具的情况下获得最佳体验。

例如,如果不支持aria-live 属性,那么实现endless scrolling 可能不是一个好主意。

我知道还有一个问题是浏览器可能支持这些属性,但屏幕阅读器可能不支持。由于屏幕阅读器在浏览器上透明运行,我可以忽略这种边缘情况。

我从未听说过有人这样做。是否像测试浏览器赋予的额外 DOM 属性一样简单? Mark Pilgrim 的其他capability testing techniques 之一在这里工作吗?

谢谢!

【问题讨论】:

为了确保我理解,您需要 javascript 来告诉您aria-* 属性是否对当前浏览器有任何影响?因此,如果支持浏览器(合并浏览器和任何可访问性插件)始终确保aria-selected 具有truefalseundefined 的值,正如w3.org/WAI/PF/aria/states_and_properties#aria-selected 所要求的那样,那么JavaScript var div = document.createElement('DIV'); div.setProperty('aria-selected', 'bogus'); if (div.getProperty('aria-selected') != 'bogus') alert('aria supported'); 会起作用吗? 正确!但是,在许多浏览器中,您可以在 DOM 元素上设置任意属性值。在您提供的示例中(将 get/setProperty 替换为 get/setAttribute),您在我测试的所有浏览器中都会收到警报,包括 FF1 和 Safari 2(它们都没有任何类型的 ARIA 支持)。然而,我正在寻找能够达到这种结果的东西。 【参考方案1】:

第一个答案有一些不正确的信息。某些浏览器确实支持 WAI-ARIA,而有些则不支持。浏览器通过操作系统的无障碍 API 向屏幕阅读器发送事件。例如,如果您使用 IE 7,它无法处理 IE 8 可以处理的 WAI-ARIA。看this graphic

话虽如此,您无法通过测试来确定支持哪些标签。一般来说,有限的 WAI-ARIA 支持始于 FF2 和 IE8。查看浏览器的发行说明以确定它所支持的 WAI-ARIA。

这里是a link that details testing WAI-ARIA

【讨论】:

【参考方案2】:

我不想检测屏幕阅读器

很抱歉,但这正是您想要做的。除非屏幕阅读器以某种方式暴露于内容脚本,否则无法检测到屏幕阅读器,并且有许多不同的屏幕阅读器,因此您不应该真正尝试。如果有的话,您也许可以在支持听觉 CSS 的浏览器中进行一些破解以检测屏幕阅读器,但您肯定无法检测是否支持某个 ARIA 功能。

如果不支持 aria-live 属性

实际上没有浏览器“支持”ARIA,而不仅仅是在 DOM 中提供元素属性访问器;只有屏幕阅读器/辅助阅读软件支持 ARIA,因为它实际上使用 ARIA 属性来帮助用户与网站交互。

【讨论】:

根据最近的 A List Apart 文章ARIA and Progressive Enhancement 的发现(可能是这个问题的挑衅?)屏幕阅读器差异很大。所以屏幕阅读器嗅探将是唯一的方法。【参考方案3】:

正如@ChrisMorgan’s comment 中所述,Derek Featherstone 在the difficulties of implementing ARIA gracefully 上的 A List Apart 文章是必读的。

【讨论】:

以上是关于WAI-ARIA:Javascript 能力测试?的主要内容,如果未能解决你的问题,请参考以下文章

WAI-ARIA无障碍网页应用属性完全展示

移动网页设计与开发 HTML5+CSS3+JavaScript

什么是导航栏/菜单的 WAI-ARIA 兼容实现

如何为 WAI-ARIA 标记加载动画?

html WAI-ARIA角色(地标角色,小部件角色等)

无障碍开发之初认识