WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Duff Johnson
Date: Jul 27, 2018 7:35AM

Hi Glen,

> 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.

I do not believe these two clauses address my use-case.

1.1.1 doesn't really reference my case, in my view, and (as you point out) even if it did there's no means in HTML to achieve it.

1.4.5 is pertinent, but it tells me that I must avoid the problem, it offers no clues on addressing it when it occurs.

> 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.

Bingo.

> 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?).

Very helpful!!! I was not aware of role = text.. but as you say, it doesn't appear to be a documented role at this point. There's just Steve's excellent suggestion for it from… back in 2011!

https://lists.w3.org/Archives/Public/wai-xtech/2011Apr/0007.html <https://lists.w3.org/Archives/Public/wai-xtech/2011Apr/0007.html>
> 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>

Actually, in principle I would prefer the image to be available to all users (since images can legitimately possess both "alt" and "ActualText"). AT would then use ActualText by default when it exists, but the image (and its alt) would remain available to a query.

> 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.

So I see...

> 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.

Yeah, kind of a hack… but very interesting; thank you for the detailed explanation!

> 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.

Bummer. This is worth fixing, not least because it seems one cannot really achieve (useful) conformance with WCAG 2.1, 1.1.1 without it.

Duff.