JSX a11y lint rules for TSLint.
npm i tslint-react-a11yIn tslint.json:
{
"extends": ["tslint:latest", "tslint-react", "tslint-react-a11y"],
"rules": {
// override tslint-react-a11y rules here
"react-a11y-lang": false
}
}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:
|
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: |
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: |
react-a11y-input-elements
|
For accessibility of your website, HTML input boxes and text areas must include default, place-holding characters.
References: |
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: |
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: |
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: |
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: |
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: |
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: |
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: |
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: |