SC1-1-1-placeholder-text-is-valid-accessible-name

_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
+<img alt="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
+<img src="https://www.w3.org/WAI/demos/bad/after/img/teaser_right2.jpg" alt="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
+<img src="https://www.w3.org/WAI/demos/bad/after/img/teaser_right2.jpg" alt="image">
+```
+
+### Inapplicable
+
+#### Inapplicable example 1
+
+The image is marked decorative with `alt=""`.
+
+```html
+<img src="/background.png" alt="">
+```
+
+#### Inapplicable example 2
+
+The image is marked decorative with `role="presentation"`.
+
+```html
+<img src="/background.png" role="presentation">
+```
+
+#### 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
+<img src="https://www.w3.org/WAI/demos/bad/after/img/teaser_right2.jpg" alt="image" aria-label="modanna lily">
+```

_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.
 <svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
 </svg>
-```
+```

pages/algorithms/decorative.md

@@ -3,4 +3,4 @@ title: Decorative
 key: decorative
 ---
 
-Serving only an aesthetic purpose, providing no information, and having no functionality.
+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=""`.