Critical error of alt attribute not present is thrown even if image is wrapped inside `<figure>` element and a caption is provided in `<figcaption>` element.

[manav-sharma69]

Product

axe Extension

Product Version

4.80.1

Latest Version

• [X] I have tested the issue with the latest version of the product

Issue Description

Expectation

The extension should not throw warning because <figcaption> element was present to provide caption for the image.

Actual

The extension threw a critical level issue titled "Images must have alternate text".

How to Reproduce

The site tested was MDN's demo of Basic View Transitions.

Screenshot:

Additional context

W3's Guidance for conformance checkers says:

• The img element is in a figure element that satisfies the conditions described above.
• The condition, in short is: "In other words, the only content of the figure is an img element and a figcaption element, and the figcaption element must include (caption) content." - W3

[straker]

Thanks for the issue.

So I tested out the following HTML using different combinations of screen readers and browsers, and this is the result:

<!-- A -->
<figure>
  <img src="https://mdn.github.io/dom-examples/view-transitions/images/jungle-coast.jpg">
  <figcaption>Jungle coast</figcaption>
</figure>

<!-- B -->
<img src="https://mdn.github.io/dom-examples/view-transitions/images/jungle-coast.jpg">

<!-- C -->
<img src="https://mdn.github.io/dom-examples/view-transitions/images/jungle-coast.jpg" alt="cool image of Jungle">

• VoiceOver / Safari - When navigating line by line, announces the URL of the image for A and B, and the alt for image C. So reading order is: "jungle-coast.jpg image, Jungle coast, jungle-coast.jpg image, cool image of Jungle image." Only when having VoiceOver read the entire page is the figure announced, at which point it's announced as "jungle coast, figure," before it announces the image URL as before.
• JAWS / Chrome - When navigating line by line, skips both images A and B and only announces the figcaption as "has details, jungle coast" and image C as "cool image of Jungle graphic." This is the same when the reading the entire page.
• NVDA / Firefox - When navigation line by line, skips both images A and B and only announces the figcaption as "figure caption jungle coast" and image C as "graphic cool image of Jungle." This is the same when reading the entire page.

Based on the results it looks like VoiceOver and Safari does not really work with figure. Because of this we may call this an accessibility supported issue and it would still be a violation. I'll confirm with the team and let you know if that's not the case.