diff --git a/_rules/SC1-1-1-accessible-name-is-image-filename.md b/_rules/SC1-1-1-accessible-name-is-image-filename.md new file mode 100644 index 00000000000..35c24687e3f --- /dev/null +++ b/_rules/SC1-1-1-accessible-name-is-image-filename.md @@ -0,0 +1,110 @@ +--- +name: Filename is valid accessible name +description: | + This rule checks that image elements that use their source filename 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 +--- + +## Test procedure + +### Applicability + +The 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 is [included in the accessibility tree](#included-in-the-accessibility-tree), and has an [accessible name](#accessible-name) that is equivalent to the [filename](#filename) specified in the `src` attribute. Difference in letter casing, and forward and trailing whitespace should be ignored. + +### 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 + +- [Understanding Success Criterion 1.1.1: Non-text Content](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html) +- [F30: 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/WAI/WCAG21/Techniques/failures/F30) + +## Test Cases + +### Passed + +#### Passed example 1 + +The `img` element's accessible name uses the filename which accurately describes the image. + +```html +w3c +``` + +#### Passed example 2 + +The `img` element's accessible name uses the filename, which in combination with the `a` element accurately describes the image. + +```html +Download w3c.png +``` + +### Failed + +#### Failed example 1 + +The `img` element's accessible name matches the image filename. However the presence of the file extension in the accessible name is redundant and results in the accessible name not accurately describing the image. + +```html +w3c.png +``` + +#### Failed example 2 + +The `input` element with a `type` of `image` has an accessible name that matches the filename. However the presence of the file extension in the accessible name is redundant and results in the accessible name not accurately describing the image. + +```html + +``` + +### Inapplicable + +#### Inapplicable example 1 + +The `img` element doesn't have the semantic role of image. + +```html + +``` + +#### Inapplicable example 2 + +The `img` element is not included in the accessibility tree. + +```html + +``` + +#### Inapplicable example 3 + +The `img` element's accessible name is not equivalent to the file name specified in the `src` attribute. + +```html +modanna lily +``` + +#### Inapplicable example 4 + +The `img` element's `alt` attribute matches the filename but is overridden by the `aria-label` value which takes precedence in the accessible name calculation. + +```html +teaser_right2.jpg +``` diff --git a/_rules/SC1-1-1-image-has-name.md b/_rules/SC1-1-1-image-has-name.md index 45cf148a518..2a2850c16f1 100644 --- a/_rules/SC1-1-1-image-has-name.md +++ b/_rules/SC1-1-1-image-has-name.md @@ -150,3 +150,13 @@ HTML `img` element is not [included in the accessibility tree](#included-in-the- ```html ``` + +#### Inapplicable example 4 + +Non-image element. + +```html + + + +``` diff --git a/pages/glossary/decorative.md b/pages/glossary/decorative.md index 1cde858c9f2..3909f19e6c3 100644 --- a/pages/glossary/decorative.md +++ b/pages/glossary/decorative.md @@ -3,4 +3,6 @@ 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. + +**Note:** Authors can mark an `img` element as decorative to indicate that it should be ignored by assistive technology by using either `role="presentation"`, `role="none"`, or `alt=""`. An element should only be marked as decorative if removing the element does not cause a loss of information to the user.