Code review comment for lp:~adeuring/launchpad/bug-513382

Hi Abel,

OK, I'll butt-back-out of the implementation discussion ;), but just to address the points you raised:

> Hi Edwin, hi Michael,
>
> My reason to use the plain <img> tag is accessibility. See for example
> http://www.w3.org/TR/WCAG20/#text-equiv : "Non-text Content: All non-text
> content that is presented to the user has a text alternative that serves the
> equivalent purpose, except for the situations listed below. (Level A)"

Yes, but I'm thinking of this around the other way: the text content (within the span produced by the formatter) would be "3 out of 4 heat flames", we'd just hide it in an accessible way (see below).

>
> <span class="sprite person" title="whatever"></span> is perhaps an
> alternative, but the main idea of the <img> tag's alt attribute is to provide
> a precise description of what is displayed ("3 out of 4 heat flames" in this
> case, which is quite precise).
>
> The title attribute, on the other hand, should "offer advisory information
> about the element for which it is set" (http://www.w3.org/TR/1999/REC-
> html401-19991224/struct/global.html#adef-title), which is slightly different.

Yes, the title can be read by screen-readers (like JAWS), but afaics, it's not a default option. So you're right - it's not an alternative for an alt attribute on an image.

>
> Regarding accessibility, textual content that is hidden via CSS does not work
> at all as a an alternative for <img alt="...">: Screen readers and similar
> technology are supposed to present the _visible_ content in some other form,
> but not the invisible content.

That's not really true. I mean, it is if you use visibility:hidden in your css, but I've always positioned the hidden text absolutely off the screen. Like this:

<span class="sprite heat heat4" title="3 out of 4 heat flames"><em>3 out of 4 heat flames</em></span>

span.heat em {
  position: absolute;
  left: -1000px;
  }

or similar. More info on accessible invisible content at: http://www.webaim.org/techniques/css/invisiblecontent/

>
> So I think we should keep the <img> tag in this case.

I'll leave it up to you guys to decide on the code/implementation. Just let me know when it's settled and i'll run the branch again locally for the UI review.