Automated accessibility testing using HTML_Codesniffer (WCAG and Section508)
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
bin
img
src
test
.babelrc
.eslintrc
.flowconfig
.gitignore
.nvmrc
.travis.yml
README.md
appveyor.yml
gulpfile.babel.js
package-lock.json
package.json
yarn.lock

README.md

AccessSniff

Build Status Build status codecov

A CLI, JsDom and PhantomJs library for HTML_CodeSniffer

Example Image

Getting Started

Install this plugin with npm install access-sniff --save

ES5

var AccessSniff = require('access-sniff');

AccessSniff
  .default(['**/*.html'], options)
  .then(function(report) {
    AccessSniff.report(report, reportOptions);
  });

ES6

import AccessSniff, { reports as AccessReports } from 'access-sniff';

AccessSniff(['**/*.html'], options)
  .then(report => AccessReports(report, reportOptions));

CLI

npm install access-sniff -g
sniff test/**/*.html -r json -l reports

AccessSniff can test both locally hosted files and websites.

sniff http://statamic.com/ -r json -l reports

Options

You can pass the following options

Accessibility Level

accessibilityLevel is a string

options: {
  accessibilityLevel: 'WCAG2A'
}

Levels are WCAG2A, WCAG2AA, WCAG2AAA, and Section508

Accessibilityrc

You can create an .accessibilityrc file in your project to set options:

{
  "ignore": [
    "WCAG2A.Principle2.Guideline2_4.2_4_2.H25.1.NoTitleEl",
    "WCAG2A.Principle3.Guideline3_1.3_1_1.H57.2"
  ]
}

Ignore

ignore is an array

You can ignore rules by placing them in an array outlined below.

options: {
  ignore: [
    'WCAG2A.Principle2.Guideline2_4.2_4_2.H25.1.NoTitleEl'
    'WCAG2A.Principle3.Guideline3_1.3_1_1.H57.2'
  ]
}

Rules will also match to remove and entire set.

WCAG2A.Principle2.Guideline2_4.2_4_2.H25.1 will ignore WCAG2A.Principle2.Guideline2_4.2_4_2.H25.1.NoTitleEl

Verbose output

verbose is a boolean

options: {
  verbose: false
}

Output messages to console, set to true by default

Force

force is a boolean, defaults to false

options: {
  force: true
}

Continue running in the event of failures. You can catch failures from the promise as below:

AccessSniff(['**/*.html'], options)
.then(report => AccessReports(report, reportOptions));
.catch(error => console.error(error))

Browser

browser is a boolean, defaults to false

options: {
  browser: false
}

AccessSniff uses jsDom as the default, setting this to true will use PhantomJs instead

maxBuffer

maxBuffer is a number, defaults to 500*1024

In certain situations you might have to increase the memory allocated to render a page.

options: {
  maxBuffer: 500*1024
}

Reports

You can pass the following options to the report generator

Notes

  • Reports are now generated from the returned json to the report module
  • Report location is required to write a report
  • Reports return the content from the report

Modular Reporting

You can use the inbuilt system or create your own

AccessSniff.report(report, reportOptions)

Report Type

reportType is a string

options: {
  reportType: 'json'
}

Text, CSV or JSON format output

  • txt will output text files
  • json will output .json files
  • csv will output csv

Report Location

reportLocation is a string

  options: {
    reportLocation: 'reports'
  }

Set the value to where you want reports created

Report Levels

reportLevels is an object

  options: {
    reportLevels: {
      notice: true,
      warning: true,
      error: true
    }
  }

Set a value to false to limit output

CLI

You can use the CLI component by installing it globally with npm install -g access-sniff

sniff test/**/*.html -r json -l reports
sniff test/**/*.html -r csv -l reports
sniff test/**/*.html -r txt -l reports

Options

Report Type

-r or -reportType

txt, csv, json.

Report Location

-r or -reportLocation

Force

-f or -force

Quiet

-q or -quiet