New rule: Explicit role SVG image has accessible name (7d6734) #419

Brynanders · 2019-02-06T16:41:32Z

This check idea came from @jorgeponto on a WP1 meeting on Feb 4 hosted by @nitedog.

After much discussion between @WilcoFiers @Jym77 @Brynanders @annethyme @JKODU, @Brynanders and @Jym77 with input from @WilcoFiers suggest creating a rule that is both true to the spec and maps to an accessibility requirement (1.1.1) with the assumption that the use of an explicit roles represents a clear intent to convey meaning for elements that otherwise:

"...do not have an intrinsic semantic meaning. Instead, they represent components of the visual presentation of the document. To simplify the accessible representation of the document, these purely presentational elements should normally be omitted from the accessibility tree, unless the author explicitly provides semantic content." https://www.w3.org/TR/svg-aam-1.0/#include_elements

Brynanders · 2019-02-14T15:31:59Z

From RGAA https://disic.github.io/rgaa_referentiel_en/criteria.html#images
Test 1.2.4: Does each decorative vector image (svg tag), without caption, meet the following conditions:

The svg tag as an aria-hidden="carview.php?tsp=true" attribute
The title and desc tags are missing, or empty
The svg tag, or one of its descendants, has no title attribute
The svg tag, or one of its descendants, has no ARIA role, property or state, that aims at labelling the vector image (aria-label, aria-describedby, or aria-labelledby, for example)

Brynanders · 2019-02-14T16:46:52Z

Reached out to @audreymaniez offline to better understand RGAA Test 1.2.4

nitedog · 2019-02-18T13:42:25Z

Example uses of SVG: https://www.w3.org/WAI/tips/designing/

_rules/SVG-image-has-name

jorgeponto · 2019-02-25T12:07:19Z

@Brynanders: This PT website (https://eportugal.gov.pt) are using SVG inline. Usually in links they are using something like [a][span]text[/span][svg][/svg][/a]

Updated description Updated applicability

jorgeponto · 2019-03-03T18:30:37Z

Using ARIA to enhance SVG accessibility (an article of Paciello Group from 2013)
https://developer.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/

audreymaniez · 2019-03-05T15:51:36Z

We have made some tests too at Access42, it may help @Brynanders : https://tests.a11y.fr/svg.html

Added test cases

Brynanders · 2019-03-08T15:28:35Z

In order for this rule to work it is important to understand the SVG Accessibility API Mappings as referred to in our definition of included in the accessibility tree.

In particular you will likely want to review https://www.w3.org/TR/svg-aam-1.0/#exclude_elements and https://www.w3.org/TR/svg-aam-1.0/#include_elements before reviewing this rule.

kasperisager

Open question that we had some difficulty with internally at @Siteimprove: Is it appropriate to make the rule apply to all <svg> elements that are included in the accessibility tree regardless of their semantic role?

_rules/SVG-image-has-name

Jym77 · 2019-10-09T14:16:24Z

Final Call ends on October 23rd.

EmmaJP

I'm happy that the various changes and comments I made have been resolved.

Jym77

Small editorial changes.

(apart from the general issue in #976 which needs to be tackled separately and shouldn't stop this PR).

Jym77 · 2019-10-15T13:23:19Z

_rules/explicit-SVG-image-has-name-7d6734.md

+
+## Expectation
+
+Each target element has an [accessible name](#accessible-name) that is not only [whitespace](#whitespace).


Note: as per #976 it seems that every element has a (possibly empty) accessible name and that accessible name are never (or should never be) only whitespace (i.e. every applicable element should pass the rule).

Given that this is a general problem, I guess we should proceed with this rule and solve the problem once we have discussed the issue and reached a decision.

This needs to be addressed. Given that issue now has a PR that's in final call, this needs to be fixed before merging. Change "an [accessible name][] that is not only [whitespace][]" to "an [accessible name][] is empty."

I think it's reasonable to do this as an editorial change and not have it go through another final call.

Updated as per Passed Example 4 in https://github.com/act-rules/act-rules.github.io/pull/981/files#diff-e5855eef878bfc5e2ac47f8ae6846dc4

_rules/explicit-SVG-image-has-name-7d6734.md

- Updated *Passed Example 2* removing the explicit role from the `svg` - Minor editorial changes

- Removed *Inapplicable Example 1* - Minor editorial change

_rules/explicit-SVG-image-has-name-7d6734.md

cblouch · 2019-10-22T17:26:44Z

_rules/explicit-SVG-image-has-name-7d6734.md

+
+```html
+<p>How many circles are there?</p>
+<svg xmlns="https://www.w3.org/2000/svg">


What w3c spec is being used to define the accessible name calculation for this SVG? From my reading of the note in:
https://www.w3.org/TR/svg-aam-1.0/#mapping_additional_nd
There are five ways too find the accessible name of an SVG:

aria-labelledby

aria-label

a direct child title element

xlink:title attribute on a link

for text container elements, the text content
Unless there is something subtle I'm missing about a circle element with role=graphics-symbol, that doesn't count as a text container and none of the other methods apply, so the SVG does not have an accessible name.

The svg element doesn't. But given that it also doesn't have one of the required explicit roles, it is inapplicable for this rule.
The circle element has one of the required explicit roles, thus is applicable; and has an accessible name given by the aria-label, thus it passes the rule.
The example description is about why the circle passes the rule, and says nothing about the svg.

Ahh, that makes more sense. So we are not testing the outer SVG element but just the inner circle element. I guess when I read the rule title saying an "…SVG image has accessible name", I thought all the tests were for the SVG element. Many of the test cases are for the SVG elements. Maybe this should be split up for SVG elements and children of SVG elements. Anyway, thanks for clarifying.

WilcoFiers · 2019-10-25T11:24:40Z

_rules/explicit-SVG-image-has-name-7d6734.md

+
+## Expectation
+
+Each target element has an [accessible name](#accessible-name) that is not only [whitespace](#whitespace).


This needs to be addressed. Given that issue now has a PR that's in final call, this needs to be fixed before merging. Change "an [accessible name][] that is not only [whitespace][]" to "an [accessible name][] is empty."

I think it's reasonable to do this as an editorial change and not have it go through another final call.

#419 (comment) Changed " that is not only whitespace" to "that is no empty"

Updated, please take another loo;

Updated test cases to align with #981

EmmaJP · 2019-10-31T14:06:05Z

_rules/explicit-SVG-image-has-name-7d6734.md

+```html
+<p>How many circles are there?</p>
+<svg xmlns="https://www.w3.org/2000/svg" role="img">
+	<title></title>


Just a note that this example does not have whitespace within the title element as per the description. It is identical code to Failed Example 3.

Create SVG-image-has-name

e65a376

Brynanders added reviewer wanted Rule Use this label for a new rule that does not exist already labels Feb 6, 2019

Brynanders self-assigned this Feb 6, 2019

Brynanders requested a review from jorgeponto February 6, 2019 16:41

Brynanders changed the title ~~Create SVG-image-has-name~~ SC1.1.1-SVG-image-has-name Feb 6, 2019

WilcoFiers removed the reviewer wanted label Feb 7, 2019

Brynanders added the Agenda item label Feb 7, 2019

This comment has been minimized.

Sign in to view

Brynanders changed the title ~~SC1.1.1-SVG-image-has-name~~ SC1-1-1-SVG-image-has-name Feb 7, 2019

This comment has been minimized.

Sign in to view

audreymaniez reviewed Feb 21, 2019

View reviewed changes

_rules/SVG-image-has-name Outdated Show resolved Hide resolved

This comment has been minimized.

Sign in to view

Update SVG-image-has-name

0935c3f

Updated description Updated applicability

jeeyyy removed Agenda item labels Feb 26, 2019

This comment has been minimized.

Sign in to view

Update SVG-image-has-name

0311bb6

Added test cases

Brynanders requested review from audreymaniez and kasperisager March 8, 2019 15:29

kasperisager suggested changes Mar 11, 2019

View reviewed changes

_rules/SVG-image-has-name Outdated Show resolved Hide resolved

_rules/SVG-image-has-name Outdated Show resolved Hide resolved

Jym77 added the Review call 2 weeks Call for review for new rules and big changes label Oct 9, 2019

Merge branch 'develop' into Brynanders-patch-4

eb6906d

EmmaJP approved these changes Oct 9, 2019

View reviewed changes

Jym77 reviewed Oct 15, 2019

View reviewed changes

cblouch reviewed Oct 15, 2019

View reviewed changes

_rules/explicit-SVG-image-has-name-7d6734.md Outdated Show resolved Hide resolved

jeeyyy and others added 3 commits October 16, 2019 09:04

Merge branch 'develop' into Brynanders-patch-4

5ebeb06

Update explicit-SVG-image-has-name-7d6734.md

a466a54

- Updated *Passed Example 2* removing the explicit role from the `svg` - Minor editorial changes

Update explicit-SVG-image-has-name-7d6734.md

596b78f

- Removed *Inapplicable Example 1* - Minor editorial change

Jym77 mentioned this pull request Oct 16, 2019

Can accessible name be non-existent? Only whitespace? #976

Closed

Merge branch 'develop' into Brynanders-patch-4

8010531

Jym77 approved these changes Oct 16, 2019

View reviewed changes

nitedog reviewed Oct 17, 2019

View reviewed changes

_rules/explicit-SVG-image-has-name-7d6734.md Show resolved Hide resolved

Brynanders changed the title ~~New rule: Explicit SVG image has accessible name (7d6734)~~ New rule: Explicit role SVG image has accessible name (7d6734) Oct 18, 2019

Merge branch 'develop' into Brynanders-patch-4

6c9ab22

cblouch reviewed Oct 22, 2019

View reviewed changes

Merge branch 'develop' into Brynanders-patch-4

e94b821

WilcoFiers removed the reviewers wanted label Oct 25, 2019

WilcoFiers previously requested changes Oct 25, 2019

View reviewed changes

Update explicit-SVG-image-has-name-7d6734.md

fa164a3

#419 (comment) Changed " that is not only whitespace" to "that is no empty"

Brynanders and others added 3 commits October 30, 2019 16:36

Update explicit-SVG-image-has-name-7d6734.md

17176df

Updated test cases to align with #981

Merge branch 'develop' into Brynanders-patch-4

9a985c1

update rule frontmatter

4cca85b

EmmaJP reviewed Oct 31, 2019

View reviewed changes

Merge branch 'develop' into Brynanders-patch-4

ab4c29f

WilcoFiers approved these changes Nov 6, 2019

View reviewed changes

Merge branch 'develop' into Brynanders-patch-4

93009e4

Brynanders merged commit 344d1b7 into develop Nov 6, 2019

Jym77 deleted the Brynanders-patch-4 branch November 25, 2019 13:19


		## Expectation

		Each target element has an [accessible name](#accessible-name) that is not only [whitespace](#whitespace).

New rule: Explicit role SVG image has accessible name (7d6734) #419

New rule: Explicit role SVG image has accessible name (7d6734) #419

Uh oh!

Conversation

Brynanders commented Feb 6, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

Brynanders commented Feb 14, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Brynanders commented Feb 14, 2019

Uh oh!

nitedog commented Feb 18, 2019

Uh oh!

Uh oh!

This comment has been minimized.

jorgeponto commented Feb 25, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This comment has been minimized.

This comment has been minimized.

jorgeponto commented Mar 3, 2019

Uh oh!

audreymaniez commented Mar 5, 2019

Uh oh!

Brynanders commented Mar 8, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kasperisager left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Jym77 commented Oct 9, 2019

Uh oh!

EmmaJP left a comment

Choose a reason for hiding this comment

Uh oh!

Jym77 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

17 participants

Brynanders commented Feb 6, 2019 •

edited

Loading

Brynanders commented Feb 14, 2019 •

edited

Loading

jorgeponto commented Feb 25, 2019 •

edited

Loading

Brynanders commented Mar 8, 2019 •

edited

Loading