The axe-core-cucumber
gem provides a custom step defintions to evalaute the accessibility of a given page.
- In your Gemfile, add the
axe-core-cucumber
gem.
source "https://rubygems.org"
gem 'axe-core-cucumber'
- Require
axe-cucumber-steps
to makes all of the axe-cucumber step definitions available to be used directly in your cucumber features.
require 'axe-cucumber-steps'
- Use with webdriver of choice.
The base step be axe clean
is the core component of the step. It is a complete step on its own and will verify the currently loaded page is axe clean using the default configuration of axe.run (the entire document is checked using the default rules).
Then the page should be axe clean
Clauses are chainable methods for the be axe clean
custom step.Configurable clauses allows for greater granularity with testing and expectaions.
The inclusion clause ( within "#selector"
) specifies which elements of the page should be checked. A valid CSS selector must be provided, and is surrounded in double quotes. Compound selectors may be used to select multiple elements. e.g. within "#header, .footer"
see additional context parameter documentation
Then the page should be axe clean within "#selector"
The exclusion clause ( excluding "#selector"
) specifies which elements of the document should be ignored. A valid CSS selector must be provided, and is surrounded in double quotes. Compound selectors may be used to select multiple elements. e.g. excluding "#widget, .ad"
see additional context parameter documentation
Then the page should be axe clean excluding "#selector"
If desired, a semicolon ( ;
) or the word but
may be used to separate the exclusion clause from the inclusion clause (if present).
Then the page should be axe clean within "main"; excluding "aside"
Then the page should be axe clean within "main" but excluding "aside"
The tag clause specifies which accessibility standard (or standards) should be used to check the page. The accessibility standards are specified by name (tag). Multiple standards can be specified when comma-separated. e.g. according to: wcag2a, section508
The acceptable tag names are documented as well as a complete listing of rules that correspond to each tag.
Then the page should be axe clean according to: tag-name
If desired, a semicolon ( ;
) may be used to separate the tag clause from the preceding clause.
Then the page should be axe clean within "#header"; according to: best-practice
The checking-rules clause specifies which additional rules to run (in addition to the specified tags, if any, or the default ruleset). The rules are specified by comma-separated rule IDs.
Then the page should be axe clean checking: ruleId
see rules documentation for a list of valid rule IDs
If desired, a semicolon ( ;
) or the word and
may be used to separate the checking-rules clause from the preceding clause.
Then the page should be axe clean according to: wcag2a; checking: color-contrast
Then the page should be axe clean according to: wcag2a and checking: color-contrast
This clause is not really a separate clause. But rather, by adding the word only
to the checking-rules clause, the meaning of the step can be changed. As described above, by default the checking-rules clause specifies additional rules to run. If the word only
is used, then only the specified rules are checked.
Then the page should be axe clean checking only: ruleId
The skipping-rules clause specifies which rules to skip. This allows an accessibility standard to be provided (via the tag clause) while ignoring a particular rule. The rules are specified by comma-separated rule IDs.
Then the page should be axe clean skipping: ruleId
see rules documentation for a list of valid rule IDs
If desired, a semicolon ( ;
) or the word but
may be used to separate the skipping-rules clause from the preceding clause.
Then the page should be axe clean according to: wcag2a; skipping: accesskeys
Then the page should be axe clean according to: wcag2a but skipping: accesskeys
All of the described clauses may be mixed and matched with method chaining. Below are some examples.
Then the page should be axe clean within "main, header" but excluding "footer"
Then the page should be axe clean excluding "#sidebar" according to: wcag2a, wcag2aa but skipping: color-contrast
Then the page should be axe clean checking only: document-title, label
Then the page should be axe clean according to: best-practice and checking: aria-roles, definition-list