Clever Geek Handbook

Availability in decorative imagery or repetitive informational imagery

There are several things you need to keep in mind when you write alt. One of these things involves using blank alt=""

if the image is decorative or contains repetitive information .

But what's the difference between using:

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

Or all together?

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


source to share


2 answers


The short answer is:

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

Longer answer:

I would suggest reading the documentation for these attributes to get an idea of ​​how to use them. Each of them serves a different purpose.

alt Attribute:

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

aria-hidden:



aria-hidden, as defined by w3c, is for elements that are "not visible or perceivable to any user". This means that if a sighted user does not see it, it must also be hidden from users accessing the Accessibility API. An example use case would be if the user had to click a button to show a section - this section will be hidden for all users and will also have an "aria-hidden" attribute that will change when visibility changes. It should be noted that it is not always used this way - many people simply use it to hide from screen readers, although this 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 w3c as: "An element whose implicit native role semantics will not appear in the accessibility API." This is similar to empty alt text, although unlike the alt attribute, it can be used for other elements that should not appear in the accessibility API. In fact, it does the same thing as empty 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 question, the biggest reason not to include all three is that it is overkill. With the empty alt attribute, this element will already be ignored by screen readers. One potential drawback, including role = presentation and aria-hidden, is that both of these will remove the element from the accessibility API, which could have negative consequences for users who use the API with tools that are not readers.

+4


source


If the attribute is alt

set to an empty string

From W3C:

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

The second part about reservations is important, for example:

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

If you need to use role=presentation

In this case, the image is purely decorative, which means you should use it alt=""

in this case.

You don't need to specify a presentation role attribute for an image with an empty attribute alt

, as this is the standard implementation of standard browsers:

Allowed ARIA role attribute values:
presentation

element only img

, attribute value is alt

empty ( alt=""

), otherwise any role value.



When do you need to use aria-hidden=true

Use it when you don't want to provide API Accessibility information, but want to provide it to standard users.

As sighted people can use a screen tool (illiterate, visually impaired, ...), it should be used with caution. For a tag, img

this is only useful when it is alt

not empty.

For img

with a non-empty attribute, alt

it will assume that you are providing sufficient contextual information for people using screen readers, and the information alt

can only provide information already visible in the image, not interesting blind people or other OSD 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

If you don't want to provide information to screen readers:

  • If SEO is an issue, use non-empty alt

    witharia-hidden=true

  • Otherwise use alt=""

  • img

    s role=presentation

    must have emptyalt

  • img

    with empty alt

    have implicitrole=presentation

+2


source






More articles:


All Articles