| 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: + + |
+