diff --git a/_rules/image-accessible-name-23a2a8.md b/_rules/image-accessible-name-23a2a8.md new file mode 100755 index 0000000000..ccaf9fc98f --- /dev/null +++ b/_rules/image-accessible-name-23a2a8.md @@ -0,0 +1,237 @@ +--- +id: 23a2a8 +name: Image has accessible name +rule_type: atomic +description: | + This rule checks that each image either has an accessible name or is marked up as decorative +accessibility_requirements: + wcag20:1.1.1: # Non-Text Content + 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: + - DOM Tree + - CSS Styling +acknowledgments: + authors: + - Anne Thyme Nørregaard + - Stein Erik Skotkjerra +htmlHintIgnore: + # https://www.npmjs.com/package/htmlhint + # (used with `npm test` to ensure validity of code snippets) + - 'alt-require' +--- + +## Applicability + +The rule applies to HTML `img` elements or any HTML element with the [semantic role][] of `img` that is [included in the accessibility tree][] and displays an image. + +## Expectation + +Each target element has an [accessible name][] that is not empty (`""`), or is [marked as decorative][]. + +**Note:** Testing that the [accessible name][] describes the purpose of the element is not part of this rule and must be tested separately. + +## Assumptions + +_There are currently no assumptions._ + +## Accessibility Support + +- There is a known combination of a popular browser and assistive technology that does not by default support `title` as an [accessible name][]. +- There are several popular browsers that do not treat images with empty `alt` attribute as having a role of `presentation` but instead add the `img` element to the accessibility tree with a [semantic role][] of either `img` or `graphic`. + +## Background + +- [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) +- [H37: Using alt attributes on img elements](https://www.w3.org/WAI/WCAG21/Techniques/html/H37) +- [ARIA6: Using aria-label to provide labels for objects](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA6) +- [ARIA10: Using aria-labelledby to provide a text alternative for non-text content](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA10) +- [H67: Using null alt text and no title attribute on img elements for images that AT should ignore](https://www.w3.org/WAI/WCAG21/Techniques/html/H67) +- [F38: Failure of Success Criterion 1.1.1 due to not marking up decorative images in HTML in a way that allows assistive technology to ignore them](https://www.w3.org/WAI/WCAG21/Techniques/failures/F38) +- [F65: Failure of Success Criterion 1.1.1 due to omitting the alt attribute or text alternative on img elements, area elements, and input elements of type "image"](https://www.w3.org/WAI/WCAG21/Techniques/failures/F65) + +## Test Cases + +### Passed + +#### Passed Example 1 + +The HTML `img` element has an [accessible name][] given by the `alt` attribute. + +```html +W3C logo +``` + +#### Passed Example 2 + +The element with a [semantic role][] of `img` has an [accessible name][] given by the `aria-label` attribute. + +```html +
+``` + +#### Passed Example 3 + +The element with a [semantic role][] of `img` has an [accessible name][] given by an `aria-labelledby` attribute and an element with matching `id`. + +```html + +
+``` + +#### Passed Example 4 + +The HTML `img` element has an [accessible name][] given by a `title` attribute, though the `title` attribute is not always accessibility supported. + +```html + +``` + +#### Passed Example 5 + +The HTML `img` element is [marked as decorative][] through an empty `alt` attribute. + +```html + +``` + +#### Passed Example 6 + +The HTML `img` element is [marked as decorative][] through `role="presentation"`. + +```html + +``` + +#### Passed Example 7 + +The HTML `img` element is [marked as decorative][] through `role="none"`. + +```html + +``` + + +### Failed + +#### Failed Example 1 + +The HTML `img` element is not [marked as decorative][] and has an empty [accessible name][]. + +```html + +``` + +#### Failed Example 2 + +The element with role of `img` has an empty [accessible name][]. + +```html +
+``` + +#### Failed Example 3 + +The `img` element inside a `div` positioned off screen has an empty [accessible name][] and is not [marked as decorative][]. + +```html +
+``` + +#### Failed Example 4 + +The HTML `img` element displays a `src` image and has an empty [accessible name][]. + +```html + +``` + +#### Failed Example 5 + +HTML `img` element displays a CSS `background-image` and has an empty [accessible name][]. + +```html + +``` + +#### Failed Example 6 + +HTML `img` element displays a `srcset` image and has an empty [accessible name][]. + +```html + +``` + +#### Failed Example 7 + +HTML `img` element displays a `source` image and has an empty [accessible name][]. + +```html + + + + +``` + +### Inapplicable + +#### Inapplicable Example 1 + +The element does not have the [semantic role][] of `img`. + +```html + + + +``` + +#### Inapplicable Example 2 + +The element has a [semantic role][] of `img`, but is not [included in the accessibility tree][]. + +```html + +``` + +#### Inapplicable Example 3 + +HTML `img` element is not [included in the accessibility tree][]. + +```html + +``` + +#### Inapplicable Example 4 + +The element is not an `img` element. + +```html +
+``` + +#### Inapplicable Example 5 + +HTML `img` element has no `src` attribute so displays no image. + +```html + +``` + +[accessible name]: #accessible-name 'Definition of accessible name' +[marked as decorative]: #marked-as-decorative 'Definition of marked as decorative' +[included in the accessibility tree]: #included-in-the-accessibility-tree 'Definition of included in the accessibility tree' +[semantic role]: #semantic-role 'Definition of semantic role' +[whitespace]: #whitespace 'Definition of whitespace' diff --git a/_rules/image-non-empty-accessible-name-23a2a8.md b/_rules/image-non-empty-accessible-name-23a2a8.md index 95790c9c92..ce140a2936 100755 --- a/_rules/image-non-empty-accessible-name-23a2a8.md +++ b/_rules/image-non-empty-accessible-name-23a2a8.md @@ -36,7 +36,12 @@ htmlHintIgnore: ## Applicability -The rule applies to HTML `img` elements and HTML elements with the [semantic role][] of `img`, except for elements that are not [included in the accessibility tree][]. +The rule applies to HTML `img` elements and HTML elements with the [semantic role][] of `img` which render an image and are [included in the accessibility tree][]. + +HTML elements render an image if any of the following are true: + +- The element is an `img` element where the [current request][]'s [state][image request state] is [completely available][]. +- The element has a CSS `background-image` that does not [draw nothing](https://www.w3.org/TR/css-backgrounds-3/#the-background-image). ## Expectation @@ -146,6 +151,33 @@ This `img` element inside a `div` positioned off screen has an [implicit role][] ``` +#### Passed Example 9 + +This `img` element displays a CSS `background-image` and has an [accessible name][] because of the `alt` attribute. + +```html +W3C logo +``` + +#### Passed Example 10 + +This `img` element displays a `srcset` and has an [accessible name][] because of the `alt` attribute. + +```html +W3C logo +``` + +#### Passed Example 11 + +This `picture` element displays a `srcset` and has an [accessible name][] because of the `alt` attribute. + +```html + + + W3C logo + +``` + ### Failed #### Failed Example 1 @@ -188,6 +220,36 @@ This `img` element has an [explicit role][] of `none`. However, it is [focusable ``` +#### Failed Example 6 + +This `img` element displays a CSS `background-image`, has an empty [accessible name][] and an [implicit role][] of `img` because it is missing +an empty `alt` attribute. + +```html + +``` + +#### Failed Example 7 + +This `img` element displays a `srcset`, has an empty [accessible name][] and an [implicit role][] of `img` because it is missing +an empty `alt` attribute. + +```html + +``` + +#### Failed Example 8 + +This `picture` element displays a `srcset`, has an empty [accessible name][] and an [implicit role][] of `img` because it is missing +an empty `alt` attribute. + +```html + + + + +``` + ### Inapplicable #### Inapplicable Example 1 @@ -228,6 +290,14 @@ This element is neither an `img` element nor has a role of `img`.
``` +#### Inapplicable Example 5 + +This `img` element has no `src` attribute so does not render an image. + +```html + +``` + [accessible name]: #accessible-name 'Definition of accessible name' [explicit role]: #explicit-role 'Definition of explicit role' [focusable]: #focusable 'Definition of focusable' @@ -235,3 +305,7 @@ This element is neither an `img` element nor has a role of `img`. [included in the accessibility tree]: #included-in-the-accessibility-tree 'Definition of included in the accessibility tree' [presentational roles conflict resolution]: https://www.w3.org/TR/wai-aria-1.1/#conflict_resolution_presentation_none 'Presentational Roles Conflict Resolution' [semantic role]: #semantic-role 'Definition of semantic role' +[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' +[completely available]: https://html.spec.whatwg.org/#img-all 'HTML definition of Completely available, 2020/03/06' +