A11y: Decorative images in a figure element cause VoiceOver screen reader reading the file name.

[juliemoynatPro]

Description

When you add an image in a post, it is put inside a figure HTML element, which is a semantic HTML element.

So, when the image is decorative, it should not be inside a figure but it is.

So, VoiceOver, the screen reader for MacOS and iOS, does not ignore these images because the figure tells that they're not decorative images. And VoiceOver reads the filename for the images because the alt attribute is empty (alt="").

In order to fix it:

• Recommended: Only images with a caption (figcaption element) should be inside a figure element;
• Or, you can eventually add an aria-hidden="true" attribute on figure only when the image has no alternative text.

Step-by-step reproduction instructions

1. Add an image block in a post with an image without alternative text;
2. See the code (an img element with empty alt attribute (alt="") inside a figure element);
3. Make VoiceOver (on MacOS or iOS) read the image: it will read the filename;
4. Move the image outside of the figure (with the browser inspector) and VoiceOver will ignore the image as it should do.

Screenshots, screen recording, code snippet

Example of generated code to understand:

<figure class="wp-block-image size-large">
  <img loading="lazy" decoding="async" width="1024" height="573" data-id="136327" src="https://example.com/wp-content/uploads/2025/01/image-1024x573.jpg.webp" alt="" class="wp-image-136327" srcset="https://example.com/wp-content/uploads/2025/01/image-1024x573.jpg.webp 1024w, https://example.com/wp-content/uploads/2025/01/image-300x168.jpg.webp 300w, https://example.com/wp-content/uploads/2025/01/image-150x84.jpg.webp 150w, https://example.com/wp-content/uploads/2025/01/image-768x430.jpg.webp 768w, https://example.com/wp-content/uploads/2025/01/image.jpg.webp 1200w" sizes="auto, (max-width: 1024px) 100vw, 1024px">
</figure>

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[Rishit30G]

Thanks for sharing the issue,

However I wasn't able to replicate properly from Step 3, could you possibly share a screencast that should help me understand this better 🙇🏻

When I tried replicating the issue, for me even without the alt tag the image was ignored when using VoiceOver

Screen.Recording.2026-01-30.at.12.34.50.PM.mov

[dpmehta]

I have also tried to reproduce the issue but not able to , the image is already being skipped by VoiceOver even if it doesn't have alt text empty.

testing-image-block.mov

[SirLouen]

Hello @juliemoynatPro it seems that there have been a couple intents to reproduce unsucessfully. Could you provide more info or check the screencasts provided to see what they are not doing according to your instructions?

[joedolson]

Semantically, @juliemoynatPro is right; the figure element should only be used for content - by definition, a decorative image is not content.

That said, I also could not reproduce this experience in VoiceOver/MacOS. I tested in normal reading and in graphic navigation. Reading ignored the image and graphic navigation believed there were no images on the page.

Can you specify what version of which OSes you were testing in, @juliemoynatPro?

[juliemoynatPro]

I'm sorry, I totally forgot to tell that I'm testing on Safari and it seems that there is not exactly the same behaviour on Chrome.

I'm testing with:

• VoiceOver with MacOS Tahoe 26.2 + Safari 26.2
• VoiceOver with iOS 26.2.1 (iPhone) + Safari

On the WordPress webpage I'm testing, VoiceOver on Chrome says "number" for each decorative image inside a figure but I can't reproduce this on the CodePen I've made to test outside WordPress so I don't know what's the problem.

Anyway, as you can see in this screenshot of my CodePen, VoiceOver is telling the name of the file "960px-Mesang099d.jpg, image" (sorry, I can't make a video but it really says this out loud).