npm包chai-a11y-axe使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

chai-a11y-axe是一个npm包，用于在JavaScript测试中使用Axe审计规则进行a11y测试（即网络通用可访问性测试）。它提供了可测试可访问性违规的chai断言，默认情况下，这是由Axe检查器提供的。

在页面开发中，我们需要充分考虑页面可访问性，使得用户友好并且功能无异常。所有计算机、Web、电视等电子技术产品和服务都应该能无障碍的使用。

chai-a11y-axe这个npm包能够帮助我们更轻松地测试可访问性进而提升可访问性，从而更好地为用户服务。

安装

在使用chai-a11y-axe之前，您需要先安装一些必备的先决条件：

Node.js
npm

完成上述操作之后，安装chai-a11y-axe：

npm install chai-a11y-axe --save-dev

使用

1.创建一个测试文件，例如test.js

const chai = require('chai');
const chaiA11yAxe = require('chai-a11y-axe');
chai.use(chaiA11yAxe);

2.在测试文件中，我们需要告诉chai-a11y-axe进行哪个页面元素的测试。我们通过获取一个css选择器并传递给chai-a11y-axe的axeCheck函数来实现。

例如，在下面的示例中，我们将要测试的选择器是“#amp-form”：

describe('Accessible AMP form', () => {
  it('should not have any detectable accessibility violations', () => {
    return chai
      .expect('#amp-form')
      .to.be.accessible();
  });
});

在上面的代码中，我们首先包括一个descript来描述我们正在进行的测试，并在it中使用chai-a11y-axe断言。

我们断言chai.expect('#amp-form').to.be.accessible();语句必须是“可访问”的。也就是说，这个元素必须符合Axe检查器中定义的可访问性标准，否则我们的断言会失败。

可配置

chai-a11y-axe具有许多配置选项，以便根据我们的需要进行自定义配置。这里介绍其中的一些。

检查级别

我们可以通过配置等级选项来告诉chai-a11y-axe进行哪个级别的a11y测试。可以选择三种不同级别的选项：

wcag2a - WCAG 2.0 Level A
wcag2aa - WCAG 2.0 Level AA
section508 - Section 508

以下是具有这些不同级别选项的代码：

-- -------------------- ---- -------
-------------------- --- ------ -- -- -
  ---------- -- ---------- -- --- ---- --- ----- -- ------- -- -- -
    ------ ----
      --------------------
      -------------------
        ------------------- ---------
      ---
  ---
---

忽略规则

另一个重要的配置选项是将需要忽略的a11y规则编写为一个数组，并将其传递给chai-a11y-axe。

在以下示例中，我们将忽略a11y测试中的两个规则：

-- -------------------- ---- -------
-------------------- --- ------ -- -- -
  ---------- --- ---- --- ---------- ------------- ------------ -- -- -
    ------ ----
      --------------------
      -------------------
        ------------ -
          ------------------------
          --------------
        -
      ---
  ---
---

总结

在本文中，我们介绍了npm包chai-a11y-axe的用法和配置选项，并提供了一些示例代码。chai-a11y-axe是一种增强开发者可访问性的工具，使用它可以帮助我们更好地测试可访问性问题，并从容解决问题。祝您愉快，无障碍！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/chai-a11y-axe