@acot/acot-plugin-wcag

A WCAG-based rule set for acot.

Install

Install via npm:

$ npm install --save-dev @acot/acot-plugin-wcag

Usage

Add @acot/wcag to the plugins field of the acot config file. then configure the rules you want to use under the rules section.

{
  "plugins": ["@acot/wcag"],
  "rules": {
    "@acot/wcag/button-has-name": "error"
  }
}

You can also enable all the recommended rules for our plugin. Add plugin:@acot/wcag/recommended in extends:

{
  "extends": ["plugin:@acot/wcag/recommended"]
}

Supported Rules

Name	Description	✔️
@acot/wcag/interactive-has-enough-size	The size of the target for pointer inputs is at least 44 by 44 CSS pixels.	✔️
@acot/wcag/interactive-has-name	For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. WCAG 2.1 - 4.1.2: Name, Role, Value	✔️
@acot/wcag/interactive-supports-focus	TBA	✔️

Concept

Interactive content

Some rules deal with interactive content. The definition of interactive content to be audited is as follows:

1. 3.2.5.2.7 Interactive content compliant elements.
2. Elements with a role attribute that conforms to the above.
3. Focusable elements.

---

T.B.A