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
- Add an image block in a post with an image without alternative text;
- See the code (an
img element with empty alt attribute (alt="") inside a figure element);
- Make VoiceOver (on MacOS or iOS) read the image: it will read the filename;
- 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.
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Please confirm which theme type you used for testing.
Description
When you add an image in a post, it is put inside a
figureHTML element, which is a semantic HTML element.So, when the image is decorative, it should not be inside a
figurebut it is.So, VoiceOver, the screen reader for MacOS and iOS, does not ignore these images because the
figuretells that they're not decorative images. And VoiceOver reads the filename for the images because thealtattribute is empty (alt="").In order to fix it:
figcaptionelement) should be inside afigureelement;aria-hidden="true"attribute onfigureonly when the image has no alternative text.Step-by-step reproduction instructions
imgelement with emptyaltattribute (alt="") inside afigureelement);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:
Environment info
No response
Please confirm that you have searched existing issues in the repo.
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Please confirm which theme type you used for testing.