From fdd65cdfe64c94bbdf1081d5f49c8264e091ded9 Mon Sep 17 00:00:00 2001
From: Mark Rogers <mark.rogers@powermapper.com>
Date: Tue, 3 Mar 2020 10:29:37 +0000
Subject: [PATCH 01/10] tests: deleted Passed Example 8 because alt=":-)" is
 non-text content and fails 1.1.1

---
 _rules/image-accessible-name-23a2a8.md | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/_rules/image-accessible-name-23a2a8.md b/_rules/image-accessible-name-23a2a8.md
index 0bd3d7f6dd..15ba777b2a 100755
--- a/_rules/image-accessible-name-23a2a8.md
+++ b/_rules/image-accessible-name-23a2a8.md
@@ -124,13 +124,6 @@ The HTML `img` element is [marked as decorative][] through `role="none"`.
 <img role="none" />
 ```
 
-#### Passed Example 8
-
-The HTML `img` element has an [accessible name][] that is not empty.
-
-```html
-<img alt=":-)" />
-```
 
 ### Failed
 

From 7c245631d23f8ca1fe91d283af9fb1dbf9dcdedc Mon Sep 17 00:00:00 2001
From: Mark Rogers <mark.rogers@powermapper.com>
Date: Thu, 5 Mar 2020 11:25:24 +0000
Subject: [PATCH 02/10] fix: restrict applicability to elements that display an
 image (to make <img/> inapplicable)

---
 _rules/image-accessible-name-23a2a8.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_rules/image-accessible-name-23a2a8.md b/_rules/image-accessible-name-23a2a8.md
index 15ba777b2a..734b0b5570 100755
--- a/_rules/image-accessible-name-23a2a8.md
+++ b/_rules/image-accessible-name-23a2a8.md
@@ -35,7 +35,7 @@ htmlHintIgnore:
 
 ## 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][].
+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
 

From f9fa89912666529b3af98ea86810c327bddc596f Mon Sep 17 00:00:00 2001
From: Mark Rogers <mark.rogers@powermapper.com>
Date: Thu, 5 Mar 2020 11:28:47 +0000
Subject: [PATCH 03/10] tests: added image src or background-image to make sure
 pass/fail examples display an image

---
 _rules/image-accessible-name-23a2a8.md | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/_rules/image-accessible-name-23a2a8.md b/_rules/image-accessible-name-23a2a8.md
index 734b0b5570..2a1f459059 100755
--- a/_rules/image-accessible-name-23a2a8.md
+++ b/_rules/image-accessible-name-23a2a8.md
@@ -72,7 +72,7 @@ _There are currently no assumptions._
 The HTML `img` element has an [accessible name][] given by the `alt` attribute.
 
 ```html
-<img alt="W3C logo" />
+<img alt="W3C logo" src="/test-assets/shared/w3c-logo.png" />
 ```
 
 #### Passed Example 2
@@ -80,7 +80,7 @@ The HTML `img` element has an [accessible name][] given by the `alt` attribute.
 The element with a [semantic role][] of `img` has an [accessible name][] given by the `aria-label` attribute.
 
 ```html
-<div role="img" aria-label="W3C logo"></div>
+<div role="img" aria-label="W3C logo" style="width:72px; height:48px; background-image: url(/test-assets/shared/w3c-logo.png)" ></div>
 ```
 
 #### Passed Example 3
@@ -89,7 +89,7 @@ The element with a [semantic role][] of `img` has an [accessible name][] given b
 
 ```html
 <div style="display: none" id="img-label">W3C logo</div>
-<div role="img" aria-labelledby="img-label"></div>
+<div role="img" aria-labelledby="img-label" style="width:72px; height:48px; background-image: url(/test-assets/shared/w3c-logo.png)" ></div>
 ```
 
 #### Passed Example 4
@@ -97,7 +97,7 @@ The element with a [semantic role][] of `img` has an [accessible name][] given b
 The HTML `img` element has an [accessible name][] given by a `title` attribute, though the `title` attribute is not always accessibility supported.
 
 ```html
-<img title="W3C logo" />
+<img title="W3C logo" src="/test-assets/shared/w3c-logo.png" />
 ```
 
 #### Passed Example 5
@@ -105,7 +105,7 @@ The HTML `img` element has an [accessible name][] given by a `title` attribute,
 The HTML `img` element is [marked as decorative][] through an empty `alt` attribute.
 
 ```html
-<img alt="" />
+<img alt="" src="https://www.w3.org/WAI/tutorials/img/topinfo_bg-42052e6c.png" />
 ```
 
 #### Passed Example 6
@@ -113,7 +113,7 @@ The HTML `img` element is [marked as decorative][] through an empty `alt` attrib
 The HTML `img` element is [marked as decorative][] through `role="presentation"`.
 
 ```html
-<img role="presentation" />
+<img role="presentation" style="width:72px; height:48px; background-image: url(https://www.w3.org/WAI/tutorials/img/topinfo_bg-42052e6c.png)" />
 ```
 
 #### Passed Example 7
@@ -121,7 +121,7 @@ The HTML `img` element is [marked as decorative][] through `role="presentation"`
 The HTML `img` element is [marked as decorative][] through `role="none"`.
 
 ```html
-<img role="none" />
+<img role="none" src="https://www.w3.org/WAI/tutorials/img/topinfo_bg-42052e6c.png" />
 ```
 
 
@@ -132,7 +132,7 @@ The HTML `img` element is [marked as decorative][] through `role="none"`.
 The HTML `img` element is not [marked as decorative][] and has an empty [accessible name][].
 
 ```html
-<img />
+<img src="/test-assets/shared/w3c-logo.png" />
 ```
 
 #### Failed Example 2
@@ -140,7 +140,7 @@ The HTML `img` element is not [marked as decorative][] and has an empty [accessi
 The element with role of `img` has an empty [accessible name][].
 
 ```html
-<div role="img"></div>
+<div role="img" style="width:72px; height:48px; background-image: url(/test-assets/shared/w3c-logo.png)"></div>
 ```
 
 #### Failed Example 3
@@ -148,15 +148,15 @@ The element with role of `img` has an empty [accessible name][].
 The `img` element inside a `div` positioned off screen has an empty [accessible name][] and is not [marked as decorative][].
 
 ```html
-<div style="margin-left:-9999px;"><img /></div>
+<div style="margin-left:-9999px;"><img src="/test-assets/shared/w3c-logo.png" /></div>
 ```
 
 #### Failed Example 4
 
-The HTML `img` element has an empty [accessible name][].
+The HTML `img` element displays a `src` image and has an empty [accessible name][].
 
 ```html
-<img alt=" " />
+<img src="/test-assets/shared/w3c-logo.png" alt=" " />
 ```
 
 ### Inapplicable
@@ -184,7 +184,7 @@ The element has a [semantic role][] of `img`, but is not [included in the access
 HTML `img` element is not [included in the accessibility tree][].
 
 ```html
-<img alt="W3C logo" aria-hidden="true" />
+<img src="/test-assets/shared/w3c-logo.png" aria-hidden="true" />
 ```
 
 #### Inapplicable Example 4

From 7a0a8b70fe2c92b5470df5be07752ef67251807d Mon Sep 17 00:00:00 2001
From: Mark Rogers <mark.rogers@powermapper.com>
Date: Thu, 5 Mar 2020 11:29:26 +0000
Subject: [PATCH 04/10] tests: added more failed examples

---
 _rules/image-accessible-name-23a2a8.md | 27 ++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/_rules/image-accessible-name-23a2a8.md b/_rules/image-accessible-name-23a2a8.md
index 2a1f459059..d5eeb32fc1 100755
--- a/_rules/image-accessible-name-23a2a8.md
+++ b/_rules/image-accessible-name-23a2a8.md
@@ -159,6 +159,33 @@ The HTML `img` element displays a `src` image and has an empty [accessible name]
 <img src="/test-assets/shared/w3c-logo.png" alt=" " />
 ```
 
+#### Failed Example 5
+
+HTML `img` element displays a CSS `background-image` and has an empty [accessible name][].
+
+```html
+<img style="width:72px; height:48px; background-image: url(/test-assets/shared/w3c-logo.png)" />
+```
+
+#### Failed Example 6
+
+HTML `img` element displays a `srcset` image and has an empty [accessible name][].
+
+```html
+<img srcset="/test-assets/shared/w3c-logo.png" />
+```
+
+#### Failed Example 7
+
+HTML `img` element displays a `source` image and has an empty [accessible name][].
+
+```html
+<picture>
+    <source srcset="/test-assets/shared/w3c-logo.png" />
+    <img/>
+</picture>
+```
+
 ### Inapplicable
 
 #### Inapplicable Example 1

From b94c3b174907d7c51f6a297bc06110e17ace5796 Mon Sep 17 00:00:00 2001
From: Mark Rogers <mark.rogers@powermapper.com>
Date: Thu, 5 Mar 2020 11:30:12 +0000
Subject: [PATCH 05/10] tests: added <img/> as an inapplicable example (because
 it doesn't display an image and has no visual rendering)

---
 _rules/image-accessible-name-23a2a8.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/_rules/image-accessible-name-23a2a8.md b/_rules/image-accessible-name-23a2a8.md
index d5eeb32fc1..e3a57d9552 100755
--- a/_rules/image-accessible-name-23a2a8.md
+++ b/_rules/image-accessible-name-23a2a8.md
@@ -222,6 +222,14 @@ The element is not an `img` element.
 <div aria-label="W3C logo"></div>
 ```
 
+#### Inapplicable Example 5
+
+HTML `img` element has no `src` attribute so displays no image.
+
+```html
+<img />
+```
+
 [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'

From 02d20c22a75e1f3c581ed0eb946f800662de29ae Mon Sep 17 00:00:00 2001
From: Mark Rogers <mark.rogers@powermapper.com>
Date: Thu, 5 Mar 2020 11:31:15 +0000
Subject: [PATCH 06/10] fix: Inapplicable Example 1 is for elements without
 semantic role of img, but had role=img

---
 _rules/image-accessible-name-23a2a8.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_rules/image-accessible-name-23a2a8.md b/_rules/image-accessible-name-23a2a8.md
index e3a57d9552..eab107d881 100755
--- a/_rules/image-accessible-name-23a2a8.md
+++ b/_rules/image-accessible-name-23a2a8.md
@@ -193,7 +193,7 @@ HTML `img` element displays a `source` image and has an empty [accessible name][
 The element does not have the [semantic role][] of `img`.
 
 ```html
-<svg xmlns="http://www.w3.org/2000/svg" role="img" width="100" height="100">
+<svg xmlns="http://www.w3.org/2000/svg" role="figure" width="100" height="100">
 	<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
 </svg>
 ```

From faf37840a7e044beeefca1e5abce010f36663c8b Mon Sep 17 00:00:00 2001
From: Mark Rogers <mark.rogers@powermapper.com>
Date: Thu, 5 Mar 2020 12:00:50 +0000
Subject: [PATCH 07/10] chore: add srcset to spelling-ignore

---
 __tests__/spelling-ignore.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/__tests__/spelling-ignore.yml b/__tests__/spelling-ignore.yml
index 70a8166226..7f813c5528 100755
--- a/__tests__/spelling-ignore.yml
+++ b/__tests__/spelling-ignore.yml
@@ -109,6 +109,7 @@
 - matrix3d
 - rowheader
 - columnheader
+- srcset
 
 # Unsure why the dictionary does not have these words
 - programmatically

From 4922b1e9a0244c412049009ee35411d89a292f86 Mon Sep 17 00:00:00 2001
From: Mark Rogers <mark.rogers@powermapper.com>
Date: Wed, 8 Jul 2020 15:25:53 +0100
Subject: [PATCH 08/10] fix(rules): change applicability to include only
 elements that render an image (i.e. have non-text content)

---
 _rules/image-non-empty-accessible-name-23a2a8.md | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/_rules/image-non-empty-accessible-name-23a2a8.md b/_rules/image-non-empty-accessible-name-23a2a8.md
index 95790c9c92..67cd9f9bd9 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
 
@@ -235,3 +240,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'
+

From 6fc0fd562d8d379c2e07a95b3020076174175d4d Mon Sep 17 00:00:00 2001
From: Mark Rogers <mark.rogers@powermapper.com>
Date: Wed, 8 Jul 2020 15:26:50 +0100
Subject: [PATCH 09/10] tests(rules): added test cases for img with no src and
 img with srcset

---
 .../image-non-empty-accessible-name-23a2a8.md | 65 +++++++++++++++++++
 1 file changed, 65 insertions(+)

diff --git a/_rules/image-non-empty-accessible-name-23a2a8.md b/_rules/image-non-empty-accessible-name-23a2a8.md
index 67cd9f9bd9..d1309c44a5 100755
--- a/_rules/image-non-empty-accessible-name-23a2a8.md
+++ b/_rules/image-non-empty-accessible-name-23a2a8.md
@@ -151,6 +151,33 @@ This `img` element inside a `div` positioned off screen has an [implicit role][]
 </div>
 ```
 
+#### Passed Example 9
+
+This `img` element displays a CSS `background-image` and has an [accessible name][] because of the `alt` attribute.
+
+```html
+<img alt="W3C logo" style="width:72px; height:48px; background-image: url(/test-assets/shared/w3c-logo.png)" />
+```
+
+#### Passed Example 10
+
+This `img` element displays a `srcset` and has an [accessible name][] because of the `alt` attribute.
+
+```html
+<img alt="W3C logo" srcset="/test-assets/shared/w3c-logo.png" />
+```
+
+#### Passed Example 11
+
+This `picture` element displays a `srcset` and has an [accessible name][] because of the `alt` attribute.
+
+```html
+<picture>
+    <source srcset="/test-assets/shared/w3c-logo.png" />
+    <img alt="W3C logo" width="72" height="48" />
+</picture>
+```
+
 ### Failed
 
 #### Failed Example 1
@@ -193,6 +220,36 @@ This `img` element has an [explicit role][] of `none`. However, it is [focusable
 <img role="none" tabindex="0" src="/test-assets/shared/w3c-logo.png" />
 ```
 
+#### 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
+<img style="width:72px; height:48px; background-image: url(/test-assets/shared/w3c-logo.png)" />
+```
+
+#### 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
+<img srcset="/test-assets/shared/w3c-logo.png" />
+```
+
+#### 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
+<picture>
+    <source srcset="/test-assets/shared/w3c-logo.png" />
+    <img width="72" height="48" />
+</picture>
+```
+
 ### Inapplicable
 
 #### Inapplicable Example 1
@@ -233,6 +290,14 @@ This element is neither an `img` element nor has a role of `img`.
 <div aria-label="W3C logo"></div>
 ```
 
+#### Inapplicable Example 5
+
+This `img` element has no `src` attribute so displays no image.
+
+```html
+<img />
+```
+
 [accessible name]: #accessible-name 'Definition of accessible name'
 [explicit role]: #explicit-role 'Definition of explicit role'
 [focusable]: #focusable 'Definition of focusable'

From 63701bfee0e55aa968c07e332484b9e45a98e453 Mon Sep 17 00:00:00 2001
From: Mark Rogers <mark.rogers@powermapper.com>
Date: Wed, 8 Jul 2020 15:49:24 +0100
Subject: [PATCH 10/10] tests(rules): make test description match applicability
 terminology

---
 _rules/image-non-empty-accessible-name-23a2a8.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_rules/image-non-empty-accessible-name-23a2a8.md b/_rules/image-non-empty-accessible-name-23a2a8.md
index d1309c44a5..ce140a2936 100755
--- a/_rules/image-non-empty-accessible-name-23a2a8.md
+++ b/_rules/image-non-empty-accessible-name-23a2a8.md
@@ -292,7 +292,7 @@ This element is neither an `img` element nor has a role of `img`.
 
 #### Inapplicable Example 5
 
-This `img` element has no `src` attribute so displays no image.
+This `img` element has no `src` attribute so does not render an image.
 
 ```html
 <img />