WP Theme Auditor

Accessibility auditing tools for WordPress themes.

You can install this package to run Axe tests against your theme for automated accessibility feedback.

Requirements

• npm >= 6.8.0
• A local WordPress install (>= 5.0)
• A theme to test

Installation

From your theme's root directory, run the following commands:

npm install --save-dev wpaccessibility/wp-theme-auditor
npx npm-add-script -k "create-test-cases" -v "create-test-cases"
npx npm-add-script -k "test:axe" -v "wp-scripts test-e2e"

Then you'll need to add more test cases. You can do this interactively by running npm run create-test-cases from your theme's root directory.

If, say, you wanted to test your theme's contact page which has a slug of contact, you might create a new test case with the following inputs:

$ npm run create-test-cases
> twentynineteen@1.3.0 create-test-cases /Users/ned/Sites/a11y/wp-content/themes/twentynineteen
> create-test-cases

Creating test cases...
? What is the post type? page
? What is the slug of the post or page? contact
? What is the title of the post or page? Contact page
Test case created at /Users/ned/Sites/a11y/wp-content/themes/twentysixteen/test/contact.test.js.

The resulting test case file would contain the following content:

/*global describe, beforeAll, page, it, expect */

const { WP_BASE_URL } = require( './support/config' );

describe( 'Contact page', () => {
	beforeAll( async () => {
		await page.goto( `${ WP_BASE_URL }/?pagename=contact` );
	} );

	it( 'Should pass Axe tests', async () => {
		await expect( page ).toPassAxeTests();
	} );
} );

Usage

npm run test:axe

Tests will be run against http://one.wordpress.test by default. If you'd like to run your tests against a different WordPress install, you can use the WP_BASE_URL environment variable:

WP_BASE_URL=https://custom.test npm run test:axe

Contributors

• @aduth
• @dylanb
• @greatislander
• @gziolo
• @joemcgill
• @ryelle
• @stephenmathieson