Re: img alt text, links and titles

Here is the technique I use:

After building the page visually, I print a copy. Then I open the page 
in my editor and in Lynx.

I then read through the printed copy of the page, asking myself as I 
come across images, "What information is presented here?"

Then I write alt text for the image and immediately view it in Lynx. 
What I am looking for is proper flow.

I try to position images in the code so that the alt text falls between 
paragraphs. If the meaning of the image seems out of place bewteen the 
text paragraphs, I add something like "Note:" or "Sidebar:" to my alt text.

One thing I like to do (but which won't work for logos that link to 
other sites), is to make the image a link to a description, or rather, 
to more extensive alternative content.

OK, example time (are we all confused yet?):

--------
<p>Let's say I'm talking about, oh, the Sheffield City Council. So I 
mention some of the things they're busy doing, how usefully they're 
spending the taxpayers' money, etc. Then suddenly we come to a photo of 
the council. Now this photo doesn't really flow with the text. So to 
make it fit, I do this:</p>

<p class="ImgLeft"><a href="scc-desc.html" title="Image Description.">
<img src="scc.jpg" height="120" width="80" longdesc="scc-desc.html"
alt="Sidebar: There are eight members of the SCC..." /></a></p>

<p>And then I continue with my discussion in the next paragraph. (Note 
that the "ImgLeft" class floats images to the left and wraps the text 
around them. I don't really care for this because the class name is 
strictly visual, but I can't think of a way around it. Maybe I should 
say "SidebarLeft" or "NoteLeft" something like that instead.)</p>
--------

Now in a visual browser, I see the two paragraphs wrapped around the 
image of the SCC. The image is a link to a description of the members of 
the SCC (maybe just to the normal page dealing with the members -- do I 
really need to describe them?). Mousing over the image in IE brings up 
the alt text "Sidebar: There are eight members of the SCC..." And the 
hand indicates that it is a link. Reasonably intelligent users will 
infer, I think, that clicking on the image will bring the user to a page 
having something to do with the members of the SCC.

Meanwhile, users of Lynx see this:

--------
Let's say I'm talking about, oh, the Sheffield City Council. So I 
mention some of the things they're busy doing, how usefully they're 
spending the taxpayers' money, etc. Then suddenly we come to a photo of 
the council. Now this photo doesn't really flow with the text. So to 
make it fit, I do this:

Sidebar: There are eight members of the SCC...

And then I continue with my discussion in the next paragraph. (Note that 
the "ImgLeft" class floats images to the left and wraps the text around 
them. I don't really care for this because the class name is strictly 
visual, but I can't think of a way around it. Maybe I should say 
"SidebarLeft" or something like that instead.)
---------

And the "Sidebar" line is a link.

If the text flows in Lynx, then I know that it flows in most (if not 
all) screen readers/self-voicing browsers/etc.

Anyway, that's my technique. I'm sorry if this explanation seems 
abstract. It's not a difficult concept, but it's not easy to describe. 
If anyone wants a live example, email me and I'll send you the uri of a 
page under development that uses this technique to good effect, I think.

Charles F. Munat
Seattle, Washington

Received on Thursday, 17 January 2002 21:02:32 UTC