cypress-accessibility-audit
Test accessibility with HTMLCodesniffer in Cypress.
Installation
- Install
cypress-accessibility-audit
from npm.
yarn add cypress-accessibility-audit --dev
- Install peer dependecies:
yarn add cypress --dev
- Include the commands. Update
/cypress/support/index.js
file to include the cypress-accessibility-audit
commands by addding
import 'cypress-accessibility-audit/commands'
- Add included tasks: In your
/cypress/plugins/index.js
file, add the following code to included the required tasks:
const { a11yAudit } = require('cypress-accessibility-audit');
module.exports = on => {
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 {
path: string
filename: string
}
Examples
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.