From e65a376fbfec2de99c98bd30b9881c287d69248c Mon Sep 17 00:00:00 2001 From: Brynanders <37368581+Brynanders@users.noreply.github.com> Date: Wed, 6 Feb 2019 16:39:41 +0000 Subject: [PATCH 01/53] Create SVG-image-has-name --- _rules/SVG-image-has-name | 103 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 103 insertions(+) create mode 100644 _rules/SVG-image-has-name diff --git a/_rules/SVG-image-has-name b/_rules/SVG-image-has-name new file mode 100644 index 0000000000..dc20643b50 --- /dev/null +++ b/_rules/SVG-image-has-name @@ -0,0 +1,103 @@ +--- +name: SVG image has name +description: | + This rule checks that each SVG image element that is not marked as decorative, has an accessible name. + +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 `SVG` `image` element, or any `SVG` element with the [semantic role](#semantic-role) of `img` that is [included in the accessibility tree](#included-in-the-accessibility-tree) + +### Expectation + +Each target element has a non-empty accessible name. + +## 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) +- https://www.w3.org/TR/svg-aam-1.0/#mapping_general +- https://www.w3.org/TR/svg-aam-1.0/#mapping_role_table +- https://www.w3.org/TR/svg-aam-1.0/#include_elements + + +## Test Cases + +### Passed + +#### Pass example 1 + +_description..._ + +```html + +``` + +#### Pass example 2 + +_description..._ + +```html + +``` + +### Falied + +#### Falied example 1 + +_description..._ + +```html + +``` + +#### Falied example 2 + +_description..._ + +```html + +``` + +#### Falied example 3 + +_description..._ + +```html + +``` + +### Inapplicable + +#### Inapplicable example 1 + +_description..._ +```html + +``` +#### Inapplicable example 2 + +_description..._ +```html + +``` From 0935c3f51e179369116caa0bde48fc9715b4fb44 Mon Sep 17 00:00:00 2001 From: Brynanders <37368581+Brynanders@users.noreply.github.com> Date: Tue, 26 Feb 2019 15:29:01 +0100 Subject: [PATCH 02/53] Update SVG-image-has-name Updated description Updated applicability --- _rules/SVG-image-has-name | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/_rules/SVG-image-has-name b/_rules/SVG-image-has-name index dc20643b50..87685bfbba 100644 --- a/_rules/SVG-image-has-name +++ b/_rules/SVG-image-has-name @@ -1,7 +1,7 @@ --- name: SVG image has name description: | - This rule checks that each SVG image element that is not marked as decorative, has an accessible name. + This rule checks that each SVG image element that is included in the accessibility tree has an accessible name. success_criterion: - 1.1.1 # Non-Text Content @@ -18,7 +18,7 @@ authors: ### Applicability -The rule applies to any `SVG` `image` element, or any `SVG` element with the [semantic role](#semantic-role) of `img` that is [included in the accessibility tree](#included-in-the-accessibility-tree) +The rule applies to any `SVG` element that is [included in the accessibility tree](#included-in-the-accessibility-tree). ### Expectation @@ -30,7 +30,7 @@ Each target element has a non-empty accessible name. ## Accessibility support - *There are no major accessibility support issues known for this rule.* +Browser and assitive technology support for SVG `title` and `desc` elements is currently inconsistent. Providing suplimentedary information using WAI ARIA is recommended. ## Background From 0311bb6f11c904d17431ea7921e7e8f3b264146b Mon Sep 17 00:00:00 2001 From: Brynanders <37368581+Brynanders@users.noreply.github.com> Date: Fri, 8 Mar 2019 15:19:53 +0000 Subject: [PATCH 03/53] Update SVG-image-has-name Added test cases --- _rules/SVG-image-has-name | 76 ++++++++++++++++++++++++++++++--------- 1 file changed, 59 insertions(+), 17 deletions(-) diff --git a/_rules/SVG-image-has-name b/_rules/SVG-image-has-name index 87685bfbba..78d5fc136f 100644 --- a/_rules/SVG-image-has-name +++ b/_rules/SVG-image-has-name @@ -30,7 +30,7 @@ Each target element has a non-empty accessible name. ## Accessibility support -Browser and assitive technology support for SVG `title` and `desc` elements is currently inconsistent. Providing suplimentedary information using WAI ARIA is recommended. +Browser and assitive technology support for SVG `title` and `desc` elements is currently inconsistent. Using WAI ARIA in combination with the `img` role for non-decorative `svg` elements significantly. ## Background @@ -40,64 +40,106 @@ Browser and assitive technology support for SVG `title` and `desc` elements is c - https://www.w3.org/TR/svg-aam-1.0/#mapping_role_table - https://www.w3.org/TR/svg-aam-1.0/#include_elements - ## Test Cases ### Passed #### Pass example 1 -_description..._ +The populated `svg` `text` element contains text content which serves as the accessible name ```html + + + A yellow circle + ``` #### Pass example 2 -_description..._ +The poulated `svg` `title` element includes the `svg` in the accessibility tree and serves as the accessible name. ```html + + A yellow circle + + +``` + +#### Pass example 3 + +The `svg` element's populated `aria-label` includes the `svg` in the accessibility tree and serves as the accessible name. +```html + + + ``` -### Falied +### Failed -#### Falied example 1 +#### Failed example 1 -_description..._ +The `svg` `text` element is included in the accessibility tree but has no text content or accessible name. ```html - + + + + ``` -#### Falied example 2 +#### Failed example 2 -_description..._ +The `svg` element is included in the accessibility tree using `img` role but the element does not have an accessible name. ```html - + + + ``` -#### Falied example 3 +#### Failed example 3 -_description..._ +The `svg` element is included in the accessibility tree using a valid `tabindex` integer but does not have an accessible name. ```html - + + + ``` ### Inapplicable #### Inapplicable example 1 -_description..._ -```html +The `svg` element is not included in the accessibility tree +```html + + + ``` + #### Inapplicable example 2 -_description..._ +The `svg` element has an accessible name using the `title` element but is excluded from the accessibility tree using the `aria-hidden` attribute. + ```html + +``` + +#### Inapplicable example 3 +The `svg` element is not included in the accessibility tree because the `title` element is empty. + +```html + + + + ``` From 5ed1eb0b2a5092a1c12c3b814e67eca330af9917 Mon Sep 17 00:00:00 2001 From: Brynanders <37368581+Brynanders@users.noreply.github.com> Date: Tue, 12 Mar 2019 18:05:23 +0000 Subject: [PATCH 04/53] Update SVG-image-has-name --- _rules/SVG-image-has-name | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_rules/SVG-image-has-name b/_rules/SVG-image-has-name index 78d5fc136f..ca53b5666c 100644 --- a/_rules/SVG-image-has-name +++ b/_rules/SVG-image-has-name @@ -22,7 +22,7 @@ The rule applies to any `SVG` element that is [included in the accessibility tre ### Expectation -Each target element has a non-empty accessible name. +Each target element has a [non-empty](#non-empty) accessible name. ## Assumptions From f20c21516595d2c6fbd7d78586f0520aafa62d56 Mon Sep 17 00:00:00 2001 From: Brynanders <37368581+Brynanders@users.noreply.github.com> Date: Tue, 12 Mar 2019 18:12:14 +0000 Subject: [PATCH 05/53] Update SVG-image-has-name --- _rules/SVG-image-has-name | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_rules/SVG-image-has-name b/_rules/SVG-image-has-name index ca53b5666c..6c64dddc97 100644 --- a/_rules/SVG-image-has-name +++ b/_rules/SVG-image-has-name @@ -30,7 +30,7 @@ Each target element has a [non-empty](#non-empty) accessible name. ## Accessibility support -Browser and assitive technology support for SVG `title` and `desc` elements is currently inconsistent. Using WAI ARIA in combination with the `img` role for non-decorative `svg` elements significantly. +Browser and assitive technology support for SVG `title` and `desc` elements is currently inconsistent. Using WAI ARIA in combination with the `img` role for non-decorative `svg` elements significantly improves accessibility brwoser support. ## Background From 55dfa2ae1935e4f247915bdabf936fe6e2011948 Mon Sep 17 00:00:00 2001 From: Brynanders <37368581+Brynanders@users.noreply.github.com> Date: Wed, 20 Mar 2019 11:56:22 +0000 Subject: [PATCH 06/53] Update SVG-image-has-name reworked applicability and test cases --- _rules/SVG-image-has-name | 75 +++++++++++++++++++-------------------- 1 file changed, 36 insertions(+), 39 deletions(-) diff --git a/_rules/SVG-image-has-name b/_rules/SVG-image-has-name index 6c64dddc97..2bd5cf4341 100644 --- a/_rules/SVG-image-has-name +++ b/_rules/SVG-image-has-name @@ -18,7 +18,7 @@ authors: ### Applicability -The rule applies to any `SVG` element that is [included in the accessibility tree](#included-in-the-accessibility-tree). +The rule applies to any `SVG` element with the rle of `img` or `graphics-document`, that is [included in the accessibility tree](#included-in-the-accessibility-tree). ### Expectation @@ -46,67 +46,75 @@ Browser and assitive technology support for SVG `title` and `desc` elements is c #### Pass example 1 -The populated `svg` `text` element contains text content which serves as the accessible name +The `svg` has a role of `img` which takes it's accessible name from it's `` element. ```html -<svg width="100" height="100"> +<svg xmlns="https://www.w3.org/2000/svg" role="img" width="100" height="100"> + <title>A yellow circle - A yellow circle - ``` #### Pass example 2 -The poulated `svg` `title` element includes the `svg` in the accessibility tree and serves as the accessible name. +The `svg` has a role of `img` and an `aria-label` containing the accessible name. ```html - - A yellow circle + ``` #### Pass example 3 -The `svg` element's populated `aria-label` includes the `svg` in the accessibility tree and serves as the accessible name. +The `svg` has the role of `img` which takes it's accessible name from it's child content, the `` element. ```html - + + A yellow circle ``` -### Failed - -#### Failed example 1 +#### Pass example 4 -The `svg` `text` element is included in the accessibility tree but has no text content or accessible name. +The `svg` has the role of `graphics-document` which takes it's accessible name from it's child content, the `` element. ```html - + + + 3 circles + 3 yellow circles with a green stroke horizontally adjacent to each other + + - + + + ``` -#### Failed example 2 +### Failed -The `svg` element is included in the accessibility tree using `img` role but the element does not have an accessible name. +#### Failed example 1 + +The `svg` has a rle of `img` but has no accessible name. ```html - - + + ``` -#### Failed example 3 +#### Failed example 2 -The `svg` element is included in the accessibility tree using a valid `tabindex` integer but does not have an accessible name. +The `svg` element has an empty `title`. ```html - - + + + ``` @@ -114,7 +122,7 @@ The `svg` element is included in the accessibility tree using a valid `tabindex` #### Inapplicable example 1 -The `svg` element is not included in the accessibility tree +The `svg` element does nott have a role of `img` or `graphics-document`. ```html @@ -124,22 +132,11 @@ The `svg` element is not included in the accessibility tree #### Inapplicable example 2 -The `svg` element has an accessible name using the `title` element but is excluded from the accessibility tree using the `aria-hidden` attribute. +The `svg` element is not included in the accessibility tree. ```html -