1 of 37

Configuring Axe Accessibility Tests

WCAG

ARIA

ADA

508

AUDIT

2 of 37

Steven Lambert (he/him)

Tech Lead / People Manager @ Deque Systems

Primary developer on axe-core

Contact:

@StevenKLambert

steven@sklambert.com

stevenklambert.com

3 of 37

What is axe?

4 of 37

axe is an “accessibility engine for automated Web UI testing”
Runs a set of rules to test web pages or code for accessibility problems

5 of 37

Example Use

6 of 37

Example Output

[

{id: 'landmark-one-main', impact: 'moderate', …}

{id: 'page-has-heading-one', impact: 'moderate', …}

{id: 'region', impact: 'moderate', …}

]

7 of 37

Where Can You Use axe?

8 of 37

Browser or Node

axe-core

9 of 37

CLI And Test Frameworks

@axe-core/cli
@axe-core/playwright
@axe-core/puppeteer
@axe-core/react
@axe-core/webdriverio
@axe-core/webdriverjs

10 of 37

VSCode

axe Linter

11 of 37

Other Integrations

Chrome and Firefox Extensions
Java
Ruby

12 of 37

Other Integrations

Chrome and Firefox Extensions
Java
Ruby

13 of 37

Configuring Rules

14 of 37

Which Rules Does axe Run?

By default, axe runs all supported rules

15 of 37

Where to Find Support Rules

axe-core and integrations - https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md

axe Linter - https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter#rules

16 of 37

Various Ways to Configure Which Rules Run

Disable rules
Run certain rules
Run rules matching tag

17 of 37

For each of the ways to configure axe, I’ll show an example of how to do it for axe-core, then for cli and test frameworks, and lastly for axe linter.

18 of 37

Disabling Rules

19 of 37

Axe-core

await axe.run({

rules: {

'button-name': { enabled: false },

'label': { enabled: false }

}

});

20 of 37

CLI And Test Frameworks

new AxeBuilder()

.disableRules('button-name')

.analyze();��new AxeBuilder()

.disableRules(['button-name', 'label'])

.analyze();

21 of 37

Axe Linter

# axe-linter.yml

rules:

button-name: false

label: false

22 of 37

Run Certain Rules

23 of 37

Axe-core

await axe.run({ runOnly: 'button-name' });

await axe.run({ runOnly: ['button-name', 'label'] });

24 of 37

CLI And Test Frameworks

new AxeBuilder()

.withRules('button-name')

.analyze();

�new AxeBuilder()

.withRules(['button-name', 'label'])

.analyze();

25 of 37

Axe Linter

No API for this, so you’ll have to disable all other rules

# axe-linter.yml

rules:

button-name: true

label: true

area-alt: false

aria-allowed-attr: false

# …

26 of 37

Run Rules Matching Tag

27 of 37

What is a Tag?

Tags are ways to categorize rules into groups. In most cases, they are used to group rules by their WCAG version and conformance level.

For example, the “wcag2aa” tag is used to group rules for WCAG 2.0, AA conformance.

28 of 37

Where to Find Support Tags

Axe-core and integrations - https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#axe-core-tags

Axe Linter - https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter#accessibility-tags

List of rules and their tags -

https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md

29 of 37

Axe-core

await axe.run({ runOnly: 'wcag2aa' });

await axe.run({ runOnly: ['wcag2aa', 'wcag2a'] });

30 of 37

CLI And Test Frameworks

new AxeBuilder()

.withTags('wcag2aa')

.analyze();��new AxeBuilder()

.withTags(['wcag2aa', 'wcag2a'])

.analyze();

31 of 37

Axe Linter

# axe-linter.yml

tags:

- wcag2aa

- wcag2a

32 of 37

Axe Run Options

33 of 37

Run Options

https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter

34 of 37

Shortlist of Run Options

runOnly - Limit which rules are executed, based on names or tags
rules - Enable or disable rules using the enabled property
resultTypes - Limit which result types are shown (passes, incomplete, violations)
iframes - Tell axe to run inside iframes

35 of 37

Axe-core

await axe.run({ resultTypes: ['violations'] });

36 of 37

CLI And Test Frameworks

new AxeBuilder()

.options({ resultTypes: ['violations'] })

.analyze();

37 of 37

Connect with us