Skip to content
Sid Vishnoi edited this page Apr 22, 2021 · 13 revisions

Guides

Configuration options

W3C Configuration options

Linter rules

Internal properties

Handled by ReSpec for you.

Special <section> IDs

HTML elements

Custom Elements

WebIDL

HTML attributes

CSS Classes

Special properties

Clone this wiki locally

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:

Accessibility warnings in ReSpec

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.