WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: When "Alt" is not the semantically-correct representation of an image

for

From: glen walker
Date: Jul 26, 2018 6:29PM

I'm guessing you're not talking about images that represent text, because
if you went through WCAG, you would have hit 1.1.1 as your first encounter,
then 1.4.5 a little bit later. However, your "accenture logo" example
seems to be along those lines. In that case, what you probably *don't*
want is

<p>How <img src="logo.jpg" alt="accenture"> reduces risks</p>

because as you walk the DOM with AT, you'll hear "How graphic accenture
reduces risks". The word "graphic" is confusing in this case. It sounds
like you want the image to be treated as text. If the role="text" had been
implemented (I think it only exists in webkit), then something like this
would have worked:

<p>How <img src="logo.jpg" alt="accenture" role="text"> reduces risks</p>

You'd hear, "How accenture reduces risks" without the "graphic" because you
would have changed the role of the image. But role="text" is not a
documented role (yet?).

So, if you want the image displayed for sighted users, but hidden from AT
users, *and* you need substitute text for the image, you might need
something like this:

<p>How <img src="logo.jpg" alt=""> <span
class="sr-only">accenture</span> reduces risks</p>

So the image itself would be hidden from AT because of the empty alt text
but then you'd have visually hidden text for the AT to read instead of the
image. The visually hidden <span> would essentially be your "actual text"
in PDF parlance. But there's nothing built in to HTML to give you this.
You'd have to code it manually with separate elements.

This works well enough with NVDA and JAWS but will have a slight problem
with VoiceOver on iOS (and possibly Mac, but I don't have a Mac to test
it). VoiceOver will stop at each element so as you swipe right it'll stop
on "How", then "accenture", then "reduces risk". That's not ideal. You
can fix this with the aforementioned (not spec'ed) role="text".

<p role="text">How <img src="logo.jpg" alt=""> <span
class="sr-only">accenture</span> reduces risks</p>

This treats the entire <p> and its children as if it were one element so
VoiceOver reads the whole thing. That's kind of a hack workaround for
VoiceOver. NVDA and JAWS will probably ignore role="text" but you'd want
to test it.

But I guess the short answer (if you skip my long preamble above) to your
original question is that there isn't an "actual text" type of attribute or
role for HTML.