WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: using image as label for radio and checkbox

for

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

From: yeliu
Date: Tue, Mar 22 2005 5:05AM
Subject: using image as label for radio and checkbox
No previous message | Next message →

During the website implementation, I am facing a problem with the clickable
image label for radio button.

To make it easier for the user to select radio button or checkboxes, we can
use text label by making the whole of the associated text label clickable.
That works fine for all browsers.

But we would like to just display small image as label and hide text label for
each radio button. The problem is: the image label is only clickable in
Mozilla based browsers but not in IE6, do you have any good non-javascript
solutions?

thank you,

ye

From: Chris Heilmann
Date: Tue, Mar 22 2005 5:22AM
Subject: Re: using image as label for radio and checkbox
← Previous message | No next message


>
> During the website implementation, I am facing a problem with the
> clickable
> image label for radio button.
>
> To make it easier for the user to select radio button or checkboxes, we
> can
> use text label by making the whole of the associated text label clickable.
> That works fine for all browsers.
>
> But we would like to just display small image as label and hide text label
> for
> each radio button. The problem is: the image label is only clickable in
> Mozilla based browsers but not in IE6, do you have any good non-javascript
> solutions?

Yes - don't use an image. The idea of a label is not only that you can
click it to activate the radio button, it also should resize when you
resize your font in the browser. If you replace the text label with an
image, no matter what technique, you take that away from the user. In
essence, you use a label to give the user a larger clickable area and then
you take it away again.


--
Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.org/