[mweberxyz]

Or potentially aria-role="presentation"

aria-hidden="true" will make the element completely invisible to the screen reader software, whereas setting aria-role will tell the screen reader "hey there is something here but it's job is purely aesthetic", and then the screen reader can determine what it wants to do with it.

[jscholes]

> Or potentially aria-role="presentation"

There is no such attribute as "aria-role", only the single word "role".

> aria-hidden="true" will make the element completely invisible to the screen reader software, whereas setting role will tell the screen reader "hey there is something here but it's job is purely aesthetic", and then the screen reader can determine what it wants to do with it.

This is accurate, but you should also ask yourself about design intent if you have the knowledge to do so (or can consult with someone who does). If you have decided that something should be hidden from a screen reader user, and have verified that your intentions are correct, aria-hidden is the way to go. Many accessibility bugs are caused by people using something like role="presentation" because they wanted to leave it up to the browser and/or screen reader to make a decision. The problem is, those software decisions are often wrong and inconsistent, leading to support requests and hard-to-track-down bugs.

Note: the above applies across the board, not just to images. The correct way to mark an image as decorative is via alt="" on the img, and you should be careful applying aria-hidden to anything as it can be extremely destructive. No ARIA is better than bad ARIA.

[chrismorgan]

I wouldn’t describe role=presentation like that. Rather, it says “ignore what you know about what this element should be, pretend it doesn’t exist and only consider its children”. Technically, that is “replace this node in the accessibility tree with its children”. And then in the case of <img> specifically, it doesn’t have any children, so the effect is removing the entire thing from the accessibility tree, same as an empty alt attribute or aria-hidden=true.

Specifically I’m finding fault with “the screen reader can determine what it wants to do with it”. This isn’t true because the screen reader will never see the image, because the browser removed it from the accessibility tree.

But yeah, https://www.w3.org/TR/wai-aria-practices/#presentation_role lists this as the first of three common uses of role=presentation:

> Hiding a decorative image; it is equivalent to giving the image null alt text.

But still I echo how jscholes ends, and how the WAI-ARIA Authoring Practices document starts: No ARIA is better than Bad ARIA. Be careful what you do if you’re straying from the beaten track, and test things out. In view of this, I will confirm that I have not tested anything that I have said in this comment in order to verify it, though I believe that my mental model of how the accessibility tree and the mentioned details works is accurate.