About This HTML Issue
An img element with a role attribute needs an accessible name, such as a non-empty alt attribute, an aria-label or an aria-labelledby.
The validator reports this error for any img that has a role but no name. The role value doesn't matter: role="button", role="img", role="presentation" and role="none" all trigger it. A title attribute doesn't count as a name for this check, and aria-hidden="true" doesn't make the error go away.
A common cause is a decorative image marked up as <img role="presentation"> or <img role="none">, often with aria-hidden="true" too. Those attributes try to hide the image from assistive technologies, and HTML already has a simpler way to do that: an empty alt attribute. Remove the role and aria-hidden and write alt="". Don't keep the role next to the empty alt, because the validator rejects that combination with a different error.
An image that does something, such as acting as a button, needs a name that says what it does. Adding alt="Search" to <img role="button"> is enough to pass validation, but a real button element around the image is the better fix. It gets keyboard focus and activation without extra script, and the image's alt becomes the button's name.
Invalid example
<img src="divider.png" role="presentation" aria-hidden="true">
<img src="search.png" role="button" tabindex="0">
Valid example
<img src="divider.png" alt="">
<button type="button">
<img src="search.png" alt="Search">
</button>
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.