Image: Remove redundant role attribute from frontend markup

[yashjawale]

What?

Closes #79572

Why?

When "Mark as decorative" option is enabled it adds role="none" attribute which is not needed & causes HTML validation warnings.

Also applies to gallery block.

How?

The attibute was added to fix an issue in Safari Voiceover where it used to read out file names even if alt text was empty for decorative images.

While adding role attribute fixed the Safari issue it introduced HTML validation warnings as in presence of role, alt attribute should be present & be non-empty. Which can't be the case for decorative images.

This PR shifts to use aria-hidden attribute instead of role to prevent Safari Voiceover issue while still generating valid HTML code.

(This was previously tried in #75027 (comment) but looks like it didn't prevent Safari from reading out images, which now it does)

Testing Instructions

1. Create a post
2. Add gallery or image block
3. Enable "Mark as decorative" option for the image
4. Save the post
5. Observe the frontend markup to ensure role attribute is no longer present
6. Notice the aria-hidden attribute being added
7. Ensure that when "Mark as decorative" is checked, Safari doesn't read out the images.

Screenshots or screencast

Screen.Recording.2026-07-21.at.2.00.27.PM.mov

Use of AI Tools

None

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Required label: Any label starting with [Type].
• Labels found: [Focus] Accessibility (a11y), [Package] Block library, [Block] Image.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[t-hamano]

If we want to move forward with this PR, please be aware of #79572 (comment).

[pattonwebz]

I actually think the html validation error is the other way around. If a role is present then there should not be an empty alt tag.

Error: An img element with a role attribute must not have an alt attribute whose value is the empty string.

[From line 1, column 1; to line 1, column 42](https://validator.w3.org/nu/#l1c42)

<img src="image.jpg" alt="" role="none" />

[yashjawale]

Ah right!
Looks like when role is present removing alt altogether won't help either. It needs to be present & be non-empty.

If I remove the role attribute altogether the issue mentioned in #75027 shows up again (verified)

But it looks like if we add aria-hidden=true to the decorative images instead of role="none" the Safari issue doesn't happen. While generating valid HTML.

From what I checked, this was tried in #75027 (comment) but at that time it didn't prevent Safari from reading the image itself. But looks like now it does.

Perhaps this is the way to go now?

My test environment:
MacOS Tahoe 26.5.2 (25F84)
Safari Version 26.5.2 (21624.2.5.11.8)

Screen.Recording.2026-07-21.at.2.00.27.PM.mov

Also updated the PR description

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: yashjawale <yashjawale@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: pattonwebz <williampatton@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: BlackStar1991 <blackstar1991@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.