diff --git a/docs/rules/accessible-emoji.md b/docs/rules/accessible-emoji.md index f8920250a..8f77d7c6b 100644 --- a/docs/rules/accessible-emoji.md +++ b/docs/rules/accessible-emoji.md @@ -1,9 +1,6 @@ # [Deprecated] accessible-emoji -Emoji have become a common way of communicating content to the end user. To a person using a screenreader, however, he/she may not be aware that this content is there at all. By wrapping the emoji in a ``, giving it the `role="img"`, and providing a useful description in `aria-label`, the screenreader will treat the emoji as an image in the accessibility tree with an accessible name for the end user. - -#### Resources -1. [Léonie Watson](http://tink.uk/accessible-emoji/) +Emoji have become a common way of communicating content to the end user. To a person using a screenreader, however, they may not be aware that this content is there at all. By wrapping the emoji in a ``, giving it the `role="img"`, and providing a useful description in `aria-label`, the screenreader will treat the emoji as an image in the accessibility tree with an accessible name for the end user. ## Rule details @@ -21,3 +18,9 @@ This rule takes no arguments. 🐼 🐼 ``` + +## Accessibility guidelines +- [WCAG 1.1.1](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html) + +### Resources +- [Léonie Watson, Accessible Emoji](http://tink.uk/accessible-emoji/) diff --git a/docs/rules/alt-text.md b/docs/rules/alt-text.md index e86edfc63..3837d0a99 100644 --- a/docs/rules/alt-text.md +++ b/docs/rules/alt-text.md @@ -2,12 +2,6 @@ Enforce that all elements that require alternative text have meaningful information to relay back to the end user. This is a critical component of accessibility for screenreader users in order for them to understand the content's purpose on the page. By default, this rule checks for alternative text on the following elements: ``, ``, ``, and ``. -#### Resources -1. [axe-core, object-alt](https://dequeuniversity.com/rules/axe/3.2/object-alt) -2. [axe-core, image-alt](https://dequeuniversity.com/rules/axe/3.2/image-alt) -3. [axe-core, input-image-alt](https://dequeuniversity.com/rules/axe/3.2/input-image-alt) -4. [axe-core, area-alt](https://dequeuniversity.com/rules/axe/3.2/area-alt) - ## How to resolve ### `` An `` must have the `alt` prop set with meaningful text or as an empty string to indicate that it is an image for decoration. @@ -141,3 +135,12 @@ function Foo(props) { ``` + +## Accessibility guidelines +- [WCAG 1.1.1](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html) + +### Resources +- [axe-core, object-alt](https://dequeuniversity.com/rules/axe/3.2/object-alt) +- [axe-core, image-alt](https://dequeuniversity.com/rules/axe/3.2/image-alt) +- [axe-core, input-image-alt](https://dequeuniversity.com/rules/axe/3.2/input-image-alt) +- [axe-core, area-alt](https://dequeuniversity.com/rules/axe/3.2/area-alt) diff --git a/docs/rules/anchor-has-content.md b/docs/rules/anchor-has-content.md index 8a6a1cf2d..cbb6e9c62 100644 --- a/docs/rules/anchor-has-content.md +++ b/docs/rules/anchor-has-content.md @@ -2,9 +2,6 @@ Enforce that anchors have content and that the content is accessible to screen readers. Accessible means that it is not hidden using the `aria-hidden` prop. Refer to the references to learn about why this is important. -#### References -1. [axe-core, link-name](https://dequeuniversity.com/rules/axe/3.2/link-name) - ## Rule details This rule takes one optional object argument of type object: @@ -51,3 +48,9 @@ return ( ``` +## Accessibility guidelines +- [WCAG 2.4.4](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context) +- [WCAG 4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) + +### Resources +- [axe-core, link-name](https://dequeuniversity.com/rules/axe/3.2/link-name) diff --git a/docs/rules/anchor-is-valid.md b/docs/rules/anchor-is-valid.md index afbfb15bd..de5c1f4f7 100644 --- a/docs/rules/anchor-is-valid.md +++ b/docs/rules/anchor-is-valid.md @@ -128,12 +128,6 @@ This button element can now also be used inline in text. Once again we stress that this is an inferior implementation and some users will encounter difficulty to use your website, however, it will allow a larger group of people to interact with your website than the alternative of ignoring the rule's warning. - -### References - 1. [WebAIM - Introduction to Links and Hypertext](http://webaim.org/techniques/hypertext/) - 1. [Links vs. Buttons in Modern Web Applications](https://marcysutton.com/links-vs-buttons-in-modern-web-applications/) - 1. [Using ARIA - Notes on ARIA use in HTML](https://www.w3.org/TR/using-aria/#NOTES) - ## Rule details This rule takes one optional object argument of type object: @@ -221,4 +215,12 @@ Invalid `href` attribute: -``` \ No newline at end of file +``` + +## Accessibility guidelines +- [WCAG 2.1.1](https://www.w3.org/WAI/WCAG21/Understanding/keyboard) + +### Resources +- [WebAIM - Introduction to Links and Hypertext](http://webaim.org/techniques/hypertext/) +- [Links vs. Buttons in Modern Web Applications](https://marcysutton.com/links-vs-buttons-in-modern-web-applications/) +- [Using ARIA - Notes on ARIA use in HTML](https://www.w3.org/TR/using-aria/#NOTES) diff --git a/docs/rules/aria-activedescendant-has-tabindex.md b/docs/rules/aria-activedescendant-has-tabindex.md index 688e9e03f..d3499335d 100644 --- a/docs/rules/aria-activedescendant-has-tabindex.md +++ b/docs/rules/aria-activedescendant-has-tabindex.md @@ -14,9 +14,6 @@ Because an element with `aria-activedescendant` must be tabbable, it must either have an inherent `tabIndex` of zero or declare a `tabIndex` of zero with the `tabIndex` attribute. -#### References -1. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute) - ## Rule details This rule takes no arguments. @@ -44,3 +41,9 @@ This rule takes no arguments.
``` + +## Accessibility guidelines +General best practice (reference resources) + +### Resources +- [MDN, Using the aria-activedescendant attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute) diff --git a/docs/rules/aria-props.md b/docs/rules/aria-props.md index 36cb32589..cde013322 100644 --- a/docs/rules/aria-props.md +++ b/docs/rules/aria-props.md @@ -20,3 +20,6 @@ This rule takes no arguments.
Enter your address
``` + +## Accessibility guidelines +- [WCAG 4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) diff --git a/docs/rules/aria-proptypes.md b/docs/rules/aria-proptypes.md index 8d53cd07b..ca98a5a54 100644 --- a/docs/rules/aria-proptypes.md +++ b/docs/rules/aria-proptypes.md @@ -2,10 +2,6 @@ ARIA state and property values must be valid. -#### References -1. [Spec](https://www.w3.org/TR/wai-aria/#states_and_properties) -2. [AX_ARIA_04](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_04) - ## Rule details This rule takes no arguments. @@ -22,3 +18,9 @@ This rule takes no arguments. foo ``` +## Accessibility guidelines +- [WCAG 4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) + +### Resources +- [ARIA Spec, States and Properties](https://www.w3.org/TR/wai-aria/#states_and_properties) +- [Chrome Audit Rules, AX_ARIA_04](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_04) diff --git a/docs/rules/aria-role.md b/docs/rules/aria-role.md index fe5f7f188..122c08a4d 100644 --- a/docs/rules/aria-role.md +++ b/docs/rules/aria-role.md @@ -2,9 +2,6 @@ Elements with ARIA roles must use a valid, non-abstract ARIA role. A reference to role definitions can be found at [WAI-ARIA](https://www.w3.org/TR/wai-aria/#role_definitions) site. -[AX_ARIA_01](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_01) -[DPUB-ARIA roles](https://www.w3.org/TR/dpub-aria-1.0/) - ## Rule details This rule takes one optional object argument of type object: @@ -37,3 +34,10 @@ For the `ignoreNonDOM` option, this determines if developer created components a
``` + +## Accessibility guidelines +- [WCAG 4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) + +### Resources +- [Chrome Audit Rules, AX_ARIA_01](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_01) +- [DPUB-ARIA roles](https://www.w3.org/TR/dpub-aria-1.0/) diff --git a/docs/rules/aria-unsupported-elements.md b/docs/rules/aria-unsupported-elements.md index 452c3d48c..8f13ad852 100644 --- a/docs/rules/aria-unsupported-elements.md +++ b/docs/rules/aria-unsupported-elements.md @@ -2,9 +2,6 @@ Certain reserved DOM elements do not support ARIA roles, states and properties. This is often because they are not visible, for example `meta`, `html`, `script`, `style`. This rule enforces that these DOM elements do not contain the `role` and/or `aria-*` props. -#### References -1. [AX_ARIA_12](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_12) - ## Rule details This rule takes no arguments. @@ -21,3 +18,9 @@ This rule takes no arguments. ``` +## Accessibility guidelines +- [WCAG 4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) + +### Resources +- [Chrome Audit Rules, AX_ARIA_12](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_12) +- [DPUB-ARIA roles](https://www.w3.org/TR/dpub-aria-1.0/) diff --git a/docs/rules/autocomplete-valid.md b/docs/rules/autocomplete-valid.md index 35f261911..19c38d9d1 100644 --- a/docs/rules/autocomplete-valid.md +++ b/docs/rules/autocomplete-valid.md @@ -2,10 +2,6 @@ Ensure the autocomplete attribute is correct and suitable for the form field it is used with. -#### References -1. [axe-core, autocomplete-valid](https://dequeuniversity.com/rules/axe/3.2/autocomplete-valid) -2. [HTML 5.2, Autocomplete requirements](https://www.w3.org/TR/html52/sec-forms.html#autofilling-form-controls-the-autocomplete-attribute) - ## Rule details This rule takes one optional object argument of type object: @@ -39,4 +35,11 @@ This rule takes one optional object argument of type object: -``` \ No newline at end of file +``` + +## Accessibility guidelines +- [WCAG 1.3.5](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose) + +### Resources +- [axe-core, autocomplete-valid](https://dequeuniversity.com/rules/axe/3.2/autocomplete-valid) +- [HTML 5.2, Autocomplete requirements](https://www.w3.org/TR/html52/sec-forms.html#autofilling-form-controls-the-autocomplete-attribute) diff --git a/docs/rules/click-events-have-key-events.md b/docs/rules/click-events-have-key-events.md index d89869b14..d60e6ae03 100644 --- a/docs/rules/click-events-have-key-events.md +++ b/docs/rules/click-events-have-key-events.md @@ -1,6 +1,6 @@ # click-events-have-key-events -Enforce `onClick` is accompanied by at least one of the following: `onKeyUp`, `onKeyDown`, `onKeyPress`. Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screenreader users. +Enforce `onClick` is accompanied by at least one of the following: `onKeyUp`, `onKeyDown`, `onKeyPress`. Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screenreader users. This does not apply for interactive or hidden elements. ## Rule details @@ -11,9 +11,14 @@ This rule takes no arguments.
{}} onKeyDown={this.handleKeyDown} />
{}} onKeyUp={this.handleKeyUp} />
{}} onKeyPress={this.handleKeyPress} /> +