Skip to content

Add axe: standard to allow users to scope rules #14607

@cwickham

Description

@cwickham

The axe: accessibility checker runs axe-core's default rule set with no way to scope it.
E.g. A user that needs to meet a specific WCAG conformance level,
may want to turn off axe's best-practice rules, or only see violations relevant to their target level.

axe.run called in src/resources/formats/html/axe/axe-check.js takes a runOnly value to options like:
options.runOnly: { type: "tag", values: ["wcag22aa", "best-practice"] }

The tricky thing is that axe tags are not cumulative, a rule's WCAG version tag marks where its criterion was introduced, not every level it applies to.

I propose instead of a user feeding tags directly into runOnly, we introduce a standard option and propagate the list of tags ourselves.
E.g a user writes:

format:
  html:
    axe:
      output: document
      standard: wcag21aa      

And we call axe.run with options.runOnly:

this.axe.run(
    // 1st arg — context (what to scan): unchanged from today
    { exclude: ["[data-tabster-dummy]"] },
    // 2nd arg — options: this is the new part
    {
      runOnly: {
        type: "tag",
        values: ["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"],
      },
      preload: { assets: ["cssom"], timeout: 50000 },
    }
  );

The mapping from standard to tag looks something like:

const STANDARD_TAGS = {
    // WCAG 2.0
    wcag2a:    ["wcag2a"],
    wcag2aa:   ["wcag2a", "wcag2aa"],
    wcag2aaa:  ["wcag2a", "wcag2aa", "wcag2aaa"],
    // WCAG 2.1
    wcag21a:   ["wcag2a", "wcag21a"],
    wcag21aa:  ["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"],
    wcag21aaa: ["wcag2a", "wcag2aa", "wcag2aaa", "wcag21a", "wcag21aa"],
    // WCAG 2.2
    wcag22a:   ["wcag2a", "wcag21a"],
    wcag22aa:  ["wcag2a", "wcag2aa", "wcag21a", "wcag21aa", "wcag22aa"],
    wcag22aaa: ["wcag2a", "wcag2aa", "wcag2aaa", "wcag21a", "wcag21aa", "wcag22aa"],
  };

We then might also allow a axe: best-practices: true/false option to control whether the tag best-practices is also added.

Metadata

Metadata

Assignees

No one assigned

    Labels

    accessibilityenhancementNew feature or requesthtmlIssues with HTML and related web technology (html/css/scss/js)
    No fields configured for Enhancement.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions