QA professionals, testers, and developers are perpetually learning new instrument, tech heaps, and development exercise. When they ’ re tell they have to learn accessibility, it can often feel like an unwelcome and overwhelming flutter, slowing them down and forcing them to examine and rewrite what they reckon was perfectly good code.

The full intelligence is accessibility tools are more tester-friendly than ever. Automated accessibility tools fit seamlessly into modern development surroundings, and are a outstanding way to shift accessibility left in the Software Development Lifecycle (SDLC), take accessibility screen closer and closer towards design.

In this blog, I ’ ll part four best practices for shifting accessibility testing left. I ’ ll also extend how to integrateaxe, Deque ’ s unfastened root accessibility creature, in NodeJs Jest with the Selenium browser automation tool and Jest.

First: Debunk the Myths About Accessibility

Traditional approachability examination is often thought of as slow and manual and done at the end of the SDLC in user testing, after product. While manual accessibility is still a necessary part of try, 50 % of handiness defects can be get with automation.

Nowadays, there are handiness tools that are built to mix into every part of the software evolution lifecycle, from development to testing to when your site or application is released. These puppet are built by and for dev squad with modern ontogenesis environments, so they won ’ t slow down your development velocity.

Illustration of where tools fit into each role of the package development lifecycle: accessible blueprint for designers, axe DevTools for front-end developers, test automation engineers, senior developers and ware owners, axe Auditor for QA testers and availability testers, and axe Monitor for central accessibility leader.

Shifting accessibility left in the SDLC can be make easier and faster with machine-controlled accessibility tools,and it also saves development time and resources.IBM studieshave shown that defects catch post-production are 30x more expensive than in design, cryptography, and testing. Pocket-sized investing of clip and resources in development for availableness will ultimately save your brass money and assure less disruption to the SDLC.

Diagram showing small investments for availability during backlog, design, coding and testing (i.e. shifting accessibility left) vs. big investing for accessibility during release (traditional way accessibility is practiced).

Start Simple with Free, Open Source Tools

If developers and examiner can automate something, they will. When accessibility can be automated, developers and examiner are much more likely to start incorporating accessibility into their development summons.

Until late, “ automated handiness testing ” meant cumbersome “ scan and account ” tools that could only be used once your application was practically ready to be deploy (if it hadn ’ t been deployed already). Dev and testing team would get long lists of accessibility number that could require a fundamental reworking of components, causing expensive and thwarting slow-downs in the maturation cycle.

Luckily, accessibility instrument have get a long way, and developer and testers can now admission automated accessibility testing tools that can run as portion of their existing workflow. Issues are raised while they ’ re steganography, making fixes lots more efficient. With free creature likeaxe, you can depart testing for accessibility in minutes.

Axe-core is Deque ’ s open source accessibility rules engine, which powers a number of accessibility creature from Deque. Perhaps most notably, axe-core powers the axe browser extension available forChrome, FireFox, and Microsoft Edge.

It ’ s crucial to note, however, that automated availability examination tools can only catch 50 % of your accessibility fault. Your application will stillneed to undergo manual testingwith assistive technology tools, especially if your organization has any concerns about compliance with availableness regulations or legal risk.

It used to be that manual testing could exclusively be done by an accessibility expert who is familiar with assistive technology. Now, the axe suite of creature offers Intelligent Guided Testing (IGT), to help guide developers, quizzer, and product owner through the testing for accessibility subject using a wizard establish attack that removes the necessity to be an expert in accessibility. IGT will improve your coverage to80%without postulate specialized noesis or expertness.

To recap, using the mechanization in the axe browser extension is a great way to start testing for handiness. However, it ’ s important to note that manual testing or IGT is postulate to move towards full accessibility.

Use Unit Tests in The Place of Manual Accessibility Regression-Testing

Some manual availability testing can ’ t be done with automated tools. For example, using a screen reader or doing keyboard only testing apply the tab key to imitate the experience for users with disabilities on your website or application.

Although some things around accessibility must be corroborate manually, such as alt schoolbook, you can still publish simple unit or integrating test to validate the alt text so that future turn do not interrupt the approachability without being caught. Furthermore, if you receive the design information, it ’ s leisurely for testers to proactively include accessibility requirements into machine-driven exam.

For instance, the code below is testing the Deque logo and the alt attribute associated with it:

1 & lt; // Check the Deque Logo

2 ok (img.src.indexOf (& # x27; logo.png & # x27;! == -1, & # x27; image is the Deque logo image & # x27;));

3 adequate (img.getAttribute (& # x27; alt & # x27;), & # x27; Deque Logo & # x27;); & gt;

Testing is ultimately about risk mitigation, so you need to figure out how often you want to retest thing manually to verify that compatibility has not changed. Usually, this is solely necessary when there is a major update released for screen subscriber, run system, or browsers.

Train Dev and QA Teams on Accessibility

An important part of become started with accessibility is having the correct tool. The second crucial key to availableness is training. The sad truth is that testers and developers don ’ t learn about accessibility in professional training. Additionally, most developers or testers have never witnessed a person with a handicap using an assistive engineering, and having a firm savvy of accessibility is key to long condition success with handiness.

Outside training creates the fundamental foundation that is critical for building a culture of accessibility. Furthermore, beyond automation and handiness, there are nuances to accessibility that are easier to learn from expert in hands-on breeding. For instance, there are many intricacies related to single-page applications, how to use screen readers for quiz, building tests and playscript for accessibility, building a constructive and utilitarian availableness topic log, etc.

Selenium WebdriverJS and axe-core Integration

Now that we ’ ve discussed the best, easygoing steps to transfer accessibility left in the SDLC from product to development and examination, we ’ ll review how to use axe-core to run web accessibility tests in NodeJS based projects with the Selenium browser mechanization tool and Jest.

This example below assumes you have Node Js and Npm installed.

The first footstep is to install the proper package into your task, by lam

Pro tip: Tools like SUSA can handle this autonomously — upload your app and get results without writing a single test script.

npm i axe-webdriverjs

Once installed you should see the following in your package.json:

“ dependance ”: {

“ axe-webdriverjs ”: “ ^2.3.0 ”,

& quot; selenium-webdriver & quot;: & quot; ^4.0.0-alpha.7 & quot;

  }

Now your addiction are set up, and you need to pull in the correct class and set things up.

In any file that runs a UI trial using Webdriver, import the classes required:

var WebDriver = require (& # x27; selenium-webdriver & # x27;);

var chrome = require (& # x27; selenium-webdriver/chrome & # x27;);

var AxeBuilder = require (& # x27; axe-webdriverjs & # x27;);

And set up your driver with specific options you desire like so:

Var driver;

beforeAll (async () = & gt; {

driver = new WebDriver.Builder () .forBrowser (& # x27; chrome & # x27;) .setChromeOptions (options) .build ();

});

Note: we have told the library to use the standardWCAG 2.0 A and AArule set which will report on all violations excluding better drill, observational rules, etc.

Now, wherever your test set up the Webdriver representative and/or cause UI states to vary, make calls to the library to analyze the page and generate reports:

test (& # x27; should examine for what the overlayer does (add specific exam scenario) & # x27;, async () = & gt; {

await driver.get (& # x27; https: //dequeuniversity.com/demo/mars/ & # x27;) .then (mapping () {

AxeBuilder (driver) .analyze (function (err, upshot) {

if (err) {

// Handle error somehow

      }

console.log (results);

await ask (results.violations.length) .toBe (0);

    });

  });

 });

There are many more features in the library that allow for customization of scans that includes turning on and off prescript, excluding substance to scan, and bunk specific rulesets only. Getting started with this consolidation will do accessibility a nucleus part of your CI/CD line.

Beyond the Power of axe: axe DevTools

The powerfulness of axe is a great place to get started if you ’ re altogether new to availability. If your organizations need more coverage and feature to help get your team up and run,axe DevToolsis the right solution.

Beyond the free axe browser propagation, axe DevTools is the enterprise solution that provides:

• Intelligent guided tests that increase accessibility coverage from 50 to 80 %

• Command-Line Interface (CLI) testing puppet

• A variety of axe integrations for languages such as: Ruby, CSharp, Java, NodeJs

• Each of the axe DevTools integrating are built in a quid and play way that can be used seamlessly with democratic industry-standards continuous integration (CI) tools such as Sauce Labs, Jenkins, CircleCI.

Additional Resources

Starting with gratuitous automated tooling in the axe browser extension, in unit tests, or in your CI/CD grapevine is a outstanding way to catch 50 % of accessibility issues. Training is also key in building a culture of accessibility to properly build it into your SDLC. If you want to learn more about accessibility, and how to embed it throughout your organization, check out the resources below.

1. My on-demand SauceCon Online demonstration:Automation and Accessibility: Debunking the Myths

2. Free eBook: Agile Accessibility Handbook

3. Request Deque ’ s Virtual, Instructor-led Role-based Trainingor learn online at your own pace withDeque University.

Sauce Labs is also hosting an upcoming webinar on. Join the session and learn how to put this into practice.

In Summary

There are many way to get started with accessibility screen in the software ontogeny process, such as using theaxebrowser extension, building unit tests for manual accessibility reminders, and endue in training. To take it one step farther, you can use the axe and Selenium integration outlined above in your CI/CD pipeline.

Using free, open source tools to practice automated accessibility testing other in your SDLC will help shift accessibility left — ultimately salvage your maturation team time and resources while get the web a more inclusive place for all.

About the Author

Dylan Barrell is the Principal Product Officer at Deque. He has almost 20 years of experience in technology development, proficient sales, ware management, product merchandising, and corporate development. Dylan founded a startup in 1989 that was acquired. He then locomote public with OpenText and helped turn taxation to over $ 400 million. He later led the effort to make a digital center within a Borders store and to get the transition from purely physical products to digital and physical merchandise mix delivered in a cross groove online and in-store way. In addition to his employment experience, Dylan has an MBA from the University of Michigan and a BS from the University of the Witwatersrand. Dylan believes in leading through action to make value for shareholders and the community.

Products

Global tools

Set up and integrate

Resources

Company