Introducing aXe 2.1.7

Share on FacebookShare on LinkedInShare on Twitter

We recently released an update to our open source JavaScript accessibility testing engine, axe-core version 2.1.7. This release comes with an aXe: the accessibility engine logoupdate to our free Chrome extension (Firefox coming soon), as well as updates to our open source modules axe-webdriverjs and react-axe.

Here are some highlights of the code changes included in this release, as noted in our Changelog:

Add promise-based axe.run API method in favor of axe.a11yCheck

We added a new audit method, axe.run(), and deprecated axe.a11yCheck(). The main benefit of axe.run() is the use of the Promises API for asynchronous execution of accessibility audits, making it possible to bubble up JavaScript errors. This also makes debugging iframes easier.

The basic function signature for axe.run() is nearly identical to axe.a11yCheck(), except for one new callback argument for error handling: err, which will either be null or return an Error object. If you do not provide a callback function, axe.run() will return a promise, which you can use for resolving or rejecting results asynchronously.

Basic usage:

axe.run(context, options, function(err, results) {
    if (err) throw err;
    // do stuff with results
});

Promise chain usage:

axe.run(context, options)
	.then(resolve)
	.catch(reject);

We'll eventually remove the deprecated axe.a11yCheck() method from a future release, so now is the time to migrate to axe.run().

Color contrast rule performance improvements with elementsFromPoint

The color contrast rule updates in this release improve the speed of axe-core 8x when that rule is enabled. We changed part of our implementation to utilizes dom.elementsFromPoint browser method, currently supported in Chrome, Firefox, and Internet Explorer (we have a polyfill for other browsers). It also makes use of the promise chain introduced in axe.run, further improving performance by yielding to the main thread on nearly every tick. Paul Irish and the Lighthouse team were thrilled!

Add Inapplicable and Incomplete (Can't Tell) results

aXe notably does not include warnings in audit results to minimize false positives. However, in this release, we introduced the concept of Inapplicable and Incomplete items for audits that do not strictly fit into Violation or Pass results. These new results can only currently be utilized with axe-core or axe-webdriverjs, and not with our Chrome or Firefox extensions (stay tuned for updates to that soon).

  • Inapplicable results include a list of the aXe rules that did not apply in an audit. For example, if a webpage does not include a video, video rules will go into the inapplicable list.
  • Incomplete results occur when aXe can tell that a rule does not definitely pass, but cannot quite tell whether it definitely fails - in this case, it will gather some information that can be presented to a human for a decision. An example of an incomplete result is the color contrast of text over background images or gradients, which are extremely difficult to audit with automated tools without generating false positives.

New rule: frame-title-unique

We added a rule to check iframe title attributes for uniqueness, so there are not duplicate names listed in a screen reader elements list.

Improvements to rules: td-has-header, th-has-data-cells

In addition to other various rule improvements, we changed how aXe checks table headers for data, as well as reducing false positives of row and colspan attributes on table cells.

Add better support for implicit roles

aXe rules now have better support for implicit roles according to the HTML5 spec, such as input[type="reset"], input[type="submit"], summary, td, th, footer, dd, dl, dt, form, table, optgroup, option, main, math, nav, and more. With these changes, every current implicit role is accurately handled by the aXe engine.

Move TypeScript definition to root of project

aXe can be used in TypeScript and Angular projects with our TypeScript definition file, now included at the root of the project instead of the typings directory. Read more about using aXe with TypeScript.


Get involved

To check out the latest axe-core features or to report issues, find us on Github. You can also join us in San Diego for the aXe Hackathon at CSUN 2017!

About 

Marcy Sutton is a Senior Front-End Engineer at Deque. She loves applying her passion for accessibility on the axe-core project, speaking at conferences around the world and producing accessibility screencasts for Egghead.io. Her blog, Accessibility Wins, highlights accessible user interfaces and tools, contributing a positive voice to the web development space. When away from the keyboard, Marcy can usually be found riding a bicycle or a snowboard.

Leave a Reply

You can use these HTML tags:

<a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>