9

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="…" />
unor
  • 92,415
  • 26
  • 211
  • 360
Raúl Martín
  • 4,471
  • 3
  • 23
  • 42

2 Answers2

12

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.

Skerrvy
  • 902
  • 8
  • 17
  • Thanks, for this great answer, I do know the definition of the attribute, but I see very often `alt="" aria-hidden="true"` in code. As well aria-hidden="true" role="presentation" in elements that are not images even in another answer in StackOverflow https://stackoverflow.com/questions/40409841/do-tracking-pixels-need-to-have-alt-attributes-for-accessibility-wcag-2-0/43146415#43146415 . – Raúl Martín Jun 21 '17 at 15:02
  • For instance, Youtube use `alt=""` or `alt="" aria-hidden="true"` in different elements. And I am confusing why they are doing such a thing. – Raúl Martín Jun 21 '17 at 15:02
  • if you were to have a button that will hide and show a decorative image on your site, I would recommend using `alt="" aria-hidden="true"` and when the button is pressed, changing the `aria-hidden` value to `"false"`. empty alt text is meant for images, while `aria-hidden` and the presentation role are meant for all elements. They can be used on images, but they are intended to serve a different purpose than empty alt text. – Skerrvy Jun 21 '17 at 15:27
7

When the alt attribute is set to the empty string

From the W3C:

The image is either decorative or supplemental to the rest of the content, redundant with some other information in the document.

The second part about redundancy is important, for instance:

<h1><img alt="" src="logo.gif" />My company name</h1>

When you have to use the role=presentation

This is the case when the image is purely decorative which means that you must use alt="" in this case.

You should not have to specify the presentation role attribute for an image with an empty alt attribute as it's the default implementation of the standard browsers:

Allowed ARIA role attribute values:
presentation role only, for an img element whose alt attribute's value is empty (alt=""), otherwise Any role value.

When you have to use aria-hidden=true

Use it when you do not want to provide an information to the Accessibility API, but want to give it to standard users.

As sighted people may use a screenreader (illiterate, low-vision, ...) it's must be used with caution. For an img tag, it's only useful when the alt is not empty.

For img with a non empty alt attribute, it will assume that you provide sufficient contextual information for people using screenreaders, and the alt information may only provide information already visible on the image and not interesting blind people or other screenreader users.

<h1>Come to visit George</h1>
<img alt="Map to reach George" src="map.gif" aria-hidden="true" />
Take the highway A13 direction London.
When you reach London follow A2 highway in direction Liverpool.

I think this is more useful for SEO without introducing redundancy.

TL;DR

When you do not want to provide information to screen readers:

  • If SEO is a concern, use a non empty alt with aria-hidden=true
  • Otherwise use alt=""
  • img with role=presentation should have an empty alt
  • img with an empty alt have implicit role=presentation
unor
  • 92,415
  • 26
  • 211
  • 360
Adam
  • 17,838
  • 32
  • 54