Implementation of FIGURE element does not seem correct

Apr 23, 2024

I think I may have come across/reported this before. I'm testing some Rise content for accessibility, and have found images that have a caption defined will always read the caption twice. The issue appears to be because the caption is also used to label the <figure> container using the aria-labelledby attribute. 

If we have the following (regular implementation):

<figure>
<img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/elephant-660-480.jpg" alt="" />
<figcaption>An elephant at sunset, example 1</figcaption>
</figure>

The screen reader will read this as: "Has details, an elephant at sunset, example 2"

If we use the Rise implementation, using aria-labelledby:

 <figure aria-labelledby="id1">
<img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/elephant-660-480.jpg" alt="" />
<figcaption id="id1">An elephant at sunset, example 2</figcaption>
</figure>

The screen reader will read this as: "Group start, an elephant at sunset, example 2. Has details, an elephant at sunset, example 2."

Due to the aria-labelledby, we get a double up of the same caption. As seen in this short demo.

1 Reply
Sam Hill

FYI, found an old post I made. The engineer response was that it is to support a wide range of screen readers.

Are you able to let me know which screen readers don't support the <figcaption> as I can help by tracking any future changes with that, so we can get rid of that duplication as soon as possible?