构建状态

辅助功能开发者工具

这是一个关于辅助功能相关的测试和实用代码库。

其主要组件是可访问性审计：一系列检查常见可访问性问题的审计规则，以及一个在HTML页面中运行这些规则的API。

还包括一组与可访问性相关的实用程序代码，包括但不限于：

• 对比度计算和颜色建议
• 获取和验证ARIA属性和状态
• 使用算法 http://www.w3.org/TR/wai-aria/roles#textalternativecomputation 计算可访问名称

获取代码

仅包含JavaScript规则时，需要引入以下文件：

https://raw.github.com/GoogleChrome/accessibility-developer-tools/stable/dist/js/axs_testing.js

使用 git 1.6.5 或更高版本：

% git clone --recursive https://github.com/GoogleChrome/accessibility-developer-tools.git

在 git 1.6.5 之前：

% git clone https://github.com/GoogleChrome/accessibility-developer-tools.git
% cd accessibility-developer-tools
% git submodule init; git submodule update

构建

您需要 node 和 grunt-cli 来构建。

1.（只做一次）安装 Node.js 和 npm - 有用的安装说明在这里：https://gist.github.com/isaacs/579814

确保你的 Node.js 版本为 0.8 或更高。

2.（只做一次）使用 npm 安装 grunt-cli

    % npm install -g grunt-cli  # 可能需要以管理员身份运行

3.（每次新检出项目）为该项目安装依赖项（包括 grunt），从项目根目录运行

    % npm install

4.（如果做出更改需要重新构建）使用 grunt 进行构建（从项目根目录运行）

    % grunt

故障排除

此项目使用 Closure Compiler 编译发布版。为了成功完成构建，可能需要安装较新的 JDK。

使用审计API

包含库

最简单的方法是在页面上包含生成的 axs_testing.js 库。构建后，你将拥有两个版本的 axs_testings.js：

• 分发构建：项目根目录/dist/js/axs_testing.js
• 本地构建（如果你做了修改）：项目根目录/tmp/build/axs_testing.js

正在努力将该库纳入WebDriver和其他自动化测试框架。

axs.Audit.run() 方法

一旦包含 axs_testing.js，你可以调用 axs.Audit.run()。这会返回如下形式的对象：

{
      /** @type {axs.constants.AuditResult} */
      result,  // PASS、FAIL 或 NA之一

      /** @type {Array.<Element>} */
      elements,  // 当 result == axs.constants.AuditResult.FAIL 时，规则失败的元素

      /** @type {axs.AuditRule} */
      rule  // 结果所属的规则。
    }

命令行运行器

无障碍开发者工具项目包括了审计的命令行运行器。要使用运行器，首先 安装 phantomjs，然后在项目根目录下运行以下命令。

$ phantomjs tools/runner/audit.js <url-or-filepath>

运行器会在无头浏览器中加载指定的文件或URL，注入 axs_testing.js，运行审计并输出报告文本。

通过 Selenium WebDriver（Scala）运行审计：

val driver = org.openqa.selenium.firefox.FirefoxDriver // 使用你喜欢的driver
val jse = driver.asInstanceOf[JavascriptExecutor]
jse.executeScript(scala.io.Source.fromURL("https://raw.githubusercontent.com/GoogleChrome/" +
       "accessibility-developer-tools/stable/dist/js/axs_testing.js").mkString)
val report = jse.executeScript("var results = axs.Audit.run();return axs.Audit.createReport(results);")
println(report)

通过 Selenium WebDriver（Scala）（带缓存）运行审计：

val cache = collection.mutable.Map[String, String]()
val driver = org.openqa.selenium.firefox.FirefoxDriver // 使用你喜欢的driver
val jse = driver.asInstanceOf[JavascriptExecutor]
def getUrlSource(arg: String): String = cache get arg match {
   case Some(result) => result
   case None =>
     val result: String = scala.io.Source.fromURL(arg).mkString
     cache(arg) = result
     result
}
jse.executeScript(getUrlSource("https://raw.githubusercontent.com/GoogleChrome/" +
       "accessibility-developer-tools/stable/dist/js/axs_testing.js"))
val report = js.executeScript("var results = axs.Audit.run();return axs.Audit.createReport(results);")
println(report)

如果 println() 输出为空，检查是否需要设置WebDriver的DesiredCapabilities（如loggingPrefs）： https://code.google.com/p/selenium/wiki/DesiredCapabilities

使用结果

解析结果

结果可能是三个常量之一：

• axs.constants.AuditResult.PASS - 表示页面上有元素可能未通过此审计规则，但它们已通过。恭喜！
• axs.constants.AuditResult.NA - 表示页面上没有元素可能未通过此审计规则。例如，检查视频元素字幕的审计规则在页面上没有视频元素时会返回此结果。
• axs.constants.AuditResult.FAIL - 表示页面上的某些元素未通过此审计规则。这是你唯一可能感兴趣的。

创建有用错误消息

全局静态方法 axs.Audit.createReport(results, opt_url) 可用于使用 axs.Audit.run() 返回值创建错误消息。这将类似于以下形式：

*** 开始可访问性审计结果 *** 在此页面上发现4个错误和4个警告。 有关更多信息，请参阅 https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules

错误：badAriaAttributeValue（AX_ARIA_04）在以下元素上失败（1 - 3 of 3）：
DIV:nth-of-type(3) > INPUT
DIV:nth-of-type(5) > INPUT
#aria-invalid

错误：badAriaRole（AX_ARIA_01）在以下元素上失败：
DIV:nth-of-type(11) > SPAN

错误：controlsWithoutLabel（AX_TEXT_01）在以下元素上失败（1 - 3 of 3）：
DIV > INPUT
DIV:nth-of-type(12) > DIV:nth-of-type(3) > INPUT
LABEL > INPUT

错误：requiredAriaAttributeMissing（AX_ARIA_03）在以下元素上失败：
DIV:nth-of-type(13) > DIV:nth-of-type(11) > DIV

警告：focusableElementNotVisibleAndNotAriaHidden（AX_FOCUS_01）在以下元素上失败：
#notariahidden

警告：imagesWithoutAltText（AX_TEXT_02）在以下元素上失败（1 - 2 of 2）：
#deceptive-img
DIV:nth-of-type(13) > IMG

警告：lowContrastElements（AX_COLOR_01）在以下元素上失败（1 - 2 of 2）：
DIV:nth-of-type(13) > DIV
DIV:nth-of-type(13) > DIV:nth-of-type(3)

警告：nonExistentAriaLabelledbyElement（AX_ARIA_02）在以下元素上失败（1 - 2 of 2）：
DIV:nth-of-type(3) > INPUT
DIV:nth-of-type(5) > INPUT
*** 结束可访问性审计结果 ***

每条规则最多列出五个失败元素，形式为每个元素的唯一查询选择器。

审核配置

如果您希望对审核进行微调，可以创建一个axs.AuditConfiguration对象，并设置以下选项：

对特定审计规则忽略页面的部分内容

例如，假设您的网页有一个高对比度版本，而存在一条CSS规则导致页面上某些元素（类名为pretty）因样式原因对比度较低。未经修改地运行审核可能会得到如下结果：

警告：lowContrastElements（AX_COLOR_01）在以下元素上失败（1 - 5 of 15）： ...

您可以修改审核，使其忽略已知并有意降低对比度的元素，如下所示：

var configuration = new axs.AuditConfiguration();
configuration.ignoreSelectors('lowContrastElements', '.pretty');
axs.Audit.run(configuration);

AuditConfiguration.ignoreSelectors()方法接受一个可以在审核报告中找到的规则名称，以及一个表示应忽略该审计规则下页面部分的查询选择器字符串。如果需要忽略多个选择器，可以针对每个审计规则多次调用ignoreSelectors()。

将整个审核范围限制到页面的子区域

您可能有一部分页面会变化，而其他部分保持不变，比如内容区与工具栏。在这种情况下，对整个页面运行审核可能会在不变化的部分产生误导性的结果，从而掩盖了主要部分的回归问题。

可以通过以下方式在AuditConfiguration对象上设置scope：

var configuration = new axs.AuditConfiguration();
configuration.scope = document.querySelector('main');  // 或者按您选择的方式选择范围元素
axs.Audit.run(configuration);

您还可以在创建axs.AuditConfiguration时指定配置数据，这样就可以一次性提供多个配置选项：

var configuration = new axs.AuditConfiguration({
      auditRulesToRun: ['badAriaRole'],
      scope: document.querySelector('main'),
      maxResults: 5
    });

axs.Audit.run(configuration);

许可证

版权所有 2013 Google Inc. 保留所有权利。

根据Apache许可证2.0版（"许可"）授权； 除非遵守许可协议，否则不得使用此文件。 您可以在以下位置获取许可的副本：

http://www.apache.org/licenses/LICENSE-2.0

除非适用法律要求或书面同意，根据许可分发的软件 是在“原样”基础上提供的，没有任何形式的保修， 无论是明示还是暗示，包括但不限于适销性和适用于特定目的的条件。 请参阅许可协议以了解具体权限和限制的详细信息。