new rule: Image not in the accessibility tree is decorative #1213
Conversation
WilcoFiers
requested review from
jeeyyy,
carlosapaduarte,
Jym77 and
adilsofficial
| - **ignored svg**: the element is an `svg` with an empty (`""`) [accessible name][] and a [semantic role][] of `graphics-document`; or | ||
| - **ignored canvas**: the element is a `canvas` with an empty (`""`) [accessible name][] and no [explicit semantic role][]; or |
There was a problem hiding this comment.
I understand the assumption, but I can't really understand why should these be inapplicable. If they are not in the accessibility tree, shouldn't they be decorative?
Btw, I tested an svg with VoiceOver on Firefox and it was not ignored. It was ignored with VoiceOver on Chrome.
There was a problem hiding this comment.
These SVG and canvas exceptions are for elements that are included in the accessibility tree, but that will still be ignored by assistive technologies. So, despite being in the accessibility tree, because AT ignores them, we will test that they are actually decorative.
There was a problem hiding this comment.
It seems I understood the applicability differently from what you meant.
This is how I understood it: "All visible img, canvas, svg that are not in the accessibility tree. From that set, remove unloaded img, ignored svg, ignored canvas and named from author"
This is what you meant (from your reply): "All visible img, canvas, svg that are not in the accessibility tree. To that set, add unloaded img, ignored svg, ignored canvas and named from author"
If I am correct, we should update the applicability (since it is ambiguous).
There was a problem hiding this comment.
I agree there is something funky with the applicability
I read it the same way as @carlosapaduarte, but @WilcoFiers's answer "[these] elements that are included in the accessibility tree but (…) ignored by AT" makes little sense with that interpretation: if these elements are included in the accessibility tree, then they are already inapplicable and don't need to be specifically excluded.
There was a problem hiding this comment.
Jup, rereading this, I see your point. Fixing it.
There was a problem hiding this comment.
Some more comments on top of what @carlosapaduarte already said.
|
|
||
| #### Inapplicable Example 4 | ||
|
|
||
| This `svg` is ignored because it is a child of a link that has provides its [accessible name][]. |
There was a problem hiding this comment.
It would help to say this is the named from author exception (given that the items are named, better use these names…)
|
|
||
| #### Passed Example 4 | ||
|
|
||
| This decorative `svg` element is ignored by assistive technologies because it has no attribute that would give it an [accessible name][]. |
There was a problem hiding this comment.
I guess this rule is not to check whether element have accessible name or not? We should rephrase this description to meet the expectation and also for similar examples. Something like that:
"This svg element is not included in the accessibility tree and is a decorative because it do not contain an attribute which provide alternative text to this element."
|
|
||
| #### Passed Example 5 | ||
|
|
||
| This decorative `canvas` element is ignored by assistive technologies because it has no attribute that would give it an [accessible name][]. |
There was a problem hiding this comment.
Consider same comment from Passed Example 4
| top: -9999em; | ||
| } | ||
| </style> | ||
| <img src="/test-assets/shared/w3c-logo.png" alt="" /> |
There was a problem hiding this comment.
If the image is non-decorative it should have alt attribute with text as a best practice.
There was a problem hiding this comment.
Fair. I'll change the content of the image so it's actually a decorative image.
|
|
||
| #### Inapplicable Example 4 | ||
|
|
||
| This `svg` is ignored because it is a child of a link that has provides its [accessible name][]. |
There was a problem hiding this comment.
| This `svg` is ignored because it is a child of a link that has provides its [accessible name][]. | |
| This `svg` element is ignored because this element is a descendant of a link that provides its [accessible name][]. |
Co-Authored-By: carlosapaduarte <carlosapaduarte@gmail.com> Co-Authored-By: Adil Hussain <42895421+adilsofficial@users.noreply.github.com>
|
|
||
| #### Failed Example 5 | ||
|
|
||
| This `canvas` element which has no [semantic role][] and an empty (`""`) [accessible name][] is not [purely decorative][]. |
There was a problem hiding this comment.
Do you mean "[semantic role][] of graphics-document" here? if yes update this description and add role="graphics-document" in the code below as well.
There was a problem hiding this comment.
No, canvas doesn't have an implicit semantic role.
|
|
||
| #### Inapplicable Example 9 | ||
|
|
||
| This is a `div` element with a background image. |
There was a problem hiding this comment.
Add more description for this example as it does not make sense that a div element with a background image so what exactly makes this example inapplicable? Maybe with a note that this rule does not apply to background images.
Co-Authored-By: Jean-Yves Moyen <jym@siteimprove.com>
Co-Authored-By: Jean-Yves Moyen <jym@siteimprove.com>
|
|
||
| **Exception**: Exclude any `img` element where the [current request][]'s [state][image request state] is not [completely available][]; or | ||
|
|
||
| **Note**: An example of an image ignored because of "named from author" is when the image is a descendant of a `button` element that uses `aria-label` for its accessible name. |
There was a problem hiding this comment.
Keeping the same typography (bold) than in the initial list to make it obvious that it is the same thing.
(i.e., consistency in typography).
(I won't insist if you feel it's not needed)
| - The element has an [ancestor][] in the [flat tree][] of an element that is [named from author][]; or | ||
| - The element is an `img` element where the [current request][]'s [state][image request state] is not [completely available][]. |
There was a problem hiding this comment.
Should we also name these items?
| - The element has an [ancestor][] in the [flat tree][] of an element that is [named from author][]; or | |
| - The element is an `img` element where the [current request][]'s [state][image request state] is not [completely available][]. | |
| - **named from author** The element has an [ancestor][] in the [flat tree][] of an element that is [named from author][]; or | |
| - **unavailable** The element is an `img` element where the [current request][]'s [state][image request state] is not [completely available][]. |
There was a problem hiding this comment.
Just a single edit.
Plus there's a couple of suggestions from @Jym77 in here that you might want to commit (or not - I'll accept the PR without those).
Co-Authored-By: daniel-montalvo <49305434+daniel-montalvo@users.noreply.github.com> Co-Authored-By: Jean-Yves Moyen <jym@siteimprove.com> Co-Authored-By: carlosapaduarte <carlosapaduarte@gmail.com>
WilcoFiers
added
Review call 2 weeks
| - The element has an [ancestor][] in the [flat tree][] that is [named from author][]; or | ||
| - The element is an `img` element where the [current request][]'s [state][image request state] is not [completely available][]. | ||
|
|
||
| **Note**: An example of an image ignored because of "named from author" is when the image is a descendant of a `button` element that uses `aria-label` for its accessible name. |
There was a problem hiding this comment.
If items in the list above are not named, you can't refer to"named from author" like that. Especially given that the meaning here is not the meaning in ARIA (here, "named from author" means that one ancestor is "named from author in the ARIA meaning").
This rule checks that visible img, svg and canvas elements that are ignored by assistive technologies are decorative.
Need for Final Call: 2 weeks