Skip to content

Automated accessibility testing using HTML_Codesniffer (WCAG and Section508)

Notifications You must be signed in to change notification settings

MikeSpitz/AccessSniff

 
 

Repository files navigation

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

Quiet

-q or -quiet

About

Automated accessibility testing using HTML_Codesniffer (WCAG and Section508)

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 98.1%
  • HTML 1.9%