SamHill
5 months agoSuper Hero
Implementation of FIGURE element does not seem correct
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.