WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

Number of posts in this thread: 3 (In chronological order)

From: Shrirang Sahasrabudhe
Date: Tue, Sep 26 2006 10:40PM
Subject: how to use image as a label for a form field
No previous message | Next message →

Hi,
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>
When I am out of forms mode The alt for the image is getting associated with the input element
But when I enter the forms mode and tab to the checkbox it is not getting associated.
How can I rectify this?
I am using jaws5
Thanks in advance.
Shri



***********************************************************
If you try, you risk failure. If you don't, you ensure it....I try.
Shrirang Sahasrabudhe,
Pune, India.
Phone: 0091-020-4227558.

---------------------------------
Yahoo! Messenger with Voice. Make PC-to-Phone Calls to the US (and 30+ countries) for 2

From: Jukka K. Korpela
Date: Tue, Sep 26 2006 11:10PM
Subject: Re: how to use image as a label for a form field
← Previous message | Next message →

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/





From: Tim Beadle
Date: Wed, Sep 27 2006 1:50AM
Subject: Re: how to use image as a label for a form field
← Previous message | No next message

On 27/09/06, Jukka K. Korpela < = EMAIL ADDRESS REMOVED = > wrote:
> 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?

The icon might work better for certain people (cognitive disabilities,
time-slicing IT workers etc), so I don't think it's redundant. If it's
complementing the text, though, I would add it via CSS instead of as
an <img> element.

label#labelPDF {
padding-left: WIDTH_OF_IMAGE_PLUS_A_FEW_PX;
background: transparent 0 50% no-repeat url(abc.gif);
}

Tim