WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: quick question on alt text

for

From: glen walker
Date: Dec 6, 2019 1:11PM

Since the image is not interactive (not contained in a link or button), as
Jared said, it can be considered decorative.

If you want to save three characters when typing, you can have "alt" by
itself rather than having alt="". The following two examples are treated
the same.

<img src="foo.jpg" alt>
<img src="foo.jpg" alt="">

See the first example in
https://www.w3.org/TR/html53/semantics-embedded-content.html#ref-for-elementdef-img%E2%91%A8%E2%91%A6
It mentions alt="" or alt by itself.

If the image were in a link, my preference is to hide the image and put the
label on the link itself. For example, the following will say "important
stuff, graphic, link".

<a href="...">
<img src="foo.jpg" alt="important stuff">
</a>

The user most likely doesn't care that you implemented a link as an image
and just wants to know what the link is for. It's a minor change but I
usually code it as:

<a href="..." aria-label ="important stuff" >
<img src="foo.jpg" alt>
</a>

Now when you navigate to the link, you just hear "important stuff, link".
You don't hear "graphic". It's a minor difference but I like the
"cleanness" of just hearing that it's a link and ignoring that it happens
to be implemented as an image.

However, one could argue that a low vision user might be able to see some
kind of blob where the link is and guess that it's an image and try to
navigate by images, in which case my example above would skip that image.
So it's a trade off. Either example satisfies WCAG.

The W3C has a decision tree on deciding if an image is decorative. See
https://www.w3.org/WAI/tutorials/images/decision-tree/
There's also further info on decorative, informative, and other types of
images at https://www.w3.org/WAI/tutorials/images/