diff --git a/_rules/image-accessible-name-23a2a8.md b/_rules/image-accessible-name-23a2a8.md index df31f185fb..0428fe0090 100755 --- a/_rules/image-accessible-name-23a2a8.md +++ b/_rules/image-accessible-name-23a2a8.md @@ -73,142 +73,154 @@ _There are currently no assumptions._ #### Passed Example 1 -The HTML `img` element has an [accessible name][] given by the `alt` attribute. +This HTML `img` element has an [accessible name][] because of the `alt` attribute. ```html -W3C logo +W3C logo ``` #### Passed Example 2 -The element with a [semantic role][] of `img` has an [accessible name][] given by the `aria-label` attribute. +This element with a [semantic role][] of `img` has an [accessible name][] because of 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`. +This element with a [semantic role][] of `img` has an [accessible name][] because of 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. +This `img` element has an [accessible name][] because of a `title` attribute. + +**Note**: There are assistive technologies that do not support using the `title` attribute for an [accessible name][], or in which this feature can be disabled. ```html - + ``` #### Passed Example 5 -The HTML `img` element has a [semantic role][] of `presentation` through an empty `alt` attribute. +This `img` element has an [implicit role][] of `presentation` because of the empty `alt` attribute. ```html - + ``` #### Passed Example 6 -The HTML `img` element has a [semantic role][] of `presentation` through [explicit role][]. +This `img` element has an [explicit role][] of `presentation` because of the value of the `role` attribute. ```html - + ``` #### Passed Example 7 -The HTML `img` element has a [semantic role][] of `none` through [explicit role][]. +This `img` element has an [explicit role][] of `none` because of the value of the `role` attribute. ```html - + ``` #### Passed Example 8 -The HTML `img` element has an [accessible name][] that is not empty. +This `img` element inside a `div` positioned off screen has an [implicit role][] of `img` because of the empty `alt` attribute. ```html -:-) +
+ +
``` ### Failed #### Failed Example 1 -The HTML `img` element with [implicit role][] of `img` has an empty [accessible name][]. +This `img` element has an empty [accessible name][] and an [implicit role][] of `img` because it is missing an empty `alt` attribute. ```html - + ``` #### Failed Example 2 -The element with role of `img` has an empty [accessible name][]. +This 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 an [implicit role][] of `img`. +This `img` element inside a `div` positioned off screen has an empty [accessible name][] and an [implicit role][] of `img`. ```html -
+
``` #### Failed Example 4 -The HTML `img` element has an empty [accessible name][]. +This `img` element has an empty [accessible name][] because the space in the `alt` attribute is trimmed off by the [accessible name computation](https://www.w3.org/TR/accname-1.1/). Because of the space, the `alt` attribute is not empty (`""`) which gives the element the [implicit role][] of `img`. ```html - + ``` #### Failed Example 5 -This `img` element has an [explicit role][] of `none`. However, it is [focusable][] due to the `tabindex` attribute. Thus it has a [semantic role][] of `img` due to [Presentational Roles Conflict Resolution][]. It does not have an accessible name. +This `img` element has an [explicit role][] of `none`. However, it is [focusable][] due to the `tabindex` attribute. Because of this it has a [semantic role][] of `img` due to [Presentational Roles Conflict Resolution][]. It does not have an accessible name. ```html - + ``` ### Inapplicable #### Inapplicable Example 1 -The element does not have the [semantic role][] of `img`. +This `svg` element has an [implicit role][] of `graphics-document`. ```html - + ``` #### Inapplicable Example 2 -The element has a [semantic role][] of `img`, but is not [included in the accessibility tree][]. +This 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][]. +This `img` element is not [included in the accessibility tree][]. ```html - + ``` #### Inapplicable Example 4 -The element is not an `img` element. +This element is neither an `img` element nor has a role of `img`. ```html
diff --git a/test-assets/shared/background.png b/test-assets/shared/background.png new file mode 100644 index 0000000000..54332042da Binary files /dev/null and b/test-assets/shared/background.png differ