a11y

a11y

Lints for accessibility issues using axe-core: "Axe is an accessibility testing engine for websites and other HTML-based user interfaces".

Note: Using this on hosted documents (e.g., on GitHub pages) can slow down the rendering and may make the page unresponsive. Please only enable only the rules you need.

Basic example, runs all default plugins with a exception of a few slow ones.

var respecConfig = {
  lint: {
    a11y: true,
  }
};

Example with Axe configuration, as per Axe's configuration options.

var respecConfig = {
  lint: {
    a11y: {
      runOnly: ["image-alt", "link-name"],
    },
  },
};

Another example:

var respecConfig = {
  lint: {
    a11y: {
      // run all rules, except "image-alt" and slow rules (but run "color-contrast")
      rules: {
        "color-contrast": { enabled: true }, // disabled by default, enable it
        "image-alt": { enabled: false },
      },
    },
  },
};

If the document has accessibility issues, they will show up as ReSpec warnings:

In an actual document, you can expand the details to get more information about each issue along with a link to the specific HTML element causing the issue.

You can also use respecConfig.a11y to define the linter config (instead of respecConfig.lint.a11y). This lets us quickly run the linter by adding a URL param ?a11y=true.