From a44519d85ca57e8c1c9702324bc2dbbed775ab33 Mon Sep 17 00:00:00 2001 From: Brynanders <37368581+Brynanders@users.noreply.github.com> Date: Tue, 11 Sep 2018 14:23:39 +0100 Subject: [PATCH 01/23] Create SC1-1-1-valid-duplicate-accessible-name Valid use of duplicate accessible names --- .../SC1-1-1-valid-duplicate-accessible-name | 78 +++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 _rules/SC1-1-1-valid-duplicate-accessible-name diff --git a/_rules/SC1-1-1-valid-duplicate-accessible-name b/_rules/SC1-1-1-valid-duplicate-accessible-name new file mode 100644 index 00000000000..3d6e5602334 --- /dev/null +++ b/_rules/SC1-1-1-valid-duplicate-accessible-name @@ -0,0 +1,78 @@ +--- +name: Valid use of duplicate accessible names +description: | + This rule checks that there is a valid reason for having a set of images with identical accessible names. + +success_criterion: +- 1.1.1 # Non-text Content + +test_aspects +- DOM Tree +- CSS Styling + +authors: +- Bryn Anderson +--- + +### Applicability + +The rule applies to any set of HTML or SVG element with the semantic role of `img`, in a document, exposed to assistive technologies, that have an identical [accessible name](). + +### Expectation + +Each test target has an identical purpose. + +**Note**: Leading and trailing whitespace and difference in case sensitivity should be ignored. + +## Assumptions + +*There are currently no assumptions* + +## 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. + +## Background + +## Test Cases + +### Pass example 1 + +Image A and Image B are different files but have an identical purpose stated in the alt attribute and serve the same purpose linking to the same destination. + +```html + My twitter feed + My twitter feed +``` + +### Pass example 2 + +Div A and B serve the same purpose but use the different image files to display a different version of the same informative image. Both files have an identical accessible name stated in the aria-label attribute. + +```html + + +``` + +### Failure example 1 + +Image A and Image B are different files, have identical alt attributes but go to different destinations. + +```html + Twitter + twitter +``` + +### Inapplicable example 1 + +Marked decorative with alt attribute +```html + +``` + +### Inapplicable example 2 + +Marked decorative with role="presentation" +```html + +``` From 51fdd1355f8cf72cb5ba9b4a5da0d7679ec195de Mon Sep 17 00:00:00 2001 From: Brynanders <37368581+Brynanders@users.noreply.github.com> Date: Tue, 11 Sep 2018 14:31:36 +0100 Subject: [PATCH 02/23] Rename SC1-1-1-valid-duplicate-accessible-name to SC1-1-1-valid-duplicate-accessible-name.md --- ...accessible-name => SC1-1-1-valid-duplicate-accessible-name.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename _rules/{SC1-1-1-valid-duplicate-accessible-name => SC1-1-1-valid-duplicate-accessible-name.md} (100%) diff --git a/_rules/SC1-1-1-valid-duplicate-accessible-name b/_rules/SC1-1-1-valid-duplicate-accessible-name.md similarity index 100% rename from _rules/SC1-1-1-valid-duplicate-accessible-name rename to _rules/SC1-1-1-valid-duplicate-accessible-name.md From d8db4c2078e8e811ae29beda7166b3cb9265a514 Mon Sep 17 00:00:00 2001 From: Brynanders <37368581+Brynanders@users.noreply.github.com> Date: Tue, 11 Sep 2018 14:49:04 +0100 Subject: [PATCH 03/23] Update and rename SC1-1-1-valid-duplicate-accessible-name.md to SC1-1-1-valid-duplicate-accessible-name-for-image.md changed name and file name to reference "image(s)" --- ....md => SC1-1-1-valid-duplicate-accessible-name-for-image.md} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename _rules/{SC1-1-1-valid-duplicate-accessible-name.md => SC1-1-1-valid-duplicate-accessible-name-for-image.md} (97%) diff --git a/_rules/SC1-1-1-valid-duplicate-accessible-name.md b/_rules/SC1-1-1-valid-duplicate-accessible-name-for-image.md similarity index 97% rename from _rules/SC1-1-1-valid-duplicate-accessible-name.md rename to _rules/SC1-1-1-valid-duplicate-accessible-name-for-image.md index 3d6e5602334..ba7731d19c7 100644 --- a/_rules/SC1-1-1-valid-duplicate-accessible-name.md +++ b/_rules/SC1-1-1-valid-duplicate-accessible-name-for-image.md @@ -1,5 +1,5 @@ --- -name: Valid use of duplicate accessible names +name: Valid use of duplicate accessible names for images description: | This rule checks that there is a valid reason for having a set of images with identical accessible names. From 6a8cfb2a5510762fdbf1f166604e94644077840c Mon Sep 17 00:00:00 2001 From: Brynanders <37368581+Brynanders@users.noreply.github.com> Date: Tue, 11 Sep 2018 16:53:34 +0100 Subject: [PATCH 04/23] Update SC1-1-1-valid-duplicate-accessible-name-for-image.md --- _rules/SC1-1-1-valid-duplicate-accessible-name-for-image.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_rules/SC1-1-1-valid-duplicate-accessible-name-for-image.md b/_rules/SC1-1-1-valid-duplicate-accessible-name-for-image.md index ba7731d19c7..f469564d75a 100644 --- a/_rules/SC1-1-1-valid-duplicate-accessible-name-for-image.md +++ b/_rules/SC1-1-1-valid-duplicate-accessible-name-for-image.md @@ -16,7 +16,7 @@ authors: ### Applicability -The rule applies to any set of HTML or SVG element with the semantic role of `img`, in a document, exposed to assistive technologies, that have an identical [accessible name](). +The rule applies to any set of HTML or SVG element with the semantic role of `img`, exposed to assistive technologies, that have an identical [accessible name](). ### Expectation From 90ce3c5151dcda69d54c5e4470d57c8ffcc2d2d7 Mon Sep 17 00:00:00 2001 From: Brynanders <37368581+Brynanders@users.noreply.github.com> Date: Mon, 17 Sep 2018 12:56:21 +0100 Subject: [PATCH 05/23] Update SC1-1-1-valid-duplicate-accessible-name-for-image.md Changing rule to address the use of placeholder text by identifying duplicate accessible names. --- ...lid-duplicate-accessible-name-for-image.md | 27 +++++++++---------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/_rules/SC1-1-1-valid-duplicate-accessible-name-for-image.md b/_rules/SC1-1-1-valid-duplicate-accessible-name-for-image.md index f469564d75a..50afe4475be 100644 --- a/_rules/SC1-1-1-valid-duplicate-accessible-name-for-image.md +++ b/_rules/SC1-1-1-valid-duplicate-accessible-name-for-image.md @@ -1,7 +1,7 @@ --- -name: Valid use of duplicate accessible names for images +name: Image accessibile name uses placeholder text description: | - This rule checks that there is a valid reason for having a set of images with identical accessible names. + This rule checks a set of images accessible names for duplicate placholder text. success_criterion: - 1.1.1 # Non-text Content @@ -16,11 +16,11 @@ authors: ### Applicability -The rule applies to any set of HTML or SVG element with the semantic role of `img`, exposed to assistive technologies, that have an identical [accessible name](). +The rule applies to any set of `img` elements, exposed to assistive technologies, that habe an identical accessible name defined in either the `title`, `alt`, or `aria-label` attributes. ### Expectation -Each test target has an identical purpose. +Each test target accessible name acurately describes the purpose of teh image. **Note**: Leading and trailing whitespace and difference in case sensitivity should be ignored. @@ -38,34 +38,32 @@ There is a known combination of a popular browser and assistive technology that ### Pass example 1 -Image A and Image B are different files but have an identical purpose stated in the alt attribute and serve the same purpose linking to the same destination. +Desc... ```html - My twitter feed - My twitter feed + twitter + twitter ``` ### Pass example 2 -Div A and B serve the same purpose but use the different image files to display a different version of the same informative image. Both files have an identical accessible name stated in the aria-label attribute. +Desc... ```html - - + ``` ### Failure example 1 -Image A and Image B are different files, have identical alt attributes but go to different destinations. - +Desc... ```html - Twitter - twitter + ``` ### Inapplicable example 1 Marked decorative with alt attribute + ```html ``` @@ -73,6 +71,7 @@ Marked decorative with alt attribute ### Inapplicable example 2 Marked decorative with role="presentation" + ```html ``` From 009db85cc87286b0259df96c0d3984718931d6c9 Mon Sep 17 00:00:00 2001 From: Brynanders <37368581+Brynanders@users.noreply.github.com> Date: Mon, 17 Sep 2018 15:51:06 +0100 Subject: [PATCH 06/23] Update and rename SC1-1-1-valid-duplicate-accessible-name-for-image.md to SC1-1-1-image-accessible-name-has-placeholder-text.md --- ...e-accessible-name-has-placeholder-text.md} | 32 ++++++++----------- 1 file changed, 14 insertions(+), 18 deletions(-) rename _rules/{SC1-1-1-valid-duplicate-accessible-name-for-image.md => SC1-1-1-image-accessible-name-has-placeholder-text.md} (59%) diff --git a/_rules/SC1-1-1-valid-duplicate-accessible-name-for-image.md b/_rules/SC1-1-1-image-accessible-name-has-placeholder-text.md similarity index 59% rename from _rules/SC1-1-1-valid-duplicate-accessible-name-for-image.md rename to _rules/SC1-1-1-image-accessible-name-has-placeholder-text.md index 50afe4475be..770cbd0ccd1 100644 --- a/_rules/SC1-1-1-valid-duplicate-accessible-name-for-image.md +++ b/_rules/SC1-1-1-image-accessible-name-has-placeholder-text.md @@ -1,7 +1,7 @@ --- name: Image accessibile name uses placeholder text description: | - This rule checks a set of images accessible names for duplicate placholder text. + This rule checks that a set of images with identical accessible names do not use generic placeholder text to describe the purpose of the image. success_criterion: - 1.1.1 # Non-text Content @@ -16,13 +16,13 @@ authors: ### Applicability -The rule applies to any set of `img` elements, exposed to assistive technologies, that habe an identical accessible name defined in either the `title`, `alt`, or `aria-label` attributes. +The rule applies to any set of `img` elements, exposed to assistive technologies, that have an identical accessible name defined in either the `title`, `alt`, or `aria-label` attributes. -### Expectation +**Note**: Leading and trailing whitespace and difference in case sensitivity should be ignored. -Each test target accessible name acurately describes the purpose of teh image. +### Expectation -**Note**: Leading and trailing whitespace and difference in case sensitivity should be ignored. +Each test target accessible name acurately describes the purpose of the image. ## Assumptions @@ -34,30 +34,26 @@ There is a known combination of a popular browser and assistive technology that ## Background +[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 ### Pass example 1 -Desc... +Identical alt text acurately describing the purpose of the image. ```html - twitter - twitter -``` - -### Pass example 2 - -Desc... - -```html - +twitter +twitter ``` ### Failure example 1 -Desc... -```html +Identical generic alt text that does not describe the purpose of either image. +```html +image +image ``` ### Inapplicable example 1 From eb73680e0a66bcf49fc879660dd8f5afd9d2eb11 Mon Sep 17 00:00:00 2001 From: Brynanders <37368581+Brynanders@users.noreply.github.com> Date: Tue, 18 Sep 2018 09:59:00 +0100 Subject: [PATCH 07/23] Update and rename SC1-1-1-image-accessible-name-has-placeholder-text.md to SC1-1-1-image-accessible-name-is-placeholder-text.md Made significant changes to the rule which is now implementation specific so that authors can determine "placeholder texts" specifically with in reference to the (to be created) "placeholder text" definition. --- ...ge-accessible-name-has-placeholder-text.md | 73 ------------------- ...age-accessible-name-is-placeholder-text.md | 69 ++++++++++++++++++ 2 files changed, 69 insertions(+), 73 deletions(-) delete mode 100644 _rules/SC1-1-1-image-accessible-name-has-placeholder-text.md create mode 100644 _rules/SC1-1-1-image-accessible-name-is-placeholder-text.md diff --git a/_rules/SC1-1-1-image-accessible-name-has-placeholder-text.md b/_rules/SC1-1-1-image-accessible-name-has-placeholder-text.md deleted file mode 100644 index 770cbd0ccd1..00000000000 --- a/_rules/SC1-1-1-image-accessible-name-has-placeholder-text.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -name: Image accessibile name uses placeholder text -description: | - This rule checks that a set of images with identical accessible names do not use generic placeholder text to describe the purpose of the image. - -success_criterion: -- 1.1.1 # Non-text Content - -test_aspects -- DOM Tree -- CSS Styling - -authors: -- Bryn Anderson ---- - -### Applicability - -The rule applies to any set of `img` elements, exposed to assistive technologies, that have an identical accessible name defined in either the `title`, `alt`, or `aria-label` attributes. - -**Note**: Leading and trailing whitespace and difference in case sensitivity should be ignored. - -### Expectation - -Each test target accessible name acurately describes the purpose of the image. - -## Assumptions - -*There are currently no assumptions* - -## 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. - -## Background - -[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 - -### Pass example 1 - -Identical alt text acurately describing the purpose of the image. - -```html -twitter -twitter -``` - -### Failure example 1 - -Identical generic alt text that does not describe the purpose of either image. - -```html -image -image -``` - -### Inapplicable example 1 - -Marked decorative with alt attribute - -```html - -``` - -### Inapplicable example 2 - -Marked decorative with role="presentation" - -```html - -``` 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..39b60dde786 --- /dev/null +++ b/_rules/SC1-1-1-image-accessible-name-is-placeholder-text.md @@ -0,0 +1,69 @@ +--- +name: Image accessibile name is placeholder text +description: | + This rule checks for images using generic placeholder text. + +success_criterion: +- 1.1.1 # Non-text Content + +test_aspects +- DOM Tree +- CSS Styling + +authors: +- Bryn Anderson +--- + +### Applicability + +The rule applies to any HTML `img` elements, exposed to assistive technologies, with a non-empty `alt` attribute that is equal to the accessible name. + +### Expectation + +Each test target `alt` attribute does not use [placeholder text](#placeholder-text) to describe the purpose of the image. + +## Assumptions + +This rule assumes that an authoring tool has been used to publish image content and that image `alt` attributes of published content can be populated with generic placeholder text when not otherwise specified. + +## Accessibility support + +*There are no major accessibility support issues known for this rule.* + +## Background + +[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 + +### Pass example 1 + +alt text acurately describing the the image of a Twitter icon. + +```html +twitter +``` + +### Failure example 1 + +Generic alt text that does not describe the purpose of the image. + +```html +image +``` + +### Inapplicable example 1 + +Marked decorative with alt attribute + +```html + +``` + +### Inapplicable example 2 + +Marked decorative with role="presentation" + +```html + +``` From 7c13e87bc63879351d9da62d92d91849228f4e2c Mon Sep 17 00:00:00 2001 From: Brynanders <37368581+Brynanders@users.noreply.github.com> Date: Tue, 18 Sep 2018 12:23:22 +0100 Subject: [PATCH 08/23] Update SC1-1-1-image-accessible-name-is-placeholder-text.md --- _rules/SC1-1-1-image-accessible-name-is-placeholder-text.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 index 39b60dde786..0348f60163f 100644 --- a/_rules/SC1-1-1-image-accessible-name-is-placeholder-text.md +++ b/_rules/SC1-1-1-image-accessible-name-is-placeholder-text.md @@ -1,7 +1,7 @@ --- name: Image accessibile name is placeholder text description: | - This rule checks for images using generic placeholder text. + This rule checks for images that use generic placeholder text. success_criterion: - 1.1.1 # Non-text Content @@ -16,11 +16,11 @@ authors: ### Applicability -The rule applies to any HTML `img` elements, exposed to assistive technologies, with a non-empty `alt` attribute that is equal to the accessible name. +The rule applies to any HTML `img` element that is exposed to assistive technologies, where the element has a non-empty `alt` attribute that is equal to the accessible name of the element. ### Expectation -Each test target `alt` attribute does not use [placeholder text](#placeholder-text) to describe the purpose of the image. +Each test target has an `alt` attribute that does not use [placeholder text](#placeholder-text) to describe the purpose of the image. ## Assumptions From a351f07ca9b1fe2c97de01e931f98406012ffa78 Mon Sep 17 00:00:00 2001 From: Brynanders <37368581+Brynanders@users.noreply.github.com> Date: Wed, 26 Sep 2018 17:15:51 +0100 Subject: [PATCH 09/23] Update SC1-1-1-image-accessible-name-is-placeholder-text.md --- ...-1-1-image-accessible-name-is-placeholder-text.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) 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 index 0348f60163f..0a0dbf904ce 100644 --- a/_rules/SC1-1-1-image-accessible-name-is-placeholder-text.md +++ b/_rules/SC1-1-1-image-accessible-name-is-placeholder-text.md @@ -1,7 +1,7 @@ --- -name: Image accessibile name is placeholder text +name: Image accessible name is placeholder text description: | - This rule checks for images that use generic placeholder text. + This rule checks that the accessible name of an image is not a generic placeholder text. success_criterion: - 1.1.1 # Non-text Content @@ -16,15 +16,15 @@ authors: ### Applicability -The rule applies to any HTML `img` element that is exposed to assistive technologies, where the element has a non-empty `alt` attribute that is equal to the accessible name of the element. +The rule applies to any HTML element with the semantic role of `img` that is exposed to assistive technologies, where the element has a non-empty accessible name. ### Expectation -Each test target has an `alt` attribute that does not use [placeholder text](#placeholder-text) to describe the purpose of the image. +Each test target accessible name does not use [placeholder text](#placeholder-text) to describe the purpose of the image. ## Assumptions -This rule assumes that an authoring tool has been used to publish image content and that image `alt` attributes of published content can be populated with generic placeholder text when not otherwise specified. +*There are currently no assumptions. ## Accessibility support @@ -38,7 +38,7 @@ This rule assumes that an authoring tool has been used to publish image content ### Pass example 1 -alt text acurately describing the the image of a Twitter icon. +alt text acurately describing the image of a Twitter icon. ```html twitter From 73254122c407acfba63827a6cd117d5d729dabf7 Mon Sep 17 00:00:00 2001 From: Brynanders <37368581+Brynanders@users.noreply.github.com> Date: Wed, 26 Sep 2018 17:33:48 +0100 Subject: [PATCH 10/23] Update SC1-1-1-image-accessible-name-is-placeholder-text.md --- _rules/SC1-1-1-image-accessible-name-is-placeholder-text.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 0a0dbf904ce..53b80d140e6 100644 --- a/_rules/SC1-1-1-image-accessible-name-is-placeholder-text.md +++ b/_rules/SC1-1-1-image-accessible-name-is-placeholder-text.md @@ -1,7 +1,7 @@ --- name: Image accessible name is placeholder text description: | - This rule checks that the accessible name of an image is not a generic placeholder text. + This rule checks that the accessible name of an image is not a generic placeholder text. success_criterion: - 1.1.1 # Non-text Content From 820bb6667272664375368c2f02d0e4513fee3528 Mon Sep 17 00:00:00 2001 From: Brynanders <37368581+Brynanders@users.noreply.github.com> Date: Thu, 27 Sep 2018 13:37:37 +0100 Subject: [PATCH 11/23] Update SC1-1-1-image-accessible-name-is-placeholder-text.md Removed Twitter references. Added links to definitions. --- ...-image-accessible-name-is-placeholder-text.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) 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 index 53b80d140e6..317b576a95d 100644 --- a/_rules/SC1-1-1-image-accessible-name-is-placeholder-text.md +++ b/_rules/SC1-1-1-image-accessible-name-is-placeholder-text.md @@ -16,7 +16,7 @@ authors: ### Applicability -The rule applies to any HTML element with the semantic role of `img` that is exposed to assistive technologies, where the element has a non-empty accessible name. +The rule applies to any HTML element with the [semantic role](#semantic-role) of `img` that is [exposed to assistive technologies](#exposed-to-assistive-technologies), where the element has a [non-empty](#non-empty) [accessible name](#accessible-name). ### Expectation @@ -24,7 +24,7 @@ Each test target accessible name does not use [placeholder text](#placeholder-te ## Assumptions -*There are currently no assumptions. +*There are currently no assumptions.* ## Accessibility support @@ -38,23 +38,23 @@ Each test target accessible name does not use [placeholder text](#placeholder-te ### Pass example 1 -alt text acurately describing the image of a Twitter icon. +Accessible name text acurately describing the image. ```html -twitter +sun amd cloud weather graphic ``` ### Failure example 1 -Generic alt text that does not describe the purpose of the image. +Generic accessible name text that does not describe the purpose of the image. ```html -image +image ``` ### Inapplicable example 1 -Marked decorative with alt attribute +Marked decorative. ```html @@ -62,7 +62,7 @@ Marked decorative with alt attribute ### Inapplicable example 2 -Marked decorative with role="presentation" +Marked decorative. ```html From 88b13a2fe9a7ddc371b2a4349dbf84ef045efbcf Mon Sep 17 00:00:00 2001 From: Brynanders <37368581+Brynanders@users.noreply.github.com> Date: Mon, 1 Oct 2018 16:33:37 +0100 Subject: [PATCH 12/23] Update SC1-1-1-image-accessible-name-is-placeholder-text.md fixed minor issues --- _rules/SC1-1-1-image-accessible-name-is-placeholder-text.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 index 317b576a95d..5adf05e83ab 100644 --- a/_rules/SC1-1-1-image-accessible-name-is-placeholder-text.md +++ b/_rules/SC1-1-1-image-accessible-name-is-placeholder-text.md @@ -54,7 +54,7 @@ Generic accessible name text that does not describe the purpose of the image. ### Inapplicable example 1 -Marked decorative. +Marked decorative with `alt=""`. ```html @@ -62,7 +62,7 @@ Marked decorative. ### Inapplicable example 2 -Marked decorative. +Marked decorative with `role="presentation"`. ```html From 3e40c6fad20e97a6df6cc005ff61f13529d5f40c Mon Sep 17 00:00:00 2001 From: Brynanders <37368581+Brynanders@users.noreply.github.com> Date: Mon, 1 Oct 2018 16:35:20 +0100 Subject: [PATCH 13/23] Update SC1-1-1-image-accessible-name-is-placeholder-text.md --- _rules/SC1-1-1-image-accessible-name-is-placeholder-text.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 5adf05e83ab..ada86a1e567 100644 --- a/_rules/SC1-1-1-image-accessible-name-is-placeholder-text.md +++ b/_rules/SC1-1-1-image-accessible-name-is-placeholder-text.md @@ -16,7 +16,7 @@ authors: ### Applicability -The rule applies to any HTML element with the [semantic role](#semantic-role) of `img` that is [exposed to assistive technologies](#exposed-to-assistive-technologies), where the element has a [non-empty](#non-empty) [accessible name](#accessible-name). +The rule applies to any HTML element with the [semantic role](#semantic-role) of `img` that is [exposed to assistive technologies](#exposed-to-assistive-technologies), where the element has a [non-empty](#non-empty), [accessible name](#accessible-name). ### Expectation From c948364cb04bb4e161576cc4b79ea05295bff7c8 Mon Sep 17 00:00:00 2001 From: Brynanders <37368581+Brynanders@users.noreply.github.com> Date: Thu, 4 Oct 2018 11:59:47 +0100 Subject: [PATCH 14/23] Update SC1-1-1-image-accessible-name-is-placeholder-text.md --- ...C1-1-1-image-accessible-name-is-placeholder-text.md | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) 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 index ada86a1e567..8e64d61544d 100644 --- a/_rules/SC1-1-1-image-accessible-name-is-placeholder-text.md +++ b/_rules/SC1-1-1-image-accessible-name-is-placeholder-text.md @@ -16,7 +16,7 @@ authors: ### Applicability -The rule applies to any HTML element with the [semantic role](#semantic-role) of `img` that is [exposed to assistive technologies](#exposed-to-assistive-technologies), where the element has a [non-empty](#non-empty), [accessible name](#accessible-name). +The rule applies to HTML `input type="image" `and `area` elements or any HTML element with the semantic role of `img` [exposed to assistive technologies](#exposed-to-assistive-technologies), with a [non-empty](#non-empty), [accessible name](#accessible-name). ### Expectation @@ -67,3 +67,11 @@ Marked decorative with `role="presentation"`. ```html ``` + +### Inapplicable example 3 + +The `img` alt uses generic placeholder text but is overridden by `aria-label` which accurately describes the image. + +```html +image +``` From f0b7f23a108a1e7b766dd58ff45f36f3b7101db1 Mon Sep 17 00:00:00 2001 From: Brynanders <37368581+Brynanders@users.noreply.github.com> Date: Thu, 4 Oct 2018 12:03:13 +0100 Subject: [PATCH 15/23] Update SC1-1-1-image-accessible-name-is-placeholder-text.md --- _rules/SC1-1-1-image-accessible-name-is-placeholder-text.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 8e64d61544d..e0047f822bb 100644 --- a/_rules/SC1-1-1-image-accessible-name-is-placeholder-text.md +++ b/_rules/SC1-1-1-image-accessible-name-is-placeholder-text.md @@ -16,7 +16,7 @@ authors: ### Applicability -The rule applies to HTML `input type="image" `and `area` elements or any HTML element with the semantic role of `img` [exposed to assistive technologies](#exposed-to-assistive-technologies), with a [non-empty](#non-empty), [accessible name](#accessible-name). +The rule applies to HTML `input type="image" `and `area` elements or any HTML element with the semantic role of `img` [exposed to assistive technologies](#exposed-to-assistive-technologies), with a [non-empty](#non-empty) [accessible name](#accessible-name). ### Expectation From f9680bcdc3871a1cae673e27ab6ebe169fecb851 Mon Sep 17 00:00:00 2001 From: Brynanders <37368581+Brynanders@users.noreply.github.com> Date: Thu, 4 Oct 2018 12:10:43 +0100 Subject: [PATCH 16/23] Update SC1-1-1-image-accessible-name-is-placeholder-text.md --- _rules/SC1-1-1-image-accessible-name-is-placeholder-text.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index e0047f822bb..e40dad15002 100644 --- a/_rules/SC1-1-1-image-accessible-name-is-placeholder-text.md +++ b/_rules/SC1-1-1-image-accessible-name-is-placeholder-text.md @@ -6,7 +6,7 @@ description: | success_criterion: - 1.1.1 # Non-text Content -test_aspects +test_aspects: - DOM Tree - CSS Styling From 5966e511308e5f5104cf7d26115a4958a36c9e82 Mon Sep 17 00:00:00 2001 From: Brynanders <37368581+Brynanders@users.noreply.github.com> Date: Mon, 8 Oct 2018 13:27:55 +0100 Subject: [PATCH 17/23] Update SC1-1-1-image-accessible-name-is-placeholder-text.md Changed **Applicability** and **Expectation** to align with #263 (**Accessible name is file name**) --- ...age-accessible-name-is-placeholder-text.md | 21 ++++++++++--------- 1 file changed, 11 insertions(+), 10 deletions(-) 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 index e40dad15002..bd52677d887 100644 --- a/_rules/SC1-1-1-image-accessible-name-is-placeholder-text.md +++ b/_rules/SC1-1-1-image-accessible-name-is-placeholder-text.md @@ -1,7 +1,7 @@ --- name: Image accessible name is placeholder text description: | - This rule checks that the accessible name of an image is not a generic placeholder text. + This rule checks that image elements that use generic placeholder text as their accessible name, do so without loss of infomation to the user. success_criterion: - 1.1.1 # Non-text Content @@ -16,11 +16,11 @@ authors: ### Applicability -The rule applies to HTML `input type="image" `and `area` elements or any HTML element with the semantic role of `img` [exposed to assistive technologies](#exposed-to-assistive-technologies), with a [non-empty](#non-empty) [accessible name](#accessible-name). +The rule applies to HTML `input type="image" `and `area` elements or any HTML element with the semantic role of `img` [exposed to assistive technologies](#exposed-to-assistive-technologies), where the [accessible name](#accessible-name) exclusively uses [generic placeholder text](#generic-placeholder-text). ### Expectation -Each test target accessible name does not use [placeholder text](#placeholder-text) to describe the purpose of the image. +Each test target accessible name can be used in place of the elements non-text content without loss of information to the user. ## Assumptions @@ -32,21 +32,22 @@ Each test target accessible name does not use [placeholder text](#placeholder-te ## Background -[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) +- [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 ### Pass example 1 -Accessible name text acurately describing the image. +The element's accessible name uses generic placeholder text which accurately describes the image. ```html -sun amd cloud weather graphic +oage (need a source file) ``` ### Failure example 1 -Generic accessible name text that does not describe the purpose of the image. +The element's accessible name uses generic placeholder text which does not accurately describes the image. ```html image @@ -54,7 +55,7 @@ Generic accessible name text that does not describe the purpose of the image. ### Inapplicable example 1 -Marked decorative with `alt=""`. +The image is marked decorative with `alt=""`. ```html @@ -62,7 +63,7 @@ Marked decorative with `alt=""`. ### Inapplicable example 2 -Marked decorative with `role="presentation"`. +The image is marked decorative with `role="presentation"`. ```html @@ -70,7 +71,7 @@ Marked decorative with `role="presentation"`. ### Inapplicable example 3 -The `img` alt uses generic placeholder text but is overridden by `aria-label` which accurately describes the image. +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 From 52302bcfdc6ac0fc19c2e2d35b47df47777b422a Mon Sep 17 00:00:00 2001 From: Brynanders <37368581+Brynanders@users.noreply.github.com> Date: Thu, 11 Oct 2018 10:15:20 +0100 Subject: [PATCH 18/23] Update SC1-1-1-image-accessible-name-is-placeholder-text.md Text edits and alignment with #263 --- _rules/SC1-1-1-image-accessible-name-is-placeholder-text.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 index bd52677d887..2840663249c 100644 --- a/_rules/SC1-1-1-image-accessible-name-is-placeholder-text.md +++ b/_rules/SC1-1-1-image-accessible-name-is-placeholder-text.md @@ -1,7 +1,7 @@ --- name: Image accessible name is placeholder text description: | - This rule checks that image elements that use generic placeholder text as their accessible name, do so without loss of infomation to the user. + This rule checks that image elements that use generic placeholder text as their accessible name do so without loss of infomation to the user. success_criterion: - 1.1.1 # Non-text Content @@ -16,11 +16,11 @@ authors: ### Applicability -The rule applies to HTML `input type="image" `and `area` elements or any HTML element with the semantic role of `img` [exposed to assistive technologies](#exposed-to-assistive-technologies), where the [accessible name](#accessible-name) exclusively uses [generic placeholder text](#generic-placeholder-text). +The rule applies to HTML `input type="image"` and `area` elements, or any HTML element with the semantic role of `img` [exposed to assistive technologies](#exposed-to-assistive-technologies), where the [accessible name](#accessible-name) exclusively uses [generic placeholder text](#generic-placeholder-text). ### Expectation -Each test target accessible name can be used in place of the elements non-text content without loss of information to the user. +Each test target has an accessible name that can be used in place of the [non-text content](https://www.w3.org/TR/WCAG21/#dfn-non-text-content) of the element without loss of information to the user. ## Assumptions From 4beb178472e36161cd55564164b9a3420ee30dc0 Mon Sep 17 00:00:00 2001 From: Brynanders <37368581+Brynanders@users.noreply.github.com> Date: Mon, 15 Oct 2018 13:06:37 +0100 Subject: [PATCH 19/23] Update SC1-1-1-image-accessible-name-is-placeholder-text.md Updated applicability to apply exposed to AT to all applicable elements. --- _rules/SC1-1-1-image-accessible-name-is-placeholder-text.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 2840663249c..35aa0899b86 100644 --- a/_rules/SC1-1-1-image-accessible-name-is-placeholder-text.md +++ b/_rules/SC1-1-1-image-accessible-name-is-placeholder-text.md @@ -16,7 +16,7 @@ authors: ### Applicability -The rule applies to HTML `input type="image"` and `area` elements, or any HTML element with the semantic role of `img` [exposed to assistive technologies](#exposed-to-assistive-technologies), where the [accessible name](#accessible-name) exclusively uses [generic placeholder text](#generic-placeholder-text). +The rule applies to HTML `input type="image"` or `area` elements, or any HTML element with the semantic role of `img`, where the element is [exposed to assistive technologies](#exposed-to-assistive-technologies) and has an [accessible name](#accessible-name) that exclusively uses [generic placeholder text](#generic-placeholder-text). ### Expectation From 8387af4827718beb0a03906cec0505f3cb7a15c8 Mon Sep 17 00:00:00 2001 From: Brynanders <37368581+Brynanders@users.noreply.github.com> Date: Mon, 12 Nov 2018 10:19:27 +0000 Subject: [PATCH 20/23] Update SC1-1-1-image-has-name.md Removed the applicability note about 'decorative images' and added it to the 'decorative' definition. --- _rules/SC1-1-1-image-has-name.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) 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 +``` From 7ae90d306c05b38cee3f0a4dfc21d3b052c9127a Mon Sep 17 00:00:00 2001 From: Brynanders <37368581+Brynanders@users.noreply.github.com> Date: Mon, 12 Nov 2018 10:21:22 +0000 Subject: [PATCH 21/23] Update decorative.md Added a second sentence explaining what is meant by a decorative image technically speaking. --- pages/algorithms/decorative.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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=""`. From 4b49b2a358a0a4a4d0de3f2fd2839accf313da84 Mon Sep 17 00:00:00 2001 From: Brynanders <37368581+Brynanders@users.noreply.github.com> Date: Mon, 4 Feb 2019 15:53:26 +0000 Subject: [PATCH 22/23] Update SC1-1-1-image-accessible-name-is-placeholder-text.md --- ...age-accessible-name-is-placeholder-text.md | 22 ++++++++++++------- 1 file changed, 14 insertions(+), 8 deletions(-) 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 index 35aa0899b86..420c5050822 100644 --- a/_rules/SC1-1-1-image-accessible-name-is-placeholder-text.md +++ b/_rules/SC1-1-1-image-accessible-name-is-placeholder-text.md @@ -1,5 +1,5 @@ --- -name: Image accessible name is placeholder text +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 infomation to the user. @@ -16,11 +16,11 @@ authors: ### Applicability -The rule applies to HTML `input type="image"` or `area` elements, or any HTML element with the semantic role of `img`, where the element is [exposed to assistive technologies](#exposed-to-assistive-technologies) and has an [accessible name](#accessible-name) that exclusively uses [generic placeholder text](#generic-placeholder-text). +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 can be used in place of the [non-text content](https://www.w3.org/TR/WCAG21/#dfn-non-text-content) of the element without loss of information to the user. +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 @@ -37,7 +37,9 @@ Each test target has an accessible name that can be used in place of the [non-te ## Test Cases -### Pass example 1 +### Passed + +#### Passed example 1 The element's accessible name uses generic placeholder text which accurately describes the image. @@ -45,7 +47,9 @@ The element's accessible name uses generic placeholder text which accurately des oage (need a source file) ``` -### Failure example 1 +### Failed + +#### Failed example 1 The element's accessible name uses generic placeholder text which does not accurately describes the image. @@ -53,7 +57,9 @@ The element's accessible name uses generic placeholder text which does not accur image ``` -### Inapplicable example 1 +### Inapplicable + +#### Inapplicable example 1 The image is marked decorative with `alt=""`. @@ -61,7 +67,7 @@ The image is marked decorative with `alt=""`. ``` -### Inapplicable example 2 +#### Inapplicable example 2 The image is marked decorative with `role="presentation"`. @@ -69,7 +75,7 @@ The image is marked decorative with `role="presentation"`. ``` -### Inapplicable example 3 +#### 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. From f75294a8dcc9d47b553e0f5c0809e70f3006a7fa Mon Sep 17 00:00:00 2001 From: Brynanders <37368581+Brynanders@users.noreply.github.com> Date: Mon, 4 Feb 2019 16:14:48 +0000 Subject: [PATCH 23/23] Update SC1-1-1-image-accessible-name-is-placeholder-text.md --- ...-1-image-accessible-name-is-placeholder-text.md | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) 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 index 420c5050822..4a947c3321b 100644 --- a/_rules/SC1-1-1-image-accessible-name-is-placeholder-text.md +++ b/_rules/SC1-1-1-image-accessible-name-is-placeholder-text.md @@ -1,7 +1,7 @@ --- 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 infomation to the user. + 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 @@ -44,7 +44,7 @@ Each test target has an accessible name that serves an equivalent purpose to the The element's accessible name uses generic placeholder text which accurately describes the image. ```html -oage (need a source file) +spacer (need a source file) ``` ### Failed @@ -54,7 +54,15 @@ The element's accessible name uses generic placeholder text which accurately des The element's accessible name uses generic placeholder text which does not accurately describes the image. ```html -image +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