accessibility in decorative images or repetitive information images

Question

When you write an alt you should have a few things in mind. One of this thing suggests using an empty alt="" when the image content is decorative or contain a repetitive information.

But what the difference between using:

<img alt=""
<img aria-hidden="true"
<img role="presentation"

Or all together?

<img alt="" aria-hidden="true" role="presentation" src="…" />

Answer 1

Short answer:

They all have different purposes. The image alt attribute is only valid on image elements. aria-hidden is intended for elements that are hidden to all users and role=presentation is sort of like an empty alt attribute for all elements - not just images (but has less support than the empty image alt).

Longer answer:

I would suggest reading into the documentation of these attributes to get an idea of how they should be used. They each serve a different purpose.

alt Attribute:

image alt text is meant to convey a textual alternative to non-text content - if the image has no alt text, the screen readers will ignore it assuming it is purely decorational. This feature is widely - if not universally supported.

aria-hidden:

aria-hidden, as defined in the w3c, is intended for elements that "are not visible or perceivable to any user". This means if a sighted user can't see it, it should also be hidden from users accessing the accessibility API. An example use case would be if the user had to click a button to get a section to appear - that section would be hidden to all users and would also have the 'aria-hidden' attribute toggled when its visibility is changed. It should be noted that it is not always used this way - many people just use it to hide from screen readers, although that is not the intended purpose as defined in the W3C. Source: https://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden

role=presentation:

role=presentation is defined in the w3c as: "An element whose implicit native role semantics will not be mapped to the accessibility API". This is similar to empty alt text, although unlike the alt attribute, it can be used on various other elements that shouldn't be mapped to the accessibility API. In effect, it does the same thing as the empty alt text, but it is not as widely supported as an empty alt attribute (sourece: https://www.w3.org/WAI/tutorials/images/decorative/)

w3c definition: https://www.w3.org/TR/wai-aria/roles#presentation

Why not include all 3?

To answer your last point, the biggest reason to not include all three is that it is complete overkill. With an empty alt attribute, the element will already be ignored by screen readers. One potential downside with including role=presentation and aria-hidden is that both of these will remove the element from the accessibility API, which could have negative effects on users that use the API with tools that are not screen readers.