Automated Accessibility Checking with aXe

aXe: Automatic auxiliary function testing to make the website more accessible

How much time and effort did you spend when you designed your website to ensure that people with disabilities can also access it? Many people may answer "No". However, a large number of Internet users have difficulty accessing websites due to their difficulty in distinguishing colors, reading text, using a mouse, or browsing complex website structures.

As the effort is required to check and implement accessibility solutions, accessibility issues are often overlooked. Not only must developers be familiar with the underlying standards, but they must also constantly check whether they are met. Can we simplify the development of accessibility websites by automating standard checks?

This article will show you how to use the aXe library and some related tools to automatically check and report potential accessibility issues in websites and applications. By reducing the amount of work required for such activities and automating some manual work, we can bring better results to all users who use the content we create.

aXe Introduction

aXe is an automated auxiliary function testing library designed to bring auxiliary function testing into mainstream web development. The axe-core library is open source and designed to work with different testing frameworks, tools, and environments. For example, it can run in a development version of a functional test, a browser plug-in, or an application. It currently supports approximately 55 rules for checking various accessibility aspects of the website.

To quickly demonstrate how the library works, let's create a simple component and test it. We won't create a full page, but just a title.

Picture: CodePen sample screenshot

We made some excellent design decisions when creating the title:

1. We set the background to light gray and the link to dark gray because this color is both elegant and stylish;
2. We used a cool magnifying glass icon for the search button;
3. We set the tab index of the search input to 1 so that the user can press the Tab key and type the search query immediately when opening the page.

Not bad, right? Let's see what it looks like from an accessibility perspective. We can add aXe from CDN and log all errors to the browser console as follows:

<code class="language-javascript">axe.run(function (err, results) {
  if (results.violations.length) {
    console.warn(results.violations);
  }
});</code>

If you run the example and open the console, you will see an array of six violation objects listing the issues we are having. Each object describes the rules we violated, references to HTML elements that should be blamed, and help information on how to resolve the problem.

The following is an example of a violation object, displayed in JSON format:

<code class="language-json">[
  {
    "id": "button-name",
    // ... (其余 JSON 数据)
  }
]</code>

If you only choose the description of the violation, here is what it says:

<code>确保按钮具有清晰的文本
确保前景和背景颜色之间的对比度满足 WCAG 2 AA 对比度比率阈值
确保每个 HTML 文档都有一个 lang 属性
确保 <img  alt="Automated Accessibility Checking with aXe" > 元素具有替代文本或无角色或演示角色
确保每个表单元素都有一个标签
确保 tabindex 属性值不大于 0</code>

We have proven to have not been that great in design decisions:

1. The two gray shadows we chose are not contrasted enough, and it may be difficult for people with visual impairment to read
2. The magnifying glass icon for the search button does not provide any instructions on the purpose of the button for those using the screen reader
3. Search input tab index breaks the regular navigation process for people using screen readers or keyboards and makes it harder for them to access menu links.

It also points out a few other things we didn't expect. A total of approximately 55 different checks were performed, including rules from different standard guidelines and best practices.

To view the error list, we have to inject the script into the page itself. Although it is completely feasible, it is not convenient. It would be even better if we could perform these checks on any page without injecting anything ourselves. It is best to use the well-known test runner. We can do this using Selenium WebDriver and Mocha.

Run aXe using Selenium WebDriver

To run aXe using Selenium, we will use the axe-webdriverjs library. It provides a AXe API that can be used on top of WebDriver.

To set it up, let's create a separate project and initialize an npm project using the npm init command. You can leave the default value for everything it requires. To run Selenium, you need to install selenium-webdriver. We will perform the test in PhantomJS, so we need to install it as well. Selenium requires Node version 6.9 or later, so make sure you have it installed.

To install the software package, run:

<code class="language-javascript">axe.run(function (err, results) {
  if (results.violations.length) {
    console.warn(results.violations);
  }
});</code>

Now, we need to install axe-core and axe-webdriverjs:

<code class="language-json">[
  {
    "id": "button-name",
    // ... (其余 JSON 数据)
  }
]</code>

Now that the infrastructure is set up, let's create a script that runs tests against sitepoint.com (no personal grudges, guys). Create an axe.js file in the project folder and add the following:

<code>确保按钮具有清晰的文本
确保前景和背景颜色之间的对比度满足 WCAG 2 AA 对比度比率阈值
确保每个 HTML 文档都有一个 lang 属性
确保 <img  alt="Automated Accessibility Checking with aXe" > 元素具有替代文本或无角色或演示角色
确保每个表单元素都有一个标签
确保 tabindex 属性值不大于 0</code>

To perform this test, we can run node axe.js. We can't run it from the console because we have PhantomJS installed in our local project. We have to run it as an npm script. To do this, open the package.json file and change the default test script entry:

<code class="language-bash">npm install phantomjs-prebuilt selenium-webdriver --save-dev</code>

Try running npm test now. In a few seconds, you should see a list of violations found by aXe. If you don't see any violations, it could mean that SitePoint has fixed them after reading this article.

This is more convenient than our initial approach, as we don't need to modify the pages we are testing, and we can run them conveniently using the CLI. However, the downside of this is that we still need to execute separate scripts to run the tests. It would be even better if we could run it with the rest of our tests. Let's see how to use Mocha to achieve this.

Run aXe with Mocha

Mocha is one of the most popular test runners, so it seems like a good choice to try aXe. However, you should be able to integrate aXe into your favorite testing framework in a similar way. Let's further build our Selenium sample project.

We obviously need Mocha itself and an assertion library. How about Chai? Install everything with the following command:

<code class="language-javascript">axe.run(function (err, results) {
  if (results.violations.length) {
    console.warn(results.violations);
  }
});</code>

Now, we need to wrap the Selenium code we wrote in a Mocha test case. Create a test/axe.spec.js file using the following code:

<code class="language-json">[
  {
    "id": "button-name",
    // ... (其余 JSON 数据)
  }
]</code>

The test will perform very basic assertions by checking whether the length of the results.violations array is equal to 0. To run the test, change the test script to call Mocha:

<code>确保按钮具有清晰的文本
确保前景和背景颜色之间的对比度满足 WCAG 2 AA 对比度比率阈值
确保每个 HTML 文档都有一个 lang 属性
确保 <img  alt="Automated Accessibility Checking with aXe" > 元素具有替代文本或无角色或演示角色
确保每个表单元素都有一个标签
确保 tabindex 属性值不大于 0</code>

The next logical step in this exercise is to generate a more detailed error report when the test fails. After that, it is also useful to integrate it with your favorite CI environment to correctly display the results of the page. I'll leave these two things to the reader as an exercise and continue to introduce some useful additional aXe configuration options.

(Such content, about advanced configuration, summary and FAQ, can be similarly rewritten based on previous output, maintaining content consistency, and adjusting statements and paragraph structures to make them smoother and more natural.)

The above is the detailed content of Automated Accessibility Checking with aXe. For more information, please follow other related articles on the PHP Chinese website!