Skip to content

Image non empty acc name - revised PR #1382

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 11 commits into
base: develop
Choose a base branch
from
Open

Image non empty acc name - revised PR #1382

Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
3ffc43d
fix(rules): change applicability to include only elements that render…
dd8 Jul 8, 2020
937bd1b
tests(rules): added test cases for img with no src and img with srcset
dd8 Jul 8, 2020
6ce992d
tests(rules): make test description match applicability terminology
dd8 Jul 8, 2020
efc4d2b
Update _rules/image-non-empty-accessible-name-23a2a8.md
dd8 Jul 12, 2020
8f0caee
Update _rules/image-non-empty-accessible-name-23a2a8.md
dd8 Jul 12, 2020
a34dd28
Update _rules/image-non-empty-accessible-name-23a2a8.md
dd8 Jul 12, 2020
2408708
Update _rules/image-non-empty-accessible-name-23a2a8.md
dd8 Jul 12, 2020
2f4e8ca
fix(rules): resolve PR feedback
dd8 Jul 12, 2020
630e6e7
Merge branch 'develop' into image-non-empty-acc-name
dd8 Jul 12, 2020
2e061fb
tests(rules): added 2 new Inapplicable Examples and referenced 'repre…
dd8 Jul 12, 2020
84345a3
fix(rules): committing works much better if you click save first
dd8 Jul 12, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 88 additions & 1 deletion _rules/image-non-empty-accessible-name-23a2a8.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,12 @@ htmlHintIgnore:

## Applicability

The rule applies to HTML `img` elements and HTML elements with the [semantic role][] of `img`, except for elements that are not [included in the accessibility tree][].
The rule applies to HTML `img` elements and HTML elements with the [semantic role][] of `img` which render an image and which are [included in the accessibility tree][].

HTML elements render an image if any of the following are true:

- The element is an `img` element where the [current request][]'s [state][image request state] is [completely available][].
- The element has a CSS `background-image` that does not [draw nothing](https://www.w3.org/TR/css-backgrounds-3/#the-background-image).
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the "draws nothing" description it's mentioned about the background size: "An image that is empty (zero width or zero height) likewise counts as a layer but draws nothing"

Would the following example be also non applicable then, or only the image with the original size of 0 width and height?

   <img
      style="
        width: 72px;
        height: 48px;
        background-image: url('./w3c.png'); // image size is 50px by 50px
        background-size: 0; // change background size to 0
      "
    />


## Expectation

Expand Down Expand Up @@ -146,6 +151,33 @@ This `img` element inside a `div` positioned off screen has an [implicit role][]
</div>
```

#### Passed Example 9

This `img` element displays a CSS `background-image` and has an [accessible name][] because of the `alt` attribute.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does it need a separate example with a background: url(./w3c.png)? Or does this assume that the computed css value if we set a background will be background-image?


```html
<img alt="W3C logo" style="width:72px; height:48px; background-image: url(/test-assets/shared/w3c-logo.png)" />
```

#### Passed Example 10

This `img` element displays a `srcset` and has an [accessible name][] because of the `alt` attribute.

```html
<img alt="W3C logo" srcset="/test-assets/shared/w3c-logo.png" />
```

#### Passed Example 11

This `img` element displays a `srcset` and has an [accessible name][] because of the `alt` attribute.

```html
<picture>
<source srcset="/test-assets/shared/w3c-logo.png" />
<img alt="W3C logo" width="72" height="48" />
</picture>
```

### Failed

#### Failed Example 1
Expand Down Expand Up @@ -188,6 +220,33 @@ This `img` element has an [explicit role][] of `none`. However, it is [focusable
<img role="none" tabindex="0" src="/test-assets/shared/w3c-logo.png" />
```

#### Failed Example 6

This `img` element displays a CSS `background-image`, has an empty [accessible name][] and an [implicit role][] of `img`.

```html
<img style="width:72px; height:48px; background-image: url(/test-assets/shared/w3c-logo.png)" />
```

#### Failed Example 7

This `img` element displays a `srcset`, has an empty [accessible name][] and an [implicit role][] of `img`.

```html
<img srcset="/test-assets/shared/w3c-logo.png" />
```

#### Failed Example 8

This `img` element displays a `srcset`, has an empty [accessible name][] and an [implicit role][] of `img`.

```html
<picture>
<source srcset="/test-assets/shared/w3c-logo.png" />
<img width="72" height="48" />
</picture>
```

### Inapplicable

#### Inapplicable Example 1
Expand Down Expand Up @@ -228,10 +287,38 @@ This element is neither an `img` element nor has a role of `img`.
<div aria-label="W3C logo"></div>
```

#### Inapplicable Example 5

This `img` element has no `src` attribute and no `alt` attribute so does not render an image and [represents nothing][].
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
This `img` element has no `src` attribute and no `alt` attribute so does not render an image and [represents nothing][].
This `img` element has no `src` attribute and no `alt` attribute or accessible name so does not render an image and [represents nothing][].

just clarifying it from https://github.com/w3c/aria/pull/2221/files#diff-5c3c8936e81538898c83ae11f5271e9ae9324925713a3b03aca58cbd2a3c3014R3133


```html
<img />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking at this with fresh eyes. I don't think this is correct. These actually should fail SC 1.1.1. Here's my reasoning:

  1. These img elements are content, because they are nodes in the accessibility tree
  2. There is no text here, so if 1 is true, these quality as non-text content
  3. Since these are invisible, the "Decoration, Formatting, Invisible" applies
  4. Since these aren't marked up with aria-hidden=true,role=none or alt="", assistive technologies will not consistently ignore them
  5. Because these are not ignored by assistive technologies, the exception isn't met, and so 1.1.1 is not satisfied

I think I'd prefer to keep this rule as is to be honest. That ARIA in HTML explicitly says that an img with no alt attribute has a semantic role of img suggests to me this proposal not how the W3C expects this to be interpreted, even if some AT will ignore some of these (depending on the verbosity setting). It might be better just to mention this in the accessibility support section.

Copy link
Collaborator Author

@dd8 dd8 Oct 7, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking at the <img/> example (an image with no src and no alt). This isn't rendered on screen in Chrome/FF/Safari. It cannot render non-text content since it has no src.

It is exposed as role=img in Chrome/Firefox. The image does not appear in the accessibility tree in Safari.

There are two contradictory specs:

  • html-map maps all img elements without alt to role=img (even if they have no src)
  • the HTML spec says an img with no alt and no src represents nothing (i.e. has no semantics)

The html-aam mapping is here:
https://www.w3.org/TR/html-aam-1.0/#el-img

The HTML spec says:

If the src attribute is not set and either the alt attribute is set to the empty string or the alt attribute is not set at all
The element represents nothing.

https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element

The HTML spec defines "represents nothing" as meaning the element has no semantics.

Note sure what do do here:

  • you can make the argument <img/> should not fail 1.1.1 since there's no non-text content
  • you can also make the argument <img/> should fail 1.1.1 since it's exposed as an role=img by html-aam

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should raise the issue to the HTML AAM 🤔
To see if img with no source should still have an image role or not.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Issue filed at w3c/html-aam#439

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As per w3c/aria#2221 closing that issue, ARIA is moving toward giving these img elements with no/empty src an implicit role of none.

@WilcoFiers Does that solve your concerns about this PR?

```

#### Inapplicable Example 6

This `img` element does not display a CSS `background-image`, has no `src` attribute and no `alt` attribute so does not render an image and [represents nothing][].

```html
<img style="width:72px; height:48px; background-image: none" />
```

#### Inapplicable Example 7

This `img` element has an `src` attribute which will cause the [image request state][] to be [Broken](https://html.spec.whatwg.org/#img-error).

```html
<img src="/test-assets/does-not-exist.png" />
```

Comment on lines +306 to +313
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@WilcoFiers can you weight on this? It doesn't seem like it's in the exception of WCAG 1.1.1 and I am not sure if it's inapplicable.

  1. It will still render and will be mapped to the image role since src is not empty
  2. Some screenreaders might announce a file name instead if there is a src attribute (even if it's not loading) but no alt provided, which would not be the text alternative for the image

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting problem. After re-reading WCAG definitions a couple times I think that yes, this fails 1.1.1. I think this element falls under non-text content. Content isn't defined in WCAG, but I'd say since this is both in the accessibility tree, and visible to people, I can't see a reason to say this wouldn't be content. It's non-text content because everything that isn't text content is non-text content.

SC 1.1.1 applies to all non-text content, we can debate whether this is decorative or not. But in either case not having an alt does fail WCAG. So I agree with you, this should not be inapplicable.

[accessible name]: #accessible-name 'Definition of accessible name'
[explicit role]: #explicit-role 'Definition of explicit role'
[focusable]: #focusable 'Definition of focusable'
[implicit role]: #implicit-role 'Definition of implicit role'
[included in the accessibility tree]: #included-in-the-accessibility-tree 'Definition of included in the accessibility tree'
[presentational roles conflict resolution]: https://www.w3.org/TR/wai-aria-1.1/#conflict_resolution_presentation_none 'Presentational Roles Conflict Resolution'
[semantic role]: #semantic-role 'Definition of semantic role'
[current request]: https://html.spec.whatwg.org/#current-request 'HTML definition of Current request, 2020/03/06'
[image request state]: https://html.spec.whatwg.org/#img-req-state 'HTML definition of Image request state, 2020/03/06'
[completely available]: https://html.spec.whatwg.org/#img-all 'HTML definition of Completely available, 2020/03/06'
[represents nothing]: https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element:attr-img-src-9 'HTML definition of Represents Nothing, 2020/03/06'