Re: Using an image map for long described image links [Was: Revert Request]

John Foliot writes:

> let's make this real: On January 17th, 2011 Google celebrated the 50th
> Anniversary of John F. Kennedy's inaugural speech with one of their
> famous Google Doodles

Hi John. Thanks for this example; it's really useful to have such a
concrete, practical (and widely known) case to consider.

> On that day, clicking on the Doodle would take you to the following
> URL:
> Google also used the following code to actually insert the image into their
> home page:
> 	<img alt="50th Anniversary of JFK&#39;s Inaugural Address"
> title="50th Anniversary of JFK&#39;s Inaugural Address" border=0 height=190
> src="...">
> Because the link that surrounded the image took you to the search page
> related to JFK's speech, the alt text was, for the most part correct.

I'm not so sure about that. In particular, the main thing that that
image provides in a graphical browser is the word "Google" very large,
clearly indicating that this is the Google homepage; with the alt text
Google used that sense is entirely missing.

And while it turns out the link goes to information about the "50th
Anniversary of JKF's Inaugural Address", that noun phrase doesn't convey
to the same sentiment as the image does in a graphical browser.

So maybe "Google -- today celebrating the 50th anniversary of JFK's
inaugural address" would be better alt text.

And note that that text would make sense whether the image is also a
link or not (in a graphical browser it isn't even readily apparent that
the image is a link).

> Google doesn't ... bother sharing them with non-sighted users. If they
> did, they could have provided a long description similar to the
> following:
> 	<p>Today's Google Doodle continues on the tradition of providing
> alternatives to the traditional G O O G L E logo on the home page. The
> letter G is an ASCII rendition of the G made from numerous words taken
> from <a
> href=""><abbr>JFK</
> abbr>'s Inaugural Speech</a>, arranged to form the actual letter. Some
> of the key blue words in this letter are ask, what, nation, citizens,
> greater, light, deeds and devotion, all in random order. The first O
> is composed of a similar set of words in red, with key words including
> you, can, do, globe, effort, progress, now and fruitful. The second O
> again follows this pattern, with orange key words including hope,
> anew, for, peace, help and truly. </p>
> 	<p>The traditional lower case G is here a blue likeness of
> <abbr>JFK</abbr> himself. At first it, it appears to be a charcoal or
> pencil sketch, but on closer inspection you notice that it too is in
> fact an ASCII artwork, again using key words taken from
> <abbr>JFK</abbr>'s speech. Few actual words are discernible however.
> The final 2 letters, a green L and red E are again created using key
> words: the L containing your, unite, renew, pledge, deeds, and the E
> containing country, who, tap, sides, both for and your.</p>

That description provides more information than is in the original
image. In particular it explains who the man is in place of the "g", and
which text the words come from. I didn't know what JFK looks like, nor
recognize the source of the words, so it was initially a mystery to me
what that Doodle was celebrating.

(I find this quite often with examples of longdesc. For example 'CSS
Squirrel' #35 apparently features a number of web developers dressed as
superheroes: -- but I only know
that from reading the transcript:

I've heard of most of those web developers, but I didn't know what any
of them looked like. I also hadn't heard of some of the superheroes
whose costumes feature. The script provided allows me to search for the
web developers and superheroes who were unfamiliar to me. But in a
graphical browser I can only get to the script by viewing source or
disabling CSS. The comic would be more accessible to me with
'transcript' as a visible link in the page.)

Except ... with Google Doodles I think part of the point of them is to
be a little enigmatic, to make visitors wonder what that day's Doodle is
celebrating, to intrigue them into finding out what it's about.

And there already is a way of doing that: for mouse users[*1] the title
text explains what the occasion is, and clicking searches the web for an
appropriate term that provides more information. Given that Google is a
search engine it seems entirely reasonable that rather than providing
information directly about a topic they instead give search results to
where you can find it out elsewhere.

  [*1] Obviously there needs to be a way of providing title="..."
  content to non-mouse users.

So in some ways the equivalent non-graphical experience could be to
provide similar intrigue rather than to spell out precisely what the
image contains. Sighted users generally aren't going to read every
single word that's been used to construct the logo; they're going to get
an overall impression of the kind of words used.

Also, some words in the image are bolder and darker. At first glance
that may not be noticed or deemed significant (since the words also vary
in other ways, such as size and orientation), but closer examination
reveals these from left to right are "ask what you can do for your
country" -- ah that's a phrase I've heard of, though I'm ashamed to say
I didn't know its source.

So maybe better alt text, to provide as close as possible experience to
that of viewing the page with images, would be:

  Google -- marking the anniversary of "ask what you can do for your
  country" ...

That has a similar balance of explanation and intrigue, and anybody
intrigued can discover that it's a link and follow it to find out more.

> If this prose was put on a separate web page (JFK_doodle.html) how
> would you link it to the doodle? 

If separate prose like you suggested above were deemed useful then it
would also be useful to sighted users. So I think a separate small
visible link would be appropriate, maybe labelled 'What's this?' or
'More info'. That would make that information available to all users who
could benefit from it.

> 1) You can't just simply make a "normal link" as you suggest, as the
> linking function is already reserved for the search result page. This
> is not some "made-up" use case, this is a real world, actual
> demonstration of the need, on arguably one of the most visited web
> pages on the internet.

But it could be a small link next to the image. It's common on the web
for things to be explained by other things that are next to them. The
'What's this?' link could even be a <figcaption> and both it and the
image put in a <figure>, so that they are structurally associated.



Received on Thursday, 2 February 2012 12:48:28 UTC