tslint-react-a11y

tslint-react-a11y

JSX a11y lint rules for TSLint.

Instalation

npm i tslint-react-a11y

Usage

In tslint.json:

{
  "extends": ["tslint:latest", "tslint-react", "tslint-react-a11y"],
  "rules": {
    // override tslint-react-a11y rules here
    "react-a11y-lang": false
  }
}

Supported rules

This is a subset of the react rules defined in tslint-microsoft-contrib that regard accessibility.

Rule Name	Description
react-a11y-accessible-headings	For accessibility of your website, there should be no more than 2 H1 heading elements, HTML heading elements must be concise, used for structuring information on the page and non-empty.
react-a11y-anchors	For accessibility of your website, anchor element link text should be at least 4 characters long. Links with the same HREF should have the same link text. Links that point to different HREFs should have different link text. This can be relaxed to allow differences in cases using ignore-case option. You can also allow differences in leading/trailing whitespace by adding {"ignore-whitespace": "trim"} option or all whitespace by adding {"ignore-whitespace": "all"} option. Links with images and text content, the alt attribute should be unique to the text content or empty. An an anchor element's href prop value must not be undefined, null, or just #. References: WCAG Rule 38: Link text should be as least four 4 characters long WCAG Rule 39: Links with the same HREF should have the same link text WCAG Rule 41: Links that point to different HREFs should have different link text WCAG Rule 43: Links with images and text content, the alt attribute should be unique to the text content or empty
react-a11y-aria-unsupported-elements	For accessibility of your website, enforce that elements that do not support ARIA roles, states, and properties do not have those attributes.
react-a11y-event-has-role	For accessibility of your website, elements with event handlers must have explicit role or implicit role. References: WCAG Rule 94 Using the button role
react-a11y-iframes	Enforce that iframe elements are not empty, have title, and are unique.
react-a11y-image-button-has-alt	For accessibility of your website, enforce that inputs element with type="image" must have non-empty alt attribute.
react-a11y-img-has-alt	Enforce that an img element contains the alt attribute or role='presentation' for a decorative image. All images must have alt text to convey their purpose and meaning to screen reader users. Besides, the alt attribute specifies an alternate text for an image, if the image cannot be displayed. This rule accepts as a parameter a string array for tag names other than img to also check. For example, if you use a custom tag named 'Image' then configure the rule with: [true, ['Image']]. References: Web Content Accessibility Guidelines 1.0 ARIA Presentation Role WCAG Rule 31: If an image has an alt or title attribute, it should not have a presentation role
react-a11y-input-elements	For accessibility of your website, HTML input boxes and text areas must include default, place-holding characters. References: WCAG 10.4 WCAG 11.5
react-a11y-lang	For accessibility of your website, HTML elements must have a lang attribute and the attribute must be a valid language code. References: H58: Using language attributes to identify changes in the human language lang attribute must have a valid value List of ISO 639-1 codes
react-a11y-meta	For accessibility of your website, HTML meta elements must not have http-equiv="refresh".
react-a11y-mouse-event-has-key-event	For accessibility of your website, elements with mouseOver/mouseOut should be accompanied by onFocus/onBlur keyboard events.
react-a11y-no-onchange	For accessibility of your website, enforce usage of onBlur over onChange on select menus. References: OnChange Event Accessibility Issues Guideline 8. Ensure direct accessibility of embedded user interfaces.
react-a11y-props	For accessibility of your website, enforce all aria-* attributes are valid. Elements cannot use an invalid aria-* attribute. This rule will fail if it finds an aria-* attribute that is not listed in WAI-ARIA states and properties.
react-a11y-proptypes	For accessibility of your website, enforce the type of aria state and property values are correct.
react-a11y-required	For accessibility of your website, enforce that required input elements have aria-required set to true. References: Acessibility in HTML5
react-a11y-role	For accessibility of your website, elements with aria roles must use a **valid**, **non-abstract** aria role. A reference to role definitions can be found at [WAI-ARIA roles](https://www.w3.org/TR/wai-aria-1.1/#role_definitions). References: WCAG Rule 92: Role value must be valid
react-a11y-role-has-required-aria-props	For accessibility of your website, elements with aria roles must have all required attributes according to the role. References: ARIA Definition of Roles WCAG Rule 90: Required properties and states should be defined WCAG Rule 91: Required properties and states must not be empty
react-a11y-role-supports-aria-props	For accessibility of your website, enforce that elements with explicit or implicit roles defined contain only aria-* properties supported by that role. Many aria attributes (states and properties) can only be used on elements with particular roles. Some elements have implicit roles, such as <a href='hrefValue' />, which will be resolved to role='link'. A reference for the implicit roles can be found at Default Implicit ARIA Semantics. References: ARIA attributes can only be used with certain roles Check aria properties and states for valid roles and properties Check that 'ARIA-' attributes are valid properties and states
react-a11y-tabindex-no-positive	For accessibility of your website, enforce tabindex value is **not greater than zero**. Avoid positive tabindex attribute values to synchronize the flow of the page with keyboard tab order. References: WCAG 2.4.3 - Focus Order Audit Rules - tabindex-usage Avoid positive integer values for tabIndex
react-a11y-titles	For accessibility of your website, HTML title elements must not be empty, must be more than one word, and must not be more than 60 characters long. References: WCAG 2.0 - Requirement 2.4.2 Page Titled (Level A) OAA-Accessibility Rule 13: Title element should not be empty OAA-Accessibility Rule 24: Title content should be concise OAA-Accessibility Rule 25: Title text must contain more than one word