diff --git a/_rules/SC1-1-1-image-accessible-name-is-placeholder-text.md b/_rules/SC1-1-1-image-accessible-name-is-placeholder-text.md new file mode 100644 index 00000000000..4a947c3321b --- /dev/null +++ b/_rules/SC1-1-1-image-accessible-name-is-placeholder-text.md @@ -0,0 +1,92 @@ +--- +name: Placeholder text is valid accessible name +description: | + This rule checks that image elements that use generic placeholder text as their accessible name do so without loss of information to the user. + +success_criterion: +- 1.1.1 # Non-text Content + +test_aspects: +- DOM Tree +- CSS Styling + +authors: +- Bryn Anderson +--- + +### Applicability + +he rule applies to any HTML `input` element with a [`type`](https://www.w3.org/TR/html/sec-forms.html#dom-htmlinputelement-type) of `image`, or any HTML element with the [semantic role](#semantic-role) of `img`, that has an [accessible name](#accessible-name) that uses [generic placeholder text](#generic-placeholder-text). + +### Expectation + +Each test target has an accessible name that serves an equivalent purpose to the [non-text content](https://www.w3.org/TR/WCAG21/#dfn-non-text-content). + +## Assumptions + +*There are currently no assumptions.* + +## Accessibility support + +*There are no major accessibility support issues known for this rule.* + +## Background + +- [https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html) +- [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/TR/WCAG20-TECHS/F30.html) + +## Test Cases + +### Passed + +#### Passed example 1 + +The element's accessible name uses generic placeholder text which accurately describes the image. + +```html +spacer (need a source file) +``` + +### Failed + +#### Failed example 1 + +The element's accessible name uses generic placeholder text which does not accurately describes the image. + +```html +image +``` + +#### Failed example 2 + +The `input` element with a `type` of `image` has an accessible name that uses generic placeholder text which does not accurately describes the image. + +```html +image +``` + +### Inapplicable + +#### Inapplicable example 1 + +The image is marked decorative with `alt=""`. + +```html + +``` + +#### Inapplicable example 2 + +The image is marked decorative with `role="presentation"`. + +```html + +``` + +#### Inapplicable example 3 + +The image `alt` value uses generic placeholder but is overidden by the `aria-label` value which takes precedence in the accessible name calculation. + +```html +image +``` diff --git a/_rules/SC1-1-1-image-has-name.md b/_rules/SC1-1-1-image-has-name.md index 43bc27a2cbb..5d907768b2a 100644 --- a/_rules/SC1-1-1-image-has-name.md +++ b/_rules/SC1-1-1-image-has-name.md @@ -25,8 +25,6 @@ The rule applies to HTML `img` elements or any HTML element with the [semantic r Each target element has an [accessible name](#accessible-name) that is [non-empty](#non-empty) or is marked as [decorative](#decorative). -**NOTE**: An `img` element can be marked as decorative, by using either `role="presentation"`, `role="none"` or an empty alt attribute `alt=""`. - ## 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](#accessible-name). @@ -127,4 +125,4 @@ Non-image element. -``` \ No newline at end of file +``` diff --git a/pages/algorithms/decorative.md b/pages/algorithms/decorative.md index 1cde858c9f2..f9b863aa8b7 100644 --- a/pages/algorithms/decorative.md +++ b/pages/algorithms/decorative.md @@ -3,4 +3,4 @@ title: Decorative key: decorative --- -Serving only an aesthetic purpose, providing no information, and having no functionality. \ No newline at end of file +Serving only an aesthetic purpose, providing no information, and having no functionality. An `img` element can be marked as decorative, by using either `role="presentation"`, `role="none"` or an empty alt attribute `alt=""`.