WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: how to use image as a label for a form field

for

From: Jukka K. Korpela
Date: Sep 26, 2006 11:10PM

On Tue, 26 Sep 2006, Shrirang Sahasrabudhe wrote:

> I wish to use an image as a label for a form field..
> Currently I am writing a code like below
> <input type="checkbox" id="chkPDF" name="chkPDF" checked="checked" />
> <label for="chkPDF" id="labelPDF">
> <img src="abc.gif" alt="Adobe Acrobat" title="Adobe Acrobat" width="16"
> height="16" />
> </label>

I don't know whether my suggestion would solve your problem, but I am sure
it would solve other problems, especially the problem that people may not
understand the abc.gif image (presumably the common icon for PDF files)
even though they see it. People may or may not mouse over an image they
don't understand; authors should not expect that they do. My suggestion is
to use the image in addition to text, not instead of it.

Besides, I very much doubt whether the image hete really means Adobe
Acrobat, the (expensive) software product from Adobe. Rather, it means a
PDF file, so that's what I would talk about. I would not expand the
abbreviation, even in a manner hidden in markup, since the abbreviation is
much more widely known and more informative than its expansion.

So this is what I would use (except that I would not play the XHTML game):

<input type="checkbox" id="chkPDF" name="chkPDF" checked="checked" />
<label for="chkPDF" id="labelPDF">
<img src="abc.gif" alt="" width="16" height="16" /> PDF format
</label>

If abc.gif contains the letters "PDF" in a styled manner, you might
think that the image is sufficient and that using the text "PDF format"
would mean redundant text. On the other hand, isn't the image redundant
then?

--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/