diff --git a/_rules/image-accessible-name-descriptive-qt1vmo.md b/_rules/image-accessible-name-descriptive-qt1vmo.md new file mode 100755 index 0000000000..62107ddab5 --- /dev/null +++ b/_rules/image-accessible-name-descriptive-qt1vmo.md @@ -0,0 +1,295 @@ +--- +id: qt1vmo +name: Image accessible name is descriptive +rule_type: atomic +description: | + This rule checks that the accessible names of images serves an equivalent purpose to the image. +accessibility_requirements: + wcag20:1.1.1: # Non-Text Content (A) + forConformance: true + failed: not satisfied + passed: further testing needed + inapplicable: further testing needed + wcag-technique:G94: # Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content + forConformance: false + failed: not satisfied + passed: further testing needed + inapplicable: further testing needed + wcag-technique:G95: # Providing short text alternatives that provide a brief description of the non-text content + forConformance: false + failed: not satisfied + passed: further testing needed + inapplicable: further testing needed +input_aspects: + - Accessibility Tree + - DOM Tree + - CSS Styling + - Language +acknowledgments: + authors: + - Wilco Fiers + assets: + - W3C; HTML and W3C logo + - Wikimedia; Fireworks image + - Adobe; PDF logo +htmlHintIgnore: + # https://www.npmjs.com/package/htmlhint + # (used with `npm test` to ensure validity of code snippets) + - 'alt-require' + - 'attr-lowercase' +--- + +## Applicability + +Any `img`, `canvas` or `svg` element that is [visible][] and has a non-empty [accessible name][], except if one of the following is true: + +- The element has an [ancestor][] in the [flat tree][] that is [named from author][]; or +- The element is an `img` element where the [current request][]'s [state][image request state] is not [completely available][]. + +## Expectation + +Each test target has an [accessible name][] that serves an equivalent purpose to the [non-text content][] of that test target. + +## Assumptions + +This rule assumes that the language of the [accessible name][] of each test target can be correctly determined (either programmatically or by analyzing the content). + +## Accessibility Support + +_There are no major accessibility support issues known for this rule._ + +## Background + +- [Understanding Success Criterion 1.1.1: Non-text Content](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html) +- [G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G94) +- [G95: Providing short text alternatives that provide a brief description of the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G95) +- [F30: Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not alternatives (e.g., filenames or placeholder text)](https://www.w3.org/WAI/WCAG21/Techniques/failures/F30) + +## Test Cases + +### Passed + +#### Passed Example 1 + +This `img` element has an `alt` attribute that describes the image. + +```html + + W3C + +``` + +#### Passed Example 2 + +This `svg` element has an `aria-label` attribute that describes the image. + +```html + + + + + + + + + +``` + +#### Passed Example 3 + +This `canvas` element has an `aria-label` attribute that describes the image. + +```html + + + + +``` + +### Failed + +#### Failed Example 1 + +This `img` element has an `alt` attribute that incorrectly describes the image. + +```html + + ERCIM + +``` + +#### Failed Example 2 + +This `svg` element has an `aria-label` attribute that incorrectly describes the image. + +```html + + + + + + + + + +``` + +#### Failed Example 3 + +This `canvas` element has an `aria-label` attribute that incorrectly describes the image. + +```html + + + + +``` + +### Inapplicable + +#### Inapplicable Example 1 + +This `img` element has an empty (`""`) [accessible name][]. The image is described by the adjacent text. + +```html + PDF document +``` + +#### Inapplicable Example 2 + +This decorative `img` element has an empty (`""`) [accessible name][] because it has no attributes or content to provide an accessible name. + +```html + + + +``` + +#### Inapplicable Example 3 + +This `svg` element has an empty (`""`) [accessible name][] because it has no attributes or content to provide an accessible name. + +```html + +

Happy new year!

+ + + + +``` + +#### Inapplicable Example 4 + +This `canvas` element has an empty (`""`) [accessible name][] because it has no attributes or content to provide an accessible name. + +```html + +

Happy new year!

+ + + +``` + +#### Inapplicable Example 5 + +This `img` element is not [visible][]. + +```html + + W3C + +``` + +#### Inapplicable Example 6 + +This `canvas` element is not [visible][] because it is completely transparent. + +```html + + + +``` + +#### Inapplicable Example 7 + +This `img` element has no [accessible name][] because it is not [included in the accessibility tree][]. + +```html + + + +``` + +#### Inapplicable Example 8 + +This `svg` element is ignored because it is a child of a link that provides its [accessible name][]. + +```html + + + + + +``` + +#### Inapplicable Example 9 + +This `img` element has a `src` attribute which will cause the [image request state][] to be [Broken](https://html.spec.whatwg.org/#img-error). + +```html + +``` + +#### Inapplicable Example 10 + +This is a `div` element with a background image. Background images must be tested separate from this rule. + +```html +

Happy new year!

+
+``` + +[accessible name]: #accessible-name 'Definition of accessible name' +[visible]: #visible 'Definition of visible' +[included in the accessibility tree]: #included-in-the-accessibility-tree 'Definition of included in the accessibility tree' +[non-text content]: https://www.w3.org/TR/WCAG21/#dfn-non-text-content 'WCAG 2.1 definition of non-text content' +[completely available]: https://html.spec.whatwg.org/#img-all 'HTML definition of Completely available, 2020/03/06' +[current request]: https://html.spec.whatwg.org/#current-request 'HTML definition of Current request, 2020/03/06' +[image request state]: https://html.spec.whatwg.org/#img-req-state 'HTML definition of Image request state, 2020/03/06' +[named from author]: https://www.w3.org/TR/wai-aria-1.1/#namecalculation 'WAI-ARIA definition of Named from author' +[flat tree]: https://drafts.csswg.org/css-scoping/#flat-tree 'CSS Scoping definition of Flat tree, working draft' +[ancestor]: https://dom.spec.whatwg.org/#concept-tree-ancestor 'DOM definition of ancestor, 2020/03/06'