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.

Example of usage

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

var respecConfig = {
  a11y: true,
};

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

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

Another example:

var respecConfig = {
  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 },
    },
  },
};

Example output

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.