Gulp plugin to test static pages with aXe as pre-commit hook or in CI environment.
npm install gulp-axe-cli    
Gulp plugin to test static pages with aXe as pre-commit hook or in CI environment.
Other axe-based plugins are built to generate reports. While these reports are great for analysis, these CLIs, plugins, and packages do not always work well with development pipelines. With gulp-axe-cli, we leverage the power of gulp as a task runner :muscle: and the automation for a11y testing of aXe :collision: to prevent bad code from being committed or built. :thumbsup:
``
$ npm install --save-dev gulp-axe-cli
`js
const gulp = require('gulp');
const axe = require('gulp-axe-cli');
gulp.task('default', () =>
gulp.src('src/file.ext')
.pipe(axe())
.pipe(gulp.dest('dist'))
);
`
__Note__ While aXe one of the best automated tools, it only covers 20%-50% of all a11y issues. Be sure to test manually after the aXe test.
#### config
Type: Object
All properties are optional.
`js
const gulp = require('gulp');
const axe = require('gulp-axe-cli');
const axeConfig = {
urls: (file) => {
...
},
tags: [ ... ],
rules: [ ... ],
disable: [ ... ],
scope: {
'include': ' ... ',
'exclude': ' ... '
},
browser: ' ... ',
timeout: 120,
'load-delay': 2000,
save: false
};
gulp.task('default', () =>
gulp.src('src/file.ext')
.pipe(axe(axeConfig))
.pipe(gulp.dest('dist'))
);
`
##### urls
Type: function
Default:
Allows you to modify the files from gulp.src([...]) to match your routes either locally or remotely.
##### tags
Type: array[strings]
Default:
Specify which level of a11y compliance to follow. These "tags" include a set of rules to test your pages. Learn more about the rules or learn more about aXe tags
##### rules
Type: array[strings]
Default:
Add specific rules to test on your pages. These can be in addition to any rules already included in your tags (above). Learn more about aXe's rules or learn more about axe tags
##### disable
Type: array[strings]
Default:
Ignore specific rules as the test run on your pages. These rules will be skipped from the already included in your tags (above). Learn more about aXe's rules or learn more about axe tags
##### scope
Type: object[string: string]
Default:
Scope your tests to either include or exclude particular sections of your page. The include and exclude keys take in a CSS3 selector for the elements to include/exclude from your test.
##### browser
Type: string
Default:
You can run your test on different browsers. By default it runs on a headless Chrome instance. Running in another browser requires that browser's webdriver to be available on your PATH. You can find a list of available webdrivers and how to install them at: https://seleniumhq.github.io/docs/wd.html
##### timeout
Type: number
Default:
If you find the execution of axe-core takes too long, which can happen on very large pages, use timeout to increase the time axe has to test that page. The value represents time in seconds.
##### load-delay
Type: number
Default:
If you find your page is not ready after axe has determined it has loaded, you can use load-delay. This will make axe wait that time before running the audit after the page has loaded. The value represents time in milliseconds.
##### save
Type: boolean
Default:
gulp-axe-cli is meant to run and pass/fail on the terminal, but this doesn't mean you can't save the reports. By default, the reports will save as json files with all the errors in ./axe-results/
If you want to save the results, by default, we're saving them into an ./axe-results directory. This directory should already be present by the time you run the tests, so you can add a script to add it post install.
aXe helps to automate a11y testing, but it only covers certain rules for fully accessible sites. Here's the note from aXe after each test run:
`
Please note that only 20% to 50% of all accessibility issues can automatically be detected.
Manual testing is always required. For more information see:
https://dequeuniversity.com/curriculum/courses/testingmethods
There are only certain a11y rules that are covered, so for maximum coverage, do test your application manually.
We're created a demo repo to test the integration at https://github.com/samueleishion/gulp-axe-cli-demo
MIT © Sam Acuna
 