cypress-accessibility-audit

cypress-accessibility-audit

Test accessibility with HTMLCodesniffer in Cypress.

Installation

1. Install cypress-accessibility-audit from npm.

yarn add cypress-accessibility-audit --dev

1. Install peer dependecies:

  yarn add cypress --dev

1. Include the commands. Update /cypress/support/index.js file to include the cypress-accessibility-audit commands by addding

import 'cypress-accessibility-audit/commands'

1. Add included tasks: In your /cypress/plugins/index.js file, add the following code to included the required tasks:

// /cypress/plugins/index.js

const { a11yAudit } = require('cypress-accessibility-audit');

module.exports = on => {
  // ...other plugins

  on('task', a11yAudit);
}

Commands

---

cy.a11y

This command will run the accessibility audit agaist the document at which point it is called. This means that you can interact with your page and uncover accessibilty issues introduced with your actions.

Arguments

The command cy.a11y(config: A11yConfig) takes a config argument to help customize behavior

  type a11y = (config: A11yConfig) => void;
  
  interface A11yConfig {
    /**
     * This is the directory to which the csv report is written to.
     * @default /cypress/reports
     */
    path: string
    /**
     * This is the name of the file for the csv accessibilty report.
     * @default /accessibility_report.csv
     */
    filename: string
  }

Examples

// Basic Usage
it('should pass the audits', () => {
  cy.a11y();
})

Accessing the raw reports

---

After a accessibility audit is run, a full report will be written as a csv to either the path you specify in your config or if you do not set a custom destination, /cypress/reports/accessibility_report.csv.

This report can then be viewed to see a full summary of all applicable accessibility issues that need to be addressed.